Code folding example

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

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

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

    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…

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.

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.