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
            }
        ];
    }
});