feat: add reset button for excalidraw

package.json

@@ -17,8 +17,9 @@
     "@excalidraw/mermaid-to-excalidraw": "^0.3.0",
     "@mdx-js/mdx": "^2.3.0",
     "@mdx-js/react": "^2.3.0",
-    "@mui/base": "^5.0.0-alpha.119",
-    "@mui/material": "^5.11.10",
+    "@mui/base": "5.0.0-beta.40",
+    "@mui/icons-material": "^5.15.15",
+    "@mui/material": "5.15.15",
     "@types/mdast": "4.0.3",
     "@types/node": "18.14.2",
     "@types/react": "^18.2.79",

src/components/ExcalidrawScene/ExcalidrawSceneImpl.tsx

@@ -1,7 +1,8 @@
 "use client";
-import { Excalidraw } from "@excalidraw/excalidraw";
+import { Excalidraw, MainMenu } from "@excalidraw/excalidraw";
 import { ExcalidrawElement } from "@excalidraw/excalidraw/types/element/types";
 import { ExcalidrawImperativeAPI } from "@excalidraw/excalidraw/types/types";
+import { Refresh } from "@mui/icons-material";
 import { useRef } from "react";
 
 export type ExcalidrawSceneProps = {
@@ -40,7 +41,20 @@ export function ExcalidrawSceneImpl({ elements }: ExcalidrawSceneProps) {
               api.scrollToContent(undefined, { fitToContent: true });
             }, 1000);
           }}
-        ></Excalidraw>
+        >
+          <MainMenu>
+            <MainMenu.Item
+              icon={<Refresh />}
+              onSelect={() => {
+                excalidrawAPIRef.current?.scrollToContent(undefined, {
+                  fitToContent: true,
+                });
+              }}
+            >
+              Reset
+            </MainMenu.Item>
+          </MainMenu>
+        </Excalidraw>
       </div>
     </>
   );

src/layouts/DefaultLayout.module.scss

@@ -22,7 +22,7 @@ $footer-height: 4rem;
 }
 
 .header {
-  @apply top-0 fixed w-full z-10 flex;
+  @apply top-0 fixed w-full z-50 flex;
   @apply bg-gray-900 bg-opacity-50;
   @apply transition ease-in-out hover:bg-opacity-75;
 
@@ -55,7 +55,7 @@ $footer-height: 4rem;
 }
 
 .footer {
-  @apply bottom-0 w-full z-10 bg-gray-900;
+  @apply bottom-0 w-full z-50 bg-gray-900;
   @apply transition ease-in-out bg-opacity-90;
   @apply text-slate-100 text-sm font-sans font-normal;
 

yarn.lock

@@ -810,7 +810,7 @@
     "@types/mdx" "^2.0.0"
     "@types/react" ">=16"
 
-"@mui/[email protected]", "@mui/base@^5.0.0-alpha.119":
+"@mui/[email protected]":
   version "5.0.0-beta.40"
   resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-beta.40.tgz#1f8a782f1fbf3f84a961e954c8176b187de3dae2"
   integrity sha512-I/lGHztkCzvwlXpjD2+SNmvNQvB4227xBXhISPjEaJUXGImOQ9f3D2Yj/T3KasSI/h0MLWy74X0J6clhPmsRbQ==
@@ -828,7 +828,14 @@
   resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.15.tgz#2bc2bda50db66c12f10aefec907c48c8f669ef59"
   integrity sha512-aXnw29OWQ6I5A47iuWEI6qSSUfH6G/aCsW9KmW3LiFqr7uXZBK4Ks+z8G+qeIub8k0T5CMqlT2q0L+ZJTMrqpg==
 
-"@mui/material@^5.11.10":
+"@mui/icons-material@^5.15.15":
+  version "5.15.15"
+  resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.15.15.tgz#84ce08225a531d9f5dc5132009d91164b456a0ae"
+  integrity sha512-kkeU/pe+hABcYDH6Uqy8RmIsr2S/y5bP2rp+Gat4CcRjCcVne6KudS1NrZQhUCRysrTDCAhcbcf9gt+/+pGO2g==
+  dependencies:
+    "@babel/runtime" "^7.23.9"
+
+"@mui/[email protected]":
   version "5.15.15"
   resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.15.15.tgz#e3ba35f50b510aa677cec3261abddc2db7b20b59"
   integrity sha512-3zvWayJ+E1kzoIsvwyEvkTUKVKt1AjchFFns+JtluHCuvxgKcLSRJTADw37k0doaRtVAsyh8bz9Afqzv+KYrIA==