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]

👍 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)

[rizrmd]

Any update on this issue ?

[yaananth]

now it's called setHiddenAreas however it doesn't honor the startColumn or 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.