仅在 childNodes 中插入内容，而不是使用 contenteditable 属性在父节点中插入内容？

如何解决仅在 childNodes 中插入内容，而不是使用 contenteditable 属性在父节点中插入内容？

使用 React，我正在使用 contenteditable 属性创建自定义迷你编辑器。除了删除之外，一切都按预期工作。一、相关代码片段：

  ...
    <div
      contentEditable
      suppressContentEditableWarning
      onInput={inputHandler}
    >
      {mountState.map((task,j) => {
          return (
            <p className="taskPara" key={j}>
              {task.content}
            </p>
          );
        }) || <p className="taskPara" />}
    </div>
  ...

注意：

1 - 父 div 具有属性 contenteditable。要使应用正常运行，<p> 元素必须是唯一插入文本的元素。

2 - 这可能并不重要。我实现的逻辑基本上是单向的。用户输入 <p> 元素，内容被克隆到全局状态。这些 <p> 元素不会从全局状态中读取，因为 contenteditable 属性足以更新屏幕并向用户显示他们键入的文本。

问题情景：

以用户编写一些文本后生成的以下 DOM 结构为例：

    <div contenteditable>
      <p class="taskPara"> Some text here </p>
    </div>

现在，当用户按下 backspace 键时，浏览器会删除文本并继续删除 <p> 元素，直到它停在 <div contenteditable /> 元素上。但是，我希望浏览器在只剩下一个 <p> 时停止。

问题：

我怎样才能实现只让 <p> 元素可编辑而不让浏览器在父元素 div 中插入文本？