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

[KarineCardona]

Discussed in #4504

^{Originally posted by KarineCardona November 27, 2024}
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