组件作为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';

将其插入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>

在编辑器中。

但是我想在没有嵌套DOM的情况下获得<div class="foo" data-bar="Bar"></div>作为编辑器值，因为嵌套节点仅用于预览目的。

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

如何对编辑器值进行这种清理？