When inline, output HTML is visually different from displayed HTML

[mason-os]

Hey there, first off thanks for this extension-- it was trivial to setup and has worked pretty much perfectly! When playing around with the editor I noticed that the output HTML and editor content differ slightly.

When an image is dragged to the end of a line, it appears on the next line within the editor, but taking the output of editor.getHTML() and then setting that output as the content of the tiptap editor results in the (expected) display of the image being on the same line as the text.

Specifically, with ImageResize.configure({ inline: true}):

1. The editor, after dragging/resizing, displays the image as on the line after text when dragging to the end of the line/between text.
2. When the content is consumed via editor.getHTML() and then displayed in a new editor, the image is correctly inline (doesn't have the wrapper/mark/decoration elements).

To fix this, I added the following CSS:

.tiptap {
  div:has(> div > img) {
    display: "inline-flex !important";
    > div {
      display: "inline";
    }
}

This seems to produce consistent visuals between the editor and its output.

I attempted to reproduce on CodeSandbox, but I was unable to get this extension working for some due to an error "Image.extend is not a function" which I wasn't able to mitigate (I don't run into the same error locally). If something stands out to you as the cause, I could update this to repro the display issue: https://codesandbox.io/p/sandbox/react-typescript-tiptap-inline-image-resize-5xsn3c

[Im-younique]

Hello, @mason-os

Thank you for your detail issue, I checked that issue and am looking for a solution

This was an issue that occurred because I overlooked the addition of the inline option during the development process and could not update it. Therefore, I plan to update and distribute the code to resolve this issue. I will let you know by mentioning it again when it is updated.

Thank you again for leaving an issue! I will help you resolve it quickly.