hunghg255 / reactjs-tiptap-editor

A modern WYSIWYG rich text editor based on tiptap and shadcn ui for Reactjs
https://reactjs-tiptap-editor.vercel.app/
MIT License
207 stars 38 forks source link

[Bug] Inline image is not rederer #100

Closed kurian86 closed 2 weeks ago

kurian86 commented 2 weeks ago

When an image is added in inline mode, a span tag is used for its representation. However, when the content is reloaded in the editor, these images are not displayed, resulting in the loss of content.

Expected Behavior: The image should load along with the rest of the content. image

Actual Behavior: The image disappears. image

Steps to Reproduce:

  1. Set CONTENT VALUE as
    <p>
    <div style=\"text-align: center;\" class=\"image\">
    <img height=\"auto\" src=\"data:image/png;base64,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\" align=\"center\" inline=\"false\">
    </div>
    </p>
    <p style=\"text-align: right\">Inline image
    <span style=\"text-align: center;\" class=\"image\">
    <img height=\"auto\" src=\"data:image/png;base64,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\" align=\"center\" inline=\"true\">
    </span>
    </p>
    <p>
    <div style=\"text-align: center;\" class=\"image\">
    <img height=\"auto\" src=\"data:image/png;base64,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\" align=\"center\" inline=\"false\">
    </div>
    </p>
  2. Observe that the image does not appear.
hunghg255 commented 2 weeks ago

@kurian86 thank for your feedback, I will check later