react-grab 0.0.38 → 0.0.40

package/dist/index.cjs

@@ -5,6 +5,11 @@ var solidJs = require('solid-js');
 var bippy = require('bippy');
 var source = require('bippy/dist/source');
 var finder = require('@medv/finder');
+var TurndownService = require('turndown');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var TurndownService__default = /*#__PURE__*/_interopDefault(TurndownService);
 
 /**
  * @license MIT
@@ -178,7 +183,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") {
@@ -190,10 +195,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 web.createComponent(solidJs.Show, {
@@ -680,10 +691,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;
       }
     })
   }), web.createComponent(solidJs.Show, {
@@ -748,7 +759,7 @@ var generateCSSSelector = (element) => {
   return finder.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 = bippy.getFiberFromHostInstance(element);
   if (!fiber) return null;
@@ -773,8 +784,16 @@ var formatComponentSourceLocation = async (el) => {
   const source$1 = await source.getSourceFromHostInstance(el);
   if (!source$1) return null;
   const fileName = source.normalizeFileName(source$1.fileName);
-  if (!source.isSourceFile(fileName)) return null;
-  return `${fileName}:${source$1.lineNumber}:${source$1.columnNumber}`;
+  if (source.isSourceFile(fileName)) {
+    return `${fileName}:${source$1.lineNumber}:${source$1.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$1.lineNumber}:${source$1.columnNumber}`;
+    }
+  }
+  return null;
 };
 var getHTMLSnippet = async (element) => {
   const semanticTags = /* @__PURE__ */ new Set([
@@ -872,14 +891,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;
@@ -887,30 +918,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(
@@ -930,31 +968,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("```");
@@ -1212,6 +1256,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__default.default({
+      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;
@@ -1251,6 +1351,7 @@ var init = (rawOptions) => {
     const [grabbedBoxes, setGrabbedBoxes] = solidJs.createSignal([]);
     const [successLabels, setSuccessLabels] = solidJs.createSignal([]);
     const [isActivated, setIsActivated] = solidJs.createSignal(false);
+    const [isToggleMode, setIsToggleMode] = solidJs.createSignal(false);
     const [showProgressIndicator, setShowProgressIndicator] = solidJs.createSignal(false);
     const [didJustDrag, setDidJustDrag] = solidJs.createSignal(false);
     const [copyStartX, setCopyStartX] = solidJs.createSignal(OFFSCREEN_POSITION);
@@ -1280,13 +1381,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));
@@ -1332,7 +1431,7 @@ ${context}
       bippy.traverseFiber(fiber, (currentFiber) => {
         if (bippy.isCompositeFiber(currentFiber)) {
           const displayName = bippy.getDisplayName(currentFiber);
-          if (displayName && isCapitalized(displayName) && !displayName.startsWith("_")) {
+          if (displayName && isCapitalized(displayName) && !displayName.startsWith("_") && !displayName.startsWith("Primitive.")) {
             componentName = displayName;
             return true;
           }
@@ -1375,6 +1474,13 @@ ${context}
       await operation().finally(() => {
         setIsCopying(false);
         stopProgressAnimation();
+        if (isToggleMode()) {
+          if (!isHoldingKeys()) {
+            deactivateRenderer();
+          } else {
+            setIsToggleMode(false);
+          }
+        }
       });
     };
     const hasInnerText = (element) => "innerText" in element;
@@ -1385,15 +1491,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);
@@ -1418,7 +1525,7 @@ ${context}
         }
       }
       if (didCopy) {
-        showTemporarySuccessLabel(extractElementLabelText(targetElement2), copyStartX(), copyStartY());
+        showTemporarySuccessLabel(extractElementLabelText(targetElement2));
       }
       notifyElementsSelected([targetElement2]);
     };
@@ -1431,9 +1538,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)));
@@ -1463,7 +1570,7 @@ ${context}
       } catch {
       }
       if (didCopy) {
-        showTemporarySuccessLabel(`${targetElements.length} elements`, copyStartX(), copyStartY());
+        showTemporarySuccessLabel(`${targetElements.length} elements`);
       }
       notifyElementsSelected(targetElements);
     };
@@ -1591,6 +1698,7 @@ ${context}
       document.body.style.cursor = "crosshair";
     };
     const deactivateRenderer = () => {
+      setIsToggleMode(false);
       setIsHoldingKeys(false);
       setIsActivated(false);
       document.body.style.cursor = "";
@@ -1616,11 +1724,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);
         }
@@ -1641,13 +1763,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();
       }
     }, {
@@ -1729,9 +1853,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,
@@ -1754,10 +1886,14 @@ ${context}
       document.body.style.cursor = "";
     });
     const rendererRoot = mountRoot();
-    const selectionVisible = solidJs.createMemo(() => false);
+    const selectionVisible = solidJs.createMemo(() => isRendererActive() && !isDragging() && Boolean(targetElement()));
     const dragVisible = solidJs.createMemo(() => isRendererActive() && isDraggingBeyondThreshold());
     const labelVariant = solidJs.createMemo(() => isCopying() ? "processing" : "hover");
-    const labelVisible = solidJs.createMemo(() => isRendererActive() && !isDragging() && mouseHasSettled() && (Boolean(targetElement()) && !isSameAsLast() || !targetElement()) || isCopying());
+    const labelVisible = solidJs.createMemo(() => {
+      if (isCopying()) return true;
+      if (successLabels().length > 0) return false;
+      return isRendererActive() && !isDragging() && mouseHasSettled() && (Boolean(targetElement()) && !isSameAsLast() || !targetElement());
+    });
     const progressVisible = solidJs.createMemo(() => isCopying() && showProgressIndicator() && hasValidMousePosition());
     const crosshairVisible = solidJs.createMemo(() => isRendererActive() && !isDragging());
     web.render(() => web.createComponent(ReactGrabRenderer, {
@@ -1794,6 +1930,7 @@ ${context}
       get labelVisible() {
         return labelVisible();
       },
+      labelZIndex: 2147483646,
       get progressVisible() {
         return progressVisible();
       },
@@ -1844,6 +1981,8 @@ if (!window[EXTENSION_MARKER]) {
   globalApi = init();
 }
 
+exports.elementToMarkdown = elementToMarkdown;
 exports.getGlobalApi = getGlobalApi;
+exports.htmlToMarkdown = htmlToMarkdown;
 exports.init = init;
 exports.playCopySound = playCopySound;

package/dist/index.d.cts

@@ -34,8 +34,6 @@ interface ReactGrabRendererProps {
     successLabels?: Array<{
         id: string;
         text: string;
-        x: number;
-        y: number;
     }>;
     labelVariant?: "hover" | "processing" | "success";
     labelText?: string;
@@ -59,6 +57,9 @@ declare const init: (rawOptions?: Options) => ReactGrabAPI;
 
 declare const playCopySound: () => void;
 
+declare const htmlToMarkdown: (html: string) => string;
+declare const elementToMarkdown: (element: Element) => string;
+
 declare global {
     interface Window {
         __REACT_GRAB_EXTENSION_ACTIVE__?: boolean;
@@ -66,4 +67,4 @@ declare global {
 }
 declare const getGlobalApi: () => ReactGrabAPI | null;
 
-export { type Options, type OverlayBounds, type ReactGrabAPI, type ReactGrabRendererProps, getGlobalApi, init, playCopySound };
+export { type Options, type OverlayBounds, type ReactGrabAPI, type ReactGrabRendererProps, elementToMarkdown, getGlobalApi, htmlToMarkdown, init, playCopySound };

package/dist/index.d.ts

@@ -34,8 +34,6 @@ interface ReactGrabRendererProps {
     successLabels?: Array<{
         id: string;
         text: string;
-        x: number;
-        y: number;
     }>;
     labelVariant?: "hover" | "processing" | "success";
     labelText?: string;
@@ -59,6 +57,9 @@ declare const init: (rawOptions?: Options) => ReactGrabAPI;
 
 declare const playCopySound: () => void;
 
+declare const htmlToMarkdown: (html: string) => string;
+declare const elementToMarkdown: (element: Element) => string;
+
 declare global {
     interface Window {
         __REACT_GRAB_EXTENSION_ACTIVE__?: boolean;
@@ -66,4 +67,4 @@ declare global {
 }
 declare const getGlobalApi: () => ReactGrabAPI | null;
 
-export { type Options, type OverlayBounds, type ReactGrabAPI, type ReactGrabRendererProps, getGlobalApi, init, playCopySound };
+export { type Options, type OverlayBounds, type ReactGrabAPI, type ReactGrabRendererProps, elementToMarkdown, getGlobalApi, htmlToMarkdown, init, playCopySound };