React quill custom image handler module causing typing issues with the editor

Question

I am using React Quill as the text editor. This works fine until I add the custom image handler. If I add the image handler as below, I can't type into the editor. Typing lose focus on every single keypress.

const modules = {
    toolbar: {
        container: [
            [{'header': [3, 4, 5, 6, false]}],
            ['bold', 'italic', 'underline', 'strike', 'blockquote', 'code'],
            [{color: []}, {background: []}],
            [{'list': 'ordered'}, {'list': 'bullet'}, {'indent': '-1'}, {'indent': '+1'}],
            ['link', 'image'],
            ['clean']
        ],
        handlers: {
            image: imageHandler
        }
    },
    clipboard: {
        // toggle to add extra line breaks when pasting HTML:
        matchVisual: false,
    }
};

function imageHandler() {
    console.log("custom image handler");
}

If I comment out the image: imageHandler, editor works perfectly. Here is the codesanbox example

Am I writing the custom module correctly?

Answer 1

TL;DR

This is what helped me:

https://github.com/zenoamaro/react-quill/issues/309#issuecomment-654768941 https://github.com/zenoamaro/react-quill/issues/309#issuecomment-659566810

---

The modules object passed directly into the component makes it render all modules on every keypress. To make it stop, you have to use the concept of memoization in react. You can use the useMemo hook to wrap the modules and then pass that into the component.

  const modules = useMemo(() => ({
    toolbar: {
      container: [
        [{ header: [1, 2, false] }],
        ['bold', 'italic', 'underline'],
        [{ list: 'ordered' }, { list: 'bullet' }],
        ['image', 'code-block']
      ],
      handlers: {
        image: selectLocalImage
      }
    }
  }), [])

and then in the component:

<ReactQuill placeholder="Write some text..."
  value={text}
  modules={modules}
  onChange={onChange} />