6

Using react-quill, I write a list within text, store the content into external storage, reload the content into quill: a new <br> is inserted before the list, and it happens on each reload.
Any idea what is happening, and how to prevent it?

I prepared a minimal sandbox to show the issue: https://codesandbox.io/s/reverent-cookies-m5h3x
The steps to reproduce:

  • write a line, followed by a bullet list
  • click save to store the content to external storage
  • click clear to remove all content from the editor
  • click load to put the content from external storage to the editor
  • BOOM! A new <br> is inserted on each save-clear-load cycle
Louis Coulet
  • 3,663
  • 1
  • 21
  • 39

2 Answers2

10

Found this answer by mhdhamouday in Quill GitHub Issues. This works for me.

var quill = new Quill('.quill', {
    theme: 'snow',
    modules: {
        toolbar : [...]
        clipboard: {
            matchVisual: false
        }
    }
});
anniex
  • 326
  • 3
  • 7
0

https://github.com/quilljs/quill/issues/2905#issuecomment-683128521 solution works very well. If you are using react component, this can be an alternative.

<ReactQuill
  theme="snow"
  value={block.note}
  onChange={(value) => onEditorStateChange(value, block)}
  modules={{
    clipboard: {
      matchVisual: false
    }
  }}
/>
gsumk
  • 809
  • 10
  • 15