react-grab 0.0.39 → 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, {
@@ -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;
@@ -880,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;
@@ -895,33 +918,37 @@ var getHTMLSnippet = async (element) => {
     const siblings = Array.from(parent.children);
     targetIndex = siblings.indexOf(element);
     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(`${indent2}  ${formatElementOpeningTag(sibling, true)}`);
-            lines.push(`${indent2}  </${sibling.tagName.toLowerCase()}>`);
+            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(
@@ -941,35 +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 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()}>`);
+            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("```");
@@ -1227,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;
@@ -1266,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);
@@ -1345,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;
           }
@@ -1388,6 +1474,13 @@ ${context}
       await operation().finally(() => {
         setIsCopying(false);
         stopProgressAnimation();
+        if (isToggleMode()) {
+          if (!isHoldingKeys()) {
+            deactivateRenderer();
+          } else {
+            setIsToggleMode(false);
+          }
+        }
       });
     };
     const hasInnerText = (element) => "innerText" in element;
@@ -1398,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);
@@ -1444,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)));
@@ -1604,6 +1698,7 @@ ${context}
       document.body.style.cursor = "crosshair";
     };
     const deactivateRenderer = () => {
+      setIsToggleMode(false);
       setIsHoldingKeys(false);
       setIsActivated(false);
       document.body.style.cursor = "";
@@ -1629,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);
         }
@@ -1654,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();
       }
     }, {
@@ -1742,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,
@@ -1767,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, {
@@ -1807,6 +1930,7 @@ ${context}
       get labelVisible() {
         return labelVisible();
       },
+      labelZIndex: 2147483646,
       get progressVisible() {
         return progressVisible();
       },
@@ -1857,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

@@ -57,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;
@@ -64,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

@@ -57,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;
@@ -64,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 };