Merge branch 'main' into mdx

website/src/runner/index.ts

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 
 import { loadMonaco } from "../monaco-loader";
-import { IMessage, IPreviewState } from "../shared";
+import { IMessageFromRunner, IMessageToRunner, IPreviewState } from "../shared";
 import "./style.scss";
 
 window.addEventListener("message", (event) => {
@@ -14,7 +14,7 @@ window.addEventListener("message", (event) => {
 		console.error("not in sandbox");
 		return;
 	}
-	const e = event.data as IMessage | { kind: undefined };
+	const e = event.data as IMessageToRunner | { kind: undefined };
 	if (e.kind === "initialize") {
 		initialize(e.state);
 	} else if (e.kind === "update-css") {
@@ -64,16 +64,23 @@ async function initialize(state: IPreviewState) {
 	}
 }
 
-(globalThis as any).bindModelToCodeStr = function bindModel(
+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();
-		window.parent.postMessage(
-			{ kind: "update-code-string", codeStringName, value },
-			"*"
-		);
+		sendMessageToParent({
+			kind: "update-code-string",
+			codeStringName,
+			value,
+		});
 	});
 };
 
@@ -91,7 +98,7 @@ function massageJs(js: string) {
 	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); }`;
+		js += `\n try { globalThis.$bindModelToCodeStr(${p1}, ${target}); } catch (e) { console.error(e); }`;
 	}
 	return js;
 }

website/src/shared.ts

@@ -5,7 +5,7 @@
 
 import { IMonacoSetup } from "./monaco-loader";
 
-export type IMessage =
+export type IMessageToRunner =
 	| {
 			kind: "initialize";
 			state: IPreviewState;
@@ -15,6 +15,16 @@ export type IMessage =
 			css: string;
 	  };
 
+export type IMessageFromRunner =
+	| {
+			kind: "update-code-string";
+			codeStringName: string;
+			value: string;
+	  }
+	| {
+			kind: "reload";
+	  };
+
 export interface IPlaygroundProject {
 	js: string;
 	css: string;

website/src/website/components/monaco/MonacoEditor.tsx

@@ -249,6 +249,7 @@ export class MonacoDiffEditor extends React.Component<
 			minimap: { enabled: false },
 			automaticLayout: false,
 			theme: this.props.theme,
+			originalEditable: true,
 		});
 		this.editor.setModel({
 			original: this.props.originalModel,

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

@@ -2,5 +2,6 @@
 	background: red;
 }
 .myContentClass {
-	background: lightblue;
+	/* Make sure to use transparent colors for the selection to work */
+	background: rgba(173, 216, 230, 0.5);
 }

website/src/website/pages/home/Home.tsx

@@ -217,6 +217,7 @@ class EditorDemo extends React.Component {
 						value={this.currentSample.value || "loading..."}
 						language={this.currentLanguage?.id}
 						theme={this.currentTheme.id}
+						onDidValueChange={() => {}}
 					/>
 				</div>
 			</div>

website/src/website/pages/playground/PlaygroundModel.ts

@@ -247,11 +247,13 @@ export class PlaygroundModel {
 		const regexp = new RegExp(
 			"(\\b" +
 				escapeRegexpChars(codeStringName) +
-				":[^\\w`]*`)([^`\\\\]|\\n|\\\\\\\\|\\\\`)*`"
+				":[^\\w`]*`)([^`\\\\\\n]|\\n|\\\\\\\\|\\\\\\`|\\\\\\$)*`"
 		);
-		debugger;
 		const js = this.js;
-		const str = value.replaceAll("\\", "\\\\").replaceAll("`", "\\`");
+		const str = value
+			.replaceAll("\\", "\\\\")
+			.replaceAll("$", "\\$$$$")
+			.replaceAll("`", "\\`");
 		const newJs = js.replace(regexp, "$1" + str + "`");
 		const autoReload = this.settings.autoReload;
 		this.settings.autoReload = false;
@@ -320,12 +322,18 @@ function projectEquals(
 	project2: IPlaygroundProject
 ): boolean {
 	return (
-		project1.css === project2.css &&
-		project1.html === project2.html &&
-		project1.js === project2.js
+		normalizeLineEnding(project1.css) ===
+			normalizeLineEnding(project2.css) &&
+		normalizeLineEnding(project1.html) ===
+			normalizeLineEnding(project2.html) &&
+		normalizeLineEnding(project1.js) === normalizeLineEnding(project2.js)
 	);
 }
 
+function normalizeLineEnding(str: string): string {
+	return str.replace(/\r\n/g, "\n");
+}
+
 class StateUrlSerializer implements IHistoryModel {
 	public readonly dispose = Disposable.fn();
 
@@ -441,16 +449,21 @@ class StateUrlSerializer implements IHistoryModel {
 			this._sourceOverride = source;
 		}
 
+		function findExample(hashValue: string): PlaygroundExample | undefined {
+			if (hashValue.startsWith("example-")) {
+				hashValue = hashValue.substring("example-".length);
+			}
+			return getPlaygroundExamples()
+				.flatMap((e) => e.examples)
+				.find((e) => e.id === hashValue);
+		}
+
+		let example: PlaygroundExample | undefined;
+
 		if (!hashValue) {
 			this.model.selectedExample = getPlaygroundExamples()[0].examples[0];
-		} else if (hashValue.startsWith("example-")) {
-			const exampleName = hashValue.substring("example-".length);
-			const example = getPlaygroundExamples()
-				.flatMap((e) => e.examples)
-				.find((e) => e.id === exampleName);
-			if (example) {
-				this.model.selectedExample = example;
-			}
+		} else if ((example = findExample(hashValue))) {
+			this.model.selectedExample = example;
 		} else {
 			let p: IPlaygroundProject | undefined = undefined;
 			if (this.cachedState?.hash === hashValue) {

website/src/website/pages/playground/Preview.tsx

@@ -2,7 +2,11 @@ import * as React from "react";
 import { IPreviewHandler, PlaygroundModel } from "./PlaygroundModel";
 import { observer } from "mobx-react";
 import { observable } from "mobx";
-import { IMessage, IPreviewState } from "../../../shared";
+import {
+	IMessageFromRunner,
+	IMessageToRunner,
+	IPreviewState,
+} from "../../../shared";
 
 @observer
 export class Preview
@@ -40,7 +44,7 @@ export class Preview
 				return;
 			}
 
-			const message: IMessage = {
+			const message: IMessageToRunner = {
 				kind: "initialize",
 				state: this.currentState,
 			};
@@ -52,15 +56,11 @@ export class Preview
 			if (e.source !== iframe.contentWindow) {
 				return;
 			}
-			const data = e.data as
-				| {
-						kind: "update-code-string";
-						codeStringName: string;
-						value: string;
-				  }
-				| { kind: "" };
+			const data = e.data as IMessageFromRunner;
 			if (data.kind === "update-code-string") {
 				this.props.model.setCodeString(data.codeStringName, data.value);
+			} else if (data.kind === "reload") {
+				this.props.model.reload();
 			}
 		});
 	};
@@ -83,7 +83,7 @@ export class Preview
 				{
 					kind: "update-css",
 					css: state.css,
-				} as IMessage,
+				} as IMessageToRunner,
 				{
 					targetOrigin: "*",
 				}