Disable any user input using ReactQuill library

Question

I'm trying to use ReactQuill just to show some rich text that I have, and therefore I don't want that it can receive any input or typing from the user. Reason, I have another library (ReactAce), and ReactQuill is causing a bug that when I type the 'delete' key, it made the ReactAce stops working...

Below you can see the example, that I am trying to disable the Quill instance.

quillRef = React.createRef();    

componentDidMount = () => {
  console.log(this.quillRef.current.editor);

  this.quillRef.current.editor.enable(false);   // undefined
};

render () { 
    <ReactQuill
      readOnly
      value={info}
      ref={this.quillRef}
      modules={quillConfig}
    >
}

If you know some way to stop the ReactQuill to receive any input from the keyboard, I would be glad because I think that is causing the bug.

Thank you!

Answer 1

You can add event listener on "keydown" and ref to ReactQuill

this.quillRef.current.addEventListener('keydown', null);

Answer 2

in React Quill 1.3.5, you can add the readOnly prop as true. It will disable your editor like input tag when disabled.

Answer 3

You can just use the readOnly property as the following:

<ReactQuilltheme="snow" readOnly={true} />

Of course you need to make it dynamic by using useState()

const [disabled, setDisabled] = useState(true);
    
return (
    <ReactQuilltheme="snow" readOnly={disabled} />
)