BC-6431 - Fix tldraw export to image functionality

src/components/Editor.tsx

@@ -16,7 +16,7 @@ function Editor({
   focusModeHandler: (isFocusMode: boolean) => void;
 }) {
   const { onOpenMedia, onOpenProject } = useFileSystem();
-  const { onMount, onSave, onAssetCreate, onPatch, ...events } =
+  const { onMount, onSave, onAssetCreate, onPatch, onExport, ...events } =
     useMultiplayerState({
       roomId,
       setIsDarkMode: darkModeHandler,
@@ -42,6 +42,7 @@ function Editor({
         disableAssets={false}
         onMount={onMount}
         onPatch={onPatch}
+        onExport={onExport}
         darkMode={isDarkMode}
         {...events}
         onOpenProject={onOpenProject}

src/hooks/useMultiplayerState.ts

@@ -2,6 +2,7 @@ import lodash from "lodash";
 import {
   TDAsset,
   TDBinding,
+  TDExport,
   TDShape,
   TDUser,
   TldrawApp,
@@ -29,6 +30,7 @@ import {
 } from "../utils/boardImportUtils";
 import { saveToFileSystem } from "../utils/boardExportUtils";
 import { uploadFileToStorage } from "../utils/fileUpload";
+import { getImageBlob } from "../utils/tldrawImageExportUtils";
 
 declare const window: Window & { app: TldrawApp };
 
@@ -64,7 +66,7 @@ export function useMultiplayerState({
         app.fileSystemHandle = handle;
       }
     } catch (error) {
-      console.error("Error while exporting project");
+      console.error("Error while exporting project", error);
       toast.error("An error occurred while exporting project");
     }
     app.setIsLoading(false);
@@ -86,7 +88,7 @@ export function useMultiplayerState({
         app.fileSystemHandle = handle;
       }
     } catch (error) {
-      console.error("Error while exporting project");
+      console.error("Error while exporting project", error);
       toast.error("An error occurred while exporting project");
     }
     app.setIsLoading(false);
@@ -155,7 +157,7 @@ export function useMultiplayerState({
       if (file.size > envs!.TLDRAW__ASSETS_MAX_SIZE) {
         toast.info(
           `Asset is too big - max. ${
-            envs!.TLDRAW__ASSETS_MAX_SIZE / 1000000
+            envs!.TLDRAW__ASSETS_MAX_SIZE / 1048576
           }MB`,
         );
         return false;
@@ -241,6 +243,33 @@ export function useMultiplayerState({
     room.updatePresence({ tdUser });
   }, []);
 
+  const onExport = useCallback(
+    async (app: TldrawApp, info: TDExport) => {
+      app.setIsLoading(true);
+      undoManager.stopCapturing();
+      syncAssets(app);
+      try {
+        const blob = await getImageBlob(app, info.type);
+
+        if (!blob) {
+          app.setIsLoading(false);
+          return;
+        }
+
+        const url = URL.createObjectURL(blob);
+        const link = document.createElement("a");
+        link.href = url;
+        link.download = `${roomId}_export.${info.type}`;
+        link.click();
+      } catch (error) {
+        console.error("Error while exporting project as image", error);
+        toast.error("An error occurred while exporting project as image");
+      }
+      app.setIsLoading(false);
+    },
+    [roomId],
+  );
+
   // Document Changes --------
 
   // Update app users whenever there is a change in the room users
@@ -332,6 +361,7 @@ export function useMultiplayerState({
     onMount,
     onSave,
     onSaveAs,
+    onExport,
     onChangePage,
     onChangePresence,
     loading,

src/utils/imageExportUtils.ts

@@ -0,0 +1,14 @@
+/**
+ *  Custom function for exporting images stored in external storage correctly.
+ **/
+
+export const serializeImage = (id: string): string => {
+  const image = document.getElementById(id + "_image") as HTMLImageElement;
+  if (image) {
+    const canvas = document.createElement("canvas");
+    canvas.width = image.naturalWidth;
+    canvas.height = image.naturalHeight;
+    canvas.getContext("2d")!.drawImage(image, 0, 0);
+    return canvas.toDataURL("image/png");
+  } else throw new Error("Image with id " + id + " not found");
+};