From 7da500fe0ac77c121c316d80921281bdbe9cd0f6 Mon Sep 17 00:00:00 2001
From: zsviczian <viczian.zsolt@gmail.com>
Date: Sun, 24 Sep 2023 19:14:49 +0200
Subject: [PATCH] store mermaid text in customData of image element

---
 src/components/Actions.tsx             |  1 -
 src/components/App.tsx                 |  6 ++++-
 src/components/MermaidToExcalidraw.tsx | 34 ++++++++++++++++++++------
 3 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/src/components/Actions.tsx b/src/components/Actions.tsx
index f38e1b41c..9e0f63c1a 100644
--- a/src/components/Actions.tsx
+++ b/src/components/Actions.tsx
@@ -341,7 +341,6 @@ export const ShapesSwitcher = ({
               setAppState({
                 activeTool: nextActiveTool,
                 multiElement: null,
-                selectedElementIds: {},
               });
             }}
             icon={mermaidLogoIcon}
diff --git a/src/components/App.tsx b/src/components/App.tsx
index a0a5ad184..8a44a3e88 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -1192,7 +1192,11 @@ class App extends React.Component<AppProps, AppState> {
                         >
                           {this.props.children}
                           {this.state.activeTool.type === "mermaid" && (
-                            <MermaidToExcalidraw />
+                            <MermaidToExcalidraw
+                              selectedElements={this.scene.getSelectedElements(
+                                this.state,
+                              )}
+                            />
                           )}
                         </LayerUI>
 
diff --git a/src/components/MermaidToExcalidraw.tsx b/src/components/MermaidToExcalidraw.tsx
index 9f0fcb2ce..de189943e 100644
--- a/src/components/MermaidToExcalidraw.tsx
+++ b/src/components/MermaidToExcalidraw.tsx
@@ -1,5 +1,5 @@
 import { useState, useRef, useEffect, useDeferredValue } from "react";
-import { BinaryFiles } from "../types";
+import { AppState, BinaryFiles } from "../types";
 import { useApp } from "./App";
 import { Button } from "./Button";
 import { Dialog } from "./Dialog";
@@ -8,7 +8,10 @@ import {
   convertToExcalidrawElements,
   exportToCanvas,
 } from "../packages/excalidraw/index";
-import { NonDeletedExcalidrawElement } from "../element/types";
+import {
+  ExcalidrawElement,
+  NonDeletedExcalidrawElement,
+} from "../element/types";
 import { canvasToBlob } from "../data/blob";
 import { ArrowRightIcon } from "./icons";
 import Spinner from "./Spinner";
@@ -65,7 +68,11 @@ const ErrorComp = ({ error }: { error: string }) => {
   );
 };
 
-const MermaidToExcalidraw = () => {
+const MermaidToExcalidraw = ({
+  selectedElements,
+}: {
+  selectedElements: readonly NonDeletedExcalidrawElement[];
+}) => {
   const mermaidToExcalidrawLib = useRef<{
     parseMermaidToExcalidraw: (
       defination: string,
@@ -111,7 +118,12 @@ const MermaidToExcalidraw = () => {
 
   useEffect(() => {
     if (!loading) {
-      const data = importMermaidDataFromStorage() || MERMAID_EXAMPLE;
+      const selectedMermaidImage = selectedElements.filter(
+        (el) => el.type === "image" && el.customData?.mermaidText,
+      )[0];
+      const data = selectedMermaidImage
+        ? selectedMermaidImage.customData?.mermaidText
+        : importMermaidDataFromStorage() || MERMAID_EXAMPLE;
 
       setText(data);
     }
@@ -134,9 +146,17 @@ const MermaidToExcalidraw = () => {
         setError(null);
 
         data.current = {
-          elements: convertToExcalidrawElements(elements, {
-            regenerateIds: true,
-          }),
+          elements: convertToExcalidrawElements(
+            elements.map((el) => {
+              if (el.type === "image") {
+                el.customData = { mermaidText: text };
+              }
+              return el;
+            }),
+            {
+              regenerateIds: true,
+            },
+          ),
           files,
         };
         const parent = canvasNode.parentElement!;