HTML contenteditable - 覆盖默认值会导致execCommand闪烁

Question

我正在开发一个在线HTML文本编辑器，它具有格式化块的功能，例如添加粗体，斜体，代码块。

因此，默认情况下，contenteditable dev会模仿按enter时的样式和元素。因此，如果当前元素为pre并按enter，则会添加新的pre块。我希望它输入p块，所以我按execCommand进行了操作。这是代码：

    document.onkeyup = function( event ) {
        if (event.keyCode == 13     ) {
            document.execCommand( 'formatBlock', false, 'p' );
            event.stopPropagation();
            event.preventDefault();
        }
    }

它工作正常，但有一个闪烁，它首先添加一个pre块，然后将其格式化为p。我该如何调试原因或修复它？

GIF正确解释。

更新： 所以，发现问题，它发生在contenteditable模式，浏览器在keydown上添加新元素，我试图在keyup中格式化块，所以延迟。但是新的问题是，我们无法在keydown中创建块之前格式化块，将尝试提出一个解决方案，通过代码添加元素并防止此行为的默认行为，并将其更新为答案。