title: Components as custom blots in Quill editor
body: <p>I'm about to use components (Angular/Vue/React or else) as custom building blocks that will be embedded in the editor:</p>
  
  <pre><code>class FooBlot extends BlockEmbed {
    static create(val) {
      const node = super.create();
  
      React.render(&lt;FooComponent ...&gt;, node);
  
      node.contentEditable = false;
      return node;
    }
  }
  
  FooBlot.tagName = 'DIV';
  FooBlot.className = 'foo';
  FooBlot.blotName = 'foo';
  </code></pre>
  
  <p>Which is inserted to as <code>quill.insertEmbed(..., 'foo', val)</code>.</p>
  
  <p>So it is expected that</p>
  
  <pre><code>&lt;div class="foo" data-bar="Bar"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>will be rendered to</p>
  
  <pre><code>&lt;div class="foo" data-bar="Bar"&gt;
    &lt;div&gt;
      &lt;div class="bar"&gt;Bar&lt;/div&gt;
       ...
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>in editor.</p>
  
  <p>But I'd like to get <code>&lt;div class="foo" data-bar="Bar"&gt;&lt;/div&gt;</code> without nested DOM as editor value, because nested nodes are there only for preview purposes.</p>
  
  <p>Another problem I'm trying to solve is that the components are expected to be un-editable, but setting <code>contentEditable</code> adds <code>contenteditable</code> attribute to <code>&lt;div class="foo"&gt;</code> which is not needed in the output.</p>
  
  <p>How is this kind of clean up supposed to be performed on editor value?</p>