Fold yaml in CodeMirror

user_2378369 0
Viewed 1293

Does anyone know how to add folding in yaml files for the CodeMirror editor? We add this editor to our app and it works perfectly with json. But when editor mode was switched to yaml the file was displayed fine but without folding for inner elements. So it looks like: CodeMirror

And how it looks in the Ace editor Ace

codemirror collapse fold yaml javascript
1 Answers

Import everything (i suspect you missed the foldgutter.css - thats what brought me to this question):

<link  href="../lib/codemirror.css" rel="stylesheet" />
<script src="../lib/codemirror.js"></script>
<script src="../mode/yaml/yaml.js"></script>
<link  href="../addon/fold/foldgutter.css" rel="stylesheet" />
<script src="../addon/fold/foldcode.js"></script>
<script src="../addon/fold/foldgutter.js"></script>
<script src="../addon/fold/indent-fold.js"></script>

And then add the proper init options:

window.cm = CodeMirror.fromTextArea(textarea, {
    mode: 'yaml',
    styleActiveLine: true,
    lineNumbers: true,
    foldGutter: true,
    gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
});

Works for me.

user_6677070
Related