Cannot make the model markers to appear in monaco-editor (inside angular component)

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

Official demo here: https://microsoft.github.io/monaco-...nding-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

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

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(xmlErrors: Array<iPipelineXmlError>) {
console.debug('handleValidationErrors', xmlErrors);
if (!this.monacoEditor) return;

this.xmlErrors = xmlErrors;
const model = this.monacoEditor.getModel();

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

console.debug('markers', markers); // this looks ok

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

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

} else { // if no errors, clear markers
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?

Continue reading...