@harmoniclabs/monaco-editor 0.52.0

package/website/src/website/data/playground-samples/extending-language-services/semantic-tokens-provider-example/sample.js

@@ -0,0 +1,168 @@
+/** @type {monaco.languages.SemanticTokensLegend} */
+const legend = {
+	tokenTypes: [
+		"comment",
+		"string",
+		"keyword",
+		"number",
+		"regexp",
+		"operator",
+		"namespace",
+		"type",
+		"struct",
+		"class",
+		"interface",
+		"enum",
+		"typeParameter",
+		"function",
+		"member",
+		"macro",
+		"variable",
+		"parameter",
+		"property",
+		"label",
+	],
+	tokenModifiers: [
+		"declaration",
+		"documentation",
+		"readonly",
+		"static",
+		"abstract",
+		"deprecated",
+		"modification",
+		"async",
+	],
+};
+
+/** @type {(type: string)=>number} */
+function getType(type) {
+	return legend.tokenTypes.indexOf(type);
+}
+
+/** @type {(modifier: string[]|string|null)=>number} */
+function getModifier(modifiers) {
+	if (typeof modifiers === "string") {
+		modifiers = [modifiers];
+	}
+	if (Array.isArray(modifiers)) {
+		let nModifiers = 0;
+		for (let modifier of modifiers) {
+			const nModifier = legend.tokenModifiers.indexOf(modifier);
+			if (nModifier > -1) {
+				nModifiers |= (1 << nModifier) >>> 0;
+			}
+		}
+		return nModifiers;
+	} else {
+		return 0;
+	}
+}
+
+const tokenPattern = new RegExp("([a-zA-Z]+)((?:\\.[a-zA-Z]+)*)", "g");
+
+monaco.languages.registerDocumentSemanticTokensProvider("plaintext", {
+	getLegend: function () {
+		return legend;
+	},
+	provideDocumentSemanticTokens: function (model, lastResultId, token) {
+		const lines = model.getLinesContent();
+
+		/** @type {number[]} */
+		const data = [];
+
+		let prevLine = 0;
+		let prevChar = 0;
+
+		for (let i = 0; i < lines.length; i++) {
+			const line = lines[i];
+
+			for (let match = null; (match = tokenPattern.exec(line)); ) {
+				// translate token and modifiers to number representations
+				let type = getType(match[1]);
+				if (type === -1) {
+					continue;
+				}
+				let modifier = match[2].length
+					? getModifier(match[2].split(".").slice(1))
+					: 0;
+
+				data.push(
+					// translate line to deltaLine
+					i - prevLine,
+					// for the same line, translate start to deltaStart
+					prevLine === i ? match.index - prevChar : match.index,
+					match[0].length,
+					type,
+					modifier
+				);
+
+				prevLine = i;
+				prevChar = match.index;
+			}
+		}
+		return {
+			data: new Uint32Array(data),
+			resultId: null,
+		};
+	},
+	releaseDocumentSemanticTokens: function (resultId) {},
+});
+
+// add some missing tokens
+monaco.editor.defineTheme("myCustomTheme", {
+	base: "vs",
+	inherit: true,
+	colors: {},
+	rules: [
+		{ token: "comment", foreground: "aaaaaa", fontStyle: "italic" },
+		{ token: "keyword", foreground: "ce63eb" },
+		{ token: "operator", foreground: "000000" },
+		{ token: "namespace", foreground: "66afce" },
+
+		{ token: "type", foreground: "1db010" },
+		{ token: "struct", foreground: "0000ff" },
+		{ token: "class", foreground: "0000ff", fontStyle: "bold" },
+		{ token: "interface", foreground: "007700", fontStyle: "bold" },
+		{ token: "enum", foreground: "0077ff", fontStyle: "bold" },
+		{ token: "typeParameter", foreground: "1db010" },
+		{ token: "function", foreground: "94763a" },
+
+		{ token: "member", foreground: "94763a" },
+		{ token: "macro", foreground: "615a60" },
+		{ token: "variable", foreground: "3e5bbf" },
+		{ token: "parameter", foreground: "3e5bbf" },
+		{ token: "property", foreground: "3e5bbf" },
+		{ token: "label", foreground: "615a60" },
+
+		{ token: "type.static", fontStyle: "bold" },
+		{ token: "class.static", foreground: "ff0000", fontStyle: "bold" },
+	],
+});
+
+const editor = monaco.editor.create(document.getElementById("container"), {
+	value: [
+		"Available token types:",
+		"    [comment] [string] [keyword] [number] [regexp] [operator] [namespace]",
+		"    [type] [struct] [class] [interface] [enum] [typeParameter] [function]",
+		"    [member] [macro] [variable] [parameter] [property] [label]",
+		"",
+		"Available token modifiers:",
+		"    [type.declaration] [type.documentation] [type.member] [type.static]",
+		"    [type.abstract] [type.deprecated] [type.modification] [type.async]",
+		"",
+		"Some examples:",
+		"    [class.static.token]     [type.static.abstract]",
+		"    [class.static.token]     [type.static]",
+		"",
+		"    [struct]",
+		"",
+		"    [function.private]",
+		"",
+		"An error case:",
+		"    [notInLegend]",
+	].join("\n"),
+	language: "plaintext",
+	theme: "myCustomTheme",
+	// semantic tokens provider is disabled by default
+	"semanticHighlighting.enabled": true,
+});

package/website/src/website/data/playground-samples/extending-language-services/semantic-tokens-provider-example/sample.json

@@ -0,0 +1,3 @@
+{
+	"title": "Semantic Tokens Provider Example"
+}

package/website/src/website/data/playground-samples/extending-language-services/symbols-provider-example/sample.html

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

package/website/src/website/data/playground-samples/extending-language-services/symbols-provider-example/sample.js

@@ -0,0 +1,480 @@
+monaco.languages.registerDocumentSymbolProvider("json", {
+	provideDocumentSymbols: function (model, token) {
+		return [
+			{
+				range: {
+					startLineNumber: 1,
+					startColumn: 1,
+					endLineNumber: 2,
+					endColumn: 1,
+				},
+				name: "File",
+				kind: 0,
+				detail: "",
+				tags: [],
+				selectionRange: {
+					startLineNumber: 1,
+					startColumn: 1,
+					endLineNumber: 2,
+					endColumn: 1,
+				},
+			},
+			{
+				range: {
+					startLineNumber: 1,
+					startColumn: 1,
+					endLineNumber: 2,
+					endColumn: 1,
+				},
+				name: "Module",
+				kind: 1,
+				detail: "",
+				tags: [],
+				selectionRange: {
+					startLineNumber: 1,
+					startColumn: 1,
+					endLineNumber: 2,
+					endColumn: 1,
+				},
+			},
+			{
+				range: {
+					startLineNumber: 1,
+					startColumn: 1,
+					endLineNumber: 2,
+					endColumn: 1,
+				},
+				name: "Namespace",
+				kind: 2,
+				detail: "",
+				tags: [],
+				selectionRange: {
+					startLineNumber: 1,
+					startColumn: 1,
+					endLineNumber: 2,
+					endColumn: 1,
+				},
+			},
+			{
+				range: {
+					startLineNumber: 1,
+					startColumn: 1,
+					endLineNumber: 2,
+					endColumn: 1,
+				},
+				name: "Package",
+				kind: 3,
+				detail: "",
+				tags: [],
+				selectionRange: {
+					startLineNumber: 1,
+					startColumn: 1,
+					endLineNumber: 2,
+					endColumn: 1,
+				},
+			},
+			{
+				range: {
+					startLineNumber: 1,
+					startColumn: 1,
+					endLineNumber: 2,
+					endColumn: 1,
+				},
+				name: "Class",
+				kind: 4,
+				detail: "",
+				tags: [],
+				selectionRange: {
+					startLineNumber: 1,
+					startColumn: 1,
+					endLineNumber: 2,
+					endColumn: 1,
+				},
+			},
+			{
+				range: {
+					startLineNumber: 1,
+					startColumn: 1,
+					endLineNumber: 2,
+					endColumn: 1,
+				},
+				name: "Method",
+				kind: 5,
+				detail: "",
+				tags: [],
+				selectionRange: {
+					startLineNumber: 1,
+					startColumn: 1,
+					endLineNumber: 2,
+					endColumn: 1,
+				},
+			},
+			{
+				range: {
+					startLineNumber: 1,
+					startColumn: 1,
+					endLineNumber: 2,
+					endColumn: 1,
+				},
+				name: "Property",
+				kind: 6,
+				detail: "",
+				tags: [],
+				selectionRange: {
+					startLineNumber: 1,
+					startColumn: 1,
+					endLineNumber: 2,
+					endColumn: 1,
+				},
+			},
+			{
+				range: {
+					startLineNumber: 1,
+					startColumn: 1,
+					endLineNumber: 2,
+					endColumn: 1,
+				},
+				name: "Field",
+				kind: 7,
+				detail: "",
+				tags: [],
+				selectionRange: {
+					startLineNumber: 1,
+					startColumn: 1,
+					endLineNumber: 2,
+					endColumn: 1,
+				},
+			},
+			{
+				range: {
+					startLineNumber: 1,
+					startColumn: 1,
+					endLineNumber: 2,
+					endColumn: 1,
+				},
+				name: "Constructor",
+				kind: 8,
+				detail: "",
+				tags: [],
+				selectionRange: {
+					startLineNumber: 1,
+					startColumn: 1,
+					endLineNumber: 2,
+					endColumn: 1,
+				},
+			},
+			{
+				range: {
+					startLineNumber: 1,
+					startColumn: 1,
+					endLineNumber: 2,
+					endColumn: 1,
+				},
+				name: "Enum",
+				kind: 9,
+				detail: "",
+				tags: [],
+				selectionRange: {
+					startLineNumber: 1,
+					startColumn: 1,
+					endLineNumber: 2,
+					endColumn: 1,
+				},
+			},
+			{
+				range: {
+					startLineNumber: 1,
+					startColumn: 1,
+					endLineNumber: 2,
+					endColumn: 1,
+				},
+				name: "Interface",
+				kind: 10,
+				detail: "",
+				tags: [],
+				selectionRange: {
+					startLineNumber: 1,
+					startColumn: 1,
+					endLineNumber: 2,
+					endColumn: 1,
+				},
+			},
+			{
+				range: {
+					startLineNumber: 1,
+					startColumn: 1,
+					endLineNumber: 2,
+					endColumn: 1,
+				},
+				name: "Function",
+				kind: 11,
+				detail: "",
+				tags: [],
+				selectionRange: {
+					startLineNumber: 1,
+					startColumn: 1,
+					endLineNumber: 2,
+					endColumn: 1,
+				},
+			},
+			{
+				range: {
+					startLineNumber: 1,
+					startColumn: 1,
+					endLineNumber: 2,
+					endColumn: 1,
+				},
+				name: "Variable",
+				kind: 12,
+				detail: "",
+				tags: [],
+				selectionRange: {
+					startLineNumber: 1,
+					startColumn: 1,
+					endLineNumber: 2,
+					endColumn: 1,
+				},
+			},
+			{
+				range: {
+					startLineNumber: 1,
+					startColumn: 1,
+					endLineNumber: 2,
+					endColumn: 1,
+				},
+				name: "Constant",
+				kind: 13,
+				detail: "",
+				tags: [],
+				selectionRange: {
+					startLineNumber: 1,
+					startColumn: 1,
+					endLineNumber: 2,
+					endColumn: 1,
+				},
+			},
+			{
+				range: {
+					startLineNumber: 1,
+					startColumn: 1,
+					endLineNumber: 2,
+					endColumn: 1,
+				},
+				name: "String",
+				kind: 14,
+				detail: "",
+				tags: [],
+				selectionRange: {
+					startLineNumber: 1,
+					startColumn: 1,
+					endLineNumber: 2,
+					endColumn: 1,
+				},
+			},
+			{
+				range: {
+					startLineNumber: 1,
+					startColumn: 1,
+					endLineNumber: 2,
+					endColumn: 1,
+				},
+				name: "Number",
+				kind: 15,
+				detail: "",
+				tags: [],
+				selectionRange: {
+					startLineNumber: 1,
+					startColumn: 1,
+					endLineNumber: 2,
+					endColumn: 1,
+				},
+			},
+			{
+				range: {
+					startLineNumber: 1,
+					startColumn: 1,
+					endLineNumber: 2,
+					endColumn: 1,
+				},
+				name: "Boolean",
+				kind: 16,
+				detail: "",
+				tags: [],
+				selectionRange: {
+					startLineNumber: 1,
+					startColumn: 1,
+					endLineNumber: 2,
+					endColumn: 1,
+				},
+			},
+			{
+				range: {
+					startLineNumber: 1,
+					startColumn: 1,
+					endLineNumber: 2,
+					endColumn: 1,
+				},
+				name: "Array",
+				kind: 17,
+				detail: "",
+				tags: [],
+				selectionRange: {
+					startLineNumber: 1,
+					startColumn: 1,
+					endLineNumber: 2,
+					endColumn: 1,
+				},
+			},
+			{
+				range: {
+					startLineNumber: 1,
+					startColumn: 1,
+					endLineNumber: 2,
+					endColumn: 1,
+				},
+				name: "Object",
+				kind: 18,
+				detail: "",
+				tags: [],
+				selectionRange: {
+					startLineNumber: 1,
+					startColumn: 1,
+					endLineNumber: 2,
+					endColumn: 1,
+				},
+			},
+			{
+				range: {
+					startLineNumber: 1,
+					startColumn: 1,
+					endLineNumber: 2,
+					endColumn: 1,
+				},
+				name: "Key",
+				kind: 19,
+				detail: "",
+				tags: [],
+				selectionRange: {
+					startLineNumber: 1,
+					startColumn: 1,
+					endLineNumber: 2,
+					endColumn: 1,
+				},
+			},
+			{
+				range: {
+					startLineNumber: 1,
+					startColumn: 1,
+					endLineNumber: 2,
+					endColumn: 1,
+				},
+				name: "Null",
+				kind: 20,
+				detail: "",
+				tags: [],
+				selectionRange: {
+					startLineNumber: 1,
+					startColumn: 1,
+					endLineNumber: 2,
+					endColumn: 1,
+				},
+			},
+			{
+				range: {
+					startLineNumber: 1,
+					startColumn: 1,
+					endLineNumber: 2,
+					endColumn: 1,
+				},
+				name: "EnumMember",
+				kind: 21,
+				detail: "",
+				tags: [],
+				selectionRange: {
+					startLineNumber: 1,
+					startColumn: 1,
+					endLineNumber: 2,
+					endColumn: 1,
+				},
+			},
+			{
+				range: {
+					startLineNumber: 1,
+					startColumn: 1,
+					endLineNumber: 2,
+					endColumn: 1,
+				},
+				name: "Struct",
+				kind: 22,
+				detail: "",
+				tags: [],
+				selectionRange: {
+					startLineNumber: 1,
+					startColumn: 1,
+					endLineNumber: 2,
+					endColumn: 1,
+				},
+			},
+			{
+				range: {
+					startLineNumber: 1,
+					startColumn: 1,
+					endLineNumber: 2,
+					endColumn: 1,
+				},
+				name: "Event",
+				kind: 23,
+				detail: "",
+				tags: [],
+				selectionRange: {
+					startLineNumber: 1,
+					startColumn: 1,
+					endLineNumber: 2,
+					endColumn: 1,
+				},
+			},
+			{
+				range: {
+					startLineNumber: 1,
+					startColumn: 1,
+					endLineNumber: 2,
+					endColumn: 1,
+				},
+				name: "Operator",
+				kind: 24,
+				detail: "",
+				tags: [],
+				selectionRange: {
+					startLineNumber: 1,
+					startColumn: 1,
+					endLineNumber: 2,
+					endColumn: 1,
+				},
+			},
+			{
+				range: {
+					startLineNumber: 1,
+					startColumn: 1,
+					endLineNumber: 2,
+					endColumn: 1,
+				},
+				name: "TypeParameter",
+				kind: 25,
+				detail: "",
+				tags: [],
+				selectionRange: {
+					startLineNumber: 1,
+					startColumn: 1,
+					endLineNumber: 2,
+					endColumn: 1,
+				},
+			},
+		];
+	},
+});
+
+// press Ctrl+Shift+O to show the symbols in the editor
+monaco.editor.create(document.getElementById("container"), {
+	value: '{\n\t"dependencies": {\n\t\t\n\t}\n}\n',
+	language: "json",
+});

package/website/src/website/data/playground-samples/extending-language-services/symbols-provider-example/sample.json

@@ -0,0 +1,3 @@
+{
+	"title": "Symbols Provider Example"
+}

package/website/src/website/data/playground-samples/interacting-with-the-editor/adding-a-command-to-an-editor-instance/sample.html

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

package/website/src/website/data/playground-samples/interacting-with-the-editor/adding-a-command-to-an-editor-instance/sample.js

@@ -0,0 +1,43 @@
+var jsCode = [
+	'"use strict";',
+	"function Person(age) {",
+	"	if (age) {",
+	"		this.age = age;",
+	"	}",
+	"}",
+	"Person.prototype.getAge = function () {",
+	"	return this.age;",
+	"};",
+].join("\n");
+
+var editor = monaco.editor.create(document.getElementById("container"), {
+	value: jsCode,
+	language: "javascript",
+});
+
+var myCondition1 = editor.createContextKey(
+	/*key name*/ "myCondition1",
+	/*default value*/ false
+);
+var myCondition2 = editor.createContextKey(
+	/*key name*/ "myCondition2",
+	/*default value*/ false
+);
+
+editor.addCommand(
+	monaco.KeyCode.Tab,
+	function () {
+		// services available in `ctx`
+		console.log("my command is executing!");
+	},
+	"myCondition1 && myCondition2"
+);
+// @ts-ignore
+myCondition1.set(true);
+
+setTimeout(function () {
+	console.log("now enabling also myCondition2, try pressing Tab!");
+	// @ts-ignore
+	myCondition2.set(true);
+	// you can use myCondition2.reset() to go back to the default
+}, 2000);

package/website/src/website/data/playground-samples/interacting-with-the-editor/adding-a-command-to-an-editor-instance/sample.json

@@ -0,0 +1,3 @@
+{
+	"title": "Adding a Command to an Editor Instance"
+}

package/website/src/website/data/playground-samples/interacting-with-the-editor/adding-a-keybinding-to-an-existing-command/sample.html

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