@marimo-team/frontend 0.20.5-dev83 → 0.20.5-dev87

package/src/utils/__tests__/copy.test.ts

@@ -0,0 +1,129 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { copyImageToClipboard, isSafari } from "../copy";
+
+describe("isSafari", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("returns true for Safari on macOS", () => {
+    vi.spyOn(navigator, "userAgent", "get").mockReturnValue(
+      "Mozilla/5.0 (Macintosh; Intel Mac OS X 14_0) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Safari/605.1.15",
+    );
+    expect(isSafari()).toBe(true);
+  });
+
+  it("returns true for Safari on iOS", () => {
+    vi.spyOn(navigator, "userAgent", "get").mockReturnValue(
+      "Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Mobile/15E148 Safari/604.1",
+    );
+    expect(isSafari()).toBe(true);
+  });
+
+  it("returns false for Chrome", () => {
+    vi.spyOn(navigator, "userAgent", "get").mockReturnValue(
+      "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36",
+    );
+    expect(isSafari()).toBe(false);
+  });
+
+  it("returns false for Chrome on iOS (CriOS)", () => {
+    vi.spyOn(navigator, "userAgent", "get").mockReturnValue(
+      "Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/120.0.0.0 Mobile/15E148 Safari/604.1",
+    );
+    expect(isSafari()).toBe(false);
+  });
+
+  it("returns false for Firefox on iOS (FxiOS)", () => {
+    vi.spyOn(navigator, "userAgent", "get").mockReturnValue(
+      "Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) FxiOS/120.0 Mobile/15E148 Safari/604.1",
+    );
+    expect(isSafari()).toBe(false);
+  });
+
+  it("returns false for Edge on iOS (EdgiOS)", () => {
+    vi.spyOn(navigator, "userAgent", "get").mockReturnValue(
+      "Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) EdgiOS/120.0.0.0 Mobile/15E148 Safari/604.1",
+    );
+    expect(isSafari()).toBe(false);
+  });
+
+  it("returns false for Firefox on desktop", () => {
+    vi.spyOn(navigator, "userAgent", "get").mockReturnValue(
+      "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:120.0) Gecko/20100101 Firefox/120.0",
+    );
+    expect(isSafari()).toBe(false);
+  });
+});
+
+describe("copyImageToClipboard", () => {
+  let writeMock: ReturnType<typeof vi.fn>;
+  let clipboardItemSpy: ReturnType<typeof vi.fn>;
+
+  beforeEach(() => {
+    writeMock = vi.fn().mockResolvedValue(undefined);
+    Object.assign(navigator, {
+      clipboard: { write: writeMock },
+    });
+
+    // ClipboardItem is not available in jsdom, so we mock it
+    clipboardItemSpy = vi.fn().mockImplementation((data) => ({ data }));
+    vi.stubGlobal("ClipboardItem", clipboardItemSpy);
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    vi.unstubAllGlobals();
+  });
+
+  it("uses blob type from response on non-Safari browsers", async () => {
+    vi.spyOn(navigator, "userAgent", "get").mockReturnValue(
+      "Mozilla/5.0 Chrome/120.0.0.0 Safari/537.36",
+    );
+
+    const fakeBlob = new Blob(["fake"], { type: "image/jpeg" });
+    vi.spyOn(globalThis, "fetch").mockResolvedValue(
+      new Response(fakeBlob, {
+        headers: { "Content-Type": "image/jpeg" },
+      }),
+    );
+
+    await copyImageToClipboard("https://example.com/image.jpg");
+
+    expect(writeMock).toHaveBeenCalledOnce();
+    // Non-Safari path: awaits blob, uses blob.type as key
+    const arg = clipboardItemSpy.mock.calls[0][0];
+    expect(arg).toHaveProperty("image/jpeg");
+    expect(arg["image/jpeg"].type).toBe("image/jpeg");
+  });
+
+  it("uses image/png on Safari", async () => {
+    vi.spyOn(navigator, "userAgent", "get").mockReturnValue(
+      "Mozilla/5.0 (Macintosh; Intel Mac OS X 14_0) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Safari/605.1.15",
+    );
+
+    const fakeBlob = new Blob(["fake"], { type: "image/png" });
+    vi.spyOn(globalThis, "fetch").mockResolvedValue(new Response(fakeBlob));
+
+    await copyImageToClipboard("https://example.com/image.png");
+
+    expect(writeMock).toHaveBeenCalledOnce();
+    // Safari path: uses "image/png" key with a Promise<Blob>
+    expect(clipboardItemSpy).toHaveBeenCalledWith({
+      "image/png": expect.any(Promise),
+    });
+  });
+
+  it("propagates fetch errors", async () => {
+    vi.spyOn(navigator, "userAgent", "get").mockReturnValue(
+      "Mozilla/5.0 Chrome/120.0.0.0 Safari/537.36",
+    );
+
+    vi.spyOn(globalThis, "fetch").mockRejectedValue(new Error("Network error"));
+
+    await expect(
+      copyImageToClipboard("https://example.com/image.png"),
+    ).rejects.toThrow("Network error");
+  });
+});

package/src/utils/copy.ts

@@ -21,3 +21,46 @@ export async function copyToClipboard(text: string) {
     window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
   });
 }
+
+/**
+ * Returns true if the current browser is Safari.
+ *
+ * Safari requires special handling for clipboard operations because it
+ * drops the user-activation context during async operations like fetch.
+ */
+export function isSafari(): boolean {
+  const ua = navigator.userAgent;
+  // Safari includes "Safari" but not "Chrome"/"Chromium" in its UA string.
+  // iOS in-app browsers (CriOS, FxiOS, EdgiOS) also include "Safari"
+  // but are excluded by checking for their specific tokens.
+  return (
+    /safari/i.test(ua) && !/chrome|chromium|crios|fxios|edgios|opios/i.test(ua)
+  );
+}
+
+/**
+ * Copies an image to the clipboard from a URL.
+ *
+ * On Safari, the ClipboardItem is constructed synchronously with a
+ * Promise<Blob> to preserve the user-activation context, which Safari
+ * drops during async operations like fetch. This means we must assume
+ * the MIME type (image/png) since we can't inspect the response first.
+ *
+ * On other browsers, we await the fetch and use the actual MIME type.
+ */
+export async function copyImageToClipboard(imageSrc: string): Promise<void> {
+  let item: ClipboardItem;
+  if (isSafari()) {
+    // Safari drops user-activation context during await, so we must
+    // construct the ClipboardItem synchronously with a Promise<Blob>.
+    item = new ClipboardItem({
+      "image/png": fetch(imageSrc).then((response) => response.blob()),
+    });
+  } else {
+    const response = await fetch(imageSrc);
+    const blob = await response.blob();
+    item = new ClipboardItem({ [blob.type]: blob });
+  }
+
+  await navigator.clipboard.write([item]);
+}

package/dist/assets/copy-f2iEg0yL.js

@@ -1 +0,0 @@
-import{m as r}from"./useEventListener-BGihH8bs.js";async function a(o){if(navigator.clipboard===void 0){r.warn("navigator.clipboard is not supported"),window.prompt("Copy to clipboard: Ctrl+C, Enter",o);return}await navigator.clipboard.writeText(o).catch(async()=>{r.warn("Failed to copy to clipboard using navigator.clipboard"),window.prompt("Copy to clipboard: Ctrl+C, Enter",o)})}export{a as t};