React Quill + NextJs : Add custom text on button click

Question

I am using [email protected], [email protected] and [email protected].

I am trying to add custom text on button click but I didn't get editor ref. Can you please help me.

import dynamic from 'next/dynamic'
const ReactQuill = dynamic(() => import('react-quill'), {
    ssr: false,
})


const insertText = (quillRef) => () => {
    console.log('Ref', quillRef)
    var range = quillRef.getSelection()
    let position = range ? range.index : 0
    quillRef.insertText(position, 'Hello, World! ')
}

const editorRef = useRef()

<Button onClick={insertText(editorRef.current)}>
    Add Text
</Button>
                                                
<ReactQuill
    ref={editorRef}
    preserveWhitespace={true}
    value={value}
    onChange={handleChange}
/>

Answer 1

In case you haven't solved this issue, I had the same problem but found this issue on GitHub suggesting to replace the dynamic import with the following:

const ReactQuill = typeof window === 'object' ? require('react-quill') : () => false;

Answer 2

Here is my solution searching all day on Google. And It works for me. hope it works for others.

import dynamic from "next/dynamic";
import "react-quill/dist/quill.snow.css";
import "react-quill/dist/quill.bubble.css";

const ReactQuill = dynamic(
async () => {
    const { default: RQ } = await import("react-quill");
    return ({ forwardedRef, ...props }) => <RQ ref={forwardedRef} {...props} />;
},
{
    ssr: false,
}

// inside component
let reactQuillRef = useRef(null);
return (
       <ReactQuill
            forwardedRef={reactQuillRef}
            {...rest}
        />
);