在 Quill 编辑器中作为自定义印迹的组件

Question

我将使用组件（Angular/Vue/React 或其他）作为将嵌入编辑器的自定义构建块：

class FooBlot extends BlockEmbed {
  static create(val) {
    const node = super.create();

    React.render(<FooComponent ...>, node);

    node.contentEditable = false;
    return node;
  }
}

FooBlot.tagName = 'DIV';
FooBlot.className = 'foo';
FooBlot.blotName = 'foo';

插入到 as quill.insertEmbed(..., 'foo', val)。

所以预计

<div class="foo" data-bar="Bar"></div>

将被渲染为

<div class="foo" data-bar="Bar">
  <div>
    <div class="bar">Bar</div>
     ...
  </div>
</div>

在编辑器中。

但我希望<div class="foo" data-bar="Bar"></div>没有嵌套 DOM 作为编辑器值，因为嵌套节点仅用于预览目的。

我试图解决的另一个问题是组件预计不可编辑，但设置contentEditable添加了输出中不需要的contenteditable属性<div class="foo">。

这种清理应该如何对编辑器值执行？