Syntax highlightning not working for diff editor

[Disane87]

Hi, thank for this awesome project!

Unfortunatly the diff editor doesn't show the syntax highlights for the given language:

I guess this is an issue by the original and modified model which should contain the language, according to the monaco docs. Tried this with your sample for the diff editor.

[Disane87]

@GeoAstronaute do you have any ideas how to fix that or even an idea for a hotfix? Your implementation looks better than other (which have several other flaws).

Would be nice if you would spent some minutes to investigate/fix this :) This would make my life so much easier.

Edit: There is a hotfix for people only have a static text:

editorInit(editor: any) {
    // Here you can access editor instance
     this.editor = editor;

     let models = monaco.editor.getModels();
     models.forEach(model => {
       monaco.editor.setModelLanguage(model, this.editorOptions.language);
     })

    }

Since we have observables as texts (because the underlying data could be changed) the workaround is working. As I saw, the monaco editor gets a bunch of models (everytime when the text changes):

Here is our code for reproduction:

<ngx-monaco-diff-editor style="height: 100%" [options]="editorOptions" [original]="originalCode" [modified]="currentCode$ | async" (init)="editorInit($event)"></ngx-monaco-diff-editor>

import { Component } from '@angular/core';
import { MonacoEditorLoaderService, MonacoStandaloneDiffEditor } from '@materia-ui/ngx-monaco-editor';
import { BehaviorSubject, filter, interval, take, timer } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  code: string = 'function x() {\nconsole.log("Hello world!");\n}';
  editorOptions = {theme: 'vs-dark', language: 'javascript' };
  originalCode: string = 'function x() { let var = 0; }';

  currentCode$ = new BehaviorSubject<string>(this.code);

  public editor: any;

  editorInit(editor: any) {
    // Here you can access editor instance
     this.editor = editor;

     let models = monaco.editor.getModels();
     models.forEach(model => {
       monaco.editor.setModelLanguage(model, this.editorOptions.language);
     })

     interval(5000).subscribe((val)=>{
      this.currentCode$.next('function x() {\nconsole.log("Hello '+val+'");\n}');
      let models = monaco.editor.getModels();

      console.log(models.length);

      models.forEach(model => {
        monaco.editor.setModelLanguage(model, this.editorOptions.language);
      })
     });
    }
  }
}

As you can see, the syntaxhighlight is only applied once. After the code changes, the syntaxhighlight is gone: