Won't work with react-quill v2.0.0

[fdemello]

I followed the example for react-quill. I have:

import 'react-quill/dist/quill.snow.css'
import ImageUploader from 'quill-image-uploader'
import ReactQuill, { Quill } from 'react-quill'

Quill.register('modules/imageUploader', ImageUploader)

and when I add imageUploader to modules the component doesn't render.

[hunandika]

Hi @fdemello, I using react-quill version 2.0.0 and work properly. I try define modules config inside react function component react-quill didn't work. Then I try define modules config outside function component now working properly. Here is my snippet code, hope it helps you

package.json:

"quill-image-uploader": "^1.2.3",
"react-quill": "^2.0.0",

QuillEditor.js:

import React, { forwardRef } from 'react';
import ReactQuill, { Quill } from 'react-quill';
import 'react-quill/dist/quill.snow.css';
import ImageUploader from 'quill-image-uploader';
import MarkdownShortcuts from 'quill-markdown-shortcuts';

Quill.register('modules/markdownShortcuts', MarkdownShortcuts);
Quill.register('modules/imageUploader', ImageUploader);

// <-- Define modules outside function component -->
const modules = {
  toolbar: [
    [{ header: '1' }, { header: '2' }, { font: [] }],
    [{ size: [] }],
    ['bold', 'italic', 'underline', 'strike'],
    [{ list: 'ordered' }, { list: 'bullet' }],
    ['link', 'image'],
    ['clean']
  ],
  clipboard: {
    matchVisual: false
  },
  markdownShortcuts: {},
  imageUploader: {
    upload: (file) => {
      console.log(file);
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve('https://source.unsplash.com/FV3GConVSss/900x500');
        }, 3500);
      });
    }
  },
};

// <-- Define formats outside function component -->
const formats = [
  'header',
  'font',
  'size',
  'bold',
  'italic',
  'underline',
  'strike',
  'link',
  'list',
  'bullet',
  'image',
  'imageBlot'
];

export default forwardRef((props, ref) => {
return (
    <EditorWrapper>
      <ReactQuill
        theme="snow"
        modules={modules}
        formats={formats}
      />
    </EditorWrapper>
  );
}

[patrick-hertling]

Same problem. The here mentioned solution works, but:

What if you need to pass some parameters from the component into the imageUploader function? Then we run into the problem again. Has anybody figured out a solution? For now I think I am just going to use quill and not react-quill

[Innders]

I have this exact issue. Based on the component props I want to change the endpoint I post the image to.

http://localhost:3000/api/projects/${projectName}/thumbnails

When the projectName is hardcoded and the modules object is defined outside of the component it works, but as soon as I define the modules inside the component it breaks.

I've spent a lot of time trying to debug this with no luck.

[Innders]

After extensive testing there's good news and bad news

I think this is an issue with react-quill and not quill-image-uploader. The issue seems to be the function passed in the modules config object (imageUploader: upload: (file) =>...). Add a function to any module and it will break in this way, no idea why though.

Good news, totally by accident I got everything working with using a useMemo, which is even stranger 🤷

const modules = useMemo(() => getModules(projectName), [projectName])

[Innders]

So it turns out my fix didn't really work.

Quill will disappear if projectName changes because the useMemo recalculates and that's when react-quill will disappear.

It's a well documented issue of react-quill issue and even has a simple fix in this PR. Unfortunately react-quill is no longer maintained and this PR never got merged.

Because this fix is so critical to me, I have forked react-quill with the fix included.

https://www.npmjs.com/package/react-quill-ayon