Having trouble generating a unique BlockEmbed with Quill 2.0-dev3

After using Quill 1.3.7 successfully with custom embed blots, we decided to upgrade to 2.0.0-dev3 for new features. However, this upgrade caused our custom blots to break, resulting in the error message:

Class constructor BlockEmbed cannot be invoked without 'new'

We attempted various solutions such as:

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

All of these attempts led to the same error mentioned above.

We also tried utilizing Parchment directly but faced different errors like Parchment being undefined:

import Parchment from "parchment";

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

Our implementation involves using the Quill.insertEmbed() function, and we even experimented with creating a Delta and updating the document.

If you want to see an example with our custom PageBreak blot, check out this link: https://codesandbox.io/s/vibrant-flower-8kuy2?file=/src/PageBreak.ts

It's worth noting that we are targeting es5.

typescriptecmascript-5quillparchment

Answer №1

When updating from Quill version 1.3.7 to Quill version 2.0.2 within an Angular project running Typescript (version 17.3.x), we were able to make it work by explicitly 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);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Type Conversion in Typescript

After receiving JSON data that can be in the form of a TextField object or a DateField object, both of which inherit from the Field superclass, I am faced with the task of converting this JSON into a Field object. To further complicate matters, I need to ...

jsonangulartypescript

What is the reason behind TypeScript requiring me to initialize a property even though I am retrieving its value from a local reference?

I am just beginning to explore Angular. This is the template for my custom component: <div class="row"> <div class="col-xs-12"> <form action=""> <div class="ro"> <d ...

angulartypescript

The parameter type 'Element | null' cannot be assigned to the type 'Element | VirtualElement'

I am facing some difficulties in correctly typing this code as I keep encountering an error when using the popper component. The documentation is not very clear and my experience with Typescript is limited. The error message reads: "Argument of type &apo ...

reactjstypescript

The error code TS2345 indicates that the argument '{ read: typeof ElementRef; }' cannot be assigned to the parameter '{ read?: any; static: boolean; }'

Currently in the process of updating my Angular application from version 7 to version 8. Upon running ng serve, I encounter the following error: Error TS2739: Type '{}' is missing the following properties from type 'EmployeeModel': stat ...

angulartypescriptnpm

What is the reason behind being able to assign unidentified properties to a literal object in TypeScript?

type ExpectedType = Array<{ name: number, gender?: string }> function go1(p: ExpectedType) { } function f() { const a = [{name: 1, age: 2}] go1(a) // no error shown go1([{name: 1, age: 2}]) // error displayed ...

javascriptreactjsangulartypescript

Struggling to bring in { useActionState } from 'react' while trying to follow the latest next.js tutorial with next.js v15.0.0-canary.28, react v19.0.0-rc, and types/react v18.2.21

Currently, I am following the tutorial on next.js available at https://nextjs.org/learn/dashboard-app I have reached chapter 14, which focuses on enhancing accessibility, located at https://nextjs.org/learn/dashboard-app/improving-accessibility During on ...

javascriptreactjstypescriptnext.js

What could be the reason that the _.sample function in lodash is producing a return type of number

Sample Scenario 1 const myNumber = _.sample([1, 2, 3]); // Anticipated data type: number // Real data type: number Sample Scenario 2 const arr = [1, 2, 3] const myNumber = _.sample(arr); // Anticipated data type: number // Real data type: number | undefin ...

typescriptlodash

Tips for filtering data using an array within an object containing arrays

Below is the provided information: userRoom = ['rm1']; data = [{ name: 'building 1', building: [{ room: 'rm1', name: 'Room 1' },{ room: 'rm2', name: ' ...

javascripttypescript

What could be causing the error that pops up every time I attempt to execute a git push

When I executed the following command in git git push origin <the-name-of-my-branch> I encountered the following warning message Warning: The no-use-before-declare rule is deprecated since TypeScript 2.9. Please utilize the built-in compiler check ...

angulartypescriptgit

How to pass a single property as a prop in TypeScript when working with React

I have a main component with a parent-child relationship and I am looking for a way to pass only the product name property as props to my "Title" component. This way, I can avoid having to iterate through the information in my child component. To better i ...

reactjstypescript

Converting literal types within simulated JSON data

I'm currently working with a JSON object that looks like this: { "elements": [ { "type": "abstract" }, { "type": "machine" }, { "type": "user" ...

javascriptjsontypescripttypes

The button with type Submit inside the form is failing to trigger the Form Submit Event

Having an issue with a custom LoadingButton component in my React TypeScript project using Material-UI (MUI) library. The problem occurs when using this LoadingButton within a form with an onSubmit event handler. The LoadingButton has type="submit&quo ...

javascriptreactjsnode.jstypescript

Concerning the utilization of the <mat-toolbar> element within Angular

Is the mat-toolbar in Angular going to persist across all components and pages of the application? Will it be present in every component throughout the application? <mat-toolbar color="primary"> <mat-toolbar-row> <span>Welcome to C ...

angulartypescriptangular-material

Having issues with Fullcalendar's custom view called "vertical resource view" functioning improperly

I am currently using fullcalendar 4 with angular and I am trying to implement a custom view based on this example: https://fullcalendar.io/docs/v4/vertical-resource-custom-demo The view I require spans across 5 days (Monday to Friday) for just one resou ...

angulartypescriptfullcalendarfullcalendar-4

Exploring Type Definitions in Vue Apollo version 4 and the Composition API

How can TypeScript be informed that Variables is the interface for the arguments of the myMutation function? interface Variables { uuid: string; value: string; } const { mutate: myMutation } = useMutation(myGqlMutation); I am look ...

typescriptvue.jsapollovue-apollovue-composition-api

looking to restrict the interface to only specific types

Currently working with TypeScript and I have a query regarding the utilization of TypeScript interface. Is there a way to selectively extract and output specific key types from the interface being used? While I am able to isolate the type I need, I am inte ...

javascripttypescript

What methods can I utilize from Google Maps within Vuex's createStore()?

Currently, I am in the process of configuring my Vuex store to hold an array of Marker objects from the Google Maps Javascript API. Here is a snippet of how my createStore function appears: import { createStore } from "vuex"; export default ...

javascripttypescriptvue.jsgoogle-mapsvuex

Angular 8 allows for dynamic updates as users provide input and make selections with check marks

When using Angular 8, if a user inputs "$10" and then clicks on it (using the OnClick event), the box below should be updated with the user input and the entire box should be selected like the example shown in the picture. I would greatly appreciate any t ...

javascriptangulartypescriptuser-interfaceangular8

Achieving selective exclusion of specific keys/values while iterating through an array and rendering them on a table using Angular

Currently facing a hurdle and seeking advice I am developing an angular application that fetches data from an API and presents it on the page The service I am utilizing is named "Api Service" which uses HTTPClient to make API calls apiservice.service.ts ...

arraysangulartypescriptrxjs6

Tips for incorporating ACE Editor syntax highlighting rules into an Angular application

I am attempting to create custom highlighter rules by referencing examples from here and here. import { Component, OnInit, ViewChild, ElementRef } from '@angular/core'; import * as ace from 'ace-builds'; import 'ace-builds/src- ...

angulartypescriptace-editor