Quill: Quill inserts a useless line-break before the <ul> element

[flockisoft]

Unfortunately quill insert a line-break if you paste the following html into the editor:

<p>Simple list:</p><ul><li>item one</li><li>item two</li></ul><p><br></p>

The behavior of pasteHTML() or convert(), setContents() is the same.

Steps for Reproduction

1. Visit https://codepen.io/iice/pen/vQKrWY
2. change line in js to var html = <p>Simple list:</p><ul><li>item one</li><li>item two</li></ul><p><br></p>;
3. Watch what happens in the Viewer

Expected behavior:

Quill should not insert an line-break before the <ul> - because this sums up.
The first time it insert a line-break, then we save it, then quill inserts the second line-break, we save again, and so on...

Actual behavior:

Simple list:

• item one
• item two

Platforms:

Chrome 79
Windows 10

Version:
1.3.7

Run Quill.version to find out

[flockisoft]

After playing a little bit i found two ways to prevent quill to insert the line-break

1) prepend the <ul> by an empty paragraph
<p>Simple list:</p><p></p><ul><li>item one</li><li>item two</li></ul><p><br></p>

2) wrap the <ul> by a paragraph
<p>Simple list:</p><p><ul><li>item one</li><li>item two</li></ul></p><p><br></p>

[mtycholaz]

I'm experiencing the same issue. This is frustrating a client of mine because if they make any change (make a word bold for example), a new empty <p> is added, which pushes down their content. The result is that the space keeps growing bigger every time they save.

[ivangarcia2]

I'm having the same issue

[RedefineMike]

I'm having the same issue as well. Looking through the code.

The problem appears to be that on load, Quill is inserting a Block blot (p) tag before the ul, which by default contains a br as a child. Presumably that is the default behavior so the user can click there and type after creating it. I'm working my way up the chain to see if I can find what is actually making the decision to insert that item.

[deniskabalkin]

Same problem, please fix =)

[mhdhamouday]

I fixed it by disabling matchVisual, but I think we should find better solution.

var quill = new Quill('.quill', {
    theme: 'snow',
    modules: {
        toolbar : [...]
        clipboard: {
            matchVisual: false
        }
    }
});