Why are lists adding <span class="ql-ui" contenteditable="false"></span> in my html?

[KarineCardona]

Hi,
I am not understanding what is happening with quill inside a form: as soon as I apply the bullet list to my content, the innerHTML shows <span class="ql-ui" contenteditable="false"></span> inside my lists items.

Html

<div id='editor-container'><h1>Quill to HTML</h1>Modify this content to update HTML output</div>
<textarea id="output-html"></textarea>

js

const quillOptions = {
            debug: 'info',
            theme: 'snow',
            modules: {
                toolbar: [
                    [{ 'header': [2, 3, false] }],
                    ["bold", "italic", "underline"],
                    ["link"],
                    [{ list: 'ordered' }, { list: 'bullet' }]
                ]
            }
        };
    var quill = new Quill('#editor-container', quillOptions);
    quill.on('text-change', function(delta, source) {
        document.querySelector("#output-html").value = quill.root.innerHTML;
    })

Example of html output:

<h1>Quill to HTML</h1><ol><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>Modify</li><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>this</li><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>content to update HTML output</li></ol>

What is happening? Can I prevent that?
Thanks for your help

[swhitf]

I'm not a dev or contributor, but having integrated Quill extensively into our app, I believe they are using this ql-ui element to render the bullet and number elements within the editor. The native browser versions of these are unreliable and in some scenarios cannot be rendered properly. An example of this is if you center align text inside a UL, in Google Docs / Word the bullets come to the middle as you would expect, but in HTML they stay on the left and the text moves to the center which looks totally broken. Since Quill is basically HTML backed, they needed to implement a custom bullet rendering system, and that's what the ql-ui stuff is.

In our app, we just apply a stylesheet that I created based on their own stylesheets and it styles the list items as expected (more or less). If you do not care about matching the look of the quill editor layout perfectly with your rendered output, you can just remove these in a post process and style your UL/OL + LIs to have the native bullets. Otherwise you'll need to do what we do (custom style sheet). In either case, center alignment won't work properly.

Just again regarding the center alignment thing, see this fiddle for an example of the problem: https://jsfiddle.net/r7bq2hkt/
This is pretty hard solve without wrapping the elements with more elements which isn't an option for an editor really.

[swhitf]

Our CSS for reference:

.ql-editor li[data-list="bullet"] > .ql-ui:before,
.ql-text li[data-list="bullet"] > .ql-ui:before {
    content: "\2022";
    display: inline-block;
    margin-left: -1.5em;
    margin-right: .3em;
    text-align: left;
    white-space: nowrap;
    width: 1.2em;
}

.ql-editor li[data-list="ordered"] ,
.ql-text li[data-list="ordered"] {
    counter-increment: list-0
}

.ql-editor li[data-list="ordered"] > .ql-ui:before,
.ql-text li[data-list="ordered"] > .ql-ui:before {
    content: counter(list-0, decimal) ". ";
    display: inline-block;
    margin-left: -1.5em;
    margin-right: .3em;
    text-align: left;
    white-space: nowrap;
    width: 1.2em;
}