Monaco-editor: API to hide parts of the code

[AchimKO]

Hi,

we use the monaco editor for a project and we need to hide some parts of the code from the user, because there is a Header and a Footer generated, and only a part between which should be editable by the user. We need the whole file in the background, to have a running code completion.

export class GeneratedClass {
     public GeneratedProperty1: string;
     public GeneratedProperty2: string;

    construcor() {}

    // User Code starts here
    public Property1ByUser: string;
    public Property2ByUser: srting;

    public MethodByUser() {}
    // User Code ends here
}

The user should only be able to edit the code between the two comments.
Is it possible to hide the other parts from the user, or disable them in any way?

Thanks,

Achim

[alexdima]

Sorry for the late reply, there is a non-API way (might get removed in the future):
editor.getMode().setEditableRange(myRange).

interface IModel {
...
    /**
     * Set an editable range on the model.
     * @internal
     */
    setEditableRange(range:IRange): void;
...
}

[AchimKO]

Thank you,
this helps a lot.

In addition i solved to hide parts of the code by calling:

editor.setHiddenArea(myRange)

But for that to work I had to overwrite the FoldingController, it also handles the hidden Areas and was overriding mine.

Would be great to have a build in way to hide Areas in combination with the Folding controller.

[alexdima]

:+1: we plan at one point to make setHiddenArea more cooperative. Today the FoldingController thinks it owns those.

[devdoomari]

any update on this issue?
I'm making a 'code-playground' and I'd really like to have monaco hide some import statements.
(I couldn't get typescript to 'globalize' modules)

[rizkyramadhan]

Any update on this issue ?

[yaananth]

now it's called setHiddenAreas however it doesn't honor the startColumnor endColumn :(
So it hides whole lines! Can we add support to hide specific columns please!

[yaananth]

Never mind, I can do this :)

const matches = contentModel.findMatches("someregex", false, true, false, null, true);
 contentModel.applyEdits(matches.map(x => {
                    return {
                        text: "",
                        range: x.range
                    }
                }));

However, the use case is that I would need to is to colorize using monaco.editor.ITokenThemeRule[] and _then_ strip the things out. As soon as I strip them out, the line renders again and hence the colors are gone ... :(

[benhutchison]

I noticed that, although being a user feature request, setEditableRange seems to be removed from vscode as "unused code" as part of this issue

Please consider re-including a setEditableRange into the supported API.

It is useful in education and/or alongside code-generation; use cases where the user isn't intended to edit all of the source file.

[mw-ding]

+1 on including setEditableRange and setHiddenAreas.

[jansivans]

If you are using typescript, you can use

monaco.languages.typescript.typescriptDefaults.addExtraLib('const arr = [];')

to achieve similar effect. Now arr variable will appear in intellisense.

[VitalickS]

If you are using typescript, you can use

monaco.languages.typescript.typescriptDefaults.addExtraLib('const arr = [];')

to achieve similar effect. Now arr variable will appear in intellisense.

And it is better use like this

import Space, { env as EnvClass } from 'vpt';

declare global {
    const space: Space;
    const env: typeof EnvClass;
}

[raghav-g]

Can we hide parts of the code instead of folding it or making it read only?

[boydc2014]

Any update on this one ?

[datou0412]

Any update?

[CosmoMyzrailGorynych]

So I made a solution, at least for some cases. I've made the first and last line uneditable.

If what you want to achieve is doable with addExtraLib, do use it. This is a nice official way to add typings and stuff. My solution handles the case where it was not enough, mainly to change the context of functions (change to what this points).

For my game editor ct.js, I ended up with tons of hacks that establish hidden and uneditable lines around the code: https://github.com/ct-js/ct-js/blob/develop/src/js/codeEditorHelpers.js#L74
Beware: it uses several unofficial APIs and this is not a solution to the original issue, but a collection of hacks due to the absence of better alternatives.

The hacks block direct editing from a keyboard, manage cursors and selectors, handle "Replace all" command, and hide the first and the last lines. Some constants are hard-coded, so you will need to improve the code for multiple hidden lines. The known issue is that you can view and delete the hidden code in the peek view, as it creates additional editors.

[mehulmpt]

Is there any update on this API? Or any available workarounds to disable a bunch of lines for editing in monaco?

[hems]

I have the same requirement, where ideally I would have a few lines hidden before and after the user code, this way the user wouldn't have to worry about boilerplate code and at the same time VSCode would still validate the code as if the boilerplate was wrapping the user code.

For instance on my case i would like the user to edit:

js myEvent: (data) => { // do something }, anotherEvent: (data) => { // do something },

And before validating I would like to wrap it all in events = { ${code} } basically making a simplification for my user to edit a javascript object.

[mauricedoepke]

Would be greatt for my case, too. I would like the user to write code that contains the await keyword without exposing him to the async function around. So basically I would like to wrap the user code inside this:

(async () => {
 //user code goes here
})()

Without exposing this wrapper function to my user.

[axefrog]

I need this functionality also. I'm currently working out a way to approximate the behaviour perhaps by intercepting and cancelling edits in "read only" ranges.

Ideas:

• onDidChangeCursorPosition and onDidChangeCursorSelection, then force the cursor away from read-only ranges
• deltaDecorations to make read-only appear in grey
• Toggle read-only mode based on whether editing is currently permitted: editor.updateOptions({ readOnly: true|false })

Edit: Added third idea above

[Pranomvignesh]

Ideas:

• onDidChangeCursorPosition and onDidChangeCursorSelection, then force the cursor away from read-only ranges
• deltaDecorations to make read-only appear in grey

I would like to add one more idea, if we undo the values entered in the areas which we marked as read-only, then user wont feel like that area is editable, and we can show it as a boilerplate code for the users
Actually i tried implementing this idea and for me it is _working pretty well._
If you are interested to see the demo please check this link
If anyone wants to know more about the implementation read this article
For the code , see the github repo