persist mermaid data to storage

src/components/App.tsx

@@ -1178,10 +1178,12 @@ class App extends React.Component<AppProps, AppState> {
                           app={this}
                         >
                           {this.props.children}
+                          {this.state.activeTool.type === "mermaid" && (
                             <MermaidToExcalidraw
                               appState={this.state}
                               elements={this.scene.getNonDeletedElements()}
                             />
+                          )}
                         </LayerUI>
 
                         <div className="excalidraw-textEditorContainer" />

src/components/MermaidToExcalidraw.tsx

@@ -18,6 +18,31 @@ import {
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { canvasToBlob } from "../data/blob";
 
+const LOCAL_STORAGE_KEY_MERMAID_TO_EXCALIDRAW = "mermaid-to-excalidraw";
+
+const saveMermaidDataToStorage = (data: string) => {
+  try {
+    localStorage.setItem(LOCAL_STORAGE_KEY_MERMAID_TO_EXCALIDRAW, data);
+  } catch (error: any) {
+    // Unable to access window.localStorage
+    console.error(error);
+  }
+};
+
+const importMermaidDataFromStorage = () => {
+  try {
+    const data = localStorage.getItem(LOCAL_STORAGE_KEY_MERMAID_TO_EXCALIDRAW);
+    if (data) {
+      return data;
+    }
+  } catch (error: any) {
+    // Unable to access localStorage
+    console.error(error);
+  }
+
+  return null;
+};
+
 const MermaidToExcalidraw = ({
   appState,
   elements,
@@ -34,6 +59,13 @@ const MermaidToExcalidraw = ({
   const canvasRef = useRef<HTMLDivElement>(null);
   const app = useApp();
 
+  useEffect(() => {
+    const data = importMermaidDataFromStorage();
+    if (data) {
+      setText(data);
+    }
+  }, []);
+
   useEffect(() => {
     const canvasNode = canvasRef.current;
     if (!canvasNode) {
@@ -86,13 +118,11 @@ const MermaidToExcalidraw = ({
   }, [text]);
 
   const setAppState = useExcalidrawSetAppState();
-  if (appState?.activeTool?.type !== "mermaid") {
-    return null;
-  }
 
   const onClose = () => {
     const activeTool = updateActiveTool(appState, { type: "selection" });
     setAppState({ activeTool });
+    saveMermaidDataToStorage(text);
   };
 
   const onSelect = () => {

vitest.config.ts

@@ -1,5 +1,4 @@
 import { defineConfig } from "vitest/config";
-
 export default defineConfig({
   test: {
     setupFiles: ["./src/setupTests.ts"],