react-grab 0.0.38 → 0.0.40

package/dist/index.js

@@ -3,6 +3,7 @@ import { createRoot, createSignal, createMemo, createEffect, on, onCleanup, Show
 import { instrument, _fiberRoots, getFiberFromHostInstance, traverseFiber, isCompositeFiber, getDisplayName } from 'bippy';
 import { getSourceFromHostInstance, normalizeFileName, isSourceFile } from 'bippy/dist/source';
 import { finder } from '@medv/finder';
+import TurndownService from 'turndown';
 
 /**
  * @license MIT
@@ -176,7 +177,7 @@ var SelectionBox = (props) => {
     position: "fixed",
     "box-sizing": "border-box",
     "pointer-events": props.variant === "drag" ? "none" : "auto",
-    "z-index": "2147483646"
+    "z-index": props.variant === "grabbed" ? "2147483645" : "2147483646"
   };
   const variantStyle = () => {
     if (props.variant === "drag") {
@@ -188,10 +189,16 @@ var SelectionBox = (props) => {
         cursor: "crosshair"
       };
     }
+    if (props.variant === "selection") {
+      return {
+        border: "1px dashed rgba(210, 57, 192, 0.5)",
+        "background-color": "rgba(210, 57, 192, 0.08)"
+      };
+    }
     return {
       border: "1px solid rgb(210, 57, 192)",
-      "background-color": "rgba(210, 57, 192, 0.2)",
-      transition: props.variant === "grabbed" ? "opacity 0.3s ease-out" : void 0
+      "background-color": "rgba(210, 57, 192, 0.08)",
+      transition: "opacity 0.3s ease-out"
     };
   };
   return createComponent(Show, {
@@ -678,10 +685,10 @@ var ReactGrabRenderer = (props) => {
         return label.text;
       },
       get x() {
-        return label.x;
+        return props.mouseX ?? 0;
       },
       get y() {
-        return label.y;
+        return props.mouseY ?? 0;
       }
     })
   }), createComponent(Show, {
@@ -746,7 +753,7 @@ var generateCSSSelector = (element) => {
   return finder(element);
 };
 var truncateString = (string, maxLength) => string.length > maxLength ? `${string.substring(0, maxLength)}...` : string;
-var isInternalComponent = (name) => !isCapitalized(name) || name.startsWith("_") || name.includes("Provider") && name.includes("Context");
+var isInternalComponent = (name) => !isCapitalized(name) || name.startsWith("_") || name.startsWith("Primitive.") || name.includes("Provider") && name.includes("Context");
 var getNearestComponentDisplayName = (element) => {
   const fiber = getFiberFromHostInstance(element);
   if (!fiber) return null;
@@ -771,8 +778,16 @@ var formatComponentSourceLocation = async (el) => {
   const source = await getSourceFromHostInstance(el);
   if (!source) return null;
   const fileName = normalizeFileName(source.fileName);
-  if (!isSourceFile(fileName)) return null;
-  return `${fileName}:${source.lineNumber}:${source.columnNumber}`;
+  if (isSourceFile(fileName)) {
+    return `${fileName}:${source.lineNumber}:${source.columnNumber}`;
+  }
+  if (fileName && (fileName.includes(".tsx") || fileName.includes(".ts") || fileName.includes(".jsx") || fileName.includes(".js"))) {
+    const cleanedFileName = fileName.replace(/^webpack:\/\/_N_E\//, "").replace(/^webpack:\/\/\//, "").replace(/^webpack:\/\//, "").replace(/^\.\//, "");
+    if (cleanedFileName && !cleanedFileName.startsWith("node_modules") && !cleanedFileName.includes(".next") && !cleanedFileName.startsWith("webpack")) {
+      return `${cleanedFileName}:${source.lineNumber}:${source.columnNumber}`;
+    }
+  }
+  return null;
 };
 var getHTMLSnippet = async (element) => {
   const semanticTags = /* @__PURE__ */ new Set([
@@ -870,14 +885,26 @@ var getHTMLSnippet = async (element) => {
     ancestors.map((ancestor) => formatComponentSourceLocation(ancestor))
   );
   const elementSource = await formatComponentSourceLocation(element);
+  const ancestorElementIndents = [];
+  const ancestorComponentIndents = [];
+  let currentIndentLevel = 0;
+  const getIndent = (level) => "  ".repeat(level);
   for (let i = 0; i < ancestors.length; i++) {
-    const indent2 = "  ".repeat(i);
     const componentName = ancestorComponents[i];
     const source = ancestorSources[i];
-    if (componentName && source && (i === 0 || ancestorComponents[i - 1] !== componentName)) {
-      lines.push(`${indent2}<${componentName} source="${source}">`);
+    const isNewComponent = componentName && source && (i === 0 || ancestorComponents[i - 1] !== componentName);
+    if (isNewComponent) {
+      ancestorComponentIndents[i] = currentIndentLevel;
+      lines.push(
+        `${getIndent(currentIndentLevel)}<${componentName} used-at="${source}">`
+      );
+      currentIndentLevel++;
     }
-    lines.push(`${indent2}${formatElementOpeningTag(ancestors[i], true)}`);
+    ancestorElementIndents[i] = currentIndentLevel;
+    lines.push(
+      `${getIndent(currentIndentLevel)}${formatElementOpeningTag(ancestors[i], true)}`
+    );
+    currentIndentLevel++;
   }
   const parent = element.parentElement;
   let targetIndex = -1;
@@ -885,30 +912,37 @@ var getHTMLSnippet = async (element) => {
     const siblings = Array.from(parent.children);
     targetIndex = siblings.indexOf(element);
     if (targetIndex > 0) {
-      const prevSibling = siblings[targetIndex - 1];
-      const prevId = extractSiblingIdentifier(prevSibling);
-      if (prevId && targetIndex <= 2) {
-        const indent2 = "  ".repeat(ancestors.length);
-        lines.push(`${indent2}  ${formatElementOpeningTag(prevSibling, true)}`);
-        lines.push(`${indent2}  </${prevSibling.tagName.toLowerCase()}>`);
-      } else if (targetIndex > 0) {
-        const indent2 = "  ".repeat(ancestors.length);
+      const indent = getIndent(currentIndentLevel);
+      if (targetIndex <= 2) {
+        for (let i = 0; i < targetIndex; i++) {
+          const sibling = siblings[i];
+          const siblingId = extractSiblingIdentifier(sibling);
+          if (siblingId) {
+            lines.push(`${indent}${formatElementOpeningTag(sibling, true)}`);
+            lines.push(`${indent}</${sibling.tagName.toLowerCase()}>`);
+          }
+        }
+      } else {
         lines.push(
-          `${indent2}  ... (${targetIndex} element${targetIndex === 1 ? "" : "s"})`
+          `${indent}... (${targetIndex} element${targetIndex === 1 ? "" : "s"})`
         );
       }
     }
   }
-  const indent = "  ".repeat(ancestors.length);
   const lastAncestorComponent = ancestors.length > 0 ? ancestorComponents[ancestorComponents.length - 1] : null;
   const showElementComponent = elementComponent && elementSource && elementComponent !== lastAncestorComponent;
+  let elementIndentLevel = currentIndentLevel;
+  const elementComponentIndentLevel = currentIndentLevel;
   if (showElementComponent) {
-    lines.push(`${indent}  <${elementComponent} used-at="${elementSource}">`);
+    lines.push(
+      `${getIndent(elementIndentLevel)}<${elementComponent} used-at="${elementSource}">`
+    );
+    elementIndentLevel++;
   }
-  lines.push(`${indent}  <!-- IMPORTANT: selected element -->`);
+  const elementIndent = getIndent(elementIndentLevel);
+  lines.push(`${elementIndent}<!-- IMPORTANT: selected element -->`);
   const textContent = extractTruncatedTextContent(element);
   const childrenCount = element.children.length;
-  const elementIndent = `${indent}${showElementComponent ? "    " : "  "}`;
   if (textContent && childrenCount === 0 && textContent.length < 40) {
     lines.push(
       `${elementIndent}${formatElementOpeningTag(element)}${textContent}${formatElementClosingTag(
@@ -928,31 +962,37 @@ var getHTMLSnippet = async (element) => {
     lines.push(`${elementIndent}${formatElementClosingTag(element)}`);
   }
   if (showElementComponent) {
-    lines.push(`${indent}  </${elementComponent}>`);
+    lines.push(
+      `${getIndent(elementComponentIndentLevel)}</${elementComponent}>`
+    );
   }
   if (parent && targetIndex >= 0) {
     const siblings = Array.from(parent.children);
     const siblingsAfter = siblings.length - targetIndex - 1;
     if (siblingsAfter > 0) {
-      const nextSibling = siblings[targetIndex + 1];
-      const nextId = extractSiblingIdentifier(nextSibling);
-      if (nextId && siblingsAfter <= 2) {
-        lines.push(`${indent}  ${formatElementOpeningTag(nextSibling, true)}`);
-        lines.push(`${indent}  </${nextSibling.tagName.toLowerCase()}>`);
+      const indent = getIndent(currentIndentLevel);
+      if (siblingsAfter <= 2) {
+        for (let i = targetIndex + 1; i < siblings.length; i++) {
+          const sibling = siblings[i];
+          const siblingId = extractSiblingIdentifier(sibling);
+          if (siblingId) {
+            lines.push(`${indent}${formatElementOpeningTag(sibling, true)}`);
+            lines.push(`${indent}</${sibling.tagName.toLowerCase()}>`);
+          }
+        }
       } else {
         lines.push(
-          `${indent}  ... (${siblingsAfter} element${siblingsAfter === 1 ? "" : "s"})`
+          `${indent}... (${siblingsAfter} element${siblingsAfter === 1 ? "" : "s"})`
         );
       }
     }
   }
   for (let i = ancestors.length - 1; i >= 0; i--) {
-    const indent2 = "  ".repeat(i);
-    lines.push(`${indent2}${formatElementClosingTag(ancestors[i])}`);
-    const componentName = ancestorComponents[i];
-    const source = ancestorSources[i];
-    if (componentName && source && (i === ancestors.length - 1 || ancestorComponents[i + 1] !== componentName)) {
-      lines.push(`${indent2}</${componentName}>`);
+    const elementIndent2 = getIndent(ancestorElementIndents[i]);
+    lines.push(`${elementIndent2}${formatElementClosingTag(ancestors[i])}`);
+    if (ancestorComponentIndents[i] !== void 0) {
+      const compIndent = getIndent(ancestorComponentIndents[i]);
+      lines.push(`${compIndent}</${ancestorComponents[i]}>`);
     }
   }
   lines.push("```");
@@ -1210,6 +1250,62 @@ var isLocalhost = () => {
   const hostname = window.location.hostname;
   return hostname === "localhost" || hostname === "127.0.0.1" || hostname === "[::1]";
 };
+var turndownService = null;
+var getTurndownService = () => {
+  if (!turndownService) {
+    turndownService = new TurndownService({
+      headingStyle: "atx",
+      codeBlockStyle: "fenced",
+      emDelimiter: "_",
+      bulletListMarker: "-",
+      linkStyle: "inlined",
+      linkReferenceStyle: "full"
+    });
+    turndownService.addRule("strikethrough", {
+      filter: ["del", "s"],
+      replacement: (content) => `~~${content}~~`
+    });
+    turndownService.addRule("removeHidden", {
+      filter: (node) => {
+        if (node instanceof HTMLElement) {
+          const style = window.getComputedStyle(node);
+          return style.display === "none" || style.visibility === "hidden" || style.opacity === "0";
+        }
+        return false;
+      },
+      replacement: () => ""
+    });
+    turndownService.addRule("preserveButtons", {
+      filter: ["button"],
+      replacement: (content) => content ? `[${content}]` : ""
+    });
+    turndownService.addRule("preserveInputs", {
+      filter: (node) => {
+        if (node.nodeName === "INPUT" && node instanceof HTMLInputElement) {
+          return true;
+        }
+        return false;
+      },
+      replacement: (_, node) => {
+        if (node instanceof HTMLInputElement) {
+          const value = node.value || node.placeholder;
+          return value ? `[${value}]` : "";
+        }
+        return "";
+      }
+    });
+  }
+  return turndownService;
+};
+var htmlToMarkdown = (html) => {
+  const service = getTurndownService();
+  return service.turndown(html).trim();
+};
+var elementToMarkdown = (element) => {
+  const clonedElement = element.cloneNode(true);
+  const service = getTurndownService();
+  return service.turndown(clonedElement).trim();
+};
 
 // src/core.tsx
 var PROGRESS_INDICATOR_DELAY_MS = 150;
@@ -1249,6 +1345,7 @@ var init = (rawOptions) => {
     const [grabbedBoxes, setGrabbedBoxes] = createSignal([]);
     const [successLabels, setSuccessLabels] = createSignal([]);
     const [isActivated, setIsActivated] = createSignal(false);
+    const [isToggleMode, setIsToggleMode] = createSignal(false);
     const [showProgressIndicator, setShowProgressIndicator] = createSignal(false);
     const [didJustDrag, setDidJustDrag] = createSignal(false);
     const [copyStartX, setCopyStartX] = createSignal(OFFSCREEN_POSITION);
@@ -1278,13 +1375,11 @@ var init = (rawOptions) => {
         setGrabbedBoxes((previousBoxes) => previousBoxes.filter((box) => box.id !== boxId));
       }, SUCCESS_LABEL_DURATION_MS);
     };
-    const showTemporarySuccessLabel = (text, positionX, positionY) => {
+    const showTemporarySuccessLabel = (text) => {
       const labelId = `success-${Date.now()}-${Math.random()}`;
       setSuccessLabels((previousLabels) => [...previousLabels, {
         id: labelId,
-        text,
-        x: positionX,
-        y: positionY
+        text
       }]);
       setTimeout(() => {
         setSuccessLabels((previousLabels) => previousLabels.filter((label) => label.id !== labelId));
@@ -1330,7 +1425,7 @@ ${context}
       traverseFiber(fiber, (currentFiber) => {
         if (isCompositeFiber(currentFiber)) {
           const displayName = getDisplayName(currentFiber);
-          if (displayName && isCapitalized(displayName) && !displayName.startsWith("_")) {
+          if (displayName && isCapitalized(displayName) && !displayName.startsWith("_") && !displayName.startsWith("Primitive.")) {
             componentName = displayName;
             return true;
           }
@@ -1373,6 +1468,13 @@ ${context}
       await operation().finally(() => {
         setIsCopying(false);
         stopProgressAnimation();
+        if (isToggleMode()) {
+          if (!isHoldingKeys()) {
+            deactivateRenderer();
+          } else {
+            setIsToggleMode(false);
+          }
+        }
       });
     };
     const hasInnerText = (element) => "innerText" in element;
@@ -1383,15 +1485,16 @@ ${context}
       return element.textContent ?? "";
     };
     const createCombinedTextContent = (elements) => elements.map((element) => extractElementTextContent(element).trim()).filter((textContent) => textContent.length > 0).join("\n\n");
+    const createCombinedMarkdownContent = (elements) => elements.map((element) => elementToMarkdown(element).trim()).filter((markdownContent) => markdownContent.length > 0).join("\n\n");
     const copySingleElementToClipboard = async (targetElement2) => {
       showTemporaryGrabbedBox(createElementBounds(targetElement2));
       await new Promise((resolve) => requestAnimationFrame(resolve));
       let didCopy = false;
       try {
         if (isExtensionTextOnlyMode()) {
-          const plainTextContent = createCombinedTextContent([targetElement2]);
-          if (plainTextContent.length > 0) {
-            didCopy = await copyContent(plainTextContent, options.playCopySound ? playCopySound : void 0);
+          const markdownContent = createCombinedMarkdownContent([targetElement2]);
+          if (markdownContent.length > 0) {
+            didCopy = await copyContent(markdownContent, options.playCopySound ? playCopySound : void 0);
           }
         } else {
           const content = await getHTMLSnippet(targetElement2);
@@ -1416,7 +1519,7 @@ ${context}
         }
       }
       if (didCopy) {
-        showTemporarySuccessLabel(extractElementLabelText(targetElement2), copyStartX(), copyStartY());
+        showTemporarySuccessLabel(extractElementLabelText(targetElement2));
       }
       notifyElementsSelected([targetElement2]);
     };
@@ -1429,9 +1532,9 @@ ${context}
       let didCopy = false;
       try {
         if (isExtensionTextOnlyMode()) {
-          const plainTextContent = createCombinedTextContent(targetElements);
-          if (plainTextContent.length > 0) {
-            didCopy = await copyContent(plainTextContent, options.playCopySound ? playCopySound : void 0);
+          const markdownContent = createCombinedMarkdownContent(targetElements);
+          if (markdownContent.length > 0) {
+            didCopy = await copyContent(markdownContent, options.playCopySound ? playCopySound : void 0);
           }
         } else {
           const elementSnippetResults = await Promise.allSettled(targetElements.map((element) => getHTMLSnippet(element)));
@@ -1461,7 +1564,7 @@ ${context}
       } catch {
       }
       if (didCopy) {
-        showTemporarySuccessLabel(`${targetElements.length} elements`, copyStartX(), copyStartY());
+        showTemporarySuccessLabel(`${targetElements.length} elements`);
       }
       notifyElementsSelected(targetElements);
     };
@@ -1589,6 +1692,7 @@ ${context}
       document.body.style.cursor = "crosshair";
     };
     const deactivateRenderer = () => {
+      setIsToggleMode(false);
       setIsHoldingKeys(false);
       setIsActivated(false);
       document.body.style.cursor = "";
@@ -1614,11 +1718,25 @@ ${context}
         deactivateRenderer();
         return;
       }
+      if (event.key === "Enter" && isHoldingKeys()) {
+        setIsToggleMode(true);
+        if (keydownSpamTimerId !== null) {
+          window.clearTimeout(keydownSpamTimerId);
+          keydownSpamTimerId = null;
+        }
+        if (!isActivated()) {
+          if (holdTimerId) window.clearTimeout(holdTimerId);
+          activateRenderer();
+          options.onActivate?.();
+        }
+        return;
+      }
       if (!options.allowActivationInsideInput && isKeyboardEventTriggeredByInput(event)) {
         return;
       }
       if (!isTargetKeyCombination(event)) return;
       if (isActivated()) {
+        if (isToggleMode()) return;
         if (keydownSpamTimerId !== null) {
           window.clearTimeout(keydownSpamTimerId);
         }
@@ -1639,13 +1757,15 @@ ${context}
         options.onActivate?.();
       }, options.keyHoldDuration);
     }, {
-      signal: eventListenerSignal
+      signal: eventListenerSignal,
+      capture: true
     });
     window.addEventListener("keyup", (event) => {
       if (!isHoldingKeys() && !isActivated()) return;
       const isReleasingModifier = !event.metaKey && !event.ctrlKey;
       const isReleasingC = event.key.toLowerCase() === "c";
       if (isReleasingC || isReleasingModifier) {
+        if (isToggleMode()) return;
         deactivateRenderer();
       }
     }, {
@@ -1727,9 +1847,17 @@ ${context}
       if (isRendererActive() || isCopying() || didJustDrag()) {
         event.preventDefault();
         event.stopPropagation();
-        if (didJustDrag()) {
+        const hadDrag = didJustDrag();
+        if (hadDrag) {
           setDidJustDrag(false);
         }
+        if (isToggleMode() && !isCopying()) {
+          if (!isHoldingKeys()) {
+            deactivateRenderer();
+          } else {
+            setIsToggleMode(false);
+          }
+        }
       }
     }, {
       signal: eventListenerSignal,
@@ -1752,10 +1880,14 @@ ${context}
       document.body.style.cursor = "";
     });
     const rendererRoot = mountRoot();
-    const selectionVisible = createMemo(() => false);
+    const selectionVisible = createMemo(() => isRendererActive() && !isDragging() && Boolean(targetElement()));
     const dragVisible = createMemo(() => isRendererActive() && isDraggingBeyondThreshold());
     const labelVariant = createMemo(() => isCopying() ? "processing" : "hover");
-    const labelVisible = createMemo(() => isRendererActive() && !isDragging() && mouseHasSettled() && (Boolean(targetElement()) && !isSameAsLast() || !targetElement()) || isCopying());
+    const labelVisible = createMemo(() => {
+      if (isCopying()) return true;
+      if (successLabels().length > 0) return false;
+      return isRendererActive() && !isDragging() && mouseHasSettled() && (Boolean(targetElement()) && !isSameAsLast() || !targetElement());
+    });
     const progressVisible = createMemo(() => isCopying() && showProgressIndicator() && hasValidMousePosition());
     const crosshairVisible = createMemo(() => isRendererActive() && !isDragging());
     render(() => createComponent(ReactGrabRenderer, {
@@ -1792,6 +1924,7 @@ ${context}
       get labelVisible() {
         return labelVisible();
       },
+      labelZIndex: 2147483646,
       get progressVisible() {
         return progressVisible();
       },
@@ -1842,4 +1975,4 @@ if (!window[EXTENSION_MARKER]) {
   globalApi = init();
 }
 
-export { getGlobalApi, init, playCopySound };
+export { elementToMarkdown, getGlobalApi, htmlToMarkdown, init, playCopySound };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-grab",
-  "version": "0.0.38",
-  "description": "",
+  "version": "0.0.40",
+  "description": "Grab any element in your app and give it to Cursor, Claude Code, or other AI coding agents.",
   "keywords": [
     "react",
     "grab",
@@ -54,6 +54,7 @@
   "devDependencies": {
     "@babel/core": "^7.28.5",
     "@babel/preset-typescript": "^7.28.5",
+    "@types/turndown": "^5.0.6",
     "babel-preset-solid": "^1.9.10",
     "esbuild-plugin-babel": "^0.2.3",
     "eslint": "^9.37.0",
@@ -70,7 +71,8 @@
     "bippy": "^0.5.14",
     "modern-screenshot": "^4.6.6",
     "solid-js": "^1.9.10",
-    "solid-sonner": "^0.2.8"
+    "solid-sonner": "^0.2.8",
+    "turndown": "^7.2.2"
   },
   "scripts": {
     "build": "NODE_ENV=production tsup",