how to do code folding?

[rileylnapier]

hi, looking at codemirror docs it says:

  window.editor = CodeMirror.fromTextArea(te, {
    mode: "javascript",
    lineNumbers: true,
    lineWrapping: true,
    extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }},
    foldGutter: true,
    gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
  });
  editor.foldCode(CodeMirror.Pos(13, 0));

which i can pass the right options... but i'm not sure how to call CodeMirror.Pos(13, 0)

I tried with CodeMirror from 'react-codemirror' but it says Pos is not a function

[scniro]

Use the library, not the component to call Pos

const CodeMirror = require('codemirror');

You should be able to call .Pos now. You can still use the component, it's just that some functions are not on the instance and must be called directly. This is an example of one.

_{Sent with GitHawk}

[rileylnapier]

i think its also an addon now that i look more into it. another thread said you just need to do something like this?

i still need to move to react-codemirror2 btw... will do that now...

import { UnControlled as CodeMirror } from 'react-codemirror2';
import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/oceanic-next.css';

if (typeof document !== 'undefined') {
  require('codemirror/mode/htmlmixed/htmlmixed');
  require('codemirror/mode/jsx/jsx');
  require('codemirror/addon/fold/foldcode');
}

??? have we verified?

[rileylnapier]

yeah, i add the plugin. then with editorDidMount, the editor instance doesn't have fold on it. hmm

[scniro]

Try taking the document if statement out, and move your require statements above the imports?

_{Sent with GitHawk}

[rileylnapier]

i tried that too

[rileylnapier]

ok looks like i was just console.log(editor) and it didn't have editor.foldCode but if i console.log(editor.foldCode) the function is there.