fix: ensure ClipboardItem created in the same tick to fix safari (e…

…xcalidraw#7066)

src/data/blob.ts

@@ -8,7 +8,7 @@ import { t } from "../i18n";
 import { calculateScrollCenter } from "../scene";
 import { AppState, DataURL, LibraryItem } from "../types";
 import { ValueOf } from "../utility-types";
-import { bytesToHexString } from "../utils";
+import { bytesToHexString, isPromiseLike } from "../utils";
 import { FileSystemHandle, nativeFileSystemSupported } from "./filesystem";
 import { isValidExcalidrawData, isValidLibrary } from "./json";
 import { restore, restoreLibraryItems } from "./restore";
@@ -207,10 +207,13 @@ export const loadLibraryFromBlob = async (
 };
 
 export const canvasToBlob = async (
-  canvas: HTMLCanvasElement,
+  canvas: HTMLCanvasElement | Promise<HTMLCanvasElement>,
 ): Promise<Blob> => {
-  return new Promise((resolve, reject) => {
+  return new Promise(async (resolve, reject) => {
     try {
+      if (isPromiseLike(canvas)) {
+        canvas = await canvas;
+      }
       canvas.toBlob((blob) => {
         if (!blob) {
           return reject(

src/data/index.ts

@@ -66,17 +66,14 @@ export const exportCanvas = async (
     }
   }
 
-  const tempCanvas = await exportToCanvas(elements, appState, files, {
+  const tempCanvas = exportToCanvas(elements, appState, files, {
     exportBackground,
     viewBackgroundColor,
     exportPadding,
   });
-  tempCanvas.style.display = "none";
-  document.body.appendChild(tempCanvas);
 
   if (type === "png") {
     let blob = await canvasToBlob(tempCanvas);
-    tempCanvas.remove();
     if (appState.exportEmbedScene) {
       blob = await (
         await import(/* webpackChunkName: "image" */ "./image")
@@ -114,11 +111,8 @@ export const exportCanvas = async (
       } else {
         throw new Error(t("alerts.couldNotCopyToClipboard"));
       }
-    } finally {
-      tempCanvas.remove();
     }
   } else {
-    tempCanvas.remove();
     // shouldn't happen
     throw new Error("Unsupported export type");
   }