Create example for model markers

This example demonstrates how to listen to model change events so that
the content of the editor can be validated. Any content that is deemed
invalid can be flagged with a model marker.

Signed-off-by: Remy Suen <remy.suen@gmail.com>
This commit is contained in:
Remy Suen 2022-02-11 16:20:38 -05:00
parent 0d48f9fec8
commit 661b83d7b0
4 changed files with 55 additions and 0 deletions

View file

@ -0,0 +1 @@
<div id="container" style="height: 100%"></div>

View file

@ -0,0 +1,48 @@
function validate(model) {
const markers = [];
// lines start at 1
for (let i = 1; i < model.getLineCount() + 1; i++) {
const range = {
startLineNumber: i,
startColumn: 1,
endLineNumber: i,
endColumn: model.getLineLength(i) + 1
};
const content = model.getValueInRange(range).trim();
const number = Number(content);
if (Number.isNaN(number)) {
markers.push({
message: 'not a number',
severity: monaco.MarkerSeverity.Error,
startLineNumber: range.startLineNumber,
startColumn: range.startColumn,
endLineNumber: range.endLineNumber,
endColumn: range.endColumn
});
} else if (!Number.isInteger(number)) {
markers.push({
message: 'not an integer',
severity: monaco.MarkerSeverity.Warning,
startLineNumber: range.startLineNumber,
startColumn: range.startColumn,
endLineNumber: range.endLineNumber,
endColumn: range.endColumn
});
}
}
monaco.editor.setModelMarkers(model, 'owner', markers);
}
const value = `12345
abcd
234.56
12345
abcd
234.56`;
const uri = monaco.Uri.parse('inmemory://test');
const model = monaco.editor.createModel(value, 'demoLanguage', uri);
editor = monaco.editor.create(document.getElementById('container'), { model });
validate(model);
model.onDidChangeContent(() => {
validate(model);
});