Search code examples
reactjscodemirror

Can someone please help me enable code folding using react-codemirror2?

My web app is currently using react-codemirror2 to display JSON data. Unfortunately the JSON files get so huge that scrolling through the data becomes a problem. I want to implement code folding to help ease users of the app, but currently having problem finding any documentation on how to do this.

I tried adding foldGutter: true to the options prop, but had no success.

Solution

  • Have you imported all the necessary addons for fold? try this

    import { UnControlled as CodeMirror } from "react-codemirror2";
import "codemirror/mode/javascript/javascript";
import "codemirror/addon/fold/foldcode";
import "codemirror/addon/fold/foldgutter";
import "codemirror/addon/fold/brace-fold";
import "codemirror/lib/codemirror.css";
import "codemirror/addon/fold/foldgutter.css";

export default function App() {
  return (
      <CodeMirror
        value="<h1>I ♥ react-codemirror2</h1>"
        options={{
          mode: "javascript",
          lineNumbers: true,
          gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
          foldGutter: true,
        }}
        onChange={(editor, data, value) => {}}
      />
  );
}

    If this doesn't work for you, you can try the following sites : https://codemirror.net/5/demo/folding.html