如何在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) {
    if (event.shiftKey && event.keyCode === 13) {
        event.preventDefault();
        document.execCommand('insertParagraph');
        return false;
    }
    document.execCommand('formatblock', false, '<p>');
}
function inputText() {
    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>'); // 保证内容在<p>标签内
}