I can't figure out why the inline markers are not showing.

Official demo here: .html?source=v0.33.0#example-extending-language-services-model-markers-example Reference documentation: .setModelMarkers.html

My env

• angular 17.3.10
• "monaco-editor": "^0.52.2",
• "ngx-monaco-editor-v2": "^19.0.2",
• editor.main.css is correctly loaded

My code

Template

  <ngx-monaco-editor  #editor style="max-width: 100%;" [(ngModel)]="viewSql" [options]="editorOptions" (onInit)="onEditorLoaded($event)" />

Component

 import * as monaco from 'monaco-editor'; // SPOILER: this was the bug

  public editorOptions: monaco.editor.IStandaloneEditorConstructionOptions = {
    language: 'sql',
    automaticLayout: true,
    theme: 'vs',
    readOnly: false,
    renderValidationDecorations: 'on', // default should work
  };

  private monacoEditor: monaco.editor.IStandaloneCodeEditor;


  public onEditorLoaded(editor: monaco.editor.IStandaloneCodeEditor) {
    console.log('onEditorLoaded', editor);
    this.monacoEditor = editor;
    this.monacoEditor.updateOptions(this.editorOptions);
  }

  /** this function should generate the markers but nothing is displayed in the UI, no underline, nothing */
  handleValidationErrors(sqlErrors: Array<iSyntaxError>) {
    console.debug('handleValidationErrors', sqlErrors);
    if (!this.monacoEditor) return;

    const model = this.monacoEditor.getModel();
  
    //console.debug('model', model) // looks ok
    if (sqlErrors.length) {
      // Convert errors to Monaco markers
      const markers = sqlErrors.map(error => ({
        message: error.OriginalMessage || error.Message,
        severity: monaco.MarkerSeverity.Error,
        startLineNumber: error.LineNumber, // LineNumber === 1
        startColumn: 1, //error.LinePosition || 1,
        endLineNumber: error.LineNumber, // LineNumber === 1
        endColumn: 100,
      } satisfies monaco.editor.IMarkerData));

      console.debug('markers', markers); // this looks ok in the Log ouptut below

      // Set new markers
      monaco.editor.setModelMarkers(model, 'sql-validation', markers);

      // Optional: Scroll to first error
      this.monacoEditor.revealLineInCenter(sqlErrors[0].LineNumber);

    } else { // if no errors, clear markers
      console.warn("removeAllMarkers 'sql-validation'");
      monaco.editor.removeAllMarkers('sql-validation');
    }

    console.log('getModelMarkers',monaco.editor.getModelMarkers({owner: 'sql-validation',})); // looks ok here, markers seem to be added
  }

Log output

Editor output

• No error shown (should underline mispelled "select")

What am I missing? Not sure if it's an issue with my code, the monaco-editor module, or with the angular wrapper I am using.

I can't figure out why the inline markers are not showing.

Official demo here: https://microsoft.github.io/monaco-editor/playground.html?source=v0.33.0#example-extending-language-services-model-markers-example Reference documentation: https://microsoft.github.io/monaco-editor/typedoc/functions/editor.setModelMarkers.html

My env

• angular 17.3.10
• "monaco-editor": "^0.52.2",
• "ngx-monaco-editor-v2": "^19.0.2",
• editor.main.css is correctly loaded

My code

Template

  <ngx-monaco-editor  #editor style="max-width: 100%;" [(ngModel)]="viewSql" [options]="editorOptions" (onInit)="onEditorLoaded($event)" />

Component

 import * as monaco from 'monaco-editor'; // SPOILER: this was the bug

  public editorOptions: monaco.editor.IStandaloneEditorConstructionOptions = {
    language: 'sql',
    automaticLayout: true,
    theme: 'vs',
    readOnly: false,
    renderValidationDecorations: 'on', // default should work
  };

  private monacoEditor: monaco.editor.IStandaloneCodeEditor;


  public onEditorLoaded(editor: monaco.editor.IStandaloneCodeEditor) {
    console.log('onEditorLoaded', editor);
    this.monacoEditor = editor;
    this.monacoEditor.updateOptions(this.editorOptions);
  }

  /** this function should generate the markers but nothing is displayed in the UI, no underline, nothing */
  handleValidationErrors(sqlErrors: Array<iSyntaxError>) {
    console.debug('handleValidationErrors', sqlErrors);
    if (!this.monacoEditor) return;

    const model = this.monacoEditor.getModel();
  
    //console.debug('model', model) // looks ok
    if (sqlErrors.length) {
      // Convert errors to Monaco markers
      const markers = sqlErrors.map(error => ({
        message: error.OriginalMessage || error.Message,
        severity: monaco.MarkerSeverity.Error,
        startLineNumber: error.LineNumber, // LineNumber === 1
        startColumn: 1, //error.LinePosition || 1,
        endLineNumber: error.LineNumber, // LineNumber === 1
        endColumn: 100,
      } satisfies monaco.editor.IMarkerData));

      console.debug('markers', markers); // this looks ok in the Log ouptut below

      // Set new markers
      monaco.editor.setModelMarkers(model, 'sql-validation', markers);

      // Optional: Scroll to first error
      this.monacoEditor.revealLineInCenter(sqlErrors[0].LineNumber);

    } else { // if no errors, clear markers
      console.warn("removeAllMarkers 'sql-validation'");
      monaco.editor.removeAllMarkers('sql-validation');
    }

    console.log('getModelMarkers',monaco.editor.getModelMarkers({owner: 'sql-validation',})); // looks ok here, markers seem to be added
  }

Log output

Editor output

• No error shown (should underline mispelled "select")

What am I missing? Not sure if it's an issue with my code, the monaco-editor module, or with the angular wrapper I am using.

• angular
• monaco-editor
• ngx-monaco-editor

• Have you verified that model markers are set actually? I wonder, because you set SQL as language, but then try to handle xml errors. So, first check that setModelMarkers is called with correct values. – Mike Lischke Commented Mar 27 at 7:51
• indeed, xmlErrors is a bad name (i've just renamed it to sqlErrors), but yes, as shown by the log output, setModelMarkers is called with the proper values (log line "markers, array") (I think, at least they have the correct lineNumber) – sritmak Commented Mar 27 at 8:19
• hmmm, looks like the monaco instance imported is not the same than the global one import * as monacoImport from 'monaco-editor'; console.log('monaco.editor.setModelMarkers', monacoImport.editor === monaco.editor) // false – sritmak Commented Mar 27 at 11:10

1 Answer 1

looks like the monaco instance imported from node module is not the same than the globally loaded one in the ngx-monaco-editor-v2 library.

import * as monacoFromImport from 'monaco-editor';
console.log(monacoFromImport.editor === monaco.editor); // false, ie not the same instance

Here is how I changed my imports to make it work:

import * as monacoTypes from 'monaco-editor';  // only used for types
declare var monaco: typeof monacoTypes; // actual global object to control, same than in NgxMonacoEditorModule

  private monacoEditor: monacoTypes.editor.IStandaloneCodeEditor;
...
    const model = this.monacoEditor.getModel();
    monaco.editor.setModelMarkers(model, 'sql-validation', markers); // now works as expected \o/