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”作为其评论锚点ID。

您如何建议更改CommentAnchorBlot定义以满足此要求？我还没有在Quill文档中看到任何其他类似的例子。

Answer 1

首先，我会使用类的attributor，因为注释似乎没有必要获得自己的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() });

使用Quill

1 个答案: