Code folding example

v6
1

Hi, I am new to CodeMirror and its “functional” structure is really confusing.
So far I only managed to setup things using examples.
The problem is that I can’t find any examples of code folding for v6.

I want to automatically fold object with key toFold on top level of JSON object after some event, let’s say after document change event:

{
    "toFold": { /* Everything here should be folded */ },
    "foo": 5
    "bar": {
        "baz": true
    }
}

So I setup my editor like this:

const editor = new EditorView({
    doc: myInitialJsonString,
    parent: myElem,
    extensions: [
        basicSetup,
        json(),
        EditorView.updateListener.of(e => {
            if (!e.docChanged) return;
            
            editor.dispatch({ /* How to fold? */ });
        })
    ]
});

And I am stuck here…
I think I need to somehow get fold range (for example by using regexp) and dispatch fold effect on that range but I have no idea of how this should look in code.

2

Ok, I figured out I can fold lines with foldEffect like this:

import { foldEffect } from '@codemirror/language';

editor.dispatch({
    effects: foldEffect.of({ from: 0, to: 3 })
});

Now the only problem is to somehow find out the lines to fold.
For that I guess I need to find foldable range connected to toFold syntax node but still no idea where to begin…

3

You can pass in any range that you want to fold (if you’re doing your own textual scan for this), or use foldable to ask the built-in fold logic.

4

Well to check whether lines are foldable() I need to somehow get these lines connected to the node I want to fold… :slight_smile:

While manual search can be an option I think maybe there is a more convinient way to search for JSON node. But I am not familiar with Syntax Trees and related stuff at all.