feat: add ability to listen to code changes

src/components/code-editor.tsx

@@ -1,32 +1,30 @@
 import { Uri, editor } from "monaco-editor";
-import React, { useEffect } from "react";
+import React, { useEffect, useMemo } from "react";
 
 export namespace CodeEditor {
   export interface Props {
     className?: string | undefined;
     value?: string | undefined;
     filePath?: string | undefined;
     language?: string | undefined;
+    onChange?: ((filePath: string, value: string) => void) | undefined;
   }
 }
 
-const CodeEditor: React.FC<CodeEditor.Props> = ({ className, value = "", filePath, language }) => {
-  const containerRef = React.createRef<HTMLDivElement>();
 
+const CodeEditor: React.FC<CodeEditor.Props> = ({ className, value = "", filePath, language, onChange }) => {
+  const containerRef = React.createRef<HTMLDivElement>();
+  const ctrl = useMemo(() => new CodeEditorController(), []);
+  useEffect(() => ctrl.createMonacoEditor(containerRef.current!), [ctrl, containerRef]);
   useEffect(() => {
     const model = editor.createModel(value, language, filePath ? Uri.file(filePath) : undefined);
-    const codeEditor = editor.create(containerRef.current!, {
-      model,
-      theme: "vs-dark",
-    });
-    const resizeCodeEditor = () => codeEditor.layout();
-    window.addEventListener("resize", resizeCodeEditor);
+    ctrl.setModel(model);
+    const changeListener = model.onDidChangeContent(() => onChange?.(filePath || "", model.getValue()));
     return () => {
-      window.removeEventListener("resize", resizeCodeEditor);
-      codeEditor.dispose();
+      changeListener.dispose();
       model.dispose();
     };
-  });
+  }, [value, filePath, language, onChange, ctrl]);
 
   return <div className={className} ref={containerRef} />;
 };
@@ -37,3 +35,25 @@ const MemoizedCodeEditor = React.memo(CodeEditor);
 
 export { MemoizedCodeEditor as CodeEditor };
 export default MemoizedCodeEditor;
+
+class CodeEditorController {
+  codeEditor!: editor.IStandaloneCodeEditor;
+  createMonacoEditor(el: HTMLDivElement) {
+    if (this.codeEditor) {
+      this.codeEditor.dispose();
+    }
+    this.codeEditor = editor.create(el, { theme: "vs-dark" });
+    return this.bindEvents();
+  }
+  setModel(model: editor.ITextModel) {
+    this.codeEditor.setModel(model);
+  }
+  private bindEvents() {
+    const resizeCodeEditor = () => this.codeEditor.layout();
+    window.addEventListener("resize", resizeCodeEditor);
+    return () => {
+      window.removeEventListener("resize", resizeCodeEditor);
+      this.codeEditor.dispose();
+    };
+  }
+}

src/components/editor.tsx

@@ -30,6 +30,7 @@ export namespace Editor {
     onClearSaved?: FileExplorer.Props["onClearSaved"];
     onPreviewLoad?: Preview.Props["onPreviewLoad"];
     onPreviewClose?: Preview.Props["onPreviewClose"];
+    onCodeEditorChange?: Preview.Props["onCodeEditorChange"];
   }
 
   export type OpenFile = OpenTextFile | OpenImageFile | Preview;
@@ -66,6 +67,7 @@ export const Editor = React.memo<Editor.Props>(
     onTabClose,
     onPreviewLoad,
     onPreviewClose,
+    onCodeEditorChange,
   }) => {
     const tabs = useMemo(
       () =>
@@ -88,6 +90,7 @@ export const Editor = React.memo<Editor.Props>(
                   value={openFile.fileContents}
                   filePath={openFile.filePath}
                   key={openFile.filePath}
+                  onChange={onCodeEditorChange}
                 />
               </Suspense>
             )}

src/components/preview.tsx

@@ -11,6 +11,7 @@ export namespace Preview {
     filePath: string;
     onPreviewLoad?: ((filePath: string, iframe: HTMLIFrameElement) => unknown) | undefined;
     onPreviewClose?: ((filePath: string) => unknown) | undefined;
+    onCodeEditorChange?: ((filePath: string, value: string) => void) | undefined;
   }
 }
 

src/fs/async-fs-api.ts

@@ -1,5 +1,6 @@
 export interface AsyncFileSystem {
   statFile(filePath: string): Promise<FileSystemStats>;
+  writeFile(filePath: string, contents: FileSystemWriteChunkType): Promise<void>;
   readFile(filePath: string): Promise<Uint8Array>;
   readTextFile(filePath: string): Promise<string>;
   readJSONFile(filePath: string): Promise<unknown>;

src/fs/browser-file-system.ts

@@ -21,6 +21,12 @@ export function createBrowserFileSystem(
         lastModified: file.lastModified,
       };
     },
+    async writeFile(filePath, contents) {
+      const fileHandle = await getEnsuredFileHandle(filePath);
+      const writable = await fileHandle.createWritable();
+      await writable.write(contents);
+      await writable.close();
+    },
     async readFile(filePath) {
       const fileHandle = await getEnsuredFileHandle(filePath);
       const file = await fileHandle.getFile();

src/playground-app.tsx

@@ -63,10 +63,14 @@ export class PlaygroundApp {
           onTabClose={this.onTabClose}
           onPreviewLoad={this.registerPreview}
           onPreviewClose={this.closePreview}
+          onCodeEditorChange={this.onCodeEditorChange}
         />
       </React.StrictMode>,
     );
   }
+  private onCodeEditorChange = (filePath: string, fileContents: string) => {
+    this.fs?.writeFile(filePath, fileContents).catch(console.error);
+  };
 
   private registerPreview = async (filePath: string, iframe: HTMLIFrameElement) => {
     const previewRPC = createRPCIframe<Preview>(iframe);