Quilljs: TypeError when deriving custom Attributor

问题

I'm trying to implement a potentially overlapping attribute as in this question: Overlapping Inline Annotations with Quill and this issue: https://github.com/quilljs/quill/issues/1216

Only difference is that I'm using TypeScript. This is an excerpt of my code:

import Quill from "quill";
import Parchment from "parchment";

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

    add(node: HTMLElement, value: any) : boolean {
        if (this.canAdd(node, value)) {
            let ids: string[] = []

            if (node.hasAttribute(this.keyName)) {
                ids = node.getAttribute(this.keyName)!.split(',')
            }

            if (ids.indexOf(value) < 0) {
                ids.push(value)
            }

            node.setAttribute(this.keyName, ids.sort().join(','))

            return true
        }
        else
        {
            return false
        }
    }

    remove(node: HTMLElement) {
        node.removeAttribute(this.keyName)
    }

    value(node: HTMLElement) : string {
        return node.getAttribute(this.keyName) || "";
    }
}

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

let customCommentHandler = () => {
    // get the position of the cursor
    let range = this.editor.getSelection();
    if (range) {
        this.editor.formatText(range.index, range.length, "comment", this.counter);
        this.counter += 1;
    }
};

This compiles fine but when I actually try to apply this via the custom handler I get a TypeError: BlotClass.create is not a function at quill.js:181

Any idea as to what I am doing wrong?

edit: forgot to mention that this question kind of answers the same problem: Creating a custom class attributer in QuillJS However, that poster used JavaScript and only instantiated the Attributor instead of deriving it. They solved the problem by importing Parchment differently. I tried that and that makes TypeScript complain that super is not known in my constructor, since Parchment is of type Any. By importing parchment with let Parchment = Quill.import("parchment"); I lose all the type info and my derived Attributor doesn't compile any more.

I found a workaround for now. Apparently import Parchment from "parchment"; doesn't work currently, as has been described in this question: "BlotClass.create is not a function" when trying to create a custom attributor in Quill

When I use let Parchment = Quill.import("parchment"); the compiler complains when I call super. So I "faked" the typeinfo by deriving like this:

let Parchment = Quill.import('parchment');
class Comment extends (Parchment.Attributor.Class as { new(attrName: any, keyName: any, options: any): any; } ){
    constructor(attrName = 'comment', keyName = 'comment') {
        super(attrName, keyName, { scope: Parchment.Scope.INLINE_ATTRIBUTE });
    }

    // rest of the class goes here
}

By supplying the contstructor artificially I can at least call it. It compiles without complaining and works.

Needless to say that this is not a very satisfying solution as I lose benefits of TypeScript, like code completion and proper type checking and I have to add annoying boilerplate code as a workaround.

I still hope there can be a better solution for this.

来源：https://stackoverflow.com/questions/48270372/quilljs-typeerror-when-deriving-custom-attributor

标签

typescript

quill