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