Quilljs: TypeError при получении пользовательского атрибута

Я пытаюсь реализовать потенциально перекрывающийся атрибут, как в этом вопросе: Перекрытие встроенных аннотаций с Quill и эта проблема: https://github.com/quilljs/quill/issues/1216< /а>

Разница только в том, что я использую TypeScript. Это отрывок из моего кода:

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

Это прекрасно компилируется, но когда я на самом деле пытаюсь применить это через пользовательский обработчик, я получаю TypeError: BlotClass.create is not a function в quill.js:181

Любая идея относительно того, что я делаю неправильно?

редактировать: забыл упомянуть, что этот вопрос отвечает на ту же проблему: Создание пользовательского атрибута класса в QuillJS Однако этот постер использовал JavaScript и только создавал экземпляр атрибута, а не производил его. Они решили проблему, импортировав Parchment по-другому. Я попробовал это, и это заставляет TypeScript жаловаться, что super не известен в моем конструкторе, поскольку Parchment имеет тип Any. Импортируя пергамент с помощью let Parchment = Quill.import("parchment");, я теряю всю информацию о типе, и мой производный атрибут больше не компилируется.


Я нашел обходной путь на данный момент. По-видимому, import Parchment from "parchment"; в настоящее время не работает, как было описано в этом вопросе: BlotClass.create не является функцией при попытке создать собственный атрибут в Quill.

Когда я использую let Parchment = Quill.import("parchment");, компилятор жалуется, когда я вызываю super. Итак, я «подделал» информацию о типе, выведя ее следующим образом:

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
}

Предоставив конструктор искусственно, я могу, по крайней мере, вызвать его. Компилируется без нареканий и работает.

Излишне говорить, что это не очень удовлетворительное решение, поскольку я теряю преимущества TypeScript, такие как завершение кода и правильная проверка типов, и мне приходится добавлять раздражающий шаблонный код в качестве обходного пути.

Я все еще надеюсь, что для этого может быть лучшее решение.


person MadMonkey    schedule 15.01.2018    source источник
comment
stackoverflow.com/questions/48373448/ похоже на аналогичную проблему, но ее не было в Typescript, поэтому я смог попробовать ее. Ответ там, когда ОП отвечает, может быть тем же ответом для этой проблемы.   -  person jhchen    schedule 22.01.2018