重疊內嵌註解與奎爾

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

但是，當我在一個運行實例奎爾測試它，它會產生羊皮紙是這樣的：

{ 
    "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() });