feat: restore unsaved content

apps/web/src/editor/input/create.ts

@@ -2,6 +2,9 @@ import * as monaco from "monaco-editor";
 import { RefObject, useEffect } from "react";
 import { SAMPLE_TAILWIND } from "../../samples/tailwind";
 import { EditorState } from "../type";
+import { StoreInterval } from "./input";
+import { loadChangesFromIndexedDB } from "./load";
+import { autoSaveWorkerURL, debounce, saveChangesToIndexedDB } from "./store";
 
 const envDone = { current: false };
 
@@ -76,17 +79,29 @@ export const useEditorCreate = (params: Params): void => {
     const container = containerRef.current;
     if (container === null) throw Error("`container` is null");
 
-    createEnv();
-    const editor = monaco.editor.create(container, {
-      ...OPTIONS,
-      value: SAMPLE_TAILWIND,
-      // value: "",
-    });
-    setEditor(editor);
+    (async () => {
+      const storedEditorValue = await loadChangesFromIndexedDB();
 
-    return () => {
-      setEditor(null);
-      editor.dispose();
-    };
+      createEnv();
+      const editor = monaco.editor.create(container, {
+        ...OPTIONS,
+        value: storedEditorValue || SAMPLE_TAILWIND,
+        // value: "",
+      });
+
+      const autoSave = debounce(() => {
+        const editorValue: string = editor.getValue();
+        saveChangesToIndexedDB(editorValue);
+      }, StoreInterval);
+
+      editor.onDidChangeModelContent(autoSave);
+
+      setEditor(editor);
+
+      return () => {
+        setEditor(null);
+        editor.dispose();
+      };
+    })();
   }, [setEditor, containerRef]);
 };

apps/web/src/editor/input/input.tsx

@@ -11,6 +11,14 @@ interface Props extends EditorState {
   settings: Settings;
 }
 
+export enum EditorStoreName {
+  Database = "monacoEditorDB",
+  Object = "unsavedChanges",
+  Key = "data",
+}
+
+export const StoreInterval = 2000;
+
 export const EditorInput = (props: Props): JSX.Element => {
   const { setEditor, editor, settings } = props;
 

apps/web/src/editor/input/load.ts

@@ -0,0 +1,37 @@
+import { EditorStoreName } from "./input";
+
+export const loadChangesFromIndexedDB = async (): Promise<string> => {
+  return new Promise<string>((resolve, reject) => {
+    const dbPromise = window.indexedDB.open(EditorStoreName.Database, 1);
+
+    dbPromise.onupgradeneeded = (event: IDBVersionChangeEvent) => {
+      const db = (event.target as IDBOpenDBRequest).result as IDBDatabase;
+      db.createObjectStore(EditorStoreName.Object, { autoIncrement: true });
+    };
+
+    dbPromise.onsuccess = (event: Event) => {
+      const db = (event.target as IDBOpenDBRequest).result as IDBDatabase;
+      const transaction: IDBTransaction = db.transaction(
+        EditorStoreName.Object,
+        "readonly"
+      );
+      const store: IDBObjectStore = transaction.objectStore(
+        EditorStoreName.Object
+      );
+
+      const request = store.get(EditorStoreName.Key);
+
+      request.onsuccess = () => {
+        resolve(request.result);
+      };
+
+      request.onerror = () => {
+        reject(request.error);
+      };
+    };
+
+    dbPromise.onerror = (event: Event) => {
+      reject((event.target as IDBOpenDBRequest).error);
+    };
+  });
+};

apps/web/src/editor/input/store.ts

@@ -0,0 +1,55 @@
+import { EditorStoreName } from "./input";
+
+export const debounce = <T extends (...args: any[]) => void>(
+  fn: T,
+  delay: number
+) => {
+  let timeoutId: ReturnType<typeof setTimeout> | null = null;
+
+  return ((...args: Parameters<T>) => {
+    if (timeoutId !== null) clearTimeout(timeoutId);
+
+    timeoutId = setTimeout(() => {
+      fn(...args);
+      timeoutId = null;
+    }, delay);
+  }) as T;
+};
+
+export const saveChangesToIndexedDB = async (
+  changes: string
+): Promise<void> => {
+  return new Promise<void>((resolve, reject) => {
+    const dbPromise = window.indexedDB.open(EditorStoreName.Database, 1);
+
+    dbPromise.onupgradeneeded = (event: IDBVersionChangeEvent) => {
+      const db = (event.target as IDBOpenDBRequest).result as IDBDatabase;
+      db.createObjectStore(EditorStoreName.Object);
+    };
+
+    dbPromise.onsuccess = (event: Event) => {
+      const db = (event.target as IDBOpenDBRequest).result as IDBDatabase;
+      const transaction: IDBTransaction = db.transaction(
+        EditorStoreName.Object,
+        "readwrite"
+      );
+      const store: IDBObjectStore = transaction.objectStore(
+        EditorStoreName.Object
+      );
+
+      const request = store.put(changes, EditorStoreName.Key);
+
+      request.onsuccess = () => {
+        resolve();
+      };
+
+      request.onerror = () => {
+        reject(request.error);
+      };
+    };
+
+    dbPromise.onerror = (event: Event) => {
+      reject((event.target as IDBOpenDBRequest).error);
+    };
+  });
+};