Я пытаюсь реализовать потенциально перекрывающийся атрибут, как в этом вопросе: Перекрытие встроенных аннотаций с 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, такие как завершение кода и правильная проверка типов, и мне приходится добавлять раздражающий шаблонный код в качестве обходного пути.
Я все еще надеюсь, что для этого может быть лучшее решение.