求助：contenteditable中Ctrl+Enter插入换行异常问题

我想实现用户按下Ctrl+Enter时，在contenteditable元素里插入换行。参考了以下StackOverflow问题编写代码：

• Insert newline on enter key in contenteditable div
• How to insert a (Carriage Return) in a Javascript String?
• Dealing with line Breaks on contentEditable DIV
• Problem detecting Newlines in JavaScript Range Object

我的HTML代码：

<span id="myInput" contenteditable="true" style="white-space: pre;"></span>

JavaScript代码：

let myInput = document.getElementById('myInput');

myInput.addEventListener('keypress', (event) => {
    if (event.key == 'Enter' && event.ctrlKey == true) {
        event.preventDefault();
        this.insertNewLine();     
    }
})

function insertNewLine(text) {
    var sel, range, html;
    sel = window.getSelection();
    range = sel.getRangeAt(0);
    range.deleteContents();
    
    // 并非始终生效
    var textNode = document.createTextNode("\n");
    
    // 始终生效
    //var textNode = document.createTextNode("\n\u200b");
    
    range.insertNode(textNode);
    range.setStartAfter(textNode);
    range.collapse(false);
    sel.removeAllRanges();
    sel.addRange(range);
}

但按下Ctrl+Enter时出现了异常：

• 在Chrome中，换行并非总能插入成功
• 在Firefox中，换行已插入，但光标未跳转到下一行

我发现如果在\n后添加零宽空格（\u200b），代码就能始终生效，但我希望不用插入这个零宽空格就能解决问题，有人能帮忙分析原因吗？

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