Save progress to the session storage

src/adapters/storage.ts

@@ -16,5 +16,8 @@ export function createSyncStorage<T>(
     save(data: T): void {
       storage.setItem(key, JSON.stringify(data));
     },
+    clear(): void {
+      storage.removeItem(key);
+    },
   };
 }

src/components/editor/editor-surface.svelte

@@ -8,7 +8,6 @@
   import Resizer, { Orientation } from './resizer.svelte';
 
   interface Props {
-    contentId: string;
     model: editor.IModel;
     widthStorage: SyncStorage<number>;
     panel: Snippet<[{ resizer: Snippet, api: SurfaceApi }]>;

src/components/editor/editor.svelte

@@ -17,7 +17,7 @@
   interface Props<L extends Language, I, O> {
     contentId: string;
     testsData: TestData<I, O>[];
-    initialValues: Record<L, Promise<string>>;
+    initialValues: Record<L, string>;
     testRunnerFactories: Record<L, TestRunnerFactory<I, O>>;
   }
 
@@ -43,34 +43,48 @@
   let lang = $state(
     initialLang in testRunnerFactories ? initialLang : defaultLang
   );
+  let contentStorage = $derived(createSyncStorage(
+    sessionStorage,
+    `editor-${contentId}-${lang}`,
+    initialValues[lang],
+  ));
 
   const model = editor.createModel("");
 
-  function resetEditorContent () {
-    initialValues[lang].then(value => {
-      model.setValue(value);
-    })
-  }
-
   $effect(() => {
+    model.setValue(contentStorage.load());
+    editor.setModelLanguage(model, MONACO_LANGUAGE_ID[lang]);
     langStorage.save(lang);
-    resetEditorContent()
-  });
-
-  let monacoLang = $derived(MONACO_LANGUAGE_ID[lang]);
-
-  $effect(() => {
-    editor.setModelLanguage(model, monacoLang);
-  });
 
+    let saveCallbackId: NodeJS.Timeout
+    const disposable = model.onDidChangeContent(() => {
+      clearTimeout(saveCallbackId)
+      saveCallbackId = setTimeout(() => {
+        contentStorage.save(model.getValue());
+      }, 1000)
+      return () => {
+        clearTimeout(saveCallbackId)
+      }
+    })
+    return () => {
+      clearTimeout(saveCallbackId)
+      disposable.dispose()
+    }
+  })
+  
   const widthStorage = createSyncStorage(
     localStorage,
     "editor-width",
     window.innerWidth - 800
   );
+
+  function resetEditorContent () {
+    contentStorage.clear();
+    model.setValue(initialValues[lang]);
+  }
 </script>
 
-<EditorSurface contentId="{contentId}-{lang}" {model} {widthStorage} >
+<EditorSurface {model} {widthStorage} >
   {#snippet panel({ resizer, api })}
     <Panel
       {api}

src/content/design-patterns/factory/editor.svelte

@@ -8,11 +8,16 @@
   import { jsTestRunnerFactory, tsTestRunnerFactory } from './js/test-runners'
   import { testRunnerFactory as pyTestRunnerFactory } from './python/test-runners'
 
-  const INITIAL_VALUES: Record<Language, Promise<string>> = {
-    [Language.PHP]: import('./php/code.php?raw').then(m => m.default),
-    [Language.TypeScript]: import('./js/code.ts?raw').then(m => m.default),
-    [Language.JavaScript]: import('./js/code.js?raw').then(m => m.default),
-    [Language.Python]: import('./python/code.py?raw').then(m => m.default),
+  import phpInitialValue from './php/code.php?raw'
+  import tsInitialValue from './js/code.ts?raw'
+  import jsInitialValue from './js/code.js?raw'
+  import pyInitialValue from './python/code.py?raw'
+
+  const INITIAL_VALUES: Record<Language, string> = {
+    [Language.PHP]: phpInitialValue,
+    [Language.TypeScript]: tsInitialValue,
+    [Language.JavaScript]: jsInitialValue,
+    [Language.Python]: pyInitialValue,
   }
 
   const TEST_RUNNER_FACTORIES: Record<Language, TestRunnerFactory<Input, Output>> = {

src/shared.ts

@@ -13,4 +13,5 @@ export interface Position {
 export interface SyncStorage<T> {
   load(): T
   save(data: T): void
+  clear(): void
 }