typescript - 無法使用 Quill 2.0-dev3 創建自訂 BlockEmbed

我們已經使用 Quill 1.3.7 有一段時間。我寫了一些自訂的嵌入 blot，運作正常。後來我們升級到 2.0.0-dev3 以獲得新功能，但這破壞了我們的自訂 blots。當我在工具列中選擇該選項時，我收到以下錯誤：

Class constructor BlockEmbed cannot be invoked without 'new'

這是我嘗試過的一些方法：

import Quill from "quill";

class PageBreak extends Quill.import("blots/block/embed") ...
class PageBreak extends Quill.import("blots/embed") ...
class PageBreak extends Quill.import("parchment").EmbedBlot ...
class PageBreak extends Quill.import("parchment").Embed ...

這些都導致了上述列出的錯誤。

此外，我已經嘗試直接使用 Parchment，但遇到了不同的錯誤（通常是 Parchment 未定義）：

import Parchment from "parchment";

class PageBreak extends Parchment.Embed ...
class PageBreak extends Parchment.EmbedBlot ...

我正在使用 Quill.insertEmbed() 函數來完成這個。我也嘗試過創建一個 Delta 並更新文件。

可以在這裡找到使用我們自訂 PageBreak blot 的範例：https://codesandbox.io/s/vibrant-flower-8kuy2?file=/src/PageBreak.ts

我們的目標是 ES5。

答案＃1

在將 Quill 1.3.7 升級到 Quill 2.0.2 並使用 Typescript 的 Angular (17.3.x) 專案中，我們通過將 BlockEmbed 定義為 typeof Parchment.EmbedBlot 來使它運作:

import Quill from 'quill';
import Parchment from 'parchment';


const BlockEmbed = Quill.import('blots/block/embed') as typeof Parchment.EmbedBlot;

class ImageBlot extends BlockEmbed {
    static blotName = 'customImage';
    static tagName = 'div';

    static create(value): Node {
        const node = super.create(value);
        const child = document.createElement('img');
        child.setAttribute('src', value.url);
        child.setAttribute('width', value.width);
        node.appendChild(child);
        return node;
    }

    static value(node): any {
        return {
            url: node.querySelector('video')?.getAttribute('src'),
            width: node.querySelector('video')?.getAttribute('width'),
        };
    }
}


Quill.register(ImageBlot);