@harmoniclabs/monaco-editor 0.52.0

package/webpack-plugin/package.json

@@ -0,0 +1,45 @@
+{
+	"name": "monaco-editor-webpack-plugin",
+	"version": "7.1.1",
+	"description": "A webpack plugin for the Monaco Editor",
+	"main": "out/index.js",
+	"typings": "./out/index.d.ts",
+	"scripts": {
+		"watch": "tsc -w -p tsconfig.json",
+		"compile": "tsc -p tsconfig.json",
+		"prepublishOnly": "npm run compile"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/microsoft/monaco-editor.git"
+	},
+	"keywords": [
+		"webpack",
+		"monaco",
+		"editor",
+		"loader"
+	],
+	"author": "Microsoft Corporation",
+	"license": "MIT",
+	"bugs": {
+		"url": "https://github.com/microsoft/monaco-editor/issues"
+	},
+	"homepage": "https://github.com/microsoft/monaco-editor#readme",
+	"peerDependencies": {
+		"webpack": "^4.5.0 || 5.x",
+		"monaco-editor": ">= 0.31.0"
+	},
+	"devDependencies": {
+		"css-loader": "^6.6.0",
+		"file-loader": "^6.2.0",
+		"glob": "^7.2.0",
+		"monaco-editor": "^0.32.0",
+		"style-loader": "^3.3.1",
+		"typescript": "^5.4.5",
+		"webpack": "^5.68.0",
+		"webpack-cli": "^4.9.2"
+	},
+	"dependencies": {
+		"loader-utils": "^2.0.2"
+	}
+}

package/webpack-plugin/tsconfig.json

@@ -0,0 +1,11 @@
+{
+	"compilerOptions": {
+		"module": "commonjs",
+		"outDir": "out",
+		"target": "es6",
+		"declaration": true,
+		"strict": true
+	},
+	"include": ["src"],
+	"exclude": ["node_modules"]
+}

package/website/.prettierrc.json

@@ -0,0 +1,6 @@
+{
+	"trailingComma": "es5",
+	"tabWidth": 4,
+	"semi": true,
+	"useTabs": true
+}

package/website/index/samples/sample.mdx.txt

@@ -0,0 +1,92 @@
+---
+frontmatter: data
+yaml: true
+---
+
+[link](https://example.com)
+
+~~~
+aasd
+asd
+asd
+~~~
+
+# Hello MDX {1+2}
+
+import { MyComponent } from './MyComponent'
+
+This is **bold {'foo' + 1} text**
+
+This is _emphasis {'foo' + 1} text_
+
+This is *emphasis {'foo' + 1} text too*
+
+    This is an indented *code* block
+
+export function foo() {
+  console.log('asd', 1)
+  if(true) {
+    return 'yep'
+  }
+  return 'nope'
+}
+
+
+This is regular content
+
+- this is a list
+
+* this is also a list
+
++ me too!
+
+1. pizza
+2. fries
+3. ice cream
+
+----
+
+_________
+
+***\
+~~~css
+body {
+  color: red;
+}
+~~~
+
+> - this is a list
+>
+> * this is also a list
+>
+> + me too!
+>
+> 1. pizza
+> 2. fries
+> 3. ice cream
+>
+> ---
+>
+> _________
+>
+> ***
+>
+> ```css
+> body {
+>   color: red;
+> }
+> ```
+
+> This is a blockquote
+>
+>> This is a nested {'blockquote'}
+
+{'foo' + 1 + 2 + {} + 12}
+
+{/* this is a comment */}
+
+<MyComponent contenteditable className="text-green-700" id='foo' width={100 + 100}>
+
+  This is **also** markdown.
+
+</MyComponent>

package/website/package.json

@@ -0,0 +1,60 @@
+{
+	"name": "my-application",
+	"version": "0.0.1",
+	"scripts": {
+		"dev": "webpack serve --hot --mode development",
+		"build-webpack": "webpack --mode production",
+		"build": "yarn typedoc && yarn build-webpack",
+		"dev-disk": "webpack --mode development --watch",
+		"typedoc": "typedoc --options ./typedoc/typedoc.json",
+		"test": "yarn ts-node scripts/check-playground-samples-js.ts"
+	},
+	"dependencies": {
+		"@popperjs/core": "^2.11.5",
+		"@types/base64-js": "^1.3.0",
+		"@types/bootstrap": "^5.2.0",
+		"@types/node": "^18.6.1",
+		"base64-js": "^1.5.1",
+		"bootstrap": "^5.2.0",
+		"bootstrap-icons": "^1.9.1",
+		"classnames": "^2.2.6",
+		"html-inline-css-webpack-plugin": "^1.11.1",
+		"lzma": "^2.3.2",
+		"messagepack": "^1.1.12",
+		"mini-css-extract-plugin": "^2.6.1",
+		"mobx": "^5.15.4",
+		"mobx-react": "^6.2.2",
+		"monaco-editor": "^0.42.0-dev-20230906",
+		"react": "^17.0.2",
+		"react-bootstrap": "^2.4.0",
+		"react-dom": "^17.0.2",
+		"typedoc": "^0.25.12",
+		"@vscode/web-editors": "./vscode-web-editors.tgz"
+	},
+	"devDependencies": {
+		"@types/classnames": "^2.3.1",
+		"@types/glob": "^8.1.0",
+		"@types/html-webpack-plugin": "^3.2.2",
+		"@types/react": "^17.0.3",
+		"@types/react-dom": "^17.0.3",
+		"@types/webpack": "^4.41.10",
+		"clean-webpack-plugin": "^3.0.0",
+		"copy-webpack-plugin": "^11.0.0",
+		"css-loader": "^3.5.1",
+		"file-loader": "^6.0.0",
+		"glob": "^9.2.1",
+		"html-webpack-plugin": "^5.5.0",
+		"raw-loader": "^4.0.2",
+		"sass": "^1.32.8",
+		"sass-loader": "^11.0.1",
+		"script-loader": "^0.7.2",
+		"style-loader": "^1.1.3",
+		"ts-loader": "^9.3.1",
+		"ts-node": "^10.9.1",
+		"typescript": "^5.4.5",
+		"webpack": "^5.90.1",
+		"webpack-bundle-analyzer": "^4.5.0",
+		"webpack-cli": "^4.10.0",
+		"webpack-dev-server": "^4.9.3"
+	}
+}

package/website/scripts/check-playground-samples-js.ts

@@ -0,0 +1,58 @@
+import { spawn } from "child_process";
+import { globSync } from "glob";
+import { exit } from "process";
+
+(async () => {
+	let someFileError = false;
+	const files = globSync("src/website/data/playground-samples/*/*/*.js");
+	type Result = { file: string; status: number; stdout: string };
+	const promises: Promise<Result>[] = [];
+	for (const file of files) {
+		promises.push(
+			new Promise<Result>((resolve) => {
+				const process = spawn(
+					"yarn",
+					[
+						"tsc",
+						"--target",
+						"es6",
+						"--noEmit",
+						"--allowJs",
+						"--checkJs",
+						"--skipLibCheck",
+						"../out/monaco-editor/monaco.d.ts",
+						file,
+					],
+					{ shell: true }
+				);
+				let buffer = "";
+				process.on("exit", () => {
+					resolve({
+						file: file,
+						status: process.exitCode ?? 1,
+						stdout: buffer,
+					});
+				});
+				process.stdout.on("data", (data) => {
+					buffer += data.toString();
+				});
+				process.stderr.on("data", (data) => {
+					buffer += data.toString();
+				});
+			})
+		);
+	}
+	for (const promise of promises) {
+		const result = await promise;
+		console.log(result.file);
+		if (result.status != 0) {
+			console.log(result.stdout.toString());
+			someFileError = true;
+		}
+	}
+
+	if (someFileError) {
+		console.error("Some files had type errors.");
+		exit(1);
+	}
+})();

package/website/src/monaco-loader.ts

@@ -0,0 +1,111 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+export function getLoadedMonaco(): typeof monaco {
+	if (!monaco) {
+		throw new Error("monaco is not loaded yet");
+	}
+	return monaco;
+}
+
+export function getMonaco(): typeof monaco | undefined {
+	return (window as any).monaco;
+}
+
+export interface IMonacoSetup {
+	loaderUrl: string;
+	loaderConfigPaths: Record<string, string>;
+	codiconUrl: string;
+	monacoTypesUrl: string | undefined;
+}
+
+let loading = false;
+let resolve: (value: typeof monaco) => void;
+let reject: (error: unknown) => void;
+let loadMonacoPromise = new Promise<typeof monaco>((res, rej) => {
+	resolve = res;
+	reject = rej;
+});
+
+export async function waitForLoadedMonaco(): Promise<typeof monaco> {
+	return loadMonacoPromise;
+}
+
+export async function loadMonaco(
+	setup: IMonacoSetup = prodMonacoSetup
+): Promise<typeof monaco> {
+	if (!loading) {
+		loading = true;
+		_loadMonaco(setup).then(resolve, reject);
+	}
+	return loadMonacoPromise;
+}
+
+async function _loadMonaco(setup: IMonacoSetup): Promise<typeof monaco> {
+	const global = self as any;
+
+	if (!(global as any).require) {
+		await loadScript(setup.loaderUrl);
+	}
+
+	global.AMD = true;
+	global.getCodiconPath = () => {
+		return setup.codiconUrl;
+	};
+
+	/** @type {any} */
+	const req = global.require as any;
+	req.config({ paths: setup.loaderConfigPaths });
+
+	return new Promise((res) => {
+		// First load editor.main. If it inlines the plugins, we don't want to try to load them from the server.
+		req(["vs/editor/editor.main"], () => {
+			if ((setup as any).onlyCore) {
+				res(monaco);
+				return;
+			}
+			req(
+				[
+					"vs/basic-languages/monaco.contribution",
+					"vs/language/css/monaco.contribution",
+					"vs/language/html/monaco.contribution",
+					"vs/language/json/monaco.contribution",
+					"vs/language/typescript/monaco.contribution",
+				],
+				() => {
+					res(monaco);
+				}
+			);
+		});
+	});
+}
+
+function loadScript(path: string): Promise<void> {
+	return new Promise((res) => {
+		const script = document.createElement("script");
+		script.onload = () => res();
+		script.async = true;
+		script.type = "text/javascript";
+		script.src = path; // CodeQL [SM01507] This is safe because the runner (that allows for dynamic paths) runs in an isolated iframe. The hosting website uses a static path configuration. // CodeQL [SM03712] This is safe because the runner (that allows for dynamic paths) runs in an isolated iframe. The hosting website uses a static path configuration.
+		document.head.appendChild(script);
+	});
+}
+
+export const prodMonacoSetup = getMonacoSetup(
+	"node_modules/monaco-editor/min/vs"
+);
+
+export function getMonacoSetup(corePath: string): IMonacoSetup {
+	const loaderConfigPaths = {
+		vs: `${corePath}`,
+	};
+
+	return {
+		loaderUrl: `${corePath}/loader.js`,
+		loaderConfigPaths,
+		codiconUrl: `${corePath}/base/browser/ui/codicons/codicon/codicon.ttf`,
+		monacoTypesUrl: undefined,
+	};
+}

package/website/src/runner/debug.ts

@@ -0,0 +1,75 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { loadMonaco } from "../monaco-loader";
+import { IPreviewState } from "../shared";
+import { LzmaCompressor } from "../website/utils/lzmaCompressor";
+import "./style.scss";
+
+let monacoPromise: Promise<any> | undefined = undefined;
+
+async function initialize(state: IPreviewState) {
+	if (monacoPromise) {
+		throw new Error("already initialized");
+	}
+
+	const loadingContainerDiv = document.createElement("div");
+	loadingContainerDiv.className = "loader-container";
+	const loadingDiv = document.createElement("div");
+	loadingDiv.className = "loader";
+	loadingContainerDiv.appendChild(loadingDiv);
+	document.body.appendChild(loadingContainerDiv);
+
+	monacoPromise = loadMonaco(state.monacoSetup);
+	await monacoPromise;
+
+	loadingContainerDiv.remove();
+
+	const style = document.createElement("style");
+	style.id = "custom-style";
+	style.innerHTML = state.css; // CodeQL [SM03712] This is safe because the runner runs in an isolated iframe. This feature is essential to the functionality of the playground. // CodeQL [SM02688] This is safe because the runner runs in an isolated iframe. This feature is essential to the functionality of the playground.
+	document.body.appendChild(style);
+
+	document.body.innerHTML += state.html;
+
+	const js = state.js;
+
+	try {
+		eval(js); // CodeQL [SM01632] This is safe because the runner runs in an isolated iframe. This feature is essential to the functionality of the playground. // CodeQL [SM02688] This is safe because the runner runs in an isolated iframe. This feature is essential to the functionality of the playground.
+	} catch (err) {
+		const pre = document.createElement("pre");
+		pre.appendChild(
+			document.createTextNode(`${err}: ${(err as any).state}`)
+		);
+		document.body.insertBefore(pre, document.body.firstChild);
+	}
+}
+
+async function main() {
+	const compressor = new LzmaCompressor<IPreviewState>();
+	const stateStr = new URLSearchParams(window.location.search).get("state");
+	const state = compressor.decodeData<IPreviewState>(stateStr!);
+
+	const previousStateStr = localStorage.getItem("stateStr");
+	if (previousStateStr === stateStr) {
+		initialize(state);
+	} else {
+		// If it does not, show the load button
+		const loadButton = document.createElement("button");
+		loadButton.style.position = "absolute";
+		loadButton.style.top = "50%";
+		loadButton.style.left = "50%";
+		loadButton.style.transform = "translate(-50%, -50%)";
+		loadButton.innerText = "Load";
+		loadButton.style.padding = "10px 20px";
+		loadButton.onclick = () => {
+			loadButton.remove();
+			localStorage.setItem("stateStr", stateStr!);
+			initialize(state);
+		};
+		document.body.appendChild(loadButton);
+	}
+}
+main();

package/website/src/runner/index.ts

@@ -0,0 +1,104 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { loadMonaco } from "../monaco-loader";
+import { IMessageFromRunner, IMessageToRunner, IPreviewState } from "../shared";
+import "./style.scss";
+
+window.addEventListener("message", (event) => {
+	const isInSandbox = window.origin === "null";
+	if (!isInSandbox) {
+		// To prevent someone from using this html file to run arbitrary code in non-sandboxed context
+		console.error("not in sandbox");
+		return;
+	}
+	const e = event.data as IMessageToRunner | { kind: undefined };
+	if (e.kind === "initialize") {
+		initialize(e.state);
+	} else if (e.kind === "update-css") {
+		const style = document.getElementById(
+			"custom-style"
+		) as HTMLStyleElement;
+		style.innerHTML = e.css; // CodeQL [SM03712] This is safe because the runner runs in an isolated iframe.
+	}
+});
+
+let monacoPromise: Promise<any> | undefined = undefined;
+
+async function initialize(state: IPreviewState) {
+	if (monacoPromise) {
+		throw new Error("already initialized");
+	}
+
+	const loadingContainerDiv = document.createElement("div");
+	loadingContainerDiv.className = "loader-container";
+	const loadingDiv = document.createElement("div");
+	loadingDiv.className = "loader";
+	loadingContainerDiv.appendChild(loadingDiv);
+	document.body.appendChild(loadingContainerDiv);
+
+	monacoPromise = loadMonaco(state.monacoSetup);
+	await monacoPromise;
+
+	loadingContainerDiv.remove();
+
+	const style = document.createElement("style");
+	style.id = "custom-style";
+	style.innerHTML = state.css; // CodeQL [SM03712] This is safe because the runner runs in an isolated iframe. This feature is essential to the functionality of the playground. // CodeQL [SM02688] This is safe because the runner runs in an isolated iframe. This feature is essential to the functionality of the playground.
+	document.body.appendChild(style);
+
+	document.body.innerHTML += state.html;
+
+	const js = massageJs(state.js);
+
+	try {
+		eval(js); // CodeQL [SM01632] This is safe because the runner runs in an isolated iframe. This feature is essential to the functionality of the playground. // CodeQL [SM02688] This is safe because the runner runs in an isolated iframe. This feature is essential to the functionality of the playground.
+	} catch (err) {
+		const pre = document.createElement("pre");
+		pre.appendChild(
+			document.createTextNode(`${err}: ${(err as any).state}`)
+		);
+		document.body.insertBefore(pre, document.body.firstChild);
+	}
+}
+
+function sendMessageToParent(message: IMessageFromRunner) {
+	window.parent.postMessage(message, "*");
+}
+
+(globalThis as any).$sendMessageToParent = sendMessageToParent;
+
+(globalThis as any).$bindModelToCodeStr = function bindModel(
+	model: any,
+	codeStringName: string
+) {
+	model.onDidChangeContent(() => {
+		const value = model.getValue();
+		sendMessageToParent({
+			kind: "update-code-string",
+			codeStringName,
+			value,
+		});
+	});
+};
+
+function massageJs(js: string) {
+	/*
+	Alternate experimental syntax: // bind to code string: `editor.getModel()` -> codeString
+
+	const bindToCodeStringRegexp = /\/\/ bind to code string: `(.*?)` -> (.*?)(\n|$)/g;
+	js = js.replaceAll(bindToCodeStringRegexp, (match, p1, p2) => {
+		return `globalThis.bindModelToCodeStr(${p1}, ${JSON.stringify(p2)})\n`;
+	});
+	*/
+
+	const setFromRegexp = /\/*\Wset from `(.*?)`:\W*\//g;
+	for (const m of js.matchAll(setFromRegexp)) {
+		const p1 = m[1];
+		const target = JSON.stringify("set from `" + p1 + "`");
+		js += `\n try { globalThis.$bindModelToCodeStr(${p1}, ${target}); } catch (e) { console.error(e); }`;
+	}
+	return js;
+}

package/website/src/runner/style.scss

@@ -0,0 +1,35 @@
+body {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	overflow: hidden;
+}
+html,
+body {
+	height: 100%;
+}
+
+.loader-container {
+	width: 100%;
+	height: 100%;
+	display: flex;
+}
+
+.loader {
+	border: 16px solid #f2f1f1;
+	border-top: 16px solid #2c9ae3;
+	border-radius: 50%;
+	width: 70px;
+	height: 70px;
+	animation: spin 2s linear infinite;
+	margin: auto;
+}
+
+@keyframes spin {
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
+}

package/website/src/shared.ts

@@ -0,0 +1,37 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { IMonacoSetup } from "./monaco-loader";
+
+export type IMessageToRunner =
+	| {
+			kind: "initialize";
+			state: IPreviewState;
+	  }
+	| {
+			kind: "update-css";
+			css: string;
+	  };
+
+export type IMessageFromRunner =
+	| {
+			kind: "update-code-string";
+			codeStringName: string;
+			value: string;
+	  }
+	| {
+			kind: "reload";
+	  };
+
+export interface IPlaygroundProject {
+	js: string;
+	css: string;
+	html: string;
+}
+
+export interface IPreviewState extends IPlaygroundProject {
+	reloadKey: number;
+	monacoSetup: IMonacoSetup;
+}

package/website/src/tsconfig.json

@@ -0,0 +1,19 @@
+{
+	"compilerOptions": {
+		"target": "esnext",
+		"module": "ESNext",
+		"moduleResolution": "Bundler",
+		"strict": true,
+		"outDir": "dist",
+		"skipLibCheck": true,
+		"rootDir": ".",
+		"resolveJsonModule": true,
+		"newLine": "LF",
+		"sourceMap": true,
+		"jsx": "react",
+		"experimentalDecorators": true,
+		"useDefineForClassFields": false,
+		"noEmit": true
+	},
+	"include": ["**/*", "../node_modules/monaco-editor/monaco.d.ts"]
+}

package/website/src/types.d.ts

@@ -0,0 +1,13 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+declare module "lzma/src/lzma_worker" {
+	const x: any;
+	export = x;
+}
+declare module "base64-js" {
+	const x: any;
+	export = x;
+}

package/website/src/website/bootstrap.scss

@@ -0,0 +1,6 @@
+@import "~bootstrap/scss/bootstrap";
+@import "~bootstrap-icons/font/bootstrap-icons.css";
+
+.btn-light {
+	--bs-btn-hover-bg: undefined !important;
+}

package/website/src/website/code-oss.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><style>.st0{fill:#f6f6f6;fill-opacity:0}.st1{fill:#fff}.st2{fill:#167abf}</style><path class="st0" d="M1024 1024H0V0h1024v1024z"/><path class="st1" d="M1024 85.333v853.333H0V85.333h1024z"/><path class="st2" d="M0 85.333h298.667v853.333H0V85.333zm1024 0v853.333H384V85.333h640zm-554.667 160h341.333v-64H469.333v64zm341.334 533.334H469.333v64h341.333l.001-64zm128-149.334H597.333v64h341.333l.001-64zm0-149.333H597.333v64h341.333l.001-64zm0-149.333H597.333v64h341.333l.001-64z"/></svg>