API for collapsing ranges

[my-tien]

Context

• [X] This issue is not a bug report. (please use a different template for reporting a bug)
• [X] This issue is not a duplicate of an existing issue. (please use the search to find existing issues)

Description

Hi, In our project the monaco editor displays a JSON, the content of which is sometimes refreshed from somewhere else. When this happens, I would like to restore the previous folding state. I have been doing this by reading out and later re-applying these collapsedRegions:

const viewState = editor.saveViewState();
viewState.contributionsState['editor.contrib.folding'].collapsedRegions

However, sometimes when I update my node packages, this functionality simply stops working even though the monaco-editor and @monaco-editor/react versions are unchanged (I can elaborate on that if you like).

I understand, since this is not public API things can break unexpectedly. Is there perhaps a different way to programmatically read out collapsed ranges and to apply code folding?

Monaco Editor Playground Link

No response

Monaco Editor Playground Code

No response

[my-tien]

FYI, I figured out that monaco-editor/loader version 1.3.3 breaks this feature. Everything still works fine with 1.3.2. I was able to pin this dependency in my project for now. But I would still be interested in a public API for this and with some guidance would also offer to have a stab at a PR.

[ExtAnimal]

I'd like to vote for this too.

Programatically collapsing ranges of code is an absolutely essential feature.

We are developing a code editor where I'd like to collapse large areas of boilerplate code which I can detect easily. But I can see no way of asking the editor to collapse them.

VS Code has the command "Create folding range from selection". I want to be able to do this programatically having created a Selection

[aeschli]

We have several commands for folding that also can be used programmatically: e.g editor.fold Did you try these?

[ExtAnimal]

We have several commands for folding that also can be used programmatically: e.g editor.fold Did you try these?

How would we even know it exists? The documentation is TERRIBLE

https://microsoft.github.io/monaco-editor/docs.html is just hostile.

And anyway. Pointing to a typescript source file. How does that help ANYBODY?

[aeschli]

Yes, sorry, on further investigation I learned that the monaco API is slightly different than the VS Code API (that I'm familiar with). It doesn't seem to have an API to run a platform command (Command, not to be confused with ICommand, the editor command). You can run actions, but these don't forward arguments to the command. So the best sample code to programmatically fold (or unfold) is:

var jsCode = [
	'"use strict";',
	"function Person(age) {",
	"	if (age) {",
	"		this.age = age;",
	"	}",
	"}",
	"Person.prototype.getAge = function () {",
	"	return this.age;",
	"};",
].join("\n");

var editor = monaco.editor.create(document.getElementById("container"), {
	value: jsCode,
	language: "javascript",
});

const actions = editor.getSupportedActions();
const foldAction = actions.find(a => a.id === 'editor.fold');

editor.setSelection({ startLineNumber: 2, endLineNumber: 2, startColumn: 1, endColumn: 1})
foldAction.run(); 

[my-tien]

Thx for looking into it. I will try it out and report back!

[my-tien]

This works, is there also a way to retrieve the currently collapsed regions?

[aeschli]

https://github.com/microsoft/vscode/pull/201315 fixes the issue that action arguments are not passed to the command. What that fix is in you can do: editor.trigger(null, 'editor.fold', { selectionLines: [1] })

[aeschli]

is there also a way to retrieve the currently collapsed regions?

No, currently not.