Monaco deltaDecorations not working with angular 7

问题

I m trying to use Monaco Editor in an app I am currently developing and I need to highlight some lines of the code displayed in the editor. I m currently using the angular component ngx-monaco-editor (www.npmjs.com/package/ngx-monaco-editor) for this.

I saw in the Monaco playground a way to do what I want using the following: (https://microsoft.github.io/monaco-editor/playground.html#interacting-with-the-editor-rendering-glyphs-in-the-margin)

var decorations = editor.deltaDecorations([], [
    {
        range: new monaco.Range(3,1,3,1),
        options: {
            isWholeLine: true,
            className: 'myContentClass',
            glyphMarginClassName: 'myGlyphMarginClass'
        }
    }
]);

Using the angular component, I can have access to the editor object using the onInit event emitter. I also compared the object from the component and in the playground and they have the same properties so I assumed they were the same. To test it outside of the big app, I started a little angular project following the ngx-monaco-editor documentation to have matching code to compare. However, in the playground the line is correctly highlighted while it is not in my app.

I looked at the issues on the angular component and saw nothing of the sort. Moreover, it says that it supports every features provided by monaco. I checked that I use the same version for angular and monaco and they are the same.

I tried to reproduce the playground example using the angular component:

app.component.html

<ngx-monaco-editor [options]="editorOptions" [(ngModel)]="code" (onInit)="onInit($event)"></ngx-monaco-editor>

app.component.ts

editorOptions = {
    theme: 'vs',
    language: 'javascript',
    glyphMargin: true
  };
code = [
    '"use strict";',
    'function Person(age) {',
    '   if (age) {',
    '       this.age = age;',
    '   }',
    '}',
    'Person.prototype.getAge = function () {',
    '   return this.age;',
    '};'
  ].join('\n');

onInit(editor: any) {
  const t = editor.deltaDecorations([], [
    {
      range: new monaco.Range(3, 1, 3, 1),
      options: {
        isWholeLine: true,
        className: 'myContentClass',
        glyphMarginClassName: 'myGlyphMarginClass'
      }
    }
  ]);
  console.log(t);
}

app.component.css

.myGlyphMarginClass {
    background: red;
}
.myContentClass {
    background: lightblue;
}

I checked with logs that the decorations are correctly initilized and created, but they are the same from the playground and the console.

回答1:

The problem actually come from the fact that monaco doesn't look up to your particular component style sheet but to the global style sheet of your app. The tags are correctly setted but as no reference to the class style was in the root style page, nothing changes nor displays.

To fix this problem you then need to add your classes in your root style file and it works.

Have a nice day :)

来源：https://stackoverflow.com/questions/56770919/monaco-deltadecorations-not-working-with-angular-7

标签

angular

monaco-editor