Svelte项目中Quill编辑器点击工具栏光标跳至顶部问题求助

我在Svelte项目中集成了Quill编辑器，但点击工具栏按钮时，光标会跳转到编辑器开头，导致无法在文本中间进行编辑。同时，点击后的工具栏按钮状态无法维持——比如加粗按钮点击后本应保持蓝色，却会变回黑色。

尝试过的排查与解决方法 #

• 尝试通过阻止事件来解决问题：

quill.getModule("toolbar").container.addEventListener("mousedown", (e) => {
        e.preventDefault();
        e.stopPropagation()
    });

• 监听选区变化排查问题，发现点击工具栏后oldrange返回null，编辑器似乎丢失了之前的光标位置：

quill.on("selection-change", function (range, oldrange, source) {
        var range = quill.getSelection();
        if (range) {
            if (range.length == 0) {
                console.log("old range:" + oldrange)
                console.log('User cursor is at index', range.index);
            } else {
                var text = quill.getText(range.index, range.length);
                console.log('User has highlighted: ', text);
            }      
        } else {
            console.log('User cursor is not in editor');
        }
    });

Quill配置信息 #

我的Quill配置如下，editorPlaceholder已绑定到DOM中的div，且Quill在onMount()之前完成初始化，使用的Quill版本为1.3.6：

let container = editorPlaceholder;
    quill = new Quill(container, {
        modules: {
            toolbar: [
                [{ header: [1, 2, 3, false] }],
                ["bold", "italic", "underline", "strike"],
                ["link", "code-block"],
            ],
        },
        theme: "snow", 
        scrollingContainer: "html",
        
    });

内容的提问来源于stack exchange，提问作者Roan128