React CodeMirror is not editable

Question

I am making use of CodeMirror for react. I am referring to the docs but I am unable to make it editable.

Here's the code :

import { Controlled as CodeMirror } from 'react-codemirror2';
import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/material.css';
import 'codemirror/mode/javascript/javascript';

const ResponseMappings = () => {
  const [code, setCode] = React.useState('{ name: "Karan" }');
  return (
    <CodeMirror
      value={code}
      options={{
        mode: 'javascript',
        theme: 'material',
        lineNumbers: true,
        readOnly: false,
      }}
      onChange={(editor, data, value) => setCode(value)}
    />
  );
};

export default ResponseMappings;

Would appreciate the help.

Answer 1

There are two versions of the ReactCodeMirror - Controlled and UnControlled.

In your example, you used Controlled ReactCodeMirror. It means that you need to change the code via state and you need to do it in the onBeforeChange event. Like This:

import { Controlled as CodeMirror } from 'react-codemirror2';
import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/material.css';
import 'codemirror/mode/javascript/javascript';

const ResponseMappings = () => {
  const [code, setCode] = React.useState('{ name: "Karan" }');
  return (
    <CodeMirror
      value={code}
      options={{
        mode: 'javascript',
        theme: 'material',
        lineNumbers: true,
        readOnly: false,
      }}
      onBeforeChange={(editor, data, value) => {
        setCode(value);
      }}
    />
  );
};