@myoc/excalidraw 0.19.543 → 0.19.545

package/dist/dev/index.js

@@ -14,6 +14,7 @@ import {
   canvasToBlob,
   constrainScrollState,
   createFile,
+  dataURLToFile,
   dataURLToString,
   encodePngMetadata,
   exportToCanvas,
@@ -64,10 +65,10 @@ import {
   serializeAsJSON,
   strokeRectWithRotation_simple,
   zoomToFitBounds
-} from "./chunk-6OYO4QVO.js";
+} from "./chunk-GWV63UBO.js";
 import {
   define_import_meta_env_default
-} from "./chunk-VQRWPJBP.js";
+} from "./chunk-CK7JCUHP.js";
 import {
   en_default
 } from "./chunk-35XUJXYN.js";
@@ -10337,9 +10338,11 @@ import {
   isInitializedImageElement
 } from "@excalidraw/element";
 import { getContainingFrame } from "@excalidraw/element";
+var WEB_EXCALIDRAW_CLIPBOARD_MIME_TYPE = `web ${MIME_TYPES2.excalidrawClipboard}`;
 var probablySupportsClipboardReadText = "clipboard" in navigator && "readText" in navigator.clipboard;
 var probablySupportsClipboardWriteText = "clipboard" in navigator && "writeText" in navigator.clipboard;
 var probablySupportsClipboardBlob = "clipboard" in navigator && "write" in navigator.clipboard && "ClipboardItem" in window && "toBlob" in HTMLCanvasElement.prototype;
+var supportsClipboardBlob = () => "clipboard" in navigator && "write" in navigator.clipboard && "ClipboardItem" in window && "toBlob" in HTMLCanvasElement.prototype;
 var clipboardContainsElements = (contents) => {
   if ([
     EXPORT_DATA_TYPES.excalidraw,
@@ -10434,8 +10437,69 @@ var serializeAsClipboardJSON = ({
   };
   return JSON.stringify(contents);
 };
+var convertImageFileToPNG = async (file2) => {
+  const bitmap = await createImageBitmap(file2);
+  try {
+    const canvas = document.createElement("canvas");
+    canvas.width = bitmap.width;
+    canvas.height = bitmap.height;
+    const context = canvas.getContext("2d");
+    if (!context) {
+      throw new Error("Could not create a canvas context for clipboard image");
+    }
+    context.drawImage(bitmap, 0, 0);
+    return await new Promise((resolve, reject) => {
+      canvas.toBlob((blob) => {
+        if (blob) {
+          resolve(blob);
+        } else {
+          reject(new Error("Could not encode clipboard image as PNG"));
+        }
+      }, MIME_TYPES2.png);
+    });
+  } finally {
+    bitmap.close();
+  }
+};
 var copyToClipboard = async (elements, files, clipboardEvent) => {
   const json = serializeAsClipboardJSON({ elements, files });
+  const imageFile = elements.length === 1 && isInitializedImageElement(elements[0]) ? files?.[elements[0].fileId] : null;
+  const clipboardFile = imageFile && isSupportedImageFileType(imageFile.mimeType) && imageFile.dataURL ? dataURLToFile(imageFile.dataURL, imageFile.fileName) : null;
+  if (clipboardFile) {
+    const clipboardImagePNG = clipboardFile.type === MIME_TYPES2.png ? clipboardFile : convertImageFileToPNG(clipboardFile);
+    if (supportsClipboardBlob()) {
+      try {
+        await navigator.clipboard.write([
+          new ClipboardItem({
+            [WEB_EXCALIDRAW_CLIPBOARD_MIME_TYPE]: new Blob([json], {
+              type: MIME_TYPES2.excalidrawClipboard
+            }),
+            [MIME_TYPES2.png]: clipboardImagePNG
+          })
+        ]);
+        return;
+      } catch (error) {
+        console.error("Error copying image with ClipboardItem", error);
+      }
+    }
+    if (clipboardEvent?.clipboardData?.items) {
+      try {
+        const clipboardImageFile = clipboardFile.type === MIME_TYPES2.png ? clipboardFile : new File(
+          [await clipboardImagePNG],
+          `${clipboardFile.name.replace(/\.[^/.]+$/, "") || "image"}.png`,
+          { type: MIME_TYPES2.png }
+        );
+        clipboardEvent.clipboardData.items.add(clipboardImageFile);
+        await copyTextToSystemClipboard(
+          { [MIME_TYPES2.excalidrawClipboard]: json },
+          clipboardEvent
+        );
+        return;
+      } catch (error) {
+        console.error("Error copying image to clipboard event", error);
+      }
+    }
+  }
   await copyTextToSystemClipboard(
     {
       [MIME_TYPES2.excalidrawClipboard]: json,
@@ -10511,11 +10575,21 @@ var readSystemClipboard = async () => {
   }
   for (const item of clipboardItems) {
     for (const type of item.types) {
+      if (type === WEB_EXCALIDRAW_CLIPBOARD_MIME_TYPE) {
+        try {
+          types[MIME_TYPES2.excalidrawClipboard] = await (await item.getType(type)).text();
+        } catch (error) {
+          console.warn(
+            `Cannot retrieve ${type} from clipboardItem: ${error.message}`
+          );
+        }
+        continue;
+      }
       if (!isMemberOf(ALLOWED_PASTE_MIME_TYPES, type)) {
         continue;
       }
       try {
-        if (type === MIME_TYPES2.text || type === MIME_TYPES2.html) {
+        if (type === MIME_TYPES2.text || type === MIME_TYPES2.html || type === MIME_TYPES2.excalidrawClipboard) {
           types[type] = await (await item.getType(type)).text();
         } else if (isSupportedImageFileType(type)) {
           const imageBlob = await item.getType(type);
@@ -10764,10 +10838,10 @@ var parseDataTransferEvent = async (event) => {
   });
 };
 var parseClipboard = async (dataList, isPlainPaste = false) => {
-  const parsedEventData = await parseClipboardEventTextData(
-    dataList,
-    isPlainPaste
+  const excalidrawClipboardData = dataList.getData(
+    MIME_TYPES2.excalidrawClipboard
   );
+  const parsedEventData = excalidrawClipboardData ? { type: "text", value: excalidrawClipboardData } : await parseClipboardEventTextData(dataList, isPlainPaste);
   if (parsedEventData.type === "mixedContent") {
     return {
       mixedContent: parsedEventData.value
@@ -10970,7 +11044,7 @@ var exportCanvas = async (type, elements, appState, files, {
     let blob = canvasToBlob(tempCanvas);
     if (appState.exportEmbedScene) {
       blob = blob.then(
-        (blob2) => import("./data/image-MKDSIQJM.js").then(
+        (blob2) => import("./data/image-LHD6YZAK.js").then(
           ({ encodePngMetadata: encodePngMetadata2 }) => encodePngMetadata2({
             blob: blob2,
             metadata: serializeAsJSON(elements, appState, files, "local")
@@ -15206,7 +15280,12 @@ import { arrayToMap as arrayToMap23, findIndex, findLastIndex as findLastIndex2
 import { isFiniteNumber } from "@excalidraw/math";
 
 // ../element/src/gif.ts
-import { decode, decodeFrames } from "modern-gif";
+import { decodeAnimated } from "@discourse/gif";
+var GIF_WORKER_FILENAME = "gif.worker.js";
+var gifWorkerUrl = new URL(
+  GIF_WORKER_FILENAME,
+  import.meta.url
+).toString();
 
 // ../element/src/image.ts
 import {
@@ -31724,21 +31803,34 @@ var GifPlaybackControls = ({
       app.ensureGifPlaybackLoop();
     }
   };
-  const deferredGifBadges = app.scene.getNonDeletedElements().filter(
-    (element) => isInitializedImageElement4(element) && !liveAppState.selectedElementIds[element.id] && files[element.fileId]?.mimeType === MIME_TYPES10.gif && app.imageCache.get(element.fileId)?.gifDecodeStatus === "deferred"
-  ).map((element) => {
+  const deferredGifControls = app.scene.getNonDeletedElements().flatMap((element) => {
+    if (!isInitializedImageElement4(element) || files[element.fileId]?.mimeType !== MIME_TYPES10.gif || app.imageCache.get(element.fileId)?.gifDecodeStatus !== "deferred") {
+      return [];
+    }
     const position = getGifControlPosition(element, liveAppState);
-    return /* @__PURE__ */ jsx113(
-      "span",
-      {
-        className: "gif-playback-controls gif-playback-controls__deferred-badge",
-        role: "img",
-        "aria-label": "GIF paused",
-        style: position,
-        children: CirclePauseIcon
-      },
-      element.id
-    );
+    return [
+      /* @__PURE__ */ jsx113(
+        "div",
+        {
+          className: "gif-playback-controls gif-playback-controls--deferred",
+          style: position,
+          onPointerDown: (event) => event.stopPropagation(),
+          children: /* @__PURE__ */ jsx113(
+            "button",
+            {
+              type: "button",
+              className: "gif-playback-controls__load-large",
+              title: "Load Large GIF",
+              onClick: () => {
+                app.loadDeferredGif(element.fileId);
+              },
+              children: "Load Large GIF"
+            }
+          )
+        },
+        element.id
+      )
+    ];
   });
   const selectedElements = app.scene.getSelectedElements(liveAppState);
   const selectedElementControls = () => {
@@ -31769,29 +31861,6 @@ var GifPlaybackControls = ({
         leftTop.y - liveAppState.offsetTop + 16
       )
     );
-    if (cacheEntry?.gifDecodeStatus === "deferred") {
-      const position = getGifControlPosition(selectedElement, liveAppState);
-      return /* @__PURE__ */ jsx113(
-        "div",
-        {
-          className: "gif-playback-controls gif-playback-controls--deferred",
-          style: position,
-          onPointerDown: (event) => event.stopPropagation(),
-          children: /* @__PURE__ */ jsx113(
-            "button",
-            {
-              type: "button",
-              className: "gif-playback-controls__load-large",
-              title: "Load Large GIF",
-              onClick: () => {
-                app.loadDeferredGif(selectedElement.fileId);
-              },
-              children: "Load Large GIF"
-            }
-          )
-        }
-      );
-    }
     if (cacheEntry?.gifDecodeStatus === "pending") {
       return null;
     }
@@ -32138,7 +32207,7 @@ var GifPlaybackControls = ({
     );
   };
   return /* @__PURE__ */ jsxs59(Fragment18, { children: [
-    deferredGifBadges,
+    deferredGifControls,
     selectedElementControls()
   ] });
 };
@@ -37559,9 +37628,30 @@ var App = class _App extends React41.Component {
         if (event && (!(elementUnderCursor instanceof HTMLCanvasElement) || isWritableElement4(target))) {
           return;
         }
-        const dataTransferList = await parseDataTransferEvent(event);
-        const filesList = dataTransferList.getFiles();
-        const data = await parseClipboard(dataTransferList, isPlainPaste);
+        let dataTransferList = await parseDataTransferEvent(event);
+        let filesList = dataTransferList.getFiles();
+        let data = await parseClipboard(dataTransferList, isPlainPaste);
+        if (!data.elements && filesList.length > 0 && !isPlainPaste) {
+          try {
+            const systemClipboard = await readSystemClipboard();
+            const excalidrawJSON = systemClipboard[MIME_TYPES11.excalidrawClipboard];
+            if (typeof excalidrawJSON === "string") {
+              dataTransferList = await parseDataTransferEvent(
+                createPasteEvent({
+                  types: {
+                    [MIME_TYPES11.excalidrawClipboard]: excalidrawJSON
+                  }
+                })
+              );
+              filesList = dataTransferList.getFiles();
+              data = await parseClipboard(dataTransferList, isPlainPaste);
+            }
+          } catch (error) {
+            console.warn(
+              `Could not read editable image clipboard data: ${error.message}`
+            );
+          }
+        }
         if (this.state.viewModeEnabled) {
           if (!this.containsImagePaste(data, filesList, isPlainPaste)) {
             return;
@@ -44062,6 +44152,19 @@ var App = class _App extends React41.Component {
         return;
       }
     }
+    if (data.elements) {
+      const elements = data.programmaticAPI ? convertToExcalidrawElements(
+        data.elements
+      ) : data.elements;
+      this.addElementsFromPasteOrLibrary({
+        elements,
+        files: data.files || null,
+        position: this.editorInterface.formFactor === "desktop" ? "cursor" : "center",
+        retainSeed: isPlainPaste,
+        preserveFrameChildrenOrder: true
+      });
+      return;
+    }
     const imageFiles = dataTransferFiles.map((data2) => data2.file);
     if (imageFiles.length === 0 && data.text && !isPlainPaste) {
       const trimmedText = data.text.trim();
@@ -44077,19 +44180,6 @@ var App = class _App extends React41.Component {
       }
       return;
     }
-    if (data.elements) {
-      const elements = data.programmaticAPI ? convertToExcalidrawElements(
-        data.elements
-      ) : data.elements;
-      this.addElementsFromPasteOrLibrary({
-        elements,
-        files: data.files || null,
-        position: this.editorInterface.formFactor === "desktop" ? "cursor" : "center",
-        retainSeed: isPlainPaste,
-        preserveFrameChildrenOrder: true
-      });
-      return;
-    }
     if (!data.text) {
       return;
     }