正确嵌套嵌套污点的结构QuillJs

Question

我已经实现了由图像印迹和标题印迹组成的封闭印迹。 My Image Blot扩展了BlockEmbed，是一个img标签，用于渲染图像，而我的标题印迹则扩展了block。我需要标题可以格式化，因此我使用了块印迹。我预期的功能已实现。但是我的增量结构不正确。

这是我的印迹代码：

/* eslint-disable no-param-reassign */
import ReactQuill from 'react-quill';
const Quill = ReactQuill.Quill;
const BlockEmbed = Quill.import('blots/block/embed');
const Block = Quill.import('blots/block');
const Container = Quill.import('blots/container');
const Parchment = Quill.import('parchment');
const Break = Quill.import('blots/break');
const Inline = Quill.import('blots/inline');
const TextBlot = Quill.import('blots/text');

class FigCaption extends Block {
  static create(value) {
    const node = super.create();
    node.dataset.caption = value;
    node.setAttribute('align', 'center');
    node.innerText = value;
    return node;
  }

  static value(domNode) {
    return domNode.dataset.caption;
  }
}

FigCaption.blotName = 'fig-caption';
FigCaption.tagName = 'figcaption';
FigCaption.allowedChildren = [Inline, TextBlot, Block, Break];

const IMG_ATTRIBUTES = ['width', 'height', 'src'];
class FigImage extends BlockEmbed {
  static create(value) {
    const node = super.create();
    node.dataset.src = value;
    node.setAttribute('contenteditable', 'false');
    node.setAttribute('src', value);
    return node;
  }

  static formats(domNode) {
    return IMG_ATTRIBUTES.reduce((formats, attribute) => {
      if (domNode.hasAttribute(attribute)) {
        formats[attribute] = domNode.getAttribute(attribute);
      }
      return formats;
    }, {});
  }

  static value(domNode) {
    return domNode.dataset.src;
  }

  format(name, value) {
    if (IMG_ATTRIBUTES.indexOf(name) > -1) {
      if (value) {
        this.domNode.setAttribute(name, value);
      } else {
        this.domNode.removeAttribute(name);
      }
    } else {
      super.format(name, value);
    }
  }
}

FigImage.blotName = 'fig-image';
FigImage.tagName = 'img';
FigCaption.allowedChildren = [Inline, TextBlot, Block, Break];

const ATTRIBUTES = ['align', 'style', 'width', 'height', 'src'];
class FigureBlot extends Block {
  static create(value) {
    const node = super.create();
    node.dataset.src = value.src;
    node.dataset.caption = value.caption;
    const imageElement = Parchment.create('fig-image', value.src);
    const captionElement = Parchment.create('fig-caption', value.caption);
    node.appendChild(imageElement.domNode);
    node.appendChild(captionElement.domNode);
    return node;
  }

  static formats(domNode) {
    return ATTRIBUTES.reduce((formats, attribute) => {
      if (domNode.hasAttribute(attribute)) {
        formats[attribute] = domNode.getAttribute(attribute);
      }
      return formats;
    }, {});
  }

  format(name, value) {
    if (ATTRIBUTES.indexOf(name) > -1) {
      if (name === 'style' || name === 'align') {
        if (value) {
          this.domNode.setAttribute(name, value);
        } else {
          this.domNode.removeAttribute(name);
        }
      } else if (name === 'height' || name === 'width' || name === 'src') {
        const imageElement = this.domNode.querySelector('img');
        if (value) {
          imageElement.setAttribute(name, value);
        } else {
          imageElement.removeAttribute(name);
        }
      }
    } else {
      super.format(name, value);
    }
  }

  static value(domNode) {
    const src = domNode.dataset.src;
    const caption = domNode.dataset.caption;
    return { src, caption };
  }
}

FigureBlot.blotName = 'figure';
FigureBlot.tagName = 'figure';
FigureBlot.defaultChild = [FigImage, FigCaption];
FigureBlot.allowedChildren = [FigCaption, FigImage, Inline, Block, BlockEmbed, TextBlot, Container];

export { FigureBlot, FigCaption, FigImage };

有人可以指出我要去哪里了吗？非常感谢您的帮助