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;