CODEWITHSUNDEEP
typescriptecmascript-5quillparchment
Hunter
Hunter

Reputation: 21

Unable to create custom BlockEmbed using Quill 2.0-dev3

We have been using Quill 1.3.7 for a while. I had some custom embed blots written that were working without issue. We then upgraded to 2.0.0-dev3 to gain new functionality and this has broken our custom blots. I receive the following error when I select the option in the toolbar:

Class constructor BlockEmbed cannot be invoked without 'new'

Here's some of what I've tried:

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 ...

These all resulted in the above listed error.

Additionally, I've gone down the route of using Parchment directly with different errors (usually Parchment being undefined):

import Parchment from "parchment";

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

I'm using the Quill.insertEmbed() function to accomplish this. I've also attempted creating a Delta and updating the document.

An example with our custom PageBreak blot can be found here: https://codesandbox.io/s/vibrant-flower-8kuy2?file=/src/PageBreak.ts

We are targeting es5.

Upvotes: 2

Views: 768

Answers (1)

cello
cello

Reputation: 5486

When upgrading from Quill 1.3.7 to Quill 2.0.2 in an Angular (17.3.x) project with Typescript, we got it working by defining BlockEmbed as 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);

Upvotes: 0

Related Questions