search

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
203 stars 37 forks source link

[Bug] Empty paragraphs are added around the image element #102

Open kurian86 opened 2 weeks ago

kurian86 commented 2 weeks ago

When an image element is present, empty paragraphs are added around it when loading the content in the editor.

Expected Behavior: These empty paragraphs should not be added.

<p>Simple example</p>
<p><div style=\"text-align: center;\" class=\"image\"><img height=\"auto\" src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAGCAYAAAAPDoR2AAAAZklEQVR4XkXNSRKAIAwEQD6vyBJx4ScKKPi3GBKrPExx6MygjD4RXMbVX7hR9rlSGsbQUE2E3gouHeFm7BE0iUGaH8KHljD4ghtIM/L0I2h0+v/ts1DppeY4HKjHPp0xuMIHq6+cFyEtdlXiYF1iAAAAAElFTkSuQmCC\" align=\"center\" inline=\"false\"></div></p>
<p>With two lines</p>

Actual Behavior: Empty paragraphs are added around the image element.

<p>Simple example</p>
<p></p>
<p><div style=\"text-align: center;\" class=\"image\"><img height=\"auto\" src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAGCAYAAAAPDoR2AAAAZklEQVR4XkXNSRKAIAwEQD6vyBJx4ScKKPi3GBKrPExx6MygjD4RXMbVX7hR9rlSGsbQUE2E3gouHeFm7BE0iUGaH8KHljD4ghtIM/L0I2h0+v/ts1DppeY4HKjHPp0xuMIHq6+cFyEtdlXiYF1iAAAAAElFTkSuQmCC\" align=\"center\" inline=\"false\"></div></p>
<p></p>
<p>With two lines</p>

If you save this content and load it again, additional empty paragraphs will be added.

<p>Simple example</p>
<p></p>
<p></p>
<p><div style=\"text-align: center;\" class=\"image\"><img height=\"auto\" src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAGCAYAAAAPDoR2AAAAZklEQVR4XkXNSRKAIAwEQD6vyBJx4ScKKPi3GBKrPExx6MygjD4RXMbVX7hR9rlSGsbQUE2E3gouHeFm7BE0iUGaH8KHljD4ghtIM/L0I2h0+v/ts1DppeY4HKjHPp0xuMIHq6+cFyEtdlXiYF1iAAAAAElFTkSuQmCC\" align=\"center\" inline=\"false\"></div></p>
<p></p>
<p></p>
<p>With two lines</p>

Steps to Reproduce:

  1. Set CONTENT VALUE as 
    <p>Simple example</p>
<p><div style=\"text-align: center;\" class=\"image\"><img height=\"auto\" src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAGCAYAAAAPDoR2AAAAZklEQVR4XkXNSRKAIAwEQD6vyBJx4ScKKPi3GBKrPExx6MygjD4RXMbVX7hR9rlSGsbQUE2E3gouHeFm7BE0iUGaH8KHljD4ghtIM/L0I2h0+v/ts1DppeY4HKjHPp0xuMIHq6+cFyEtdlXiYF1iAAAAAElFTkSuQmCC\" align=\"center\" inline=\"false\"></div></p>
<p>With two lines</p>
  2. Observe that empty paragraphs are added