Перекрывающиеся встроенные аннотации с иглой

Question

В моем приложении пользователи могут создавать поля комментариев в любом месте тела документа, а диапазоны привязки комментариев могут произвольно перекрываться, например:

This [abc]is a set of [xyz]overlapping[/xyz] comments[/abc]

Я определяю свое пятно привязки комментария как это:

let Inline = Quill.import('blots/inline');

class CommentAnchorBlot extends Inline  {
  static create(commentId) {
    let node = super.create();
    node.setAttribute("class", "comment-anchor comment-anchor-" + commentId);
    return node;
  }

  static formats(node) {
    var classNames = node.getAttribute('class').split(/\s+/);
    for (var i = 0, len = classNames.length; i < len; i++) {
      var className = classNames[i];
      if (className.indexOf("comment-anchor-") === 0) {
        return className.replace("comment-anchor-", "");
      }
    }
    return null;
  }
}
CommentAnchorBlot.blotName = 'comment';
CommentAnchorBlot.className = 'comment-anchor';
CommentAnchorBlot.tagName = 'span';
Quill.register(CommentAnchorBlot);

Но когда я тестирую его в работающем экземпляре Quill, он генерирует пергамент так:

{
  "ops" : [
    { "insert" : "This " },
    { "insert" : "is a set of ", "attributes" : { "comment" : "abc" } },
    { "insert" : "overlapping ", "attributes" : { "comment" : "xyz" } },
    { "insert" : " comments", "attributes" : { "comment" : "abc" } }
  ]
}

Что проблематично, потому что слово "перекрытие" должно фактически иметь оба "abc" и "xyz" в качестве идентификаторов привязки комментариев.

Как бы вы посоветовали изменить определение CommentAnchorBlot, чтобы удовлетворить это требование? Я не видел других примеров в документации по Quill, которые бы работали именно так.

Answer 1

Во-первых, я бы вместо этого использовал атрибутор класса, так как кажется ненужным, чтобы комментарий получал свой собственный узел DOM, а вместо этого мог просто быть классом, примененным к другим узлам.

Во-вторых, с вашей точки зрения, большая часть времени форматирования - это перезапись (форматирование цвета текста на красный, а затем синий, делает его синим, а не [красным, синим]), но вы можете изменить это следующим образом:

class Comment extends Parchment.Attributor.Class {
  constructor(attrName = 'comment', keyName = 'comment') {
    super(attrName, keyName, { scope: Parchment.Scope.INLINE_ATTRIBUTE });
  }

  add(node, value) {
    if (!this.canAdd(node, value)) return false;
    const array = Array.isArray(value) ? value : [value];
    array.forEach((id) => {
      node.classList.add(`${this.keyName}-${id}`);
    });
    return true;
  }

  remove(node, id) {
    if (id == null) {
      super.remove(node);
    } else {
      node.classList.remove(`${this.keyName}-${id}`);
      if (node.classList.length === 0) {
        node.removeAttribute('class');
      }
    }
  }

  value(node) {
    const prefix = `${this.keyName}-`;
    const list = _.filter(node.classList, (c) => {
      return c.startsWith(prefix);
    }).map((c) => {
      return c.slice(prefix.length);
    });
    return (list.length > 0) ? list : null;
  }
}

Quill.register({ 'formats/comment': new Comment() });