test(block-editing): repair edit-cell-sizing no-reflow e2e for measure-and-set

The active editor REPLACES the block with a synthetic measure-and-set
wrapper (no data-block-pool-id, different tag), so the old tests re-queried
<tag>[data-block-pool-id] after activation and either re-resolved to a
different block or detached and timed out — they never reached the actual
no-reflow assertion.

- Add a namespaced id #q2-active-edit-region to the wrapper div so the
  active editor has a stable selector (kept alongside activeEditRegionRef;
  namespaced to avoid colliding with Pandoc heading auto-ids in rendered
  content).
- Rewrite the three adjacency tests to assert BOTH contract parts:
  (1) active-region height == block height (sizing), measured on the new
  wrapper; (2) following-sibling document-top unchanged (no reflow),
  measured scroll-invariantly. Verified green against the real q2 binary.

Author: gordonwoodhull

q2-preview-spa/e2e/edit-cell-sizing.spec.ts

@@ -1,22 +1,26 @@
 /**
  * E2E tests for Plan 2b P1: edit surface no-reflow (sizing + spacing).
  *
- * Acceptance criteria (§P1 of the Plan 2b design prerequisites):
- *   - Activating a block for editing does NOT shift the following sibling
- *     (i.e. the document does not reflow). Specifically:
- *       sibling.getBoundingClientRect().top is unchanged (±1px).
- *   - The textarea height matches the original block's height (±1px).
+ * The no-reflow contract has TWO parts, both asserted here:
+ *   1. Sizing — the active edit region reproduces the original block's box:
+ *      its height is unchanged (±1px) when the block is activated for editing.
+ *   2. No reflow — the following sibling does not move: its document-relative
+ *      top is unchanged (±1px) on activation.
+ *   (1) catches the block's own box changing size; (2) catches margin/flow
+ *   changes that a border-box height comparison alone would miss. Both are
+ *   needed — losing `margin-bottom` passes (1) but fails (2).
  *
- * These tests will FAIL with the current implementation (bare <textarea>
- * replacing the block loses Bootstrap's element-type margin rules) and
- * PASS after the wrapper-element fix (keeping the <p> / <hN> element live
- * so CSS margins are preserved automatically).
- *
- * Plan 2b deferred note: "The reflow criterion requires real layout —
- * it is a Playwright test in q2-preview-spa/."  These are those tests.
+ * As-built note (measure-and-set): activating a block REPLACES it with a
+ * synthetic wrapper `<div id="q2-active-edit-region">` (renderMeasuredEdit in
+ * dispatchers.tsx) that reproduces the measured box; the original `<p>`/`<hN>`
+ * is GONE while editing. So the "after" box is measured on
+ * `#q2-active-edit-region`, never by re-querying `<tag>[data-block-pool-id]`
+ * (that locator would re-resolve to a different block, or detach and time out).
+ * The following-sibling locators (`<h2>`/`<ul>`) are NOT replaced, so they stay
+ * valid across activation.
  */
 
-import { test, expect, type Page } from '@playwright/test';
+import { test, expect, type Page, type Locator } from '@playwright/test';
 import { startPreviewServer, type PreviewServerHandle } from './helpers/previewServer';
 
 // Fixture exercises three adjacency pairs:
@@ -46,12 +50,70 @@ bottom margin must be preserved when editing is activated, just like the first p
 - Beta
 `;
 
+/** Selector for the measure-and-set wrapper of the currently-active editor. */
+const ACTIVE_REGION = '#q2-active-edit-region';
+
 /** Wait for the q2-preview sourceIndex to build and editable blocks to appear. */
 async function waitForEditableBlocks(page: Page): Promise<void> {
     const iframe = page.frameLocator('iframe');
     await iframe.locator('[data-block-pool-id]').first().waitFor({ timeout: 15_000 });
 }
 
+/**
+ * Document-relative top of an element inside the iframe (scroll-invariant —
+ * focusing the textarea on activation can scroll the iframe, which would move
+ * the viewport-relative `boundingBox().y` without any reflow).
+ */
+async function docTop(loc: Locator): Promise<number> {
+    return loc.evaluate((el) => {
+        const scroller = el.ownerDocument.scrollingElement ?? el.ownerDocument.documentElement;
+        return el.getBoundingClientRect().top + (scroller?.scrollTop ?? 0);
+    });
+}
+
+/**
+ * Drive the no-reflow contract for one adjacency case. Measures `block`'s box
+ * and `sibling`'s top BEFORE activation (while their locators are still valid),
+ * activates `block`, then asserts both contract parts against the active region
+ * and the (unchanged) sibling.
+ */
+async function assertNoReflowOnActivation(
+    page: Page,
+    block: Locator,
+    sibling: Locator,
+    label: string,
+): Promise<void> {
+    const iframe = page.frameLocator('iframe');
+
+    // Before: block box + sibling top (locators valid pre-activation).
+    const blockBox = await block.boundingBox();
+    expect(blockBox, `${label}: block must be visible before activation`).not.toBeNull();
+    const siblingTopBefore = await docTop(sibling);
+
+    // Activate; wait for the textarea to mount.
+    await block.click();
+    await iframe.locator('textarea').first().waitFor({ timeout: 5_000 });
+
+    // After: measure the active region (the original block element is gone).
+    const region = iframe.locator(ACTIVE_REGION);
+    const regionBox = await region.boundingBox();
+    expect(regionBox, `${label}: active edit region must exist after activation`).not.toBeNull();
+    const siblingTopAfter = await docTop(sibling);
+
+    // Part 1 (sizing): the active region reproduces the block's box height.
+    expect(
+        Math.abs(regionBox!.height - blockBox!.height),
+        `${label}: active region height changed from ${blockBox!.height}px to ${regionBox!.height}px on activation`,
+    ).toBeLessThanOrEqual(1);
+
+    // Part 2 (no reflow): the following sibling does not move.
+    expect(
+        Math.abs(siblingTopAfter - siblingTopBefore),
+        `${label}: sibling top shifted by ${Math.abs(siblingTopAfter - siblingTopBefore).toFixed(1)}px on activation ` +
+            `(was ${siblingTopBefore.toFixed(1)}px, now ${siblingTopAfter.toFixed(1)}px); margin-bottom was likely lost`,
+    ).toBeLessThanOrEqual(1);
+}
+
 let server: PreviewServerHandle;
 
 test.beforeEach(async () => {
@@ -68,112 +130,38 @@ test.afterEach(async () => {
     await server?.stop();
 });
 
-test('paragraph: wrapper height and following heading top are unchanged on activation', async ({ page }) => {
+test('paragraph: active region height and following heading top unchanged on activation', async ({ page }) => {
     await page.goto(server.url);
     await waitForEditableBlocks(page);
-
     const iframe = page.frameLocator('iframe');
-    const para = iframe.locator('p[data-block-pool-id]').first();
-    const heading = iframe.locator('h2').first();
-
-    // Measure before activation.
-    const paraBox = await para.boundingBox();
-    expect(paraBox, 'paragraph must be visible before activation').not.toBeNull();
-    const headingTopBefore = (await heading.boundingBox())?.y ?? 0;
-
-    // Click to activate; wait for the textarea.
-    await para.click();
-    const textarea = iframe.locator('textarea').first();
-    await textarea.waitFor({ timeout: 5_000 });
-
-    // Measure wrapper height after activation (P1 sizing: wrapper must keep its original size).
-    const paraBoxAfter = await para.boundingBox();
-    expect(paraBoxAfter, 'paragraph wrapper must stay in DOM after activation').not.toBeNull();
-    const headingTopAfter = (await heading.boundingBox())?.y ?? 0;
-
-    // Wrapper (p) must not change height on activation.
-    expect(
-        Math.abs(paraBoxAfter!.height - paraBox!.height),
-        `paragraph height changed from ${paraBox!.height}px to ${paraBoxAfter!.height}px on activation`,
-    ).toBeLessThanOrEqual(1);
-
-    // Heading must not shift (P1 no-reflow — the key assertion, fails without wrapper fix).
-    expect(
-        Math.abs(headingTopAfter - headingTopBefore),
-        `heading top shifted by ${Math.abs(headingTopAfter - headingTopBefore).toFixed(1)}px on paragraph activation (was ${headingTopBefore.toFixed(1)}px, now ${headingTopAfter.toFixed(1)}px); margin-bottom was likely lost`,
-    ).toBeLessThanOrEqual(1);
+    await assertNoReflowOnActivation(
+        page,
+        iframe.locator('p[data-block-pool-id]').first(),
+        iframe.locator('h2').first(),
+        'paragraph→heading',
+    );
 });
 
-test('heading: wrapper height and following list top are unchanged on activation', async ({ page }) => {
+test('heading: active region height and following list top unchanged on activation', async ({ page }) => {
     await page.goto(server.url);
     await waitForEditableBlocks(page);
-
     const iframe = page.frameLocator('iframe');
-    const heading = iframe.locator('h2[data-block-pool-id]').first();
-    const list = iframe.locator('ul').first();
-
-    // Measure before activation.
-    const headingBox = await heading.boundingBox();
-    expect(headingBox, 'heading must be visible before activation').not.toBeNull();
-    const listTopBefore = (await list.boundingBox())?.y ?? 0;
-
-    // Click to activate; wait for the textarea.
-    await heading.click();
-    const textarea = iframe.locator('textarea').first();
-    await textarea.waitFor({ timeout: 5_000 });
-
-    // Measure wrapper height after activation (P1 sizing: wrapper must keep its original size).
-    const headingBoxAfter = await heading.boundingBox();
-    expect(headingBoxAfter, 'heading wrapper must stay in DOM after activation').not.toBeNull();
-    const listTopAfter = (await list.boundingBox())?.y ?? 0;
-
-    // Wrapper (h2) must not change height on activation.
-    expect(
-        Math.abs(headingBoxAfter!.height - headingBox!.height),
-        `heading height changed from ${headingBox!.height}px to ${headingBoxAfter!.height}px on activation`,
-    ).toBeLessThanOrEqual(1);
-
-    // List must not shift (P1 no-reflow — the key assertion, fails without wrapper fix).
-    expect(
-        Math.abs(listTopAfter - listTopBefore),
-        `list top shifted by ${Math.abs(listTopAfter - listTopBefore).toFixed(1)}px on heading activation (was ${listTopBefore.toFixed(1)}px, now ${listTopAfter.toFixed(1)}px); margin-bottom was likely lost`,
-    ).toBeLessThanOrEqual(1);
+    await assertNoReflowOnActivation(
+        page,
+        iframe.locator('h2[data-block-pool-id]').first(),
+        iframe.locator('ul').first(),
+        'heading→list',
+    );
 });
 
-test('paragraph above list: wrapper height and list top unchanged on activation', async ({ page }) => {
+test('paragraph above list: active region height and list top unchanged on activation', async ({ page }) => {
     await page.goto(server.url);
     await waitForEditableBlocks(page);
-
     const iframe = page.frameLocator('iframe');
-    // Second paragraph — sits directly above a list with no heading between them.
-    const para = iframe.locator('p[data-block-pool-id]').nth(1);
-    // Second list — the direct following sibling of the second paragraph.
-    const list = iframe.locator('ul').nth(1);
-
-    // Measure before activation.
-    const paraBox = await para.boundingBox();
-    expect(paraBox, 'second paragraph must be visible before activation').not.toBeNull();
-    const listTopBefore = (await list.boundingBox())?.y ?? 0;
-
-    // Click to activate; wait for the textarea.
-    await para.click();
-    const textarea = iframe.locator('textarea').first();
-    await textarea.waitFor({ timeout: 5_000 });
-
-    // Measure wrapper height after activation.
-    const paraBoxAfter = await para.boundingBox();
-    expect(paraBoxAfter, 'paragraph wrapper must stay in DOM after activation').not.toBeNull();
-    const listTopAfter = (await list.boundingBox())?.y ?? 0;
-
-    // Wrapper (p) must not change height on activation.
-    expect(
-        Math.abs(paraBoxAfter!.height - paraBox!.height),
-        `paragraph height changed from ${paraBox!.height}px to ${paraBoxAfter!.height}px on activation`,
-    ).toBeLessThanOrEqual(1);
-
-    // List must not shift (para→list adjacency, no heading between them).
-    expect(
-        Math.abs(listTopAfter - listTopBefore),
-        `list top shifted by ${Math.abs(listTopAfter - listTopBefore).toFixed(1)}px on paragraph activation (was ${listTopBefore.toFixed(1)}px, now ${listTopAfter.toFixed(1)}px); margin-bottom was likely lost`,
-    ).toBeLessThanOrEqual(1);
+    await assertNoReflowOnActivation(
+        page,
+        iframe.locator('p[data-block-pool-id]').nth(1),
+        iframe.locator('ul').nth(1),
+        'paragraph→list',
+    );
 });

ts-packages/preview-renderer/src/q2-preview/dispatchers.tsx

@@ -64,7 +64,7 @@ function renderMeasuredEdit(
     }
     return (
         <AttributionWrap node={node} as="div">
-            <div ref={activeEditRegionRef} style={wrapperStyle}>{textarea}</div>
+            <div ref={activeEditRegionRef} id="q2-active-edit-region" style={wrapperStyle}>{textarea}</div>
         </AttributionWrap>
     );
 }