quill - 创建公式印迹（分层标签）

Question

使用嵌入可以成功创建复杂的公式印迹（如下所示），但它仅适用于单个实例。所有其他实例都被截断。尝试将其创建为内联或块导致错误。

我正在开发一个图形公式编辑器，它有自己的对话框和工具栏，它成功地从现有的印迹中获取增量。不幸的是，保存多个公式失败，替换现有公式失败。当保存多个公式时，除了第一个之外，只保存顶级跨度。

从文档中不清楚标签层次结构是否可以用作内联或块元素。

附带说明一下，我正在为 Angular 7+ 应用程序构建一个完整的 Quill npm 模块，其中还包括许多其他的 quill 模块，并翻译为 Typescript。npm 模块将支持 WCAG 与可切换的大按钮等兼容。

用作印迹的示例标签层次结构：

<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;∛&amp;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">​&lt;/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>

印迹代码：

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);

这是插入不适用于后续实例的公式的调用，尽管它适用于第一个公式：

        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);
        }

公式编辑器 UI 快照 预期结果是能够在编辑器中插入公式、内联，并能够在公式更新时替换它。

标签： quillparchment