From 661b83d7b0d7a15282a35ddae6d2b9f0c3454cd7 Mon Sep 17 00:00:00 2001
From: Remy Suen <remy.suen@gmail.com>
Date: Fri, 11 Feb 2022 16:20:38 -0500
Subject: [PATCH] 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>
---
 website/playground/new-samples/all.js         |  6 +++
 .../model-markers-example/sample.css          |  0
 .../model-markers-example/sample.html         |  1 +
 .../model-markers-example/sample.js           | 48 +++++++++++++++++++
 4 files changed, 55 insertions(+)
 create mode 100644 website/playground/new-samples/extending-language-services/model-markers-example/sample.css
 create mode 100644 website/playground/new-samples/extending-language-services/model-markers-example/sample.html
 create mode 100644 website/playground/new-samples/extending-language-services/model-markers-example/sample.js

diff --git a/website/playground/new-samples/all.js b/website/playground/new-samples/all.js
index 06323f21..004108a4 100644
--- a/website/playground/new-samples/all.js
+++ b/website/playground/new-samples/all.js
@@ -156,6 +156,12 @@
 			id: 'extending-language-services-hover-provider-example',
 			path: 'extending-language-services/hover-provider-example'
 		},
+		{
+			chapter: 'Extending Language Services',
+			name: 'Model markers example',
+			id: 'extending-language-services-model-markers-example',
+			path: 'extending-language-services/model-markers-example'
+		},
 		{
 			chapter: 'Extending Language Services',
 			name: 'Semantic tokens provider example',
diff --git a/website/playground/new-samples/extending-language-services/model-markers-example/sample.css b/website/playground/new-samples/extending-language-services/model-markers-example/sample.css
new file mode 100644
index 00000000..e69de29b
diff --git a/website/playground/new-samples/extending-language-services/model-markers-example/sample.html b/website/playground/new-samples/extending-language-services/model-markers-example/sample.html
new file mode 100644
index 00000000..75b9b160
--- /dev/null
+++ b/website/playground/new-samples/extending-language-services/model-markers-example/sample.html
@@ -0,0 +1 @@
+<div id="container" style="height: 100%"></div>
diff --git a/website/playground/new-samples/extending-language-services/model-markers-example/sample.js b/website/playground/new-samples/extending-language-services/model-markers-example/sample.js
new file mode 100644
index 00000000..010f6d05
--- /dev/null
+++ b/website/playground/new-samples/extending-language-services/model-markers-example/sample.js
@@ -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);
+});