DEV Community

ReactQuill with NextJS

A7U on May 02, 2021

Hey everyone, just wanted to share this with you. So I've been trying to find rich editors that were compatible with NextJS. Couldn't find any but ...

Read full post

Munir Ali Mohammed • Jan 23 '22

Arigato Guzaimas

Amresh Prasad Sinha • Jan 20 '22

Thanks a lot! You saved my time!

CY • Jun 30 '21

Thank you! This is very helpful.

Umesh Chaudhary • Aug 20 '21

How do you import ReactQuill modules (quill-image-resizing -module) on the dynamic imports ?

foysal • May 13

same pblm

Mobiot Yves André • Aug 20 '22 • Edited

i believe , you made a typpo in the beginning of your post

import dynamic from 'react/dynamic'

(that library don't exist), instead of

import dynamic from 'next/dynamic';

you corrected in your final code

A7U • Sep 12 '22

Thank you for noticing. Fixed!

Yoza Wiratama • May 6 '22

can not use ref for image upload handler

Wendell D. Enc • Aug 8 '22 • Edited

ref does not work with dynamic import. you can use this

dynamic import

const QuillNoSSRWrapper = dynamic(
  async () => {
    const { default: RQ } = await import('react-quill');
    // eslint-disable-next-line react/display-name
    return ({ forwardedRef, ...props }) => <RQ ref={forwardedRef} {...props} />;
  },
  { ssr: false }
);

create ref
const quillRef = useRef(null)

jsx

<QuillNoSSRWrapper
            forwardedRef={quillRef}
            ...
          />

then in image cllback handler you can now access the quill object and range
const quillObj = quillRef?.current?.getEditor();
const range = quillObj?.getSelection();

then append the image url after upload to the editor's current range

quillObj.editor.insertEmbed(range.index, 'image', data?.secure_url);

here the handler:

const quillImageCallback = async () => {
    const input = document.createElement('input');
    input.setAttribute('type', 'file');
    input.setAttribute('accept', 'image/*');
    input.click();

    input.onchange = async () => {
      const file = input.files ? input.files[0] : null;
      let data = null;
      const formData = new FormData();
      formData.append('upload_preset', 'fixer-upper-v1');

      const quillObj = quillRef?.current?.getEditor();
      const range = quillObj?.getSelection();

      if (file) {
        formData.append('file', file);
        formData.append('resource_type', 'raw');
        formData.append('folder', `- ${fileData?.name}`);

        const responseUpload = await fetch(
          `${process.env.NEXT_PUBLIC_IMAGE_UPLOAD}/upload`,
          { method: 'POST', body: formData }
        );

        data = await responseUpload.json();
        if (data.error) {
          console.error(data.error);
        }

        quillObj.editor.insertEmbed(range.index, 'image', data?.secure_url);
      }
    };
  };

Ivan Farkas • Jan 4 '23 • Edited

Getting an error for forwardedRef
Property 'forwardedRef' does not exist on type '{}'.ts(2339)

return ({ forwardedRef, ...props }) => <RQ ref={forwardedRef} {...props} />;

GaminiRainMaker • Apr 5 '23

Same Issue I am facing @ivanfarkas .Did you got any solution to it.

L. Rommy Arbantas • Aug 29 '22

Many thanks for this!! ❤️

Karthikeyan Dharmalingam • Jun 6 '21

Server Error
TypeError: Quill.register is not a function

This error happened while generating the page. Any console logs will be displayed in the terminal window.

dev-to-uploads.s3.amazonaws.com/up...

A7U • Jun 9 '21

Can you show me how you imported React-quill?

uttam vishvakarma • Sep 17

Did you solution to it?

Abdulla • Dec 27 '23

When i use on reactquill with nextjs each onchange the whole component re-render how can i resolve this

I have also tried the same the above mention but still the whole component re-render problem persist

Ankit kumar • Apr 16 '22 • Edited

toolbar is appearing twice. i don't know how to fix it.. i am using quill inside form element

Robersom Aquino • Jul 11 '22

Add this CSS in your global style:

.quill > .ql-toolbar:first-child {
display: none !important;
}

Or in your next.config.js
reactStrictMode: false,

MarceloPatropi • May 27 '22

SAme here. Didi you find a solution?

Marco Mesen Campos • Jul 20 '22 • Edited

Simple solution, I guess not the best:

// component:
<Editor value={html} onChange={setHtml} id="html-editor" />

// css
  #html-editor > div:nth-child(1) {
    display: none !important;
  }

I don't think it's the best either, but definitely better than the previous one

export function TextEditor(props: TextEditorProps) {
  const refElement = useRef<HTMLDivElement>(null);
  const [html, setHtml] = useState('The template will be here');

  useEffect(() => {
    if (refElement.current?.firstChild) {
      const children = Array.from(
        refElement.current.firstChild.childNodes
      ) as HTMLElement[];
      const duplicateTooltips = children.filter((el) => {
        return el.classList.contains('ql-toolbar');
      });
      if (duplicateTooltips.length > 1) {
        duplicateTooltips[0].remove();
      }
    }
  }, [refElement.current]);

  return (
    <div ref={refElement}>
      <Editor value={html} onChange={setHtml} />
    </div>
  );
}

reachmeatanytime7 • Sep 19 '21

Thank you!! This helped me :)

foysal • May 13

const QuillNoSSRWrapper = dynamic(() => import("react-quill"), {
ssr: false,
});
QuillNoSSRWrapper.register("modules/imageResize", ImageResize,);

but I want to register imageResizer it's showing error that imageResizer not exist

tidianeb5 • Jul 28 '21

thanks you ! this help me lot

Jitender choudhary • Oct 16

i used reat-quill for the editor. please give me some reviews so i can improve more code4web.netlify.app/
(btw i get inspired to make this from dev.to so i kinda used their editor UI )