Creation of a Formula Blot (Hierarchical Tags)

Question

Creation of a complex formula blot, such as the one below, is successful using an Embed, but it works only in a single instance. All other instances are truncated. Attempts to create it as an Inline or Block resulted in errors.

I am developing a graphic formula editor, with a dialog and toolbars of its own, and it is successfully getting the delta from an existing blot. Unfortunately, saving more than one formula fails, and replacing an existing formula fails. When saving more than one formula, only the top level spans are saved for all but the first.

It isn't clear from the documentation if the tag hierarchy can be used as an Inline or Block element.

As a side note, I am building a complete Quill npm module for Angular 7+ apps that includes a number of other quill modules as well, translated to Typescript. The npm module will support WCAG compliance with large buttons, etc. that can be toggled.

Example tag hierarchy to be used as a blot:

<span class="pl3-quill-formula-blot" data-id="pl3qfml_1560288135645" data-editors="[{&quot;id&quot;:1560288133767,&quot;parentId&quot;:null,&quot;depth&quot;:0,&quot;position&quot;:0,&quot;fElement&quot;:{&quot;name&quot;:&quot;cube root&quot;,&quot;text&quot;:&quot;∛&quot;,&quot;type&quot;:&quot;O&quot;,&quot;shape&quot;:&quot;R&quot;,&quot;latex&quot;:null,&quot;values&quot;:[&quot;x&quot;],&quot;nValues&quot;:1}},{&quot;id&quot;:1560288133768,&quot;parentId&quot;:0,&quot;depth&quot;:0,&quot;position&quot;:1,&quot;fElement&quot;:{&quot;name&quot;:&quot;-EMPTY-&quot;,&quot;text&quot;:&quot;&quot;,&quot;type&quot;:&quot;S&quot;,&quot;shape&quot;:&quot;C&quot;,&quot;latex&quot;:null,&quot;latexCb&quot;:null,&quot;values&quot;:[&quot;&quot;],&quot;nValues&quot;:1}}]">
<span contenteditable="false">
   <span class="katex">
      <span class="katex-mathml"><math><semantics><mrow><mroot><mi>x</mi><mn>3</mn></mroot></mrow><annotation encoding="application/x-tex">\sqrt[3] {x}  </annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height: 1.04em; vertical-align: -0.23972em;"></span><span class="mord sqrt"><span class="root"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height: 0.658556em;"><span class="" style="top: -2.83634em;"><span class="pstrut" style="height: 2.5em;"></span><span class="sizing reset-size6 size1 mtight"><span class="mord mtight"><span class="mord mtight">3</span></span></span></span></span></span></span></span><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height: 0.80028em;"><span class="svg-align" style="top: -3em;"><span class="pstrut" style="height: 3em;"></span><span class="mord" style="padding-left: 0.833em;"><span class="mord mathdefault">x</span></span></span><span class="" style="top: -2.76028em;"><span class="pstrut" style="height: 3em;"></span><span class="hide-tail" style="min-width: 0.853em; height: 1.08em;"><svg width="400em" height="1.08em" viewBox="0 0 400000 1080" preserveAspectRatio="xMinYMin slice"><path d="M95,702c-2.7,0,-7.17,-2.7,-13.5,-8c-5.8,-5.3,-9.5,
-10,-9.5,-14c0,-2,0.3,-3.3,1,-4c1.3,-2.7,23.83,-20.7,67.5,-54c44.2,-33.3,65.8,
-50.3,66.5,-51c1.3,-1.3,3,-2,5,-2c4.7,0,8.7,3.3,12,10s173,378,173,378c0.7,0,
35.3,-71,104,-213c68.7,-142,137.5,-285,206.5,-429c69,-144,104.5,-217.7,106.5,
-221c5.3,-9.3,12,-14,20,-14H400000v40H845.2724s-225.272,467,-225.272,467
s-235,486,-235,486c-2.7,4.7,-9,7,-19,7c-6,0,-10,-1,-12,-3s-194,-422,-194,-422
s-65,47,-65,47z M834 80H400000v40H845z"></path></svg></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height: 0.23972em;"><span class=""></span></span></span></span></span></span></span>
      </span>
   </span>
</span>

Blot Code:

import {Pl3QuillFormulaResult} from './pl3-quill-formula.component';

const Quill = require('quill');
const Embed = Quill.import('blots/embed');

class Pl3QuillFormulaBlotComponent extends Embed {
    static blotName = 'pl3-quill-formula';
    static className = 'pl3-quill-formula-blot';
    static tagName = 'span';

    constructor(domNode: Element, value: any) {
        super(domNode);
    }

    static create(result: Pl3QuillFormulaResult) {
        const node = super.create(result.id);
        node.setAttribute('data-id', result.id);
        node.setAttribute('data-editors', result.editorsAsString);
        node.appendChild(result.domElement);
        return node;
    }

    /**
     * Quill uses this to return a Delta with the attributes in the return.
     */
    static formats(domNode: Element) {
        return {
            editors: domNode.getAttribute('data-editors'),
            id: domNode.getAttribute('data-id')
        };
    }

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

    public remove() {
        if (this.prev == null && this.next == null) {
            this.parent.remove();
        }
        else {
            super.remove();
        }
    }
}

Quill.register('formats/pl3-quill-formula', Pl3QuillFormulaBlotComponent);

This is the call to insert the formula that is not working for subsequent instances, although it works for the first formula:

        if (result) {
            const range = this.quill.getSelection(true);
            this.quill.insertEmbed(range.start, 'pl3-quill-formula', result, Quill.sources.API);
            this.quill.setSelection(range.length + 1);
        }

Formula Editor UI Snapshot The expected results are to be able to insert the formula within the editor, inline, and to be able to replace it when the formula is updated.