React Quill + NextJs : Add custom text on button click

Question

I am using next@11.1.3, react@17.0.2 and react-quill@1.3.5.

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}
/>

@juliomalves, Sorry, I forgot to add 'editorRef.current' into stackoverflow. I updated my code. in editorRef.current I get `retry` function instead of editor ref. — Ashish Mehta, Jan 11 '22 at 14:28

score 1 · Answer 1 · answered Mar 18 '22 at 14:14

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;

answered Mar 18 '22 at 14:14

BardGyver

11
1

score 0 · Answer 2 · answered May 15 '23 at 19:32

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}
        />
);

React Quill + NextJs : Add custom text on button click

2 Answers2