@harmoniclabs/monaco-editor 0.52.0

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

@@ -0,0 +1,49 @@
+// Explanation:
+// First, we need to know the ID of the command.
+// If you know the default key bindings, you can get the ID by following these steps.
+// 1. open Visual Studio Code and navigate to "Preferences => Keyboard Shortcuts".
+// 2. enter a shortcut key (e.g. Tab, Escape, Enter, etc.) in the search text input at the top.
+// 3. Once the commands are filtered, you will need to find which command is the target command by ID and name.
+
+// In this sample, the cursor can be moved with the Ctrl key and HJKL.
+// To move the cursor to the left, we usually use the LeftArrow key, so we type `LeftArrow` in the search form.
+// You will see a number of commands, but you will find the most likely one, `cursorLeft`.
+// Note that the `When` column says `textInputFocus`.
+// In a similar fashion, you will find the commands `cursorDown`, `cursorUp`, and `cursorRight`.
+
+monaco.editor.addKeybindingRules([
+	{
+		keybinding: monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyH,
+		command: "cursorLeft", // ID
+		when: "textInputFocus", // When
+	},
+	{
+		keybinding: monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyJ,
+		command: "cursorDown",
+		when: "textInputFocus",
+	},
+	{
+		keybinding: monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyK,
+		command: "cursorUp",
+		when: "textInputFocus",
+	},
+	{
+		keybinding: monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyL,
+		command: "cursorRight",
+		when: "textInputFocus",
+	},
+]);
+
+monaco.editor.create(document.getElementById("container"), {
+	value: [
+		"",
+		"class Example {",
+		"\tprivate m:number;",
+		"",
+		"\tpublic met(): string {",
+		'\t\treturn "Hello world!";',
+		"\t}",
+		"}",
+	].join("\n"),
+	language: "typescript",
+});

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

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

package/website/src/website/data/playground-samples/interacting-with-the-editor/adding-an-action-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-an-action-to-an-editor-instance/sample.js

@@ -0,0 +1,52 @@
+var editor = monaco.editor.create(document.getElementById("container"), {
+	value: [
+		"",
+		"class Example {",
+		"\tprivate m:number;",
+		"",
+		"\tpublic met(): string {",
+		'\t\treturn "Hello world!";',
+		"\t}",
+		"}",
+	].join("\n"),
+	language: "typescript",
+});
+
+// Explanation:
+// Press F1 => the action will appear and run if it is enabled
+// Press Ctrl-F10 => the action will run if it is enabled
+// Press Chord Ctrl-K, Ctrl-M => the action will run if it is enabled
+
+editor.addAction({
+	// An unique identifier of the contributed action.
+	id: "my-unique-id",
+
+	// A label of the action that will be presented to the user.
+	label: "My Label!!!",
+
+	// An optional array of keybindings for the action.
+	keybindings: [
+		monaco.KeyMod.CtrlCmd | monaco.KeyCode.F10,
+		// chord
+		monaco.KeyMod.chord(
+			monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyK,
+			monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyM
+		),
+	],
+
+	// A precondition for this action.
+	precondition: null,
+
+	// A rule to evaluate on top of the precondition in order to dispatch the keybindings.
+	keybindingContext: null,
+
+	contextMenuGroupId: "navigation",
+
+	contextMenuOrder: 1.5,
+
+	// Method that will be executed when the action is triggered.
+	// @param editor The editor instance is passed in as a convenience
+	run: function (ed) {
+		alert("i'm running => " + ed.getPosition());
+	},
+});

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

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

package/website/src/website/data/playground-samples/interacting-with-the-editor/chapter.json

@@ -0,0 +1,3 @@
+{
+	"title": "Interacting With The Editor"
+}

package/website/src/website/data/playground-samples/interacting-with-the-editor/customizing-the-line-numbers/sample.html

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

package/website/src/website/data/playground-samples/interacting-with-the-editor/customizing-the-line-numbers/sample.js

@@ -0,0 +1,37 @@
+function lineNumbersFunc(originalLineNumber) {
+	var map = [
+		"O",
+		"I",
+		"II",
+		"III",
+		"IV",
+		"V",
+		"VI",
+		"VII",
+		"VIII",
+		"IX",
+		"X",
+	];
+	if (originalLineNumber < map.length) {
+		return map[originalLineNumber];
+	}
+	return originalLineNumber;
+}
+
+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",
+	lineNumbers: lineNumbersFunc,
+});

package/website/src/website/data/playground-samples/interacting-with-the-editor/customizing-the-line-numbers/sample.json

@@ -0,0 +1,3 @@
+{
+	"title": "Customizing The Line Numbers"
+}

package/website/src/website/data/playground-samples/interacting-with-the-editor/line-and-inline-decorations/sample.css

@@ -0,0 +1,13 @@
+.myInlineDecoration {
+	color: red !important;
+	cursor: pointer;
+	text-decoration: underline;
+	font-weight: bold;
+	font-style: oblique;
+}
+
+.myLineDecoration {
+	background: lightblue;
+	width: 5px !important;
+	margin-left: 3px;
+}

package/website/src/website/data/playground-samples/interacting-with-the-editor/line-and-inline-decorations/sample.html

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

package/website/src/website/data/playground-samples/interacting-with-the-editor/line-and-inline-decorations/sample.js

@@ -0,0 +1,30 @@
+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 decorations = editor.createDecorationsCollection([
+	{
+		range: new monaco.Range(3, 1, 5, 1),
+		options: {
+			isWholeLine: true,
+			linesDecorationsClassName: "myLineDecoration",
+		},
+	},
+	{
+		range: new monaco.Range(7, 1, 7, 24),
+		options: { inlineClassName: "myInlineDecoration" },
+	},
+]);

package/website/src/website/data/playground-samples/interacting-with-the-editor/line-and-inline-decorations/sample.json

@@ -0,0 +1,3 @@
+{
+	"title": "Line and Inline Decorations"
+}

package/website/src/website/data/playground-samples/interacting-with-the-editor/listening-to-key-events/sample.html

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

package/website/src/website/data/playground-samples/interacting-with-the-editor/listening-to-key-events/sample.js

@@ -0,0 +1,11 @@
+var editor = monaco.editor.create(document.getElementById("container"), {
+	value: "function hello() {\n\talert('Hello world!');\n}",
+	language: "javascript",
+});
+
+var myBinding = editor.addCommand(monaco.KeyCode.F9, function () {
+	alert("F9 pressed!");
+});
+
+// You can't dispose `addCommand`
+// If you need to dispose it you might use `addAction` or `registerCommand`

package/website/src/website/data/playground-samples/interacting-with-the-editor/listening-to-key-events/sample.json

@@ -0,0 +1,3 @@
+{
+	"title": "Listening To Key Events"
+}

package/website/src/website/data/playground-samples/interacting-with-the-editor/listening-to-mouse-events/sample.css

@@ -0,0 +1,6 @@
+.myGlyphMarginClass {
+	background: red;
+}
+.myContentClass {
+	background: lightblue;
+}

package/website/src/website/data/playground-samples/interacting-with-the-editor/listening-to-mouse-events/sample.html

@@ -0,0 +1,5 @@
+<div id="output" style="height: 29%; font-family: 'Courier New', monospace">
+	Last 3 events:<br />
+</div>
+<div style="background: #ccc; height: 1%"></div>
+<div id="container" style="height: 70%"></div>

package/website/src/website/data/playground-samples/interacting-with-the-editor/listening-to-mouse-events/sample.js

@@ -0,0 +1,114 @@
+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",
+	glyphMargin: true,
+	contextmenu: false,
+});
+
+var decorations = editor.createDecorationsCollection([
+	{
+		range: new monaco.Range(3, 1, 3, 1),
+		options: {
+			isWholeLine: true,
+			className: "myContentClass",
+			glyphMarginClassName: "myGlyphMarginClass",
+		},
+	},
+]);
+
+// Add a zone to make hit testing more interesting
+var viewZoneId = null;
+editor.changeViewZones(function (changeAccessor) {
+	var domNode = document.createElement("div");
+	domNode.style.background = "lightgreen";
+	viewZoneId = changeAccessor.addZone({
+		afterLineNumber: 3,
+		heightInLines: 3,
+		domNode: domNode,
+	});
+});
+
+// Add a content widget (scrolls inline with text)
+var contentWidget = {
+	domNode: (function () {
+		var domNode = document.createElement("div");
+		domNode.innerHTML = "My content widget";
+		domNode.style.background = "grey";
+		return domNode;
+	})(),
+	getId: function () {
+		return "my.content.widget";
+	},
+	getDomNode: function () {
+		return this.domNode;
+	},
+	getPosition: function () {
+		return {
+			position: {
+				lineNumber: 7,
+				column: 8,
+			},
+			preference: [
+				monaco.editor.ContentWidgetPositionPreference.ABOVE,
+				monaco.editor.ContentWidgetPositionPreference.BELOW,
+			],
+		};
+	},
+};
+editor.addContentWidget(contentWidget);
+
+// Add an overlay widget
+var overlayWidget = {
+	domNode: (function () {
+		var domNode = document.createElement("div");
+		domNode.innerHTML = "My overlay widget";
+		domNode.style.background = "grey";
+		domNode.style.right = "30px";
+		domNode.style.top = "50px";
+		return domNode;
+	})(),
+	getId: function () {
+		return "my.overlay.widget";
+	},
+	getDomNode: function () {
+		return this.domNode;
+	},
+	getPosition: function () {
+		return null;
+	},
+};
+editor.addOverlayWidget(overlayWidget);
+
+var output = document.getElementById("output");
+function showEvent(str) {
+	while (output.childNodes.length > 6) {
+		output.removeChild(output.firstChild.nextSibling.nextSibling);
+	}
+	output.appendChild(document.createTextNode(str));
+	output.appendChild(document.createElement("br"));
+}
+
+editor.onMouseMove(function (e) {
+	showEvent("mousemove - " + e.target.toString());
+});
+editor.onMouseDown(function (e) {
+	showEvent("mousedown - " + e.target.toString());
+});
+editor.onContextMenu(function (e) {
+	showEvent("contextmenu - " + e.target.toString());
+});
+editor.onMouseLeave(function (e) {
+	showEvent("mouseleave");
+});

package/website/src/website/data/playground-samples/interacting-with-the-editor/listening-to-mouse-events/sample.json

@@ -0,0 +1,3 @@
+{
+	"title": "Listening To Mouse Events"
+}

package/website/src/website/data/playground-samples/interacting-with-the-editor/rendering-glyphs-in-the-margin/sample.css

@@ -0,0 +1,7 @@
+.myGlyphMarginClass {
+	background: red;
+}
+.myContentClass {
+	/* Make sure to use transparent colors for the selection to work */
+	background: rgba(173, 216, 230, 0.5);
+}

package/website/src/website/data/playground-samples/interacting-with-the-editor/rendering-glyphs-in-the-margin/sample.html

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

package/website/src/website/data/playground-samples/interacting-with-the-editor/rendering-glyphs-in-the-margin/sample.js

@@ -0,0 +1,30 @@
+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",
+	glyphMargin: true,
+});
+
+var decorations = editor.createDecorationsCollection([
+	{
+		range: new monaco.Range(3, 1, 3, 1),
+		options: {
+			isWholeLine: true,
+			className: "myContentClass",
+			glyphMarginClassName: "myGlyphMarginClass",
+		},
+	},
+]);
+
+// You can now use `decorations` to change or remove the decoration

package/website/src/website/data/playground-samples/interacting-with-the-editor/rendering-glyphs-in-the-margin/sample.json

@@ -0,0 +1,3 @@
+{
+	"title": "Rendering Glyphs In The Margin"
+}

package/website/src/website/data/playground-samples/interacting-with-the-editor/revealing-a-position/sample.html

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

package/website/src/website/data/playground-samples/interacting-with-the-editor/revealing-a-position/sample.js

@@ -0,0 +1,41 @@
+var jsCodeArr = [
+	"// ------------------------------",
+	"// ------------------------------",
+	"function Person(age) {",
+	"	if (age) {",
+	"		this.age = age;",
+	"	}",
+	"}",
+	"Person.prototype.getAge = function () {",
+	"	return this.age;",
+	"};",
+	"",
+	"",
+];
+
+jsCodeArr = jsCodeArr.concat(jsCodeArr.slice(0));
+jsCodeArr = jsCodeArr.concat(jsCodeArr.slice(0));
+jsCodeArr = jsCodeArr.concat(jsCodeArr.slice(0));
+
+jsCodeArr[49] +=
+	"And this is some long line. And this is some long line. And this is some long line. And this is some long line. And this is some long line. ";
+
+var editor = monaco.editor.create(document.getElementById("container"), {
+	value: jsCodeArr.join("\n"),
+	language: "javascript",
+});
+
+editor.revealPositionInCenter({ lineNumber: 50, column: 120 });
+// Also see:
+// - editor.revealLine
+// - editor.revealLineInCenter
+// - editor.revealLineInCenterIfOutsideViewport
+// - editor.revealLines
+// - editor.revealLinesInCenter
+// - editor.revealLinesInCenterIfOutsideViewport
+// - editor.revealPosition
+// - editor.revealPositionInCenter
+// - editor.revealPositionInCenterIfOutsideViewport
+// - editor.revealRange
+// - editor.revealRangeInCenter
+// - editor.revealRangeInCenterIfOutsideViewport

package/website/src/website/data/playground-samples/interacting-with-the-editor/revealing-a-position/sample.json

@@ -0,0 +1,3 @@
+{
+	"title": "Revealing a Position"
+}

package/website/src/website/index.tsx

@@ -0,0 +1,10 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import "./bootstrap.scss";
+import "./style.scss";
+import { App } from "./pages/App";
+
+const elem = document.createElement("div");
+elem.className = "root";
+document.body.append(elem);
+ReactDOM.render(<App />, elem);

package/website/src/website/monaco-loader-chunk.ts

@@ -0,0 +1,15 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+// This is an optional load optimization - it inlines the AMD loader and the core editor.
+// We have to configure this before loading editor.main, as it tries to load css
+(global as any).require = {
+	paths: { vs: "node_modules/monaco-editor/min/vs" },
+};
+require("script-loader!../../node_modules/monaco-editor/min/vs/loader");
+require("script-loader!../../node_modules/monaco-editor/min/vs/editor/editor.main.js");
+import { loadMonaco } from "../monaco-loader";
+
+loadMonaco();

package/website/src/website/monacoEditorVersion.ts

@@ -0,0 +1,8 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import packageJson from "monaco-editor/package.json";
+
+export const monacoEditorVersion = packageJson.version;

package/website/src/website/pages/App.tsx

@@ -0,0 +1,21 @@
+import { Home } from "./home/Home";
+import { PlaygroundPage } from "./playground/PlaygroundPage";
+import { docs, home, monarch, playground } from "./routes";
+import * as React from "react";
+import { DocsPage } from "./DocsPage";
+import { MonarchPage } from "./MonarchPage";
+
+export class App extends React.Component {
+	render() {
+		if (home.isActive) {
+			return <Home />;
+		} else if (playground.isActive) {
+			return <PlaygroundPage />;
+		} else if (docs.isActive) {
+			return <DocsPage />;
+		} else if (monarch.isActive) {
+			return <MonarchPage />;
+		}
+		return <>Page does not exist</>;
+	}
+}

package/website/src/website/pages/DocsPage.tsx

@@ -0,0 +1,103 @@
+import { observable } from "mobx";
+import { Page } from "../components/Page";
+import {
+	HistoryController,
+	IHistoryModel,
+	ILocation,
+} from "../utils/ObservableHistory";
+import * as React from "react";
+
+export class DocsPage extends React.Component implements IHistoryModel {
+	private _lastIFrame: HTMLIFrameElement | null = null;
+
+	private readonly setIFrame = (iframe: HTMLIFrameElement | null) => {
+		if (iframe === this._lastIFrame) {
+			return;
+		}
+		if (this._lastIFrame) {
+			this._lastIFrame.contentWindow?.removeEventListener(
+				"hashchange",
+				this.onIFrameLoad
+			);
+			this._lastIFrame.removeEventListener("load", this.onIFrameLoad);
+		}
+		if (iframe) {
+			iframe.addEventListener("load", this.onIFrameLoad);
+		}
+		this._lastIFrame = iframe;
+	};
+
+	private readonly onIFrameLoad = () => {
+		this._lastIFrame!.contentWindow?.addEventListener("hashchange", () =>
+			this.updateLocationFromIFrame()
+		);
+		this.updateLocationFromIFrame();
+	};
+
+	private updateLocationFromIFrame(): void {
+		const match =
+			this._lastIFrame?.contentWindow!.location.href.match(
+				/typedoc\/(.*)/
+			);
+		if (match) {
+			let hashValue = match[1];
+			if (hashValue === "index.html") {
+				hashValue = "";
+			}
+			this.location = { hashValue, searchParams: {} };
+		}
+	}
+
+	@observable.ref
+	location!: ILocation;
+	historyId: number = 0;
+
+	getTypedocUrl(): string {
+		let hashValue = this.location?.hashValue ?? "";
+		// make sure hashValue is a valid path
+		if (
+			!hashValue.match(/^[a-zA-Z0-9#\._\-\/]*$/) ||
+			hashValue.indexOf("..") !== -1
+		) {
+			hashValue = "";
+		}
+
+		return `./typedoc/${hashValue}`;
+	}
+
+	updateLocation(newLocation: ILocation): void {
+		this.location = newLocation;
+
+		if (this._lastIFrame) {
+			this._lastIFrame.src = this.getTypedocUrl();
+		}
+	}
+
+	constructor(props: any) {
+		super(props);
+
+		new HistoryController((location) => {
+			this.location = location;
+			return this;
+		});
+	}
+
+	// not reactive to prevent unnecessary reloads of the iframe
+	render() {
+		if (!localStorage.getItem("tsd-theme")) {
+			// Set default theme to light, unfortunately there is no config option for this
+			localStorage.setItem("tsd-theme", "light");
+		}
+
+		return (
+			<Page>
+				<iframe
+					ref={this.setIFrame}
+					className="full-iframe"
+					frameBorder={0}
+					src={this.getTypedocUrl()}
+				/>
+			</Page>
+		);
+	}
+}

package/website/src/website/pages/MonarchPage.tsx

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { Page } from "../components/Page";
+
+export class MonarchPage extends React.Component<{}, {}> {
+	render() {
+		return (
+			<Page>
+				<iframe
+					frameBorder={0}
+					className="full-iframe"
+					src="./monarch-static.html"
+				/>
+			</Page>
+		);
+	}
+}