feat: support grabbing text nodes

packages/react-grab/e2e/activation-key-config.spec.ts

@@ -1,4 +1,5 @@
 import { test, expect } from "./fixtures.js";
+import { NON_ACTIVATING_KEY_HOLD_DURATION_MS } from "./constants.js";
 
 test.describe("Activation Key Configuration", () => {
   test.describe.configure({ mode: "serial" });
@@ -154,10 +155,12 @@ test.describe("Activation Key Configuration", () => {
     });
 
     test("should not activate without holding long enough", async ({ reactGrab }) => {
+      await reactGrab.reinitialize({
+        keyHoldDuration: NON_ACTIVATING_KEY_HOLD_DURATION_MS,
+      });
       await reactGrab.page.click("body");
       await reactGrab.page.keyboard.down(reactGrab.modifierKey);
       await reactGrab.page.keyboard.down("c");
-      await reactGrab.page.waitForTimeout(50);
       await reactGrab.page.keyboard.up("c");
       await reactGrab.page.keyboard.up(reactGrab.modifierKey);
 
@@ -169,13 +172,8 @@ test.describe("Activation Key Configuration", () => {
     test("should activate in input by default", async ({ reactGrab }) => {
       await reactGrab.page.click("[data-testid='test-input']");
 
-      await reactGrab.page.keyboard.down(reactGrab.modifierKey);
-      await reactGrab.page.keyboard.down("c");
-      await reactGrab.page.waitForTimeout(500);
-      await reactGrab.page.keyboard.up("c");
-      await reactGrab.page.keyboard.up(reactGrab.modifierKey);
-
-      await expect.poll(() => reactGrab.isOverlayVisible(), { timeout: 1000 }).toBe(true);
+      await reactGrab.activateViaKeyboardFromFocusedInput();
+      expect(await reactGrab.isOverlayVisible()).toBe(true);
     });
 
     test("should not activate in input when disabled", async ({ reactGrab }) => {

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

@@ -99,25 +99,15 @@ test.describe("Activation Mode Configuration", () => {
   test("should activate when focused on input element", async ({ reactGrab }) => {
     await reactGrab.page.click("[data-testid='test-input']");
 
-    await reactGrab.page.keyboard.down(reactGrab.modifierKey);
-    await reactGrab.page.keyboard.down("c");
-    await reactGrab.page.waitForTimeout(500);
-    await reactGrab.page.keyboard.up("c");
-    await reactGrab.page.keyboard.up(reactGrab.modifierKey);
-
-    await expect.poll(() => reactGrab.isOverlayVisible(), { timeout: 1000 }).toBe(true);
+    await reactGrab.activateViaKeyboardFromFocusedInput();
+    expect(await reactGrab.isOverlayVisible()).toBe(true);
   });
 
   test("should activate when focused on textarea", async ({ reactGrab }) => {
     await reactGrab.page.click("[data-testid='test-textarea']");
 
-    await reactGrab.page.keyboard.down(reactGrab.modifierKey);
-    await reactGrab.page.keyboard.down("c");
-    await reactGrab.page.waitForTimeout(500);
-    await reactGrab.page.keyboard.up("c");
-    await reactGrab.page.keyboard.up(reactGrab.modifierKey);
-
-    await expect.poll(() => reactGrab.isOverlayVisible(), { timeout: 1000 }).toBe(true);
+    await reactGrab.activateViaKeyboardFromFocusedInput();
+    expect(await reactGrab.isOverlayVisible()).toBe(true);
   });
 
   test("activation should work after clicking outside input", async ({ reactGrab }) => {

packages/react-grab/e2e/constants.ts

@@ -13,6 +13,8 @@ export const HOST_STYLE_DRAG_DISTANCE_PX = 100;
 export const HOST_STYLE_DRAG_STEP_COUNT = 4;
 export const SHIFT_PENDING_HOVER_STEP_COUNT = 8;
 export const POINTER_SETTLE_DELAY_MS = 32;
+export const FOCUSED_INPUT_KEY_HOLD_DURATION_MS = 700;
+export const NON_ACTIVATING_KEY_HOLD_DURATION_MS = 10_000;
 export const IFRAME_TEST_POINTER_ID = 1;
 export const IFRAME_SCROLL_SETTLE_DELAY_MS = 150;
 export const IFRAME_SCROLL_DELTA_Y_PX = 200;

packages/react-grab/e2e/edit-panel.spec.ts

@@ -1178,19 +1178,14 @@ test.describe("Style Panel", () => {
     test("type-to-edit: hover + type m then t → margin-top focused", async ({ reactGrab }) => {
       await reactGrab.activate();
       await reactGrab.hoverUntilSelected(BUTTON_SELECTOR);
-      await reactGrab.page.keyboard.type("mt", { delay: 50 });
+      await reactGrab.page.keyboard.type("m");
       await expect.poll(() => isEditPanelVisible(reactGrab.page)).toBe(true);
-      await reactGrab.page.waitForTimeout(80);
-      const searchValue = await reactGrab.page.evaluate(
-        ({ attrName, inputAttr }) => {
-          const host = document.querySelector(`[${attrName}]`);
-          const shadowRoot = host?.shadowRoot;
-          const input = shadowRoot?.querySelector<HTMLTextAreaElement>(`[${inputAttr}]`);
-          return input?.value ?? null;
-        },
-        { attrName: ATTRIBUTE_NAME, inputAttr: SEARCH_INPUT_ATTR },
-      );
-      expect(searchValue).toBe("mt");
+      const searchInput = reactGrab.page
+        .locator(`[${ATTRIBUTE_NAME}]`)
+        .locator(`[${SEARCH_INPUT_ATTR}]`);
+      await expect(searchInput).toBeFocused();
+      await searchInput.pressSequentially("t");
+      await expect(searchInput).toHaveValue("mt");
       const activeKey = await getActivePropertyKey(reactGrab.page);
       expect(activeKey).toBe("margin-top");
     });
@@ -1200,19 +1195,14 @@ test.describe("Style Panel", () => {
     }) => {
       await reactGrab.activate();
       await reactGrab.hoverUntilSelected(BUTTON_SELECTOR);
-      await reactGrab.page.keyboard.type("mt-", { delay: 50 });
+      await reactGrab.page.keyboard.type("m");
       await expect.poll(() => isEditPanelVisible(reactGrab.page)).toBe(true);
-      await reactGrab.page.waitForTimeout(80);
-      const searchValue = await reactGrab.page.evaluate(
-        ({ attrName, inputAttr }) => {
-          const host = document.querySelector(`[${attrName}]`);
-          const shadowRoot = host?.shadowRoot;
-          const input = shadowRoot?.querySelector<HTMLTextAreaElement>(`[${inputAttr}]`);
-          return input?.value ?? null;
-        },
-        { attrName: ATTRIBUTE_NAME, inputAttr: SEARCH_INPUT_ATTR },
-      );
-      expect(searchValue).toBe("mt-");
+      const searchInput = reactGrab.page
+        .locator(`[${ATTRIBUTE_NAME}]`)
+        .locator(`[${SEARCH_INPUT_ATTR}]`);
+      await expect(searchInput).toBeFocused();
+      await searchInput.pressSequentially("t-");
+      await expect(searchInput).toHaveValue("mt-");
       const activeKey = await getActivePropertyKey(reactGrab.page);
       expect(activeKey).toBe("margin-top");
     });

packages/react-grab/e2e/fixtures.ts

@@ -1,5 +1,5 @@
 import { test as base, expect, Page, Locator } from "@playwright/test";
-import { ATTRIBUTE_NAME } from "./constants.js";
+import { ATTRIBUTE_NAME, FOCUSED_INPUT_KEY_HOLD_DURATION_MS } from "./constants.js";
 import { COVERAGE_RAW_DIR } from "./coverage-config.js";
 
 const COVERAGE_ENABLED = Boolean(process.env.COVERAGE);
@@ -104,6 +104,7 @@ export interface ReactGrabPageObject {
   feedbackModifierKey: ModifierKey;
   activate: () => Promise<void>;
   activateViaKeyboard: () => Promise<void>;
+  activateViaKeyboardFromFocusedInput: () => Promise<void>;
   deactivate: () => Promise<void>;
   isOverlayVisible: () => Promise<boolean>;
   getOverlayHost: () => Locator;
@@ -300,6 +301,15 @@ const createReactGrabPageObject = (
     await waitForActive(true);
   };
 
+  const activateViaKeyboardFromFocusedInput = async () => {
+    await page.keyboard.down(activationModifierKey);
+    await page.keyboard.down("c");
+    await page.waitForTimeout(FOCUSED_INPUT_KEY_HOLD_DURATION_MS);
+    await page.keyboard.up("c");
+    await page.keyboard.up(activationModifierKey);
+    await waitForActive(true);
+  };
+
   const deactivate = async () => {
     await page.keyboard.press("Escape");
     await waitForActive(false);
@@ -654,32 +664,13 @@ const createReactGrabPageObject = (
   };
 
   const typeInInput = async (text: string) => {
-    await page.evaluate((attrName) => {
-      const host = document.querySelector(`[${attrName}]`);
-      const shadowRoot = host?.shadowRoot;
-      if (!shadowRoot) return;
-      const root = shadowRoot.querySelector(`[${attrName}]`);
-      if (!root) return;
-      const textarea = root.querySelector<HTMLTextAreaElement>("[data-react-grab-input]");
-      if (textarea) {
-        textarea.focus();
-      }
-    }, ATTRIBUTE_NAME);
+    const promptInput = getOverlayHost().locator("textarea[data-react-grab-input]");
+    await promptInput.focus();
     await page.keyboard.insertText(text);
   };
 
   const getInputValue = async (): Promise<string> => {
-    return page.evaluate((attrName) => {
-      const host = document.querySelector(`[${attrName}]`);
-      const shadowRoot = host?.shadowRoot;
-      if (!shadowRoot) return "";
-      const root = shadowRoot.querySelector(`[${attrName}]`);
-      if (!root) return "";
-      const textarea = root.querySelector(
-        "textarea[data-react-grab-ignore-events]",
-      ) as HTMLTextAreaElement;
-      return textarea?.value ?? "";
-    }, ATTRIBUTE_NAME);
+    return getOverlayHost().locator("textarea[data-react-grab-input]").inputValue();
   };
 
   const submitInput = async () => {
@@ -1705,6 +1696,7 @@ const createReactGrabPageObject = (
     feedbackModifierKey,
     activate,
     activateViaKeyboard,
+    activateViaKeyboardFromFocusedInput,
     deactivate,
     isOverlayVisible,
     getOverlayHost,

packages/react-grab/e2e/prompt-mode.spec.ts

@@ -137,7 +137,11 @@ test.describe("Prompt Mode", () => {
       await reactGrab.registerCommentAction();
       await reactGrab.enterPromptMode("li:first-child");
 
-      await reactGrab.pressEscape();
+      const promptInput = reactGrab.page.getByRole("textbox", {
+        name: "Add context for selected element",
+      });
+      await promptInput.click();
+      await promptInput.press("Escape");
 
       await expect.poll(() => reactGrab.isPromptModeActive()).toBe(false);
     });
@@ -150,7 +154,11 @@ test.describe("Prompt Mode", () => {
 
       await reactGrab.typeInInput("Some unsaved text");
 
-      await reactGrab.pressEscape();
+      const promptInput = reactGrab.page.getByRole("textbox", {
+        name: "Add context for selected element",
+      });
+      await expect(promptInput).toHaveValue("Some unsaved text");
+      await promptInput.press("Escape");
 
       await expect.poll(() => reactGrab.isPromptModeActive()).toBe(false);
     });