1

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?

HubertBlu
  • 747
  • 1
  • 7
  • 20

0 Answers0