React quill adds a new line each time it rerenders before any bullet list

[juanlet]

I know this is a known issue, but the new lines before a bullet list keep adding up after each rerender. I tried using matchVisual option to false to avoid this, but haven't found a way to prevent it. Any ideas? I'm in version 2.0.0, but I've also tried v2.0.0-beta.2 to no avail, it still happens on those versions. Any ideas?

const ReactQuill = dynamic(
  async () => {
    const { default: RQ } = await import('react-quill')
    const { default: QuillAutoDetectUrl } = await import('quill-auto-detect-url')
    RQ.Quill.register('modules/autoDetectUrl', QuillAutoDetectUrl)

    return import('react-quill')
  },
  { ssr: false }
)

const defaultModules = {
  toolbar: [
    [{ header: [1, 2, false] }],
    ['bold', 'italic', 'underline', 'strike', 'blockquote'],
    [{ list: 'ordered' }, { list: 'bullet' }, { indent: '-1' }, { indent: '+1' }],
    ['link', 'image'],
    // ['clean'],
  ],
  autoDetectUrl: true,
  clipboard: {
    matchVisual: false,
  },
}

 <ReactQuill
        defaultValue={""}
        formats={[
  'header',
  'bold',
  'italic',
  'underline',
  'strike',
  'blockquote',
  'list',
  'bullet',
  'indent',
  'link',
  'image',
]}
        modules={modules || defaultModules}
        placeholder={"Enter description"}
        value={value?? '<h1>Headline</h1><p><br></p><p>Add description...</p>'}
        onChange={(e: any) => {
                        field.onChange(e)
                        setHasUnsavedChanges(true)
                      }}}
        theme={"bubble"}
        readOnly={disabled}
        onChangeSelection={() => {
          if (editorTheme != 'bubble') return
          const tooltipInput = document.querySelector('.ql-tooltip-editor input[type=text]')
          tooltipInput?.setAttribute('placeholder', 'https://google.com')
        }}
      />
      

This html content

<h1><br></h1><h1>Heading 12331</h1><p><br></p><h2>Heading 22</h2><p><br></p><p><u>Text formatter</u>: <strong>Bold, </strong><u>Underlined</u></p><p><br></p><ol><li>1</li></ol><ul><li>a</li><li>b</li><li>c</li><li>d</li><li>e</li></ul><p>2.</p><p><br></p><p><br></p><h2><br></h2><h1><br></h1><h1><br></h1>

editor turns it into(take note what comes after <h1>Heading 12331</h1>). Looks like the problem is that the editor adds an extra <p><br></p>

<h1><br></h1><h1>Heading 12331</h1><p><br></p><p><br></p><h2>Heading 22</h2><p><br></p><p><u>Text formatter</u>: <strong>Bold, </strong><u>Underlined</u></p><p><br></p><ol><li>1</li></ol><ul><li>a</li><li>b</li><li>c</li><li>d</li><li>e</li></ul><p>2.</p><p><br></p><p><br></p><h2><br></h2><h1><br></h1><h1><br></h1>

Is it a bug or there is an option I'm missing to prevent this?

Edit: After some research the bug seems to be the Header 1, Header 2 element, etc. Those are the ones that add an extra space before it on each render

Ticket due diligence

• [X ] I have verified that the issue persists under ReactQuill v2.0.0-beta.2
• [ ] I can't use the beta version for other reasons

ReactQuill version

v2.

FAQ

Is this a bug in Quill or ReactQuill?

ReactQuill is just a ~thin~ wrapper on top of the Quill editor. Often, what looks like a bug in ReactQuill, is actually a bug in the Quill editor itself. Before opening a ticket, please check the Quill documentation, and the issues page, and see if that answers your question first.

How do I access the wrapped Quill instance?

See the instance methods and API documentation.

[olan-go2]

Have you found any workaround on this issue?

[jovana]

Have you found any workaround on this issue?

Having this issue also. The workaround witch is helping:

 clipboard: {
    matchVisual: false,
  },

Seems to help. Credits: https://github.com/zenoamaro/react-quill/issues/925

[juanlet]

Have you found any workaround on this issue?

unfortunately matchVisual doesn't work for the lastest version, at least in my case. We decided to move on from this. It's a nice editor but it doesn't seem to be active in terms of merging pull requests/fixes.