feat: implemented persistence to localStorage in try-editor

Author: Mridul Dhiman

src/components/editor/MonacoEditor.jsx

@@ -9,7 +9,7 @@ import { useCallback, useEffect, useState } from "react";
 export function snakeCase(fname) {
   return fname.toLowerCase().replace(/[_() ]/g, "-");
 }
-export default function MonacoEditor({ theme, readOnly = false }) {
+export default function MonacoEditor({ theme, readOnly = false, shard = false, template }) {
   const { sandpack } = useSandpack();
   const { files, activeFile, updateCurrentFile } = sandpack;
   const monaco = useMonaco();
@@ -42,6 +42,16 @@ export default function MonacoEditor({ theme, readOnly = false }) {
   const handleMount = useCallback((node) => {
     // console.log(monaco)
     setEditor(node);
+
+    node.onDidChangeModelContent(() => {
+      if(!shard) {
+        // save the files to local storage if user is not authenticated
+        const filesToSave = {...files};
+        filesToSave[activeFile] = node.getValue(); 
+        console.log("filesToSave", filesToSave);
+        localStorage.setItem(`try-editor-${template}`, JSON.stringify(filesToSave));
+      }
+    });
   });
 
   const jsTypes = ["js", "jsx"];

src/components/editor/SandpackEditor.jsx

@@ -32,6 +32,7 @@ import ReactMarkdown from "react-markdown";
 export default function SandpackEditor({
   id,
   shardDetails: initialShardDetails,
+  shard = false,
   template = "react",
   room = false,
   readOnly = false,
@@ -57,6 +58,20 @@ export default function SandpackEditor({
       setDependencies(dep);
       setDevDependencies(devDep);
       setShardDetails(data);
+    }  else if(localStorage.getItem(`try-editor-${template}`)) {
+      const data = JSON.parse(localStorage.getItem(`try-editor-${template}`));
+      console.log("data", data);
+      const finalData = {
+        files: {},
+        dependencies: {},
+        devDependencies: {},
+      };
+
+      finalData.files = data ?? {};
+      setFiles(finalData.files ?? {});
+      setDependencies(finalData.dependencies ?? {});
+      setDevDependencies(data.devDependencies ?? {});
+      setShardDetails(finalData);
     } else {
       setFiles({});
       setShardDetails(null);
@@ -141,7 +156,7 @@ export default function SandpackEditor({
           />
           }
 
-          <MonacoEditor theme={theme} readOnly={readOnly} />
+          <MonacoEditor theme={theme} readOnly={readOnly} shard={shard} template={template} />
           <SandpackPreview
             showOpenInCodeSandbox={false}
             showOpenNewtab={true}