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.

[rahul18s]

Facing the same issue in React-Quill 1.3.5, resolved by using matchVisual: false, is working fine. please use it like this in ReactJs
let modules = {clipboard: { matchVisual: false }};

[FemtDeveloper]

I have this problem in react-quill 2.0, can someone tell me how to remove that? I dont want to save it like that in database

[kartik-chausali]

For anyone having this problem in future , adding clipboard:{matchVisuals:false} in modules works no more now in latest versions of quill . I found a way to remove extra tags although it makes code vulnerable to vulnerable to cross-site scripting (XSS) attacks.
when you are rendering the content which have extra<p> tag or <div> tag, instead of rendering directly you can use dangerouslySetInnerHTM, it removes those html tags itself ,
in my case i had to render the content sent by user from reactQuill editor in fronted on a div so i did it by

 <div  dangerouslySetInnerHTML={{__html:content}}>
  </div> 

content contains the input from reactQuill editor sent by user.
https://blog.logrocket.com/using-dangerouslysetinnerhtml-react-application/#what-dangerouslysetinnerhtml