fix

Author: aidenybai

packages/react-grab/e2e/fixtures.ts

@@ -340,8 +340,10 @@ const createReactGrabPageObject = (page: Page): ReactGrabPageObject => {
   const captureNextClipboardWrites = async () => {
     return page.evaluate(() => {
       return new Promise<Record<string, string>>((resolve) => {
-        const originalSetData = DataTransfer.prototype.setData;
         const clipboardWrites: Record<string, string> = {};
+        let didCleanup = false;
+
+        const originalSetData = DataTransfer.prototype.setData;
         DataTransfer.prototype.setData = function (
           type: string,
           value: string,
@@ -350,8 +352,31 @@ const createReactGrabPageObject = (page: Page): ReactGrabPageObject => {
           return originalSetData.call(this, type, value);
         };
 
+        const originalWrite = navigator.clipboard.write.bind(
+          navigator.clipboard,
+        );
+        navigator.clipboard.write = async function (data: ClipboardItem[]) {
+          for (const item of data) {
+            for (const type of item.types) {
+              if (type.startsWith("text/")) {
+                const blob = await item.getType(type);
+                clipboardWrites[type] = await blob.text();
+              }
+            }
+          }
+          try {
+            return await originalWrite(data);
+          } finally {
+            clearTimeout(safetyTimeout);
+            queueMicrotask(cleanup);
+          }
+        };
+
         const cleanup = () => {
+          if (didCleanup) return;
+          didCleanup = true;
           DataTransfer.prototype.setData = originalSetData;
+          navigator.clipboard.write = originalWrite;
           resolve(clipboardWrites);
         };
 

packages/react-grab/e2e/selection.spec.ts

@@ -54,15 +54,17 @@ test.describe("Element Selection", () => {
     const copyPayloadPromise = reactGrab.captureNextClipboardWrites();
     await reactGrab.clickElement("[data-testid='todo-list'] h1");
     const copyPayload = await copyPayloadPromise;
+
+    expect(copyPayload["text/plain"]).toContain("Todo List");
+    expect(copyPayload["text/html"]).toContain("Todo List");
+
     const clipboardMetadataText = copyPayload["application/x-react-grab"];
-    if (!clipboardMetadataText) {
-      throw new Error("Missing React Grab clipboard metadata");
+    if (clipboardMetadataText) {
+      const clipboardMetadata = JSON.parse(clipboardMetadataText);
+      expect(clipboardMetadata.content).toContain("Todo List");
+      expect(clipboardMetadata.entries).toHaveLength(1);
+      expect(clipboardMetadata.entries[0].content).toContain("Todo List");
     }
-
-    const clipboardMetadata = JSON.parse(clipboardMetadataText);
-    expect(clipboardMetadata.content).toContain("Todo List");
-    expect(clipboardMetadata.entries).toHaveLength(1);
-    expect(clipboardMetadata.entries[0].content).toContain("Todo List");
   });
 
   test("should highlight different elements when hovering", async ({

packages/react-grab/src/constants.ts

@@ -160,9 +160,9 @@ export const DROPDOWN_EDGE_TRANSFORM_ORIGIN = {
   bottom: "center bottom",
 };
 
-export const TEXT_IMAGE_FONT_SIZE_PX = 12;
-export const TEXT_IMAGE_LINE_HEIGHT_PX = 15;
-export const TEXT_IMAGE_PADDING_PX = 8;
+export const TEXT_IMAGE_FONT_SIZE_PX = 8;
+export const TEXT_IMAGE_LINE_HEIGHT_PX = 10;
+export const TEXT_IMAGE_PADDING_PX = 4;
 export const TEXT_IMAGE_FONT_FAMILY = "monospace";
 export const TEXT_IMAGE_BACKGROUND_COLOR = "#ffffff";
 export const TEXT_IMAGE_TEXT_COLOR = "#000000";

packages/react-grab/src/core/copy.ts

@@ -73,7 +73,7 @@ export const tryCopyWithFallback = async (
         ? `${extraPrompt}\n\n${transformedContent}`
         : transformedContent;
 
-      didCopy = copyContent(copiedContent, {
+      didCopy = await copyContent(copiedContent, {
         componentName: options.componentName,
         entries,
       });

packages/react-grab/src/core/index.tsx

@@ -138,7 +138,6 @@ import { commentPlugin } from "./plugins/comment.js";
 import { openPlugin } from "./plugins/open.js";
 import { copyHtmlPlugin } from "./plugins/copy-html.js";
 import { copyStylesPlugin } from "./plugins/copy-styles.js";
-import { copyImagePlugin } from "./plugins/copy-image.js";
 import {
   freezeAnimations,
   freezeAllAnimations,
@@ -169,7 +168,6 @@ const builtInPlugins = [
   commentPlugin,
   copyHtmlPlugin,
   copyStylesPlugin,
-  copyImagePlugin,
   openPlugin,
 ];
 
@@ -3790,8 +3788,8 @@ export const init = (rawOptions?: Options): ReactGrabAPI => {
       }
     };
 
-    const copyCommentItemContent = (item: CommentItem) => {
-      copyContent(item.content, {
+    const copyCommentItemContent = async (item: CommentItem) => {
+      await copyContent(item.content, {
         tagName: item.tagName,
         componentName: item.componentName ?? item.elementName,
         commentText: item.commentText,
@@ -3834,7 +3832,7 @@ export const init = (rawOptions?: Options): ReactGrabAPI => {
       }
     };
 
-    const handleCommentsCopyAll = () => {
+    const handleCommentsCopyAll = async () => {
       clearCommentsHoverPreviews();
       const currentCommentItems = commentItems();
       if (currentCommentItems.length === 0) return;
@@ -3844,7 +3842,7 @@ export const init = (rawOptions?: Options): ReactGrabAPI => {
       );
 
       const firstItem = currentCommentItems[0];
-      copyContent(combinedContent, {
+      await copyContent(combinedContent, {
         componentName: firstItem.componentName ?? firstItem.tagName,
         entries: currentCommentItems.map((commentItem) => ({
           tagName: commentItem.tagName,

packages/react-grab/src/core/plugins/copy-html.ts

@@ -22,7 +22,7 @@ export const copyHtmlPlugin = createPendingSelectionPlugin({
         if (!transformedHtml) return false;
 
         const stackContext = await api.getStackContext(context.element);
-        return copyContent(appendStackContext(transformedHtml, stackContext), {
+        return await copyContent(appendStackContext(transformedHtml, stackContext), {
           componentName: context.componentName,
           tagName: context.tagName,
         });

packages/react-grab/src/core/plugins/copy-image.ts

@@ -19,7 +19,7 @@ export const copyStylesPlugin = createPendingSelectionPlugin({
           .join("\n\n");
 
         const stackContext = await api.getStackContext(context.element);
-        return copyContent(appendStackContext(combinedCss, stackContext), {
+        return await copyContent(appendStackContext(combinedCss, stackContext), {
           componentName: context.componentName,
           tagName: context.tagName,
         });

packages/react-grab/src/core/plugins/copy-styles.ts

@@ -1,6 +1,5 @@
 import { VERSION } from "../constants.js";
-
-const REACT_GRAB_MIME_TYPE = "application/x-react-grab";
+import { renderTextToImage } from "./render-text-to-image.js";
 
 export interface ReactGrabEntry {
   tagName?: string;
@@ -31,10 +30,13 @@ const escapeHtml = (text: string): string =>
     .replace(/>/g, ">")
     .replace(/"/g, """);
 
-export const copyContent = (
+const buildHtmlPayload = (content: string): string =>
+  `<meta charset='utf-8'><pre><code>${escapeHtml(content)}</code></pre>`;
+
+const buildMetadata = (
   content: string,
   options?: CopyContentOptions,
-): boolean => {
+): ReactGrabMetadata => {
   const elementName = options?.componentName ?? "div";
   const entries = options?.entries ?? [
     {
@@ -44,23 +46,37 @@ export const copyContent = (
       commentText: options?.commentText,
     },
   ];
-  const reactGrabMetadata: ReactGrabMetadata = {
-    version: VERSION,
-    content,
-    entries,
-    timestamp: Date.now(),
-  };
+  return { version: VERSION, content, entries, timestamp: Date.now() };
+};
+
+const isModernClipboardAvailable = (): boolean =>
+  Boolean(navigator.clipboard?.write) && typeof ClipboardItem !== "undefined";
 
+/**
+ * Modern path: writes text/plain + text/html + image/png in a single ClipboardItem.
+ * Cannot carry custom MIME types like application/x-react-grab.
+ */
+const modernCopy = async (content: string): Promise<void> => {
+  const item = new ClipboardItem({
+    "text/plain": new Blob([content], { type: "text/plain" }),
+    "text/html": new Blob([buildHtmlPayload(content)], { type: "text/html" }),
+    "image/png": renderTextToImage(content),
+  });
+  await navigator.clipboard.write([item]);
+};
+
+/**
+ * Legacy path: execCommand("copy") with text/plain + text/html + metadata.
+ * Must run synchronously within a user gesture call stack.
+ */
+const legacyCopy = (content: string, metadata: ReactGrabMetadata): boolean => {
   const copyHandler = (event: ClipboardEvent) => {
     event.preventDefault();
     event.clipboardData?.setData("text/plain", content);
+    event.clipboardData?.setData("text/html", buildHtmlPayload(content));
     event.clipboardData?.setData(
-      "text/html",
-      `<meta charset='utf-8'><pre><code>${escapeHtml(content)}</code></pre>`,
-    );
-    event.clipboardData?.setData(
-      REACT_GRAB_MIME_TYPE,
-      JSON.stringify(reactGrabMetadata),
+      "application/x-react-grab",
+      JSON.stringify(metadata),
     );
   };
 
@@ -78,13 +94,30 @@ export const copyContent = (
     if (typeof document.execCommand !== "function") {
       return false;
     }
-    const didCopySucceed = document.execCommand("copy");
-    if (didCopySucceed) {
-      options?.onSuccess?.();
-    }
-    return didCopySucceed;
+    return document.execCommand("copy");
   } finally {
     document.removeEventListener("copy", copyHandler);
     textarea.remove();
   }
 };
+
+export const copyContent = async (
+  content: string,
+  options?: CopyContentOptions,
+): Promise<boolean> => {
+  let didCopy: boolean;
+
+  if (isModernClipboardAvailable()) {
+    try {
+      await modernCopy(content);
+      didCopy = true;
+    } catch {
+      didCopy = false;
+    }
+  } else {
+    didCopy = legacyCopy(content, buildMetadata(content, options));
+  }
+
+  if (didCopy) options?.onSuccess?.();
+  return didCopy;
+};