Bug issue with resizing image with option "inline: true"

[semanticist21]

Firstly, great thanks for contributors. I'm using the editor with example here codesandbox.

"https://codesandbox.io/p/devbox/mui-tiptap-demo-forked-g6njhk?file=%2Fsrc%2FEditorMenuControls.tsx&workspaceId=383814f0-5631-4226-8011-65cb927d4daf"

Describe the bug

I had to edit ResizableImage extension options in "useExtensions.ts" to enable image paste when writing. I don't know why but when directly copying content from page, image was not copy-pasted into the editor.

After I enabled options, resizing feature by dragging is not working properly.

To Reproduce

https://codesandbox.io/p/devbox/mui-tiptap-demo-forked-g6njhk?file=%2Fsrc%2FuseExtensions.ts%3A166%2C15-166%2C20&workspaceId=383814f0-5631-4226-8011-65cb927d4daf

enable inline true.

Expected behavior

Image resize by dragging is not possible.

Screenshots

System (please complete the following information)

• mui-tiptap version: 1.8.6
• tiptap version: 2.0.4
• Browser: Chrome
• Node version: 21.7.1
• OS: Mac
• Copy-paste your extensions array used for the editor:

[
      // We incorporate all of the functionality that's part of
      // https://tiptap.dev/api/extensions/starter-kit, plus a few additional
      // extensions, including mui-tiptap's

      // Note that the Table extension must come before other nodes that also have "tab"
      // shortcut keys so that when using the tab key within a table on a node that also
      // responds to that shortcut, it respects that inner node with higher precedence
      // than the Table. For instance, if you want to indent or dedent a list item
      // inside a table, you should be able to do that by pressing tab. Tab should only
      // move between table cells if not within such a nested node. See comment here for
      // notes on extension ordering
      // https://github.com/ueberdosis/tiptap/issues/1547#issuecomment-890848888, and
      // note in prosemirror-tables on the need to have these plugins be lower
      // precedence
      // https://github.com/ueberdosis/prosemirror-tables/blob/1a0428af3ca891d7db648ce3f08a2c74d47dced7/src/index.js#L26-L30
      TableImproved.configure({
        resizable: true,
      }),
      TableRow,
      TableHeader,
      TableCell,

      BulletList,
      CodeBlock,
      Document,
      HardBreak,
      ListItem,
      OrderedList,
      Paragraph,
      CustomSubscript,
      CustomSuperscript,
      Text,

      // Blockquote must come after Bold, since we want the "Cmd+B" shortcut to
      // have lower precedence than the Blockquote "Cmd+Shift+B" shortcut.
      // Otherwise using "Cmd+Shift+B" will mistakenly toggle the bold mark.
      // (See https://github.com/ueberdosis/tiptap/issues/4005,
      // https://github.com/ueberdosis/tiptap/issues/4006)
      Bold,
      Blockquote,

      Code,
      Italic,
      Underline,
      Strike,
      CustomLinkExtension.configure({
        // autolink is generally useful for changing text into links if they
        // appear to be URLs (like someone types in literally "example.com"),
        // though it comes with the caveat that if you then *remove* the link
        // from the text, and then add a space or newline directly after the
        // text, autolink will turn the text back into a link again. Not ideal,
        // but probably still overall worth having autolink enabled, and that's
        // how a lot of other tools behave as well.
        autolink: true,
        linkOnPaste: true,
        openOnClick: false,
      }),
      LinkBubbleMenuHandler,

      // Extensions
      Gapcursor,
      HeadingWithAnchor,
      TextAlign.configure({
        types: ["heading", "paragraph", "image"],
      }),
      TextStyle,
      Color,
      FontFamily,
      FontSize,
      Highlight.configure({ multicolor: true }),
      HorizontalRule,

      ResizableImage.configure({
        // allowBase64: false,
        inline: true,
      }),
      // When images are dragged, we want to show the "drop cursor" for where they'll
      // land
      Dropcursor,

      TaskList,
      TaskItem.configure({
        nested: true,
      }),

      Mention.configure({
        suggestion: mentionSuggestionOptions,
      }),

      Placeholder.configure({
        placeholder,
      }),

      // We use the regular `History` (undo/redo) extension when not using
      // collaborative editing
      History,
    ]

[vitality82]

@semanticist21 I want to reproduce the bug you found but the codesandbox link is "Devbox not found".

Also, I'm not familiar with the expected behaviour here, but based on the title and the expected behaviour you described:

Image resize by dragging is not possible.

Do you expect the resize by dragging to work or not to work, when inline: true option is present?

[semanticist21]

@semanticist21 I want to reproduce the bug you found but the codesandbox link is "Devbox not found".

Also, I'm not familiar with the expected behaviour here, but based on the title and the expected behaviour you described:

Image resize by dragging is not possible.

Do you expect the resize by dragging to work or not to work, when inline: true option is present?

Sorry. It is other link. https://codesandbox.io/p/sandbox/mui-tiptap-demo-3zl2l6

you can reproduce the issue by giving option { inline: true } to ResizableImage extension. I want to resize dragging work normally(enabled to drag) even when "inline" is true.

And actually, I found what the problem is. When inline option is true, "selected" boolean works differntly.

ResizableImageResizer in ResizableImageComponent.tsx is hidden even with normal dragging behaviour, "selected" turns false whenver I start to drag the image. It happenes when only inline option is true.

I had to create my own custom selected boolean to work properly. I am not sure exactly why this is happening.

[vitality82]

Glad you found the bug, I'd would take me much longer considering I haven't had a chance to dive in all the details. I'm curious will you consider creating a new release version including the fix above, as well as some of the PRs?

[semanticist21]

It is a temporay solution but If that is ok, I can PR after some tests by myself!