javascript - ngx-quill/quill.js は、innerHTML からカスタム ブロットを取り除きます。

Question

タイトルは誤解を招く可能性がありますが、より適切なタイトルを付ける方法がわかりません。私が達成したいのは、カスタム ブロットの埋め込みのような twitter ウィジェットです。そのために、サンプルの「レンダラー」クラスを作成しました。

class TestRenderer {
    render(id: number, node: HTMLElement) {
        node.innerHTML = `<h1>ELEMENT ${id}</h1>`;
    }
}

そして BlockEmbed を拡張した通常のクイルブロットクラス

export class TestBlot extends BlockEmbed {
  static blotName = 'test';
  static tagName = 'test-embeded';
  static className = 'test-embeded';

  static create(id: any) {
    const node = super.create();
    node.dataset.id = id;
    RENDERER.render(id, node);


    node.addEventListener('click', (e) => {
      e.preventDefault();
      RENDERER.render(666, node);
    });

    return node;
  }

  static value(domNode: HTMLElement) {
    return domNode.dataset.id;
  }
}

公式のクイル羊皮紙チュートリアルから入手した twitter-widget tweet-embed と同様のアプローチを使用したと思いましたが、HTML 出力が異なります。Twitter はすべての内部 HTML から取り除かれ、単純です。

<twitter-embeded class="twitter-embeded" data-id="464454167226904576" contenteditable="false" style="cursor: pointer;"></twitter-embeded>

そして、私のカスタム ブロット要素は次のようになります。

<test-embeded class="test-embeded" data-id="742878714"><h1>ELEMENT 742878714</h1></test-embeded>

手動で削除し<h1>ELEMENT 742878714</h1>ても、エディターはそのコンテンツを認識し、すべてを適切に表示します。非常に効果のない方法であり、Quill HTML コンテンツ全体をチェックして、innerHTML からすべてのカスタム要素を削除することは避けたいと考えています。