How could using addon : fold

[liu0fanyi]

I found fold demo here: https://codemirror.net/demo/folding.html

And I try this:

import markdown-fold.js && foldgutter.css;

const options = {
    mode: "gfm",
    lineNumbers: true,
    lineWrapping: true,
    extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }},
    foldGutter: true,
    gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
}

nothing happend...
I'm new here...What should I do next? Thanks...

[few-bits]

I think, you should import

/addon/fold/foldgutter.js

[liu0fanyi]

Yes ,you are right...

[TechRaY]

import 'codemirror/addon/hint/show-hint';
import 'codemirror/addon/hint/sql-hint';
import 'codemirror/addon/hint/show-hint.css'; // without this css hints won't show
import 'codemirror/addon/search/match-highlighter';
import 'codemirror/addon/search/matchesonscrollbar';
import 'codemirror/addon/search/searchcursor';
import 'codemirror/addon/fold/foldcode';
import 'codemirror/addon/fold/foldgutter';
import 'codemirror/addon/fold/brace-fold';
import 'codemirror/addon/fold/xml-fold';
import 'codemirror/addon/fold/indent-fold';
import 'codemirror/addon/fold/markdown-fold';
import 'codemirror/addon/fold/comment-fold';
import 'codemirror/addon/fold/foldgutter.css';

<CodeMirror ref="editor" autoFocus={true}
options={{
mode: ['text/dsl','javascript'],
lineNumbers: true,
foldGutter : true,
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
extraKeys: {"Ctrl-Space": this.autoComplete, "Ctrl-Q": function(cm){console.log("HEREEE"); cm.foldCode(cm.getCursor()); }},
highlightSelectionMatches: {showToken: /\w/, annotateScrollbar: true}
}}
/>

foldcode not working for me. And not even getting foldgutter Can I get any help?