Make code persistent

webserial/src/editor/Monaco.svelte

@@ -3,6 +3,7 @@
     import { onMount } from "svelte";
     import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
     import tsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker";
+    import defaultCode from "./defaultCode.ts?raw";
     import defaultEnv from "./defaultEnv.d.ts?raw";
     import { code } from "./code";
 
@@ -38,8 +39,26 @@
             editor.dispose();
         };
     });
+
+    function resetCode() {
+        $code = defaultCode;
+        editor.setValue($code);
+    }
 </script>
 
+<nav class="navbar">
+    <div class="navbar-brand">
+        <div class="navbar-item"><strong>DMX Memes</strong></div>
+    </div>
+    <div class="navbar-end">
+        <div class="navbar-item">
+            <div class="buttons">
+                <button class="button is-danger" on:click={resetCode}>Reset to default</button>
+                <button class="button is-danger" on:click={() => localStorage.clear()}>Clear local storage</button>
+            </div>
+        </div>
+    </div>
+</nav>
 <div class="parent">
     <div class="editor" bind:this={divEl} />
 </div>

webserial/src/editor/code.ts

@@ -1,5 +1,9 @@
 import { writable } from "svelte/store";
 import defaultCode from "./defaultCode.ts?raw";
 
+const stored = localStorage.getItem("dmxCode") || defaultCode;
+
 /** the TypeScript code as seen in the editor */
-export const code = writable(defaultCode);
+export const code = writable(stored);
+
+code.subscribe((value) => localStorage.setItem("dmxCode", value))