What does the Quill.js formats()-method do?

2019-07-24 17:45发布

问题:

I'm trying to implement a custom style for Quill.js that would allow nested and (hopefully) overlapping regions in the text. I'm not yet sure how to do the overlapping, but the nesting seems to be possible.

I've done the usual extending of a blot kind of thing (in typescript):

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

class Comment extends Inline {
    static create(value: any) : Node {
        let node = super.create();

        node.setAttribute('style', 'background-color: PeachPuff;');
        node.setAttribute('data-comment-id', value);
        node.setAttribute('class', "comment comment"  + value);
        return node;
    }

    static formats(domNode: Node) {
        return (<Element>domNode).getAttribute('data-comment-id');
    }
}

Comment.blotName = 'comment';
Comment.className = 'comment';
Comment.tagName = 'span';

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

Now, the nesting behaviour is different, depending on what I do with the formats()-method. The way it is written above it will split comments when I try to nest them. If I just return 'true', nesting will be disabled completely. If I leave it unimplemented nesting works as intended (one '' inside the other), but only as long as I leave the node.setAttribute('style', 'background-color: PeachPuff;'); in there. When I remove that line together with the formats()-method the formatting doesn't work at all.

Of course I could just not implement formats() and leave it at that. However currently I'm just trying stuff randomly, which I strongly dislike. It means I'm probably not using the API to its full potential and I might have unintended side effects and hard to find bugs later on.

I've read examples, searched the docs and browsed the Quill.js and Parchment source code but I'm none the wiser. Even though I really like Quill so far, the documentation is sadly lacking.

Can anybody with a deeper understanding please explain to me what this method does or maybe how Quill/Parchment does the format-to-Delta-to-html conversion/normalization?

Note: This question is about how Quill works, not about how to do overlapping annotations or whether something like this is even a good idea.