Use present action in footer button

Author: Brikaa

excalidraw-app/App.tsx

@@ -929,29 +929,7 @@ const ExcalidrawWrapper = () => {
             </OverwriteConfirmDialog.Action>
           )}
         </OverwriteConfirmDialog>
-        <AppFooter
-          onChange={() => excalidrawAPI?.refresh()}
-          onPresentation={() => {
-            if (!excalidrawAPI) {
-              return;
-            }
-            const selectedElementIds =
-              excalidrawAPI.getAppState().selectedElementIds;
-            const frames = excalidrawAPI
-              .getSceneElements()
-              .filter((e) => e.type === "frame");
-            frames.sort((e1, e2) => e1.y - e2.y);
-            const framesWithIndex = frames.map((f, index) => ({ ...f, index }));
-            const selectedFrames = framesWithIndex.filter(
-              (f) => f.id in selectedElementIds,
-            );
-            const frameIndex =
-              selectedFrames.length === 0 ? 0 : selectedFrames[0].index;
-            const newUrl = new URL(window.location.href);
-            newUrl.hash = `#presentation=${frameIndex}`;
-            window.open(newUrl.href, "_blank");
-          }}
-        />
+        <AppFooter onChange={() => excalidrawAPI?.refresh()} />
         {excalidrawAPI && <AIComponents excalidrawAPI={excalidrawAPI} />}
 
         <TTDDialogTrigger />

excalidraw-app/components/AppFooter.tsx

@@ -1,7 +1,8 @@
 import { Button, Footer } from "@excalidraw/excalidraw/index";
-import React from "react";
-
+import React, { useCallback } from "react";
 import { useI18n } from "@excalidraw/excalidraw/i18n";
+import { useExcalidrawActionManager } from "@excalidraw/excalidraw/components/App";
+import { actionPresent } from "@excalidraw/excalidraw/actions";
 
 import { isExcalidrawPlusSignedUser } from "../app_constants";
 
@@ -10,14 +11,13 @@ import { EncryptedIcon } from "./EncryptedIcon";
 import { ExcalidrawPlusAppLink } from "./ExcalidrawPlusAppLink";
 
 export const AppFooter = React.memo(
-  ({
-    onChange,
-    onPresentation,
-  }: {
-    onChange: () => void;
-    onPresentation: () => void;
-  }) => {
+  ({ onChange }: { onChange: () => void }) => {
     const { t } = useI18n();
+    const actionManager = useExcalidrawActionManager();
+    const onPresent = useCallback(
+      () => actionManager.executeAction(actionPresent),
+      [actionManager],
+    );
 
     return (
       <Footer>
@@ -34,7 +34,7 @@ export const AppFooter = React.memo(
           ) : (
             <EncryptedIcon />
           )}
-          <Button onSelect={onPresentation} style={{ width: "fit-content" }}>
+          <Button onSelect={onPresent} style={{ width: "fit-content" }}>
             {t("labels.present")}
           </Button>
         </div>