React-quill: Extra <p> tag is inserted before list tag

[Faizahmadfaiz]

Providing <p>This is list</p><ul><li>one</li><li>two</li></ul> as value in props to <ReactQuill />
is rendering two extra <p><br></p> before <ul></ul>.

Expected Behaviour : No extra <p><br></p> tags should be inserted.
Working example Link : Example Link

[dannersy]

I'm having the same issue and noticed onChange is being called twice on render which adds the additional <p> tags. Not sure how the referenced pull request addresses the issue unless wrapping the component helps?

[dannersy]

@Faizahmadfaiz After playing around I've found that if you use the getHTML() method off of editor argument passed in the onChange instead of directly using the value, it won't add the extra <p> tags.

Using your example:
handleChange(value, delta, source, editor) { this.setState({ text: editor.getHTML() }); }

I'd say this is the intended use by reading the docs, but I see examples using value directly; so this is probably more a work around rather than intended use.

[thumperca]

@Faizahmadfaiz Extra two <p><br/></p> tags gets inserted between <h2> and <h3> tags as well. The above issue doesn't fix that.

[alexkrolick]

Have you tried adding matchVisual: false to the configration?

[Faizahmadfaiz]

@alexkrolick Thanks! I have added clipboard: { matchVisual: false } and it worked!

[pooriamo]

@alexkrolick I can't find matchVisual in the docs. Is it removed? I have the same problem.
https://quilljs.com/docs/modules/clipboard/

[abiringira]

I'm facing the same issue but any one to help me where can I find the configuration file ?

[alexkrolick]

https://github.com/quilljs/quill/blob/ee827ffb605ba491246f201d497ce0e7d9e193a0/docs/guides/upgrading-to-2-0.md#configuration

It looks like it was removed in Quill 2. Note that ReactQuill installs v1 of Quill; Quill 2 is in beta.

[mtycholaz]

I have the same issue on the Angular front. Using https://github.com/KillerCodeMonkey/ngx-quill and I'm finding that if I make a change (such as bolding some text), Quill will keep adding an empty <p> before my lists. I tried adding the clipboard: { matchVisual: false } into my config, but it didn't fix anything (maybe because I'm using version 2 of Quill?).

[alexkrolick]

@mtycholaz

Quill will keep adding an empty <p> before my lists. I tried adding the clipboard: { matchVisual: false } into my config, but it didn't fix anything (maybe because I'm using version 2 of Quill?).

Quill 2 release notes:

Configuration

• matchVisual _removed_ - Previously there was a choice between using visual or semantic interpretation of pasted whitespace; now just the semantic interpretation is used. Visual matching was expensive, requiring the DOM renderer which is no longer available in the new clipboard rewrite.
• pasteHTML _removed_ - Deprecated alias to dangerouslyPasteHTML.

I'd suggest raising this issue on the Quill side, or creating a plugin.

[jithinktom]

Have you tried adding matchVisual: false to the configration?

Where should I add it? as a prop to component?

[alexkrolick]

Where should I add it? as a prop to component?

@jithinktom to the clipboard plugin, passed as part of the modules prop.