Monaco-editor: Change/Remove LineDecorations

[fdeitelhoff]

monaco-editor npm version: 0.7.0
Browser: Chromium (Electron)
OS: Windows 10 64bit

I'm trying to remove decorations within the editor (they mark errors in the source code) with the following JavaScript code:

if (SimplexService.errors.length > 0) {
    const decorationList = [];

    SimplexService.errors.forEach(function (error) {
        decorationList.push({
            range: new monaco.Range(error.line, error.column, error.line, error.column + 1),
            options: {inlineClassName: 'myInlineDecoration'}
        });
    });

    decorations = editor.deltaDecorations([], decorationList);
} else {
    decorations = editor.deltaDecorations(decorations, []);
}

But that's not working properly. Some decorations, I think those in just one line, are removed when the source code is fixed. But multiline decorations remain in the editor.

Is my approach a valid way or am I missing something out?

[anandanand84]

Below worked for me

decorations = editor.deltaDecorations(decorations, [{ range: new monaco.Range(1,1,1,1), options : { } }]);

[alexdima]

The result of deltaDecorations is a list of identifiers for the decorations the editor holds on to. All calls to deltaDecorations should get as first argument this list (i.e. also the call in the if branch above).

[fdeitelhoff]

Thanks @alexandrudima!

Fixed my delteDeocations call to

decorations = editor.deltaDecorations(decorations, decorationList);

And it seems to be working right now. At least all errors gets removed if the syntax is correct.

Do you have some resources, links, or whatever with info about how to implement error reporting within Monaco? As "normal" IDEs are doing it?

@anandanand84 Thanks for your info, too. The removal of an error works in both ways. With my solution and with yours. The problem was the missing decorations argument in the deltaDecorations call.

[alexdima]

Yes, the recommended way to report errors is via setModelMarkers. They would then be rendered as squiggles, be available via the markers navigator (F8), etc.

[fdeitelhoff]

@alexandrudima Many thanks! That's working very smooth and the implementation was easy. Are the decorations for manual highlighting or what is the intended use of them (I'm just curios).

The navigation with F8 is working fine, until I press it twice. I think the Monaco editor is trying to display more information but I get the following error.

I tried to provide the "source" and and "code" properties of a model marker object but with no success. Maybe you can point out what I'm missing right now.

[mattgodbolt]

This most recent error I think I've duplicated in #321

[alexdima]

This NPE appears to be already fixed on master

[fdeitelhoff]

@alexandrudima That's awesome to hear! Can't wait for v0.8.

Thanks for your work and endless effort!

[alexdima]

@fdeitelhoff Just published 0.8.0

[fdeitelhoff]

@alexandrudima Thanks. Working fine for me.

[nikita-fuchs]

Unfortunately, this doesn't work for me:

   this.errorHighlights = [];
          //clear all existing
          this.editorInstance.deltaDecorations(this.errorHighlights, []);

          // add new one
          this.errorHighlights = [
          { range: new monaco.Range(error.pos.line,
                                  error.pos.col +1,
                                  error.pos.line,
                                  error.pos.col), options: { inlineClassName: 'problematicCodeLine' }},
          ]

          this.editorInstance.deltaDecorations([], this.errorHighlights)

there just doesn't seem to be a way to remove decorations again, only new ones are added all the time. It would be really cool to have a clearAll() function.

EDIT: Solved it the hard way now, by just removing the class in order to un-highlight:

var elems = document.querySelectorAll(".problematicCodeLine");
          console.log(elems);

          [].forEach.call(elems, function(el) {
            el.classList.remove("problematicCodeLine");
          });