quill: Extending BlockEmbed with typescript

I was able to appease the compiler and avoid the runtime errors by declaring the type of BlockEmbed as Parchment.default.Embed:

import * as Parchment from "parchment"
const BlockEmbed = Quill.import("blots/block/embed") as typeof Parchment.default.Embed;

class Foo extends BlockEmbed {
    ...
}

That’s worked perfectly for me (and without Parchment)

`import * as QuillNamespace from ‘quill’;

const Quill: any = QuillNamespace; const BlockEmbed = Quill.import(‘blots/block/embed’);

export class HorizontalRule extends BlockEmbed { }

HorizontalRule.blotName = ‘divider’; HorizontalRule.tagName = ‘hr’;

Quill.register(HorizontalRule);`

put this code in the component or module you need, and then Quill will support “<hr>” tag. same thing applies to other html tags (but may need different package to be imported).

Source: StackOverFlow

It took a lot of trial and error for me to figure out too. This might not be exactly right but here goes…

Since Quill is defined globally from the JS file, you can use it here. declare var Quill: any; just let’s typescript know that the variable is defined from outside of the scope of this file. Then your custom blot needs to extend BlockEmbed, so that is the only class you need to import from quill.

Ok, I tried experimenting with your code in my own project and was able to reproduce the error you are getting. Try changing this:

import * as Quill from 'quill';
import * as Parchment from 'parchment';
const Block = Quill.import('blots/block/embed');
class BlockEmbed extends Parchment.default.Embed {}
BlockEmbed.prototype = Block.prototype;

to this:

declare var Quill: any;
const BlockEmbed = Quill.import('blots/block/embed');

In my Angular 2 typescript environment,Quill.import() return any type which cannot be extended. So this is my approach:

import * as Quill from 'quill';
import * as Parchment from "parchment";
const QuillBlockEmbed = Quill.import('blots/block/embed');

class BlockEmbed extends Parchment.default.Embed {}
BlockEmbed.prototype = QuillBlockEmbed.prototype;

class Video extends BlockEmbed {

}