I am currently using React Quill to create a template creator/editor, and used the Quill-Image-Resize-Module for resizing of images. It was working up until the point that I needed to hoist [HTML, setHTML] to the parent component - now they are passed in as props and everything works apart from image resizing.
import React from "react";
import ReactQuill, { Quill }from "react-quill";
import ImageResize from 'quill-image-resize-module-react';
import "react-quill/dist/quill.snow.css";
const Block = Quill.import("blots/block");
Block.tagName = "DIV";
Quill.register(Block, true);
Quill.register('modules/imageResize', ImageResize);
const keyboardBindings = {
linebreak: {
key: 13,
handler: function (range, _context) {
this.quill.clipboard.dangerouslyPasteHTML(
range.index,
"<p><br/></p>"
);
}
}
};
const modules = {
toolbar: [
["bold", "italic", "underline", "header", "image", "code-block"],
[{ list: "ordered" },{ list: "bullet" }],
[{ header: [1, 2, false] }]
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'color': [] }, { 'background': [] }],
],
keyboard: {
bindings: keyboardBindings
},
imageResize: {
parchment: Quill.import('parchment'),
modules: ['Resize', 'DisplaySize', 'Toolbar']
}
};
const formats = [
"bold", "italic", "underline", "list", "bullet", "header", "image", "code-block"
];
function Editor({HTML, setHTML, setText}) {
const handleChange = (content, _delta, _source, editor) => {
const html = content ? content.replace(/style\s*?=\s*?([‘"])[\s\S]*?\1/, "") : "";
const text = editor.getText(html);
setHTML && setHTML(html);
setText && setText(text);
}
return (
<ReactQuill
className="ql-editor"
style={{ height: "600px", overflow: "auto" }}
theme="snow"
modules={modules}
formats={formats}
value={HTML}
onChange={handleChange}
/>
);
}
export default Editor;
So my question is can anybody help me to understand why and the best way to resolve/workaround?