When filling in a piece of content, repeatedly switching buttons will add multiple empty p tags

[leevane]

When filling in a piece of content, repeatedly switching buttons will add multiple empty p tags
The following 2 pictures：

After switching repeatedly：

[benwinding]

Hi @leevane
What exactly do you mean by "switching buttons"?
Can you please record a screen capture of the issue? 🙏

[leevane]

2023-12-17.20-59-05.mp4

introduce：Entering a few paragraphs of text in the editor and repeatedly clicking the "Show HTML source" button will result in multiple duplicate empty p tags

[benwinding]

Thank you @leevane 🙏

I can't seem to reproduce this using the latest version quill-html-edit-button@2.2.13

Kapture.2023-12-18.at.09.40.07.mp4

Can you also please give me the:

• quill-html-edit-button version
• The options you are passing it
• How you're using it:
  • Via <script/> tag?
  • Via vue/angular?
  • Via JS import?
• Other plugins that you're using (they might be conflicting)

This information will make it easier to determine the issue 🙏

[keunrim]

I have a same problem.
When I enter and exit html mode, the <p><br></p> tag is generated.

In my case, there is no problem if there is no empty <p> </p> tag in the content.
but, if there is a empty <p> </p>(not first one), it seems to be generating a <p><br></p> tag.

record.mp4

Info :

• vite, react 18
• react-quill : 2.0.0
• quill-html-edit-button version : 2.2.13 (import)

Other plugins

• @looop/quill-image-resize-module-react : 3.1.5

[keunrim]

Sorry. I was wrong.
I tested it again and it doesn't seem to be an empty tag issue.
The problem occurs when I type enter on the first line, change to the next line, and then enter and exit HTML mode.
I didn't use @loop/quill-image-resize-module-react:3.1.5 this time.

record2.mp4

[benwinding]

Hi @keunrim

I've just added the demo for react-quill here -> https://benwinding.github.io/quill-html-edit-button/react/

Can you reproduce the issue in this demo? ^

Source code is in this repository here -> https://github.com/benwinding/quill-html-edit-button/tree/50425cb9d4c68b0fa62b5037bc02dbccd078aa62/demos/react

[keunrim]

Hi @benwinding

I think I have found the cause of the problem.
The cause of the problem was the "preserveWhiteSpace" props in the react-Quill editor.

I couldn't find the problem in your demo, so I compared your source code with mine.
The difference was the "preserveWhiteSpace" props, and when I deleted it, it worked fine.

When I exited HTML mode with preserveWhitespace enabled, all whitespace was reset and the <p> tag was generated.
I think it's a white space issue when saving in HTML mode.

[james----]

Hi @keunrim

I've just added the demo for react-quill here -> https://benwinding.github.io/quill-html-edit-button/react/

Can you reproduce the issue in this demo? ^

Source code is in this repository here -> https://github.com/benwinding/quill-html-edit-button/tree/50425cb9d4c68b0fa62b5037bc02dbccd078aa62/demos/react

We have very specific scenario we need supported we want our HTML text we enter to remain completely unchanged by Quill

1. Enter this HTML in the demo for react-quill and press OK

this is a test</br></br></br>
this is a test 2</br></br></br>

2. Click on the show HTML source the expected result is the HTML above but instead we see the br tags are replaced with p tags

<p>
  this is a test
</p>
<p>
</p>
<p>
</p>
<p>
   this is a test 2
</p>
<p>
</p>