Fix touch drag ownership, mobile controls and table column reveal

apps/web/src/components/editor/mobile-block-handles.browser.spec.ts

@@ -75,6 +75,11 @@ test("mobile block handles follow taps and move nested blocks with stable identi
   if (!size) throw new Error("Missing touch handle");
   expect(size.width).toBeGreaterThanOrEqual(44);
   expect(size.height).toBeGreaterThanOrEqual(44);
+  const allIds = await editor
+    .locator("[data-block-id]")
+    .evaluateAll((nodes) =>
+      nodes.map((node) => node.getAttribute("data-block-id")).sort(),
+    );
   const id = await beta.evaluate(
     (el) => el.closest<HTMLElement>("[data-block-id]")?.dataset.blockId,
   );
@@ -108,13 +113,28 @@ test("mobile block handles follow taps and move nested blocks with stable identi
     start.x + start.width / 2,
     start.y + start.height / 2,
   );
-  await page.waitForTimeout(300); // dnd-kit requires a deliberate hold before touch dragging.
+  await touch(
+    handle,
+    "touchmove",
+    start.x + start.width / 2 + 8,
+    start.y + start.height / 2 + 8,
+  );
   await touch(handle, "touchmove", end.x + 16, end.y + end.height - 2);
   await expect(
     page.locator(".better-editor-block-drop-indicator"),
   ).toBeVisible();
   await touch(handle, "touchend", end.x + 16, end.y + end.height - 2);
   await expect(editor.locator(":scope > [data-block-id]")).toHaveCount(3);
+  expect(
+    await editor
+      .locator("[data-block-id]")
+      .evaluateAll((nodes) =>
+        nodes.map((node) => node.getAttribute("data-block-id")).sort(),
+      ),
+  ).toEqual(allIds);
+  await expect(
+    editor.locator('[data-better-editor-body="paragraph"]'),
+  ).toHaveText(["Alpha", "Gamma", "Beta"]);
   await expect(editor.locator(":scope > [data-block-id]").last()).toContainText(
     "Beta",
   );

apps/web/src/components/editor/table-reveal.browser.spec.ts

@@ -0,0 +1,141 @@
+import { expect, test } from "~/testing/browser/fixtures";
+
+test.use({ journalPagination: true });
+test("added columns reveal themselves without moving the document vertically", async ({
+  page,
+  context,
+}, info) => {
+  await context.addCookies([
+    { name: "journl-editor", url: "http://127.0.0.1:3100", value: "tiptap" },
+  ]);
+  await page.goto("/journal");
+  const create = page.getByRole("button", { exact: true, name: "New page" });
+  if (!(await create.isVisible()))
+    await page
+      .getByRole("button", { exact: true, name: "Toggle Sidebar" })
+      .click();
+  const previous = page.url();
+  await create.click();
+  await expect(page).not.toHaveURL(previous);
+  await page.keyboard.press("Escape");
+  const editor = page.locator(".better-editor-tiptap");
+  await editor.fill("/table");
+  await page.getByRole("option", { exact: true, name: "Table" }).click();
+  const wrapper = editor.locator(".better-editor-table-wrapper");
+  const cells = editor.locator("tr").first().locator("td");
+  const vertical = () =>
+    wrapper.evaluate((element) => {
+      const values: number[] = [];
+      for (let node: Element | null = element; node; node = node.parentElement)
+        values.push(node.scrollTop);
+      return values;
+    });
+  const initial = await vertical();
+  const visibleColumn = async (index: number) => {
+    await expect
+      .poll(() =>
+        cells.nth(index).evaluate((cell) => {
+          const viewport = cell
+            .closest(".better-editor-table-wrapper")
+            ?.getBoundingClientRect();
+          const rect = cell.getBoundingClientRect();
+          return viewport
+            ? rect.left >= viewport.left - 1 && rect.right <= viewport.right + 1
+            : false;
+        }),
+      )
+      .toBe(true);
+  };
+  for (let count = 3; count < 8; count++) {
+    const last = editor.locator("td").last();
+    await last.hover({ position: { x: 2, y: 2 } });
+    await last.hover();
+    const add = page.getByRole("button", { exact: true, name: "Add column" });
+    if (info.project.name === "mobile-webkit") await add.tap();
+    else await add.click();
+    await expect(cells).toHaveCount(count + 1);
+    await visibleColumn(count);
+  }
+  await expect
+    .poll(() => wrapper.evaluate((element) => element.scrollLeft))
+    .toBeGreaterThan(0);
+  await expect.poll(vertical).toEqual(initial);
+  const last = editor.locator("td").last();
+  await last.hover({ position: { x: 2, y: 2 } });
+  await last.hover();
+  const add = page.getByRole("button", { exact: true, name: "Add column" });
+  await add.focus();
+  await page.keyboard.press("Enter");
+  await expect(cells).toHaveCount(9);
+  await visibleColumn(8);
+  await cells.first().hover({ position: { x: 2, y: 2 } });
+  await cells.first().hover();
+  await page
+    .getByRole("button", { exact: true, name: "Column actions" })
+    .click();
+  await page
+    .getByRole("menuitem", { exact: true, name: "Insert column left" })
+    .click();
+  await expect(cells).toHaveCount(10);
+  await visibleColumn(0);
+  await expect.poll(vertical).toEqual(initial);
+  // A merged header must not substitute its entire width for one column.
+  await cells.first().click();
+  await cells.nth(7).click({ modifiers: ["Shift"] });
+  await expect(editor.locator(".selectedCell")).toHaveCount(8);
+  await page
+    .getByRole("button", { exact: true, name: "More formatting" })
+    .click();
+  await page
+    .getByRole("menuitem", { exact: true, name: "Merge cells" })
+    .click();
+  await expect(editor.locator('td[colspan="8"]')).toHaveCount(1);
+  const lower = editor.locator("tr").nth(1).locator("td");
+  for (const [index, direction] of [
+    [6, "right"],
+    [1, "left"],
+  ] as const) {
+    await lower.nth(index).click();
+    await page.keyboard.insertText(direction);
+    for (let i = 0; i < direction.length; i++)
+      await page.keyboard.press("Shift+ArrowLeft");
+    await page
+      .getByRole("button", { exact: true, name: "More formatting" })
+      .click();
+    await wrapper.evaluate((element) => {
+      element.scrollLeft = 480;
+    });
+    await page
+      .getByRole("menuitem", {
+        exact: true,
+        name: `Insert column ${direction}`,
+      })
+      .click();
+    await expect(lower).toHaveCount(11);
+    const added = lower.nth(direction === "right" ? index + 1 : index);
+    await expect
+      .poll(() =>
+        added.evaluate((cell) => {
+          const viewport = cell
+            .closest(".better-editor-table-wrapper")
+            ?.getBoundingClientRect();
+          const rect = cell.getBoundingClientRect();
+          return (
+            !!viewport &&
+            rect.left >= viewport.left - 1 &&
+            rect.right <= viewport.right + 1
+          );
+        }),
+      )
+      .toBe(true);
+    await expect.poll(vertical).toEqual(initial);
+    await editor.focus();
+    await page.keyboard.press("ControlOrMeta+z");
+    await expect(lower).toHaveCount(10);
+  }
+  await expect(page.locator("[data-save-status]")).toContainText("Saved");
+  await page.reload();
+  await expect(cells).toHaveCount(3);
+  await expect(editor.locator('td[colspan="8"]')).toHaveCount(1);
+  await expect(lower).toHaveCount(10);
+});