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.
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