如何解决在contenteditable编辑框内使用Shift+Enter换行导致结构混乱的问题？

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#editable {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    padding: 10px;
}
</style>
<div contenteditable="true" id="editable" oninput="inputText()" onkeydown="keyDown(event)"></div>

<script>
function keyDown(event) {
    document.execCommand('formatblock', false, '<p>');
}
function inputText() {
    // 用于调试，查看当前元素的innerHTML
    if (document.getSelection().focusNode.data !== undefined) {
        var currentElement = document.getSelection().focusNode.parentNode;
        console.log(currentElement.innerHTML);
    }
}
</script>

function keyDown(event) {
    if (event.shiftKey && event.keyCode === 13) {
        event.preventDefault(); // 阻止默认行为
        document.execCommand('insertParagraph');
        return false; // 阻止事件冒泡
    }
    document.execCommand('formatblock', false, '<p>');
}