Add monaco editor

package.json

@@ -36,11 +36,14 @@
 		"js-levenshtein": "^1.1.6",
 		"loops": "^6.3.0",
 		"markdown-it": "^14.1.1",
+		"monaco-editor": "^0.55.1",
 		"ms": "^2.1.3",
 		"nanoid": "^5.1.11",
 		"node-statsd": "^0.1.1",
 		"postprocessing": "^7.0.0-beta.16",
 		"preact": "10.29.1",
+		"react": "npm:@preact/compat@^18.3.2",
+		"react-dom": "npm:@preact/compat@^18.3.2",
 		"react-icons": "^5.6.0",
 		"rehype-external-links": "^3.0.0",
 		"sass": "^1.99.0",
@@ -50,8 +53,9 @@
 		"tinykeys": "^3.1.0",
 		"vitest": "^4.1.7",
 		"y-codemirror.next": "^0.3.5",
+		"y-monaco": "^0.1.6",
 		"y-webrtc": "^10.3.0",
-		"yjs": "^13.6.30"
+		"yjs": "^13.6.31"
 	},
 	"devDependencies": {
 		"@babel/standalone": "^7.29.4",

src/components/big-interactive-pages/editor.tsx

@@ -1,5 +1,7 @@
 import styles from "./editor.module.css";
 import CodeMirror from "../codemirror";
+import MonacoComponent from "../monaco";
+type EditorMode = "legacy" | "monaco";
 import Navbar from "../navbar-editor";
 import {
 	IoClose,
@@ -9,18 +11,18 @@ import {
 } from "react-icons/io5";
 import {
 	type Signal,
+	signal,
 	useComputed,
 	useSignal,
 	useSignalEffect,
 } from "@preact/signals";
 import { useEffect, useRef, useState} from "preact/hooks";
-import { codeMirror, errorLog, isNewSaveStrat, muted, type PersistenceState, type RoomState,  screenRef, cleanupRef, reviewState } from "../../lib/state";
+import { codeMirror, codeMirrorEditorText, monacoEditor, monacoEditorText, errorLog, isNewSaveStrat, muted, type PersistenceState, type RoomState,  screenRef, cleanupRef, reviewState } from "../../lib/state";
 import EditorModal from "../popups-etc/editor-modal";
 import { runGame, _performSyntaxCheck } from "../../lib/engine";
 import DraftWarningModal from "../popups-etc/draft-warning";
 import { debounce } from "throttle-debounce";
 import Help from "../popups-etc/help";
-import { collapseRanges } from "../../lib/codemirror/util";
 import { defaultExampleCode } from "../../lib/examples";
 import MigrateToast from "../popups-etc/migrate-toast";
 import { nanoid } from "nanoid";
@@ -33,11 +35,15 @@ import OutOfSpaceModal from "../popups-etc/out-of-space";
 import RoomPasswordPopup from "../popups-etc/room-password";
 import KeyBindingsModal from '../popups-etc/KeyBindingsModal'
 import { PersistenceStateKind } from "../../lib/state";
+import { collapseRanges } from "../../lib/codemirror/util";
+
+const editorMode = signal<EditorMode | null>(null);
+const getEditorCode = () => editorMode.value === "legacy" ? codeMirrorEditorText.value : monacoEditorText.value;
 
 let screenShakeSignal: Signal<number> | null = null;
 
 const performSyntaxCheck = () => {
-	const code = codeMirror.value?.state.doc.toString() ?? "";
+	const code = getEditorCode() ?? "";
 	const res = _performSyntaxCheck(code);
 	if (res.error) {
 		errorLog.value = [];
@@ -51,7 +57,7 @@ export const onRun = async () => {
 
 	if (cleanupRef.value) cleanupRef.value();
 	errorLog.value = [];
-	const code = codeMirror.value?.state.doc.toString() ?? "";
+	const code = getEditorCode() ?? "";
 	const res = runGame(code, screenRef.value, (error) => {
 		errorLog.value = [...errorLog.value, error];
 	});
@@ -98,21 +104,38 @@ let defaultHelpAreaHeight = 350;
 const helpAreaHeightMargin = 0; // The margin between the screen and help area
 
 export const foldTemplateLiteral = (from: number, to: number) => {
-	if (!codeMirror.value) return;
-	collapseRanges(
-		codeMirror.value,
-		[[from, to]]
-	);
+	if (editorMode.value !== "legacy" || !codeMirror.value) return;
+	collapseRanges(codeMirror.value, [[from, to]]);
 }
 
 export const foldAllTemplateLiterals = () => {
-	if (!codeMirror.value) return;
-	const code = codeMirror.value.state.doc.toString() ?? "";
-	const matches = [...code.matchAll(/(map|bitmap|tune)`[\s\S]*?`/g)];
-	collapseRanges(
-		codeMirror.value,
-		matches.map((match) => [match.index!, match.index! + 1])
-	);
+	if (editorMode.value === "legacy") {
+		if (!codeMirror.value) return;
+		const code = codeMirrorEditorText.value ?? "";
+		const matches = [...code.matchAll(/(map|bitmap|tune)`[\s\S]*?`/g)];
+		collapseRanges(codeMirror.value, matches.map((match) => [match.index!, match.index! + 1]));
+		return;
+	}
+
+	const editor = monacoEditor.value;
+	const model = editor?.getModel();
+	if (!editor || !model) return;
+	const previousPosition = editor.getPosition();
+	const previousSelection = editor.getSelection();
+	const matches = [...model.getValue().matchAll(/(map|bitmap|tune)`[\s\S]*?`/g)].reverse();
+	for (const match of matches) {
+		const start = model.getPositionAt(match.index!);
+		const end = model.getPositionAt(match.index! + match[0].length);
+		editor.setSelection({
+			startLineNumber: start.lineNumber,
+			startColumn: start.column,
+			endLineNumber: end.lineNumber,
+			endColumn: end.column,
+		});
+		editor.getAction("editor.fold")?.run();
+	}
+	if (previousSelection) editor.setSelection(previousSelection);
+	if (previousPosition) editor.setPosition(previousPosition);
 };
 
 const shouldShowConflict = (persistenceState: Signal<PersistenceState>, sessionId: string) => {
@@ -256,7 +279,7 @@ const exitTutorial = (persistenceState: Signal<PersistenceState>, sessionId: str
 		if(isNewSaveStrat.value)
 			startSavingGame(persistenceState, undefined);
 		else
-        	saveGame(persistenceState, codeMirror.value!.state.doc.toString(), sessionId);
+		 saveGame(persistenceState, getEditorCode(), sessionId);
 
 	} else {
 		if (persistenceState.value.kind == PersistenceStateKind.SHARED)
@@ -268,6 +291,21 @@ export default function Editor({ persistenceState, cookies, roomState }: EditorP
 	const outputArea = useRef<HTMLDivElement>(null);
 	const screenContainer = useRef<HTMLDivElement>(null);
 	const screenControls = useRef<HTMLDivElement>(null);
+	const monacoEditorRef = useRef<any>(null);
+
+	useEffect(() => {
+		const savedMode = localStorage.getItem("sprig-editor-mode");
+		editorMode.value = savedMode === "monaco" ? "monaco" : "legacy";
+	}, []);
+
+	const switchEditorMode = () => {
+		const code = getEditorCode();
+		const nextMode = editorMode.value === "legacy" ? "monaco" : "legacy";
+		if (nextMode === "monaco") monacoEditorText.value = code;
+		else codeMirrorEditorText.value = code;
+		localStorage.setItem("sprig-editor-mode", nextMode);
+		editorMode.value = nextMode;
+	};
 
 	const [sessionId] = useState(nanoid());
 
@@ -492,7 +530,7 @@ export default function Editor({ persistenceState, cookies, roomState }: EditorP
 					event.preventDefault();
 					if (!continueSaving.value) {
 						continueSaving.value = true;
-						saveGame(persistenceState, codeMirror.value!.state.doc.toString(), sessionId);
+						saveGame(persistenceState, getEditorCode(), sessionId);
 					}
 				}
 			};
@@ -515,12 +553,39 @@ export default function Editor({ persistenceState, cookies, roomState }: EditorP
 	else if (persistenceState.value.kind === PersistenceStateKind.SHARED)
 		initialCode = persistenceState.value.code;
 	else if (persistenceState.value.kind === PersistenceStateKind.IN_MEMORY)
-		initialCode = localStorage.getItem("sprigMemory") ?? defaultExampleCode;
+		initialCode = typeof window !== "undefined"
+			? localStorage.getItem("sprigMemory") ?? defaultExampleCode
+			: defaultExampleCode;
 	else if (isNewSaveStrat.value && persistenceState.value.kind === PersistenceStateKind.COLLAB){
 		if(typeof persistenceState.value.game !== 'string')
 			// @ts-ignore
 			initialCode = persistenceState.value.game.game.code;
 	}
+
+	const editorProps = {
+		persistenceState,
+		roomState,
+		class: styles.code,
+		initialCode,
+		onEditorView: (editor: any) => {
+			if (editorMode.value === "legacy") codeMirror.value = editor;
+			else {
+				monacoEditorRef.current = editor;
+				monacoEditor.value = editor;
+			}
+		},
+		onRunShortcut: onRun,
+		onCodeChange: () => {
+			persistenceState.value = { ...persistenceState.value, stale: true };
+			if (persistenceState.value.kind === PersistenceStateKind.PERSISTED || persistenceState.value.kind === PersistenceStateKind.COLLAB) {
+				persistenceState.value = { ...persistenceState.value, cloudSaveState: "SAVING" };
+				if (!isNewSaveStrat.value) saveGame(persistenceState, getEditorCode(), sessionId);
+			}
+			if (persistenceState.value.kind === PersistenceStateKind.IN_MEMORY) {
+				localStorage.setItem("sprigMemory", getEditorCode());
+			}
+		}
+	};
 
 	// Firefox has weird tab restoring logic. When you, for example, Ctrl-Shift-T, it opens
 	// a kinda broken cached version of the page. And for some reason this reverts the CM
@@ -546,14 +611,10 @@ export default function Editor({ persistenceState, cookies, roomState }: EditorP
 	useEffect(() => {
 		if (reviewState.value.isReviewMode && reviewState.value.reviewCode) {
 			// Set the code in the editor
-			if (codeMirror.value) {
-				codeMirror.value.dispatch({
-					changes: {
-						from: 0,
-						to: codeMirror.value.state.doc.length,
-						insert: reviewState.value.reviewCode
-					}
-				});
+			if (editorMode.value === "legacy" && codeMirror.value) {
+				codeMirror.value.dispatch({ changes: { from: 0, to: codeMirror.value.state.doc.length, insert: reviewState.value.reviewCode } });
+			} else {
+				monacoEditorRef.current?.setValue(reviewState.value.reviewCode);
 			}
 		}
 	}, [reviewState.value.isReviewMode, reviewState.value.reviewCode]);
@@ -567,43 +628,20 @@ export default function Editor({ persistenceState, cookies, roomState }: EditorP
 		:
 			(
 		<div class={styles.page}>
-			<Navbar persistenceState={persistenceState} roomState={roomState}/>
+			<Navbar persistenceState={persistenceState} roomState={roomState} onSwitchEditor={switchEditorMode}/>
 
 			<div class={styles.pageMain}>
 				<div className={styles.codeContainer}>
-					<CodeMirror
-						persistenceState={persistenceState}
-						roomState={roomState}
-						class={styles.code}
-						initialCode={initialCode}
-						onEditorView={(editor) => {
-							codeMirror.value = editor;
-							setTimeout(() => foldAllTemplateLiterals(), 100); // Fold after the document is parsed (gross)
-						}}
-						onRunShortcut={onRun}
-						onCodeChange={() => {
-							persistenceState.value = {
-								...persistenceState.value,
-								stale: true,
-							};
-							if (persistenceState.value.kind === PersistenceStateKind.PERSISTED || persistenceState.value.kind === PersistenceStateKind.COLLAB) {
-								persistenceState.value = {
-									...persistenceState.value,
-									cloudSaveState: "SAVING",
-								};
-								console.log("SAVING")
-								if(!isNewSaveStrat.value)
-									saveGame(persistenceState, codeMirror.value!.state.doc.toString(), sessionId);
-							}
-
-							if (persistenceState.value.kind === PersistenceStateKind.IN_MEMORY) {
-								localStorage.setItem(
-									"sprigMemory",
-									codeMirror.value!.state.doc.toString()
-								);
-							}
-						}}
-					/>
+					{editorMode.value === "legacy" ? (
+						<>
+							<CodeMirror {...editorProps} />
+						</>
+					) : (
+						<>
+							<MonacoComponent {...editorProps} />
+						</>
+					)}
+					{/* Problems window intentionally disabled; restore in follow-up PR.
 					{errorLog.value.length > 0 && (
 						<div class={styles.errors}>
 							<button
@@ -619,7 +657,7 @@ export default function Editor({ persistenceState, cookies, roomState }: EditorP
 								</div>
 							))}
 						</div>
-					)}
+					)} */}
 				</div>
 
 				<div