嵌套不可内容嵌套和所见即所得的内容可编辑

Question

假设我有一个内容可编辑的容器，其中包含不可内容编辑的元素

\:host-context(.theme1) .logo
  width: 150px

当我在不可编辑的中间部分选择一些文本并执行：<div contenteditable="true"> This is editable <span contenteditable="false">this not</span> This is editable again </div> 时，这就是我想要的：

此是可编辑的，这不是可编辑的

document.execCommand('bold', false);

但是，这是结果（使用Chrome）

此是可编辑的这不是这是可编辑的

This <b>is editable </b><b>this not </b><b>This is editable</b> again

提琴：https://jsfiddle.net/qx1vs6dc/3/

顺便说一句：在小提琴中，Firefox完全破坏了结构并重新排列了文本，在我的真实应用中Firefox的行为正确，只有Chrome忽略了不可编辑的部分。

有人知道如何解决此问题吗？还是有可能使用document.execCommand以外的其他方式来使用浏览器本机所见即所得（WYSIWYG）？