ueberdosis/tiptap

Html attributes not added to image when resize enabled

Open

#7,240 opened on 2025年11月18日

GitHub で見る
 (0 comments) (0 reactions) (1 assignee)TypeScript (23,454 stars) (1,979 forks)batch import
area: editorgood first issuestatus: triagetype: upstream

説明

Affected Packages

extension-image

Version(s)

3.10.7

Bug Description

Hi all, I am trying to add html attributes to an image I want to enable resize for.

The package versions are the following: react: 19.2.0 @tiptap/extension-image: 3.10.7 @tiptap/markdown: 3.10.7 @tiptap/react: 3.10.7 @tiptap/starter-kit: 3.10.7

Here is the code I use:

import Image from '@tiptap/extension-image'
import { Markdown } from '@tiptap/markdown'
import { EditorContent, useEditor } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'

const MyEditor = () => {
  const imgContent = '![Image](https://placehold.co/600x400)'
  const editor = useEditor(
    {
      extensions: [
        Markdown,
        StarterKit.configure({
          codeBlock: false,
          code: false,
          horizontalRule: false,
          link: false,
          heading: {
            levels: [1, 2, 3]
          }
        }),
        Image.configure({
          inline: false,
          HTMLAttributes: {
            class: 'my-classname'
          },
          resize: {
            enabled: true,
            minWidth: 50,
            minHeight: 50,
            alwaysPreserveAspectRatio: true
          }
        })
      ],
      content: imgContent,
      editable: true,
      contentType: 'markdown'
    },
    [imgContent]
  )
  return <EditorContent editor={editor} />
}

The class attribute that I set to my-classname is not added on the img tag in the html

Browser Used

Chrome

Code Example URL

No response

Expected Behavior

The class attribute should be added to the img tag in the html

Additional Context (Optional)

No response

Dependency Updates

  • Yes, I've updated all my dependencies.

コントリビューターガイド