当模型更改时，摩纳哥 deltaDecorations 以 7 角消失

Question

There is a great example of how to use the ngx monaco editor with deltaDecorations (ranges):

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);
}

On ngOnInit everything works as expected. But when I change the ngModel, the highlighting of the code disappears:

onFileClicked() {
    this.code = "this is some other code'\n'
    that needs to be'\n'
    highlighted just like'\n'
    the first one."
}

When I change the ngModel once again now, the code of the old model gets highlighted for a very brief time, but disappears together with the old model as soon as the new one is initiated. The code of the new model should be highlighted as well, but is not.

What am I missing here?

Answer 1

Found a solution that works, but I don't really know why.

I have a function that initialises a new editor:

onFileClicked(file) {

    // Angular @Input setter detects only object updates,
    // so property updates are not handled =
    // we need to update whole object when language changes
    this.editorOptions = {
        theme: "vs",
        language: this.langDetect.getLanguage(file),
        readOnly: true,
        automaticLayout: true
    };

    this.code = file.data;
    this.ranges = file.ranges;
}

It appears as if one has to set the model manually again after init of the editor:

onEditorInit(editor: any) {
    const model = monaco.editor.getModels()[0];
    monaco.editor.setModelLanguage(model, this.editorOptions.language);
    model.setValue(this.code);

    if (this.coverage) {
        let ranges = this.buildEditorRanges(this.coverage);
        editor.deltaDecorations([], ranges);
    }
}

buildEditorRanges(ranges) {
    let editorRanges = [];
    let options = {
        isWholeLine: true,
        className: "code-highlight",
        glyphMarginClassName: "code-highlight"
    };
    ranges.forEach(function(range) {
        editorRanges.push({
            range: new monaco.Range(
                range.startLine,
                range.startColumn,
                range.endLine,
                range.endColumn
            ),
            options: options
        });
    });
    return editorRanges;
}

Simply setting the model before initialising the editor in the function that triggers when a file has been clicked does NOT work:

onFileClicked(file) {

    this.code = file.data;
    // Angular @Input setter detects only object updates,
    // so property updates are not handled =
    // we need to update whole object when language changes
    this.editorOptions = {
        theme: "vs",
        language: this.langDetect.getLanguage(file),
        readOnly: true,
        automaticLayout: true
    };


    this.ranges = file.ranges;
}

Answer 2

I encountered a similar problem: When I change theme/language dynamically using Object.assign() like this Github issue , decorations disappear.

I found a solution: Use monaco.editor.setModelLanguage() and monaco.editor.setTheme()

Not sure about changing the code content though