The quill-image-resizing -module is not working properly, the image stays highlighted with resize options even clicking outside the editor

[sarang-naico]

When I integrated the quill-image-resize-module with react-quill, the resizer stays in the screen even clicking outside the editor. The resizer getting closed when we click inside the editor. This is causing some bugs like, sometimes the resizing window is positioned outside of the image. @chrismcv @jdhuntington @daggmano @Sajam @jacktrades Thanks!

[M4gie]

@sarang-naico Any news for this issue ?

[sarang-naico]

@M4gie I just edited the quill-image-resize library in-order to fix this issue

[sarang-naico]

I can share the code if you want @M4gie

[M4gie]

I found a solution here for my issue https://github.com/zenoamaro/react-quill/issues/224#issuecomment-311933020

[ashishBharadwaj]

@sarang-naico : Could you please share the code ? Facing the same issue. @M4gie : Not sure how registering the module could solve this problem ?

[M4gie]

import React from 'react'
import ReactQuill, { Quill } from 'react-quill'
import 'react-quill/dist/quill.snow.css'
import ImageResize from 'quill-image-resize-module-react'
Quill.register('modules/imageResize', ImageResize)

function TextEditor(props) {

    const modules = {
        toolbar: [

            [{'header': [1, 2, 3, 4, 5, 6, false]}],

            ['bold', 'italic', 'underline', 'strike'],                                                      // toggled buttons
            ['blockquote', 'code-block'],

            [{'list': 'ordered'}, {'list': 'bullet'}, {'indent': '-1'}, {'indent': '+1'}, {'align': []}],
            [{'script': 'sub'}, {'script': 'super'}],                                                       // superscript/subscript
            [{'direction': 'rtl'}],                                                                         // text direction,

            [{'color': []}, {'background': []}],                                                            // dropdown with defaults from theme

            ['link', 'image'],

            ['clean']                                                                                       // remove formatting button
        ],
        imageResize: {
            // parchment: Quill.import('parchment'),
            modules: [ 'Resize', 'DisplaySize' ]
        }
    }

    return (
        <ReactQuill
            value={props.content}
            onChange={(value) => {
                props.setContent(value)
            }}
            modules={modules}
        />
    )
}

export default TextEditor; 

This is my Editor component, I didn't edit my webpack config.

[ashishBharadwaj]

@M4gie Did it solve the actual problem ?

When I integrated the quill-image-resize-module with react-quill, the resizer stays in the screen even clicking outside the editor.

[Kamez]

Did you all solve the problem? I use Nextjs and can't find any solutions.

[ashishBharadwaj]

Yes I did. But I had to make changes in the image resize module

You can refer to my repository : https://github.com/ashishBharadwaj/flawesome

Image-resize Component: https://github.com/ashishBharadwaj/flawesome/blob/master/src/components/imge-resize/ImageResize.js

I added a blur event listener like so:

this.quill.root.addEventListener('blur', this.handleFocusOut);

handleFocusOut = (evn) => {
        if(this.img){
            this.hideOverlay();
        }
}

I decided to include the code in my repo because apart from this I had several other use cases that I needed to handle like resized image state retention in case the editor is reinitialized with some content. And I was not able to build after forking the original repository

[Kamez]

@ashishBharadwaj It's not working with NextJS

[nithinkashyapn]

Hi, any update regarding the same? Stuck with a similar problem. Using NextJS.

[nitink66]

Same here, don't know how to implement it using Nextjs

[gladmo]

@nitink66 @nithinkashyapn @Kamez

same Next.js problem.

use this next.config.js work for me:

module.exports = {
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    config.module.rules.push({
      test: /\.js$/,
      exclude: /node_modules(?!\/quill-image-drop-module|quill-image-resize-module)/,
      loader: 'babel-loader',
    })

    config.plugins.push(new webpack.ProvidePlugin({
      'window.Quill': 'quill'
    }))

    return config
  }
};

register:

import ReactQuill, { Quill } from "react-quill";
import ImageResize from 'quill-image-resize-module';
Quill.register('modules/ImageResize', ImageResize);

[pk1997]

Did anyone solve the problem in nextjs?

[junggri]

image doesnt resize is there any solution?

import { Quill } from "react-quill";
import ImageResize from "quill-image-resize-module";

Quill.register("modules/ImageResize", ImageResize);

export const modules = {
   syntax: true,
   ImageResize: {
      handleStyles: {
         displaySize: true,
         backgroundColor: "black",
         border: "none",
         color: "white",
      },
      modules: ["Resize", "DisplaySize", "Toolbar"],
   },
   toolbar: [
      // [{ header: "1" }, { header: "2" }],
      [{ font: [] }],
      [{ size: ["small", false, "large", "huge"] }], // custom dropdown
      ["bold", "italic", "underline", "strike"],
      ["blockquote", "code-block"],
      [{ color: [] }, { background: [] }], // dropdown with defaults from theme
      [{ align: [] }],
      [{ list: "ordered" }, { list: "bullet" }, { indent: "-1" }, { indent: "+1" }],
      ["link", "image", "video"],
   ],

};`

- [ ] 

[xiaoshengaimm]

Did anyone solve the problem in nextjs?

[ThalesM1]

I'm not aware of any resolution of this so far... looking at the files there is no "module/imageResize" class on quill folder.., maybe the author injected or somehow

[okjack365]

This might be a possible solution:

document.addEventListener('click', e => {
  const editorEl = document.querySelector(YOUR_EDITOR_ID/CLASS);
  if (!editorEl?.contains?.(e?.target)) { // click outside editor
    // do something such as cancel highlight        
  }
});

[yeasin181015]

@M4gie I just edited the quill-image-resize library in-order to fix this issue

Can you provide me the code?

[pranav-sharma-au5]

useEffect(() => { const quillEditorContext = textEditorRef.current; if (!quillEditorContext) return const quill = quillEditorContext.getEditor(); const imageResize = quill.getModule("imageResize") const quillRoot = quill.root const hideOverlay = async (event) => { if (!quillRoot.contains(event.target)) { imageResize.hide() } } document.getElementById("next").addEventListener("click", hideOverlay) return () => { document.getElementById("next").removeEventListener("click", hideOverlay) } }, [value])

[singleseeker]

Does anyone here know how to use this in next.js?