'Error : Delta is not a constructor' while using Clipboard in Module

First of all, Great Job.

My goal is to check if any <img> is pasted in the editor. If yes, then I want to call my backend API for the storage of the image and then replace the base64 version of the src with the URL sent by the API (You already know the custom image handling stuff).

I figured that I have to use the clipboard in the Modules for the said task. So here is my starter code for the same: SandBox Link

import React from "react";
import ReactQuill, { Delta } from "react-quill";
import "react-quill/dist/quill.snow.css";

const customImgForPaste = (node, delta) => {
  console.log("The node here : ", node, "  , Delta : ", delta);
  return delta.compose(new Delta().retain(delta.length(), {}));
};

const modules = {
  toolbar: [
    [{ header: "1" }, { header: "2" }, { font: [] }],
    [{ size: [] }],
    ["bold", "italic", "underline", "strike", "blockquote"],
    [
      { list: "ordered" },
      { list: "bullet" },
      { indent: "-1" },
      { indent: "+1" }
    ],
    ["link", "image", "video"],
    ["clean"]
  ],
  clipboard: {
    matchers: [
            ["img", customImgForPaste]
       ],
  }
};

export default function App() {
  const [text, setText] = React.useState("");

  const onChange = (text) => {
    setText(text);
  };

  return (
    <ReactQuill
      theme="snow"
      placeholder="Type here"
      value={text}
      onChange={onChange}
      modules={modules}
    />
  );
}

But it says Error: Delta is not a constructor. What am I doing wrong? How can I replace the image’s src with the API’s response’s URL? Many thanks.

[ncovercash]

@giovannipds try this:

import type { Delta as DeltaType } from "quill";
import ReactQuill, { Quill } from "react-quill";

...

const Delta = Quill.import("delta") as typeof DeltaType;

This will give the Delta the exact same type as the regular quill Delta

[gatanaso]

Hi @AjayDhimanELS,

You can try the following way of loading Delta:

import ReactQuill, { Quill } from 'react-quill';
const Delta = Quill.import('delta');

BR