Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Syntax highlightning not working for diff editor #75

Open
Disane87 opened this issue Nov 26, 2021 · 1 comment
Open

Syntax highlightning not working for diff editor #75

Disane87 opened this issue Nov 26, 2021 · 1 comment

Comments

@Disane87
Copy link

Disane87 commented Nov 26, 2021

Hi, thank for this awesome project!

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

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
Copy link
Author

Disane87 commented Dec 1, 2021

@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:
diffeditor

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant