0.17.6-20 Mermaid race condition

zsviczian · Dec 12, 2024 · da76030 · da76030
1 parent d8baf84
commit da76030
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 60 deletions.
diff --git a/packages/excalidraw/components/TTDDialog/MermaidToExcalidraw.tsx b/packages/excalidraw/components/TTDDialog/MermaidToExcalidraw.tsx
@@ -2,7 +2,6 @@ import { useState, useRef, useEffect, useDeferredValue } from "react";
 import type { BinaryFiles } from "../../types";
 import { useApp } from "../App";
 import type {
-  ExcalidrawElement,
   NonDeletedExcalidrawElement,
 } from "../../element/types";
 import { ArrowRightIcon } from "../icons";
@@ -19,17 +18,14 @@ import { TTDDialogPanels } from "./TTDDialogPanels";
 import { TTDDialogPanel } from "./TTDDialogPanel";
 import { TTDDialogInput } from "./TTDDialogInput";
 import { TTDDialogOutput } from "./TTDDialogOutput";
-import type { MermaidConfig } from "@zsviczian/mermaid-to-excalidraw";
-import { parseMermaidToExcalidraw } from "@zsviczian/mermaid-to-excalidraw";
-import { convertToExcalidrawElements } from "../../data/transform";
 import { EditorLocalStorage } from "../../data/EditorLocalStorage";
 import { EDITOR_LS_KEYS } from "../../constants";
 import { debounce, isDevEnv } from "../../utils";
 import { TTDDialogSubmitShortcut } from "./TTDDialogSubmitShortcut";
 
 //zsviczian
 const MERMAID_EXAMPLE =
-  "flowchart TD\n  A[The Excalidraw Plugin is Community Supported] --> B{Will YOU support it?}\n  B -- 👍 Yes --> C[Long-term stability + new features]\n  B -- No 👎 --> D[Plugin eventually stops working]\n  C --> E[Support at https://ko-fi.com/zsolt]\n  E --> F[🎉 Encourage others to support]\n  D --> G[🪦 R.I.P. Excalidraw Plugin]";
+  "flowchart TD\n  A[The Excalidraw Plugin is Community Supported] --> B{Will YOU support it?}\n  B -- 👍 Yes --> C[Long-term stability + new features]\n  B -- No 👎 --> D[Plugin eventually stops working 😢]\n  C --> E[Support at ❤️ https://ko-fi.com/zsolt]\n  E --> F[📢 Encourage others to support]\n  D --> G[🪦 R.I.P. Excalidraw Plugin]";
 
 const debouncedSaveMermaidDefinition = debounce(saveMermaidDataToStorage, 300);
 
@@ -40,8 +36,12 @@ const MermaidToExcalidraw = ({
   mermaidToExcalidrawLib: MermaidToExcalidrawLibProps;
   selectedElements: readonly NonDeletedExcalidrawElement[]; //zsviczian
 }) => {
+  const selectedMermaidImage = selectedElements.filter(
+    (el) => el.type === "image" && el.customData?.mermaidText,
+  )[0]; //zsviczian
   const [text, setText] = useState(
     () =>
+      selectedMermaidImage?.customData?.mermaidText || //zsviczian
       EditorLocalStorage.get<string>(EDITOR_LS_KEYS.MERMAID_TO_EXCALIDRAW) ||
       MERMAID_EXAMPLE,
   );
@@ -57,28 +57,20 @@ const MermaidToExcalidraw = ({
   const app = useApp();
 
   useEffect(() => {
-    const selectedMermaidImage = selectedElements.filter(
-      (el) => el.type === "image" && el.customData?.mermaidText,
-    )[0]; //zsviczian
-    if(selectedMermaidImage) {
-      setText(selectedMermaidImage.customData?.mermaidText);
-    }//zsviczian
     convertMermaidToExcalidraw({
       canvasRef,
       data,
       mermaidToExcalidrawLib,
       setError,
-      mermaidDefinition: selectedMermaidImage
-        ? selectedMermaidImage.customData?.mermaidText
-        : deferredText, //zsviczian
+      mermaidDefinition: deferredText,
     }).catch((err) => {
       if (isDevEnv()) {
         console.error("Failed to parse mermaid definition", err);
       }
     });
 
     debouncedSaveMermaidDefinition(deferredText);
-  }, [deferredText, mermaidToExcalidrawLib, selectedElements]); //zsviczian
+  }, [deferredText, mermaidToExcalidrawLib]); //zsviczian
 
   useEffect(
     () => () => {
@@ -147,44 +139,3 @@ const MermaidToExcalidraw = ({
   );
 };
 export default MermaidToExcalidraw;
-
-//zsviczian
-export const mermaidToExcalidraw = async (
-  mermaidDefinition: string,
-  opts:MermaidConfig, // MermaidOptions = { fontSize: DEFAULT_FONT_SIZE },
-  forceSVG: boolean = false,
-): Promise<
-  | {
-      elements?: ExcalidrawElement[];
-      files?: any;
-      error?: string;
-    }
-  | undefined
-> => {
-  try {
-    const { elements, files } = await parseMermaidToExcalidraw(
-      mermaidDefinition,
-      opts,
-      forceSVG,
-    );
-
-    return {
-      elements: convertToExcalidrawElements(
-        elements.map((el) => {
-          if (el.type === "image") {
-            el.customData = { mermaidText: mermaidDefinition };
-          }
-          return el;
-        }),
-        {
-          regenerateIds: true,
-        },
-      ),
-      files,
-    };
-  } catch (e: any) {
-    return {
-      error: e.message,
-    };
-  }
-};
diff --git a/packages/excalidraw/components/TTDDialog/MermaidToExcalidrawLib.ts b/packages/excalidraw/components/TTDDialog/MermaidToExcalidrawLib.ts
@@ -0,0 +1,65 @@
+import { MermaidConfig } from "@zsviczian/mermaid-to-excalidraw";
+import { convertToExcalidrawElements } from "../../data/transform";
+import { ExcalidrawElement } from "../../element/types";
+import { MermaidToExcalidrawLibProps } from "./common";
+
+let mermaidToExcalidrawLib: MermaidToExcalidrawLibProps | null = null;
+let queue: Promise<any> = Promise.resolve();
+
+export const loadMermaidToExcalidrawLib = async (): Promise<MermaidToExcalidrawLibProps> => {
+  if (!mermaidToExcalidrawLib) {
+    const api = import("@zsviczian/mermaid-to-excalidraw").then(module => ({
+      parseMermaidToExcalidraw: module.parseMermaidToExcalidraw,
+    }));
+    mermaidToExcalidrawLib = {
+      loaded: true,
+      api,
+    };
+  }
+  return mermaidToExcalidrawLib;
+};
+
+//zsviczian
+export const mermaidToExcalidraw = async (
+  mermaidDefinition: string,
+  opts: MermaidConfig,
+  forceSVG: boolean = false,
+): Promise<
+  | {
+      elements?: ExcalidrawElement[];
+      files?: any;
+      error?: string;
+    }
+  | undefined
+> => {
+  return queue = queue.then(async () => {
+    try {
+      const { api } = await loadMermaidToExcalidrawLib();
+      const { parseMermaidToExcalidraw } = await api;
+      const { elements, files } = await parseMermaidToExcalidraw(
+        mermaidDefinition,
+        opts,
+        forceSVG,
+      );
+
+      return {
+        elements: convertToExcalidrawElements(
+          elements.map((el) => {
+            if (el.type === "image") {
+              el.customData = { mermaidText: mermaidDefinition };
+            }
+            return el;
+          }),
+          {
+            regenerateIds: true,
+          },
+        ),
+        files,
+      };
+    } catch (e: any) {
+      return {
+        error: e.message,
+      };
+    }
+  });
+};
diff --git a/packages/excalidraw/components/TTDDialog/TTDDialog.tsx b/packages/excalidraw/components/TTDDialog/TTDDialog.tsx
@@ -1,3 +1,4 @@
+import { loadMermaidToExcalidrawLib } from "./MermaidToExcalidrawLib";
 import { Dialog } from "../Dialog";
 import { useApp, useAppProps, useExcalidrawSetAppState } from "../App";
 import MermaidToExcalidraw from "./MermaidToExcalidraw";
@@ -215,8 +216,9 @@ export const TTDDialogBase = withInternalFallback(
 
     useEffect(() => {
       const fn = async () => {
-        await mermaidToExcalidrawLib.api;
-        setMermaidToExcalidrawLib((prev) => ({ ...prev, loaded: true }));
+        //zsviczian decupling loding of API so it is available without opening TTDDialog
+        const mermaidToExcalidrawLib = await loadMermaidToExcalidrawLib();
+        setMermaidToExcalidrawLib(mermaidToExcalidrawLib);
       };
       fn();
     }, [mermaidToExcalidrawLib.api]);

diff --git a/packages/excalidraw/components/TTDDialog/common.ts b/packages/excalidraw/components/TTDDialog/common.ts
@@ -38,6 +38,7 @@ export interface MermaidToExcalidrawLibProps {
     parseMermaidToExcalidraw: (
       definition: string,
       config?: MermaidConfig,
+      forceSVG?: boolean, //zsviczian
     ) => Promise<MermaidToExcalidrawResult>;
   }>;
 }

diff --git a/packages/excalidraw/package.json b/packages/excalidraw/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@zsviczian/excalidraw",
-  "version": "0.17.6-19",
+  "version": "0.17.6-20",
   "main": "main.js",
   "types": "types/excalidraw/index.d.ts",
   "files": [

diff --git a/packages/utils/export.ts b/packages/utils/export.ts
@@ -221,7 +221,7 @@ export { wrapText } from "../excalidraw/element/textWrapping"; //zsviczian
 export { getLineHeight } from "../excalidraw/fonts/index"; //zsviczian
 export { getFontString, getFontFamilyString } from "../excalidraw/utils"; //zsviczian
 export { getBoundTextMaxWidth } from "../excalidraw/element/textElement"; //zsviczian
-export { mermaidToExcalidraw } from "../excalidraw/components/TTDDialog/MermaidToExcalidraw"; //zsviczian
+export { mermaidToExcalidraw } from "../excalidraw/components/TTDDialog/MermaidToExcalidrawLib"; //zsviczian
 export {
   destroyObsidianUtils,
   registerLocalFont,