React-quill: New lines added above headings when re-render with the updated text

[InsectEater]

When I take the result from onChange event and pass it back to the ReactQuill component, it adds a new line above of the lines marked as headings (h1, h2 etc. ). This happens, when there is another text line above the headings. The added option - clipboard: {matchVisual: false } do not have any effect.

Here is a sample, which reproduces the problem:
http://o0.paiyakdev.com/react-quill-issue/

Add few lines with text. Then set the second or third line to be h1, then click on Hidden checkbox few times. There will be new line added above the h1 with every next rendering.

Sorry for my bad english.

[alexkrolick]

This is an issue with the pasteHTML method from Quill - will see if there is an experimental fix that can be applied.

[nikolov-tmw]

@alexkrolick thank you for looking into it. We(me and @InsectEater work together) weren't sure if this is a React Quill or Quill issue, so sorry for filing at the wrong place.

[nikolov-tmw]

@alexkrolick I traced this down to the new clipboard configuration option - matchVisual.

See, we were looking at the Quill documentation and we saw that there's a matchVisual option in there, but we didn't realize it's super fresh( commit adding it is only 12 days old - https://github.com/quilljs/quill/commit/530632f466a2d2cf2b0708d30cb5df1e7cd2a97c ).

So, I was playing around with Quill's live demo and noticed that when modules.clipboard.matchVisual = false the bug doesn't seem to happen. So I went through the dist files of reac-quill and saw that there's no support for the new config option.

So basically as soon as you update Quill to 1.3 in react-quill, the issue will be resolved. For now I'm just manually patching the Clipboard constructor in order to fix the issue for us.

[alexkrolick]

See https://github.com/zenoamaro/react-quill/issues/238#issuecomment-318849729 - you should be able to upgrade your Quill dependency to 1.3.0 to use this option in the modules prop.