使用 Quill 重叠内联注释 [英] Overlapping Inline Annotations with Quill

问题描述

在我的应用程序中，用户可以在文档正文的任何​​位置创建边距注释，并且注释锚范围可以任意重叠，如下所示:

In my application, users can create margin-comments anywhere in the document body, and the comment-anchor ranges can overlap arbitrarily, like this:

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

我像这样定义我的评论锚点:

I'm defining my comment-anchor blot like this:

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 实例中对其进行测试时，它会生成如下所示的羊皮纸:

But when I test it out in a running Quill instance, it generates parchment like this:

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

这是有问题的，因为重叠"这个词实际上应该同时具有abc"和xyz"作为其评论锚点 ID.

Which is problematic, because the word "overlapping" should actually have both "abc" and "xyz" as its comment anchor IDs.

您建议如何更改 CommentAnchorBlot 定义以适应此要求?我还没有在 Quill 文档中看到任何其他类似这样的示例.

How would you recommend changing the CommentAnchorBlot definition, to accommodate this requirement? I haven't seen any other examples in the Quill documentation that work quite like this.

推荐答案

首先，我会使用类属性来代替，因为注释似乎没有必要获得自己的 DOM 节点，而可以只是应用于其他节点的类.

First, I would use a class attributor instead, as it seems unnecessary that a comment get its own DOM node and instead could just be a class applied to other nodes.

其次，就您的观点而言，大多数情况下格式化是一种覆盖行为(将文本颜色格式化为红色，然后将其设为蓝色，而不是 [red, blue])，但您可以使用以下内容进行更改:

Secondly and to your point, most of the time formatting is an overwriting behavior (formatting text color to red, and then blue, makes it blue, not [red, blue]) but you can change this with something like this:

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 重叠内联注释的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！