Monaco-editor: registerFoldingProvider missing

[lidermanrony]

monaco-editor-core version: 0.11.3
Browser: chrome
OS: windows

I want to write a custom (non-indent based) folding provider.
I can see that the method is commented out from standaloneLanguages.ts

/**
 * Register a folding provider
 */
/*export function registerFoldingProvider(languageId: string, provider: modes.FoldingProvider): IDisposable {
    return modes.FoldingProviderRegistry.register(languageId, provider);
}*/

Is this a regression?

How would I go about defining a language in which a blank line is considered a separator between folding regions?

[mofux]

I remember I've read in the VSCode release notes that this feature is not yet officially released. Guess that might be the reason why it is commented out at the moment?

[lidermanrony]

thanks @mofux for the pointer.
Maybe monaco-editor is just lagging behind vscode - seems like in March vscode added a batch of syntax-aware folding languages.

If so - when are we expected to get a new version of monaco-editor?

[mofux]

@lidermanrony That's actually the release note I was referring to. If you scroll down a bit here:
https://code.visualstudio.com/updates/v1_22#_proposed-extension-apis

It states:

Folding Provider API
To enable extensions to provide language aware folding ranges, 
a new provider API is proposed

... which made be think it might be experimental at the moment.

[lidermanrony]

@mofux that's great - I wonder if there's a way to 'enable' these experimental APIs in monaco-editor as well - or is this just a vscode thing.

[mofux]

Thanks to your above findings I've been able to register a custom code folding provider by requiring vs/editor/common/modes and then calling modes.FoldingProviderRegistry.register(language, { provideFoldingRanges(document, ctx, token) => {...} }) on it. You have to make sure that you register that language before, using monaco.languages.register({ id: language })

[mofux]

Here is a more complete example that you can paste into the playground https://microsoft.github.io/monaco-editor/playground.html#creating-the-editor-hello-world

require(['vs/editor/common/modes'], ({ FoldingProviderRegistry, FoldingRangeType }) => {

    // register custom language
    monaco.languages.register({ id: 'mine' });

    // register a folding provider for our language
    FoldingProviderRegistry.register('mine', {
        provideFoldingRanges: (model, token) => {
            console.log('provide folding ranges', model, token);
            let result = {
                ranges: [{
                    type: FoldingRangeType.Region,
                    startLine: 1,
                    endLine: 5
                }]
            }
            console.log('ranges', result);
            return result;
        }
    });

    monaco.editor.create(document.getElementById("container"), {
        value: "function hello() {\n\talert('Hello world!');\n\talert('Hello world!');\n\talert('Hello world!');\n}", 
        language: "mine"
    });

})

You can see the folding provider gets called, but unfortunately the fold isn't drawn. Not sure if I'm doing something wrong 😔

@alexandrudima Could you share if this is supposed to work at the moment?

[alexdima]

It is still experimental API that is being changed often on master... We might need another month for it to "cook".

[mofux]

Fair enough 😅I'll try again when the next monaco version lands. Thanks for this master piece of an editor!

[aeschli]

Will be available in the April release.

[lidermanrony]

Awesome!
When do we get a new monaco-editor version with this?

[rcjsuen]

@lidermanrony Looks like the 0.13.0 release includes this new API.

[rcjsuen]

If anyone wants to try out the new folding API, you can use this snippet of JavaScript in the Monaco Playground to test things out.

monaco.languages.register({
    id: "foldLanguage"
});

var value =
`1. Hit F1 to bring up the Command Palette
2. Type 'fold'
3.  Choose 'Fold All Block Comments' or 'Fold All Regions'

5. comment1
6. comment1
7. comment1

9. unfoldable text
10. unfoldable text
11. unfoldable text

13. comment2
14. comment2
15. comment2
16. comment2
17. comment2

19. foldable text
20. foldable text
21. foldable text

23. region1
24. region1
25. region1

27. region2
28. region2
29. region2`

monaco.editor.create(document.getElementById("container"), {
    value: value,
    language: "foldLanguage"
});

monaco.languages.registerFoldingRangeProvider("foldLanguage", {
    provideFoldingRanges: function(model, context, token) {
        return [
            // comment1
            {
                start: 5,
                end: 7,
                kind: monaco.languages.FoldingRangeKind.Comment
            },
            // comment 2
            {
                start: 13,
                end: 17,
                kind: monaco.languages.FoldingRangeKind.Comment
            },
            // foldable text
            {
                start: 19,
                end: 21
            },
            // region1
            {
                start: 23,
                end: 25,
                kind: monaco.languages.FoldingRangeKind.Region
            },
            // region2
            {
                start: 27,
                end: 29,
                kind: monaco.languages.FoldingRangeKind.Region
            }
        ];
    }
});

[aeschli]

Thanks @rcjsuen !

[mofux]

@rcjsuen Would be nice if you'd add this example to the playground, just so people can quickly discover this feature.

[rcjsuen]

@mofux I can make a pull request but master is currently pointing at 8f3204478aa52ac7b16974b1a4691337e956ceae and the monaco.languages.registerFoldingRangeProvider function does not exist there.

The website itself is built off of the v0.13.0 tag which is newer than master and points at 1b82be2abf682b16f71555bf73d41ce369aacbbe. I'm not sure why master wasn't updated but I'm going to wait for master to "catch up" before I make a pull request.

[mofux]

Thanks @rcjsuen. Sorry, I was assuming you were part of the core dev team for the monaco-editor 😅A PR would be very appreciated though! Thanks for help!

[aeschli]

@rebornix Can you update master? (see https://github.com/Microsoft/monaco-editor/issues/809#issuecomment-388824047)

[alexdima]

@rebornix forgot to push his local changes, but it's all good now.

[rcjsuen]

@alexandrudima Thanks for moving master up!

@mofux I've opened #878 to add my sample code to the playground.