Port autosave

Author: nikeee

src/components/EditorPane.tsx

@@ -2,23 +2,14 @@ import { default as MonacoEditor } from "@monaco-editor/react";
 import type * as monaco from "monaco-editor";
 import { Component } from "react";
 
-import { saveLastSource } from "../config.js";
-import * as ls from "../dot-monaco/index.js";
-
-type Monaco = typeof monaco;
-
 type EditorPaneProps = {
 	defaultValue?: string;
 	onChangeValue(value: string): void;
 	onValueError(err: monaco.editor.IMarkerData[]): void;
 };
 
-const SOURCE_SAVE_TIMEOUT = 5 * 1000; // 5 seconds
-
 export default class EditorPane extends Component<EditorPaneProps, object> {
-	#processor: ls.LanguageProcessor | undefined;
 	#editor: monaco.editor.IStandaloneCodeEditor | undefined;
-	#autoSaveTimeout: ReturnType<typeof setTimeout> | undefined = undefined;
 
 	state: object = {};
 
@@ -29,36 +20,8 @@ export default class EditorPane extends Component<EditorPaneProps, object> {
 		}
 	}
 
-	#editorWillMount = (monaco: Monaco): void => {
-		ls.registerService(monaco, ls.service);
-		this.#processor = ls.service.processor;
-	};
-
-	#onChange = (
-		value: string | undefined,
-		_event: monaco.editor.IModelContentChangedEvent,
-	): void => {
-		const p = this.#processor;
-		const e = this.#editor;
-		if (!p || !e) return;
-
-		if (typeof this.#autoSaveTimeout !== "undefined") {
-			clearTimeout(this.#autoSaveTimeout);
-		}
-		this.#autoSaveTimeout = setTimeout(
-			() => saveLastSource(value),
-			SOURCE_SAVE_TIMEOUT,
-		);
-	};
-
 	render() {
 		const defaultValue = this.props.defaultValue || "";
-		return (
-			<MonacoEditor
-				defaultValue={defaultValue}
-				onChange={this.#onChange}
-				beforeMount={this.#editorWillMount}
-			/>
-		);
+		return <MonacoEditor defaultValue={defaultValue} />;
 	}
 }

src/index.tsx

@@ -8,7 +8,12 @@ import "./index.scss";
 
 import Navigation from "./components/Navigation.js";
 import SplitEditor from "./components/SplitEditor.js";
-import { getLastState, mergeStates, saveLastEngine } from "./config.js";
+import {
+	getLastState,
+	mergeStates,
+	saveLastEngine,
+	saveLastSource,
+} from "./config.js";
 import { FileSaver } from "./FileSaver.js";
 import { exportAs, type SupportedEngine, saveSource } from "./rendering.js";
 import { tutorial } from "./samples/index.js";
@@ -17,7 +22,7 @@ import {
 	type ExportableFormat,
 	sourceFormatExtension,
 	supportedEngines,
-} from "./viz";
+} from "./viz/index.js";
 
 const defaultEngine = supportedEngines[1];
 
@@ -31,12 +36,16 @@ interface AppProps {
 
 const defaultSource = tutorial;
 
+const SOURCE_SAVE_TIMEOUT = 5 * 1000; // 5 seconds
+
 class App extends Component<AppProps, AppState> {
 	#currentSource: string | undefined = undefined;
 	#saver: FileSaver = new FileSaver();
 	#editorRef: RefObject<import("./components/SplitEditor").default | null> =
 		createRef();
 
+	#autoSaveTimeout: ReturnType<typeof setTimeout> | undefined = undefined;
+
 	state: AppState;
 
 	constructor(p: AppProps) {
@@ -77,6 +86,15 @@ class App extends Component<AppProps, AppState> {
 
 	#sourceChanged = (source: string): void => {
 		this.#currentSource = source;
+
+		if (typeof this.#autoSaveTimeout !== "undefined") {
+			clearTimeout(this.#autoSaveTimeout);
+		}
+
+		this.#autoSaveTimeout = setTimeout(
+			() => saveLastSource(source),
+			SOURCE_SAVE_TIMEOUT,
+		);
 	};
 
 	#share = (): boolean => {