feat: integrate mermaidToExcalidraw

src/components/Actions.tsx

@@ -397,6 +397,22 @@ export const ShapesSwitcher = ({
             >
               {t("toolBar.embeddable")}
             </DropdownMenu.Item>
+            <DropdownMenu.Item
+              onSelect={() => {
+                const nextActiveTool = updateActiveTool(appState, {
+                  type: "mermaid",
+                });
+                setAppState({
+                  activeTool: nextActiveTool,
+                  multiElement: null,
+                  selectedElementIds: {},
+                });
+              }}
+              icon={EmbedIcon}
+              data-testid="toolbar-embeddable"
+            >
+              {t("toolBar.mermaidToExcalidraw")}
+            </DropdownMenu.Item>
           </DropdownMenu.Content>
         </DropdownMenu>
       )}

src/components/App.tsx

@@ -353,6 +353,7 @@ import { isSidebarDockedAtom } from "./Sidebar/Sidebar";
 import { StaticCanvas, InteractiveCanvas } from "./canvases";
 import { Renderer } from "../scene/Renderer";
 import { ShapeCache } from "../scene/ShapeCache";
+import MermaidToExcalidraw from "./MermaidToExcalidraw";
 
 const AppContext = React.createContext<AppClassProperties>(null!);
 const AppPropsContext = React.createContext<AppProps>(null!);
@@ -1177,7 +1178,9 @@ class App extends React.Component<AppProps, AppState> {
                           app={this}
                         >
                           {this.props.children}
+                          <MermaidToExcalidraw appState={this.state} />
                         </LayerUI>
+
                         <div className="excalidraw-textEditorContainer" />
                         <div className="excalidraw-contextMenuContainer" />
                         <div className="excalidraw-eye-dropper-container" />

src/components/MermaidToExcalidraw.tsx

@@ -0,0 +1,23 @@
+import { AppState } from "../types";
+import { updateActiveTool } from "../utils";
+import { useExcalidrawSetAppState } from "./App";
+import { Dialog } from "./Dialog";
+
+const MermaidToExcalidraw = ({ appState }: { appState: AppState }) => {
+  const setAppState = useExcalidrawSetAppState();
+  if (appState?.activeTool?.type !== "mermaid") {
+    return null;
+  }
+  return (
+    <Dialog
+      onCloseRequest={() => {
+        const activeTool = updateActiveTool(appState, { type: "selection" });
+        setAppState({ activeTool });
+      }}
+      title="Mermaid to Excalidraw"
+    >
+      <div>Hello</div>
+    </Dialog>
+  );
+};
+export default MermaidToExcalidraw;

src/locales/en.json

@@ -236,7 +236,8 @@
     "frame": "Frame tool",
     "embeddable": "Web Embed",
     "hand": "Hand (panning tool)",
-    "extraTools": "More tools"
+    "extraTools": "More tools",
+    "mermaidToExcalidraw": "Mermaid to Excalidraw"
   },
   "headings": {
     "canvasActions": "Canvas actions",

src/types.ts

@@ -92,7 +92,8 @@ export type LastActiveTool =
         | "eraser"
         | "hand"
         | "frame"
-        | "embeddable";
+        | "embeddable"
+        | "mermaid";
       customType: null;
     }
   | {
@@ -197,7 +198,8 @@ export type AppState = {
           | "eraser"
           | "hand"
           | "frame"
-          | "embeddable";
+          | "embeddable"
+          | "mermaid";
         customType: null;
       }
     | {

src/utils.ts

@@ -376,7 +376,8 @@ export const updateActiveTool = (
           | "eraser"
           | "hand"
           | "frame"
-          | "embeddable";
+          | "embeddable"
+          | "mermaid";
       }
     | { type: "custom"; customType: string }
   ) & { lastActiveToolBeforeEraser?: LastActiveTool },