[Documentation]: Explain how to add image width & height attribute customly

[ashrafchowdury]

What’s the URL to the page you’re sending feedback for?

https://tiptap.dev/api/nodes/image

What part of the documentation needs improvement?

The documentation for the Image element does not explain how to add custom width and height attributes. This makes it difficult to control the size of images in the editor.

What is helpful about that part?

The helpful part of the documentation is that it provides a clear example of how to add an image to the editor. However, it would be more helpful if it also explained how to add custom width and height attributes.

What is hard to understand, missing or misleading?

The hard-to-understand, missing, or misleading part of the documentation is the lack of explanation for how to add custom width and height attributes. This makes it difficult to control the size of images in the editor.

Anything to add? (optional)

No response

[ashrafchowdury]

I can fix this issue by adding how to add custom width and height on the documentation, would please assign me to fix this issue?

[rezaffm]

this should do it (just copied and pasted from my extension):

    addAttributes() {
        return {
            src: {
                default: null
            },
            width: {
              default: null
            },
            height: {
              default: null
            },
            alt: {
                default: null
            },
            title: {
                default: null
            },
            class: {
              default: null
            },
            srcset: {
              default: null
            },
            sizes: {
              default: null
            },
            loading: {
              default: null
            }
        };
    },

[ashrafchowdury]

@rezaffm I thinking to add this to the documentation Image section so that people can understand easily how to add external attributes.

[rezaffm]

Go for it if it helped you I am happy

[bernardoenock]

This has not been added. I hope to help, in case anyone is already looking for something like this.

I made a "workaround" to work in Typescript:

https://tiptap.dev/docs/editor/guide/custom-extensions#attributes

type ImageAttributes = {
  src: string
  alt?: string
  title?: string
  width?: string | undefined
  height?: string | undefined
  style?: string
}

export const ExtendedImage = Image.extend({
  addAttributes() {
    return {
      src: {
        default: '',
      },
      alt: {
        default: undefined,
      },
      title: {
        default: undefined,
      },
      width: {
        default: undefined,
      },
      height: {
        default: undefined,
      },
      style: {
        default: undefined,
      },
    }
  }
})

  const addImage = () => {
    const url = window.prompt('URL')
    const width = window.prompt('Width')
    const height = window.prompt('Height')
    const position = window.prompt('Position (left, right, center)')

    if (url && editor) {
      const imageAttributes: ImageAttributes = {
        src: url,
        alt: '', 
        title: '', 
        width: width || undefined, 
        height: height || undefined, 
        style: `float: ${position || 'none'}`,
      }
      editor.chain().focus().setImage(imageAttributes).run()
  
    }
  }

Thanks @rezaffm for unlocking me! :)

[anthfgreco]

This has not been added. I hope to help, in case anyone is already looking for something like this.

I made a "workaround" to work in Typescript:

https://tiptap.dev/docs/editor/guide/custom-extensions#attributes

type ImageAttributes = {
  src: string
  alt?: string
  title?: string
  width?: string | undefined
  height?: string | undefined
  style?: string
}

export const ExtendedImage = Image.extend({
  addAttributes() {
    return {
      src: {
        default: '',
      },
      alt: {
        default: undefined,
      },
      title: {
        default: undefined,
      },
      width: {
        default: undefined,
      },
      height: {
        default: undefined,
      },
      style: {
        default: undefined,
      },
    }
  }
})

  const addImage = () => {
    const url = window.prompt('URL')
    const width = window.prompt('Width')
    const height = window.prompt('Height')
    const position = window.prompt('Position (left, right, center)')

    if (url && editor) {
      const imageAttributes: ImageAttributes = {
        src: url,
        alt: '', 
        title: '', 
        width: width || undefined, 
        height: height || undefined, 
        style: `float: ${position || 'none'}`,
      }
      editor.chain().focus().setImage(imageAttributes).run()
  
    }
  }

Thanks @rezaffm for unlocking me! :)

Perfect solution, thank you!