React CodeMirror 不可编辑

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

Answer 2

import CodeMirror from '@uiw/react-codemirror';
import { javascript } from '@codemirror/lang-javascript';

export default function App() {
  return (
    <CodeMirror
      value="console.log('hello world!');"
      height="200px"
      extensions={[javascript({ jsx: true })]}
      onChange={(value, viewUpdate) => {
        console.log('value:', value);
      }}
    />
  );
}