@beyondwork/docx-react-component 1.0.38 → 1.0.39

package/src/ui-tailwind/chrome/tw-table-grip-layer.tsx

@@ -0,0 +1,284 @@
+/**
+ * TwTableGripLayer — column-resize and row-resize grips for the active table.
+ *
+ * Grips are positioned via the render-kernel anchor index (P4):
+ *   - Column grips:  `anchorIndex.byTableColumnEdge(blockId, colIndex)`
+ *   - Row grips:     `anchorIndex.byTableRowEdge(blockId, rowIndex)`
+ *
+ * This is a pure overlay consumer: no DOM measurement, no selection mutation,
+ * no PM transactions.  Drag deltas are converted from px → twips using the
+ * kernel's `pxPerTwip` ratio and dispatched through `onSetColumnWidth` /
+ * `onSetRowHeight` callbacks (which route to `ref.tables.apply(op)`).
+ *
+ * Drag state lives in `useRef` so moves don't trigger re-renders mid-drag.
+ */
+
+import React, { useCallback, useEffect, useRef } from "react";
+
+import type {
+  TableStructureContextSnapshot,
+  WordReviewEditorLayoutFacet,
+} from "../../api/public-types";
+import { preserveEditorSelectionMouseDown } from "../../ui/headless/preserve-editor-selection";
+import type { OverlayCoordinateSpace } from "../chrome-overlay/chrome-overlay-projector";
+import { projectRectToOverlay } from "../chrome-overlay/chrome-overlay-projector";
+import { DEFAULT_PX_PER_TWIP } from "../../runtime/render/render-frame-types";
+
+const GRIP_PX = 6;
+const MIN_COLUMN_TWIPS = 720;
+const MIN_ROW_TWIPS = 120;
+
+export interface TwTableGripLayerProps {
+  facet: WordReviewEditorLayoutFacet;
+  tableContext: TableStructureContextSnapshot | null;
+  space?: OverlayCoordinateSpace;
+  disabled?: boolean;
+  onSetColumnWidth?: (columnIndex: number, twips: number) => void;
+  onSetRowHeight?: (
+    rowIndex: number,
+    twips: number,
+    rule: "auto" | "atLeast" | "exact",
+  ) => void;
+}
+
+export function TwTableGripLayer({
+  facet,
+  tableContext,
+  space,
+  disabled,
+  onSetColumnWidth,
+  onSetRowHeight,
+}: TwTableGripLayerProps) {
+  if (!tableContext) return null;
+
+  const frame =
+    typeof facet.getRenderFrame === "function"
+      ? (facet.getRenderFrame() ?? null)
+      : null;
+  if (!frame) return null;
+
+  const blockId = `table-${tableContext.tableBlockIndex}`;
+  const pageIndex = facet.getFirstPageIndexForBlock(blockId) ?? 0;
+  const plan = facet.getTableRenderPlan(blockId, pageIndex);
+  if (!plan) return null;
+
+  const pxPerTwip =
+    typeof facet.getRenderZoom === "function"
+      ? (facet.getRenderZoom()?.pxPerTwip ?? DEFAULT_PX_PER_TWIP)
+      : DEFAULT_PX_PER_TWIP;
+
+  return (
+    <>
+      {plan.columnResizeHandles.map((handle) => {
+        const rect = frame.anchorIndex.byTableColumnEdge(
+          blockId,
+          handle.columnIndex,
+        );
+        if (!rect) return null;
+        const pos = projectRectToOverlay(rect, space);
+        return (
+          <ColResizeGrip
+            key={`col-${blockId}-${handle.columnIndex}`}
+            pos={pos}
+            colIndex={handle.columnIndex}
+            originalTwips={plan.columnsTwips[handle.columnIndex] ?? 720}
+            pxPerTwip={pxPerTwip}
+            disabled={!!disabled || !onSetColumnWidth}
+            onCommit={onSetColumnWidth}
+          />
+        );
+      })}
+      {Array.from({ length: tableContext.rowCount }, (_, rowIndex) => {
+        const rect = frame.anchorIndex.byTableRowEdge(blockId, rowIndex);
+        if (!rect) return null;
+        const pos = projectRectToOverlay(rect, space);
+        return (
+          <RowResizeGrip
+            key={`row-${blockId}-${rowIndex}`}
+            pos={pos}
+            rowIndex={rowIndex}
+            pxPerTwip={pxPerTwip}
+            disabled={!!disabled || !onSetRowHeight}
+            onCommit={onSetRowHeight}
+          />
+        );
+      })}
+    </>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Column resize grip
+// ---------------------------------------------------------------------------
+
+interface ColResizeGripProps {
+  pos: { left: string; top: string; width: string; height: string };
+  colIndex: number;
+  originalTwips: number;
+  pxPerTwip: number;
+  disabled: boolean;
+  onCommit?: (columnIndex: number, twips: number) => void;
+}
+
+function ColResizeGrip({
+  pos,
+  colIndex,
+  originalTwips,
+  pxPerTwip,
+  disabled,
+  onCommit,
+}: ColResizeGripProps) {
+  const dragRef = useRef<{
+    startX: number;
+    originalTwips: number;
+  } | null>(null);
+
+  const handleMouseDown = useCallback(
+    (e: React.MouseEvent<HTMLElement>) => {
+      if (disabled) return;
+      preserveEditorSelectionMouseDown(e);
+      dragRef.current = { startX: e.clientX, originalTwips };
+    },
+    [disabled, originalTwips],
+  );
+
+  useEffect(() => {
+    const handleMove = (e: MouseEvent) => {
+      if (!dragRef.current) return;
+      e.preventDefault();
+    };
+    const handleUp = (e: MouseEvent) => {
+      if (!dragRef.current) return;
+      const deltaX = e.clientX - dragRef.current.startX;
+      const deltaTwips = deltaX / pxPerTwip;
+      const newTwips = Math.max(
+        MIN_COLUMN_TWIPS,
+        Math.round(dragRef.current.originalTwips + deltaTwips),
+      );
+      dragRef.current = null;
+      onCommit?.(colIndex, newTwips);
+    };
+    window.addEventListener("mousemove", handleMove);
+    window.addEventListener("mouseup", handleUp);
+    return () => {
+      window.removeEventListener("mousemove", handleMove);
+      window.removeEventListener("mouseup", handleUp);
+    };
+  }, [colIndex, pxPerTwip, onCommit]);
+
+  return (
+    <div
+      role="separator"
+      aria-orientation="vertical"
+      aria-label={`Resize column ${colIndex + 1}`}
+      data-testid={`col-resize-grip-${colIndex}`}
+      className={[
+        "pointer-events-auto absolute",
+        disabled
+          ? "cursor-default opacity-0"
+          : "cursor-col-resize opacity-0 hover:opacity-100",
+        "transition-opacity",
+        "bg-accent",
+      ].join(" ")}
+      style={{
+        left: `calc(${pos.left} - ${GRIP_PX / 2}px)`,
+        top: pos.top,
+        width: `${GRIP_PX}px`,
+        height: pos.height,
+      }}
+      onMouseDown={handleMouseDown}
+    />
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Row resize grip
+// ---------------------------------------------------------------------------
+
+interface RowResizeGripProps {
+  pos: { left: string; top: string; width: string; height: string };
+  rowIndex: number;
+  pxPerTwip: number;
+  disabled: boolean;
+  onCommit?: (
+    rowIndex: number,
+    twips: number,
+    rule: "auto" | "atLeast" | "exact",
+  ) => void;
+}
+
+function RowResizeGrip({
+  pos,
+  rowIndex,
+  pxPerTwip,
+  disabled,
+  onCommit,
+}: RowResizeGripProps) {
+  const dragRef = useRef<{
+    startY: number;
+    startHeightPx: number;
+  } | null>(null);
+
+  const handleMouseDown = useCallback(
+    (e: React.MouseEvent<HTMLElement>) => {
+      if (disabled) return;
+      preserveEditorSelectionMouseDown(e);
+      // Start height is the current visible row height from the grip rect.
+      // We use the grip's own top position vs. previous row edge as a proxy.
+      dragRef.current = { startY: e.clientY, startHeightPx: 0 };
+    },
+    [disabled],
+  );
+
+  useEffect(() => {
+    const handleMove = (e: MouseEvent) => {
+      if (!dragRef.current) return;
+      e.preventDefault();
+    };
+    const handleUp = (e: MouseEvent) => {
+      if (!dragRef.current) return;
+      const deltaY = e.clientY - dragRef.current.startY;
+      if (Math.abs(deltaY) < 2) {
+        dragRef.current = null;
+        return;
+      }
+      const deltaTwips = deltaY / pxPerTwip;
+      // We don't know the current row height from the grip alone; use atLeast
+      // so that a positive drag expands and a negative drag collapses to auto.
+      const newTwips = Math.max(MIN_ROW_TWIPS, Math.round(deltaTwips));
+      const rule = newTwips > 0 ? "atLeast" : "auto";
+      dragRef.current = null;
+      onCommit?.(rowIndex, newTwips, rule as "atLeast");
+    };
+    window.addEventListener("mousemove", handleMove);
+    window.addEventListener("mouseup", handleUp);
+    return () => {
+      window.removeEventListener("mousemove", handleMove);
+      window.removeEventListener("mouseup", handleUp);
+    };
+  }, [rowIndex, pxPerTwip, onCommit]);
+
+  return (
+    <div
+      role="separator"
+      aria-orientation="horizontal"
+      aria-label={`Resize row ${rowIndex + 1}`}
+      data-testid={`row-resize-grip-${rowIndex}`}
+      className={[
+        "pointer-events-auto absolute",
+        disabled
+          ? "cursor-default opacity-0"
+          : "cursor-row-resize opacity-0 hover:opacity-100",
+        "transition-opacity",
+        "bg-accent",
+      ].join(" ")}
+      style={{
+        left: pos.left,
+        top: `calc(${pos.top} - ${GRIP_PX / 2}px)`,
+        width: pos.width,
+        height: `${GRIP_PX}px`,
+      }}
+      onMouseDown={handleMouseDown}
+    />
+  );
+}

package/src/ui-tailwind/chrome-overlay/chrome-overlay-projector.ts

@@ -9,6 +9,7 @@
  */
 
 import type { RenderFrameRect } from "../../runtime/render/index.ts";
+import { recordPerfSample } from "../editor-surface/perf-probe.ts";
 
 export interface OverlayCoordinateSpace {
   /** Top-left of the overlay in the document column's coordinate space. */
@@ -33,12 +34,15 @@ export function projectRectToOverlay(
   rect: RenderFrameRect,
   space: OverlayCoordinateSpace = { originLeftPx: 0, originTopPx: 0 },
 ): CSSRect {
-  return {
+  const t0 = typeof performance !== "undefined" ? performance.now() : 0;
+  const result: CSSRect = {
     left: `${rect.leftPx - space.originLeftPx}px`,
     top: `${rect.topPx - space.originTopPx}px`,
     width: `${rect.widthPx}px`,
     height: `${rect.heightPx}px`,
   };
+  if (t0 > 0) recordPerfSample("chrome.overlay_reposition", performance.now() - t0);
+  return result;
 }
 
 /**

package/src/ui-tailwind/chrome-overlay/index.ts

@@ -7,12 +7,6 @@
 
 export { TwChromeOverlay, type TwChromeOverlayProps } from "./tw-chrome-overlay";
 export { TwScopeRailLayer, type TwScopeRailLayerProps } from "./tw-scope-rail-layer";
-export {
-  TwWorkspaceViewSwitcher,
-  type TwWorkspaceViewSwitcherProps,
-  type WorkspaceView,
-  type WorkspaceViewAction,
-} from "./tw-workspace-view-switcher";
 export {
   inflateRect,
   projectRectToOverlay,

package/src/ui-tailwind/chrome-overlay/tw-chrome-overlay.tsx

@@ -15,9 +15,12 @@
 import * as React from "react";
 import type { OverlayCoordinateSpace } from "./chrome-overlay-projector";
 import type { ScopeRailSegment } from "../../runtime/layout";
-import type { WordReviewEditorLayoutFacet } from "../../runtime/layout";
+import type {
+  TableStructureContextSnapshot,
+  WordReviewEditorLayoutFacet,
+} from "../../api/public-types";
 import { TwScopeRailLayer } from "./tw-scope-rail-layer";
-import { TwWorkspaceViewSwitcher, type WorkspaceView } from "./tw-workspace-view-switcher";
+import { TwTableGripLayer } from "../chrome/tw-table-grip-layer";
 
 export interface TwChromeOverlayProps {
   /** Layout facet the overlay layers read from. */
@@ -28,16 +31,22 @@ export interface TwChromeOverlayProps {
   activeScopeId?: string | null;
   /** Click handler the rail layer forwards to consumers. */
   onScopeSegmentClick?: (segment: ScopeRailSegment) => void;
-  /** Currently active workspace view preset (draft / layout / review / workflow). */
-  activeWorkspaceView?: WorkspaceView;
-  /** Handler that fires when the user picks a workspace view. */
-  onWorkspaceViewChange?: (view: WorkspaceView) => void;
-  /** Show the bottom workspace view-switcher dock.  Default: true. */
-  showWorkspaceDock?: boolean;
   /** Test id applied to the overlay root. */
   "data-testid"?: string;
   /** Optional extra children (e.g., future comment balloon layer). */
   children?: React.ReactNode;
+
+  // Table grip props (P6) -----------------------------------------------
+  /** Active table context — when present, column/row resize grips are shown. */
+  tableContext?: TableStructureContextSnapshot | null;
+  /** Fires when a column grip drag completes. */
+  onSetColumnWidth?: (columnIndex: number, twips: number) => void;
+  /** Fires when a row grip drag completes. */
+  onSetRowHeight?: (
+    rowIndex: number,
+    twips: number,
+    rule: "auto" | "atLeast" | "exact",
+  ) => void;
 }
 
 /**
@@ -54,11 +63,11 @@ export const TwChromeOverlay: React.FC<TwChromeOverlayProps> = ({
   space,
   activeScopeId,
   onScopeSegmentClick,
-  activeWorkspaceView,
-  onWorkspaceViewChange,
-  showWorkspaceDock = true,
   "data-testid": testId,
   children,
+  tableContext,
+  onSetColumnWidth,
+  onSetRowHeight,
 }) => {
   return (
     <div
@@ -72,13 +81,14 @@ export const TwChromeOverlay: React.FC<TwChromeOverlayProps> = ({
         activeScopeId={activeScopeId}
         onSegmentClick={onScopeSegmentClick}
       />
+      <TwTableGripLayer
+        facet={facet}
+        tableContext={tableContext ?? null}
+        space={space}
+        onSetColumnWidth={onSetColumnWidth}
+        onSetRowHeight={onSetRowHeight}
+      />
       {children}
-      {showWorkspaceDock ? (
-        <TwWorkspaceViewSwitcher
-          activeView={activeWorkspaceView ?? "review"}
-          onViewChange={onWorkspaceViewChange}
-        />
-      ) : null}
     </div>
   );
 };

package/src/ui-tailwind/editor-surface/page-slice-util.ts

@@ -0,0 +1,15 @@
+import type { DocumentPageSnapshot, SurfaceBlockSnapshot } from "../../api/public-types.ts";
+
+/**
+ * Filter surface blocks to those that overlap a page's character-offset range.
+ * A block overlaps [startOffset, endOffset) when block.from < endOffset AND block.to > startOffset.
+ * Blocks that straddle a page boundary appear on both pages.
+ */
+export function sliceBlocksForPage(
+  blocks: SurfaceBlockSnapshot[],
+  page: Pick<DocumentPageSnapshot, "startOffset" | "endOffset">,
+): SurfaceBlockSnapshot[] {
+  return blocks.filter(
+    (b) => b.from < page.endOffset && b.to > page.startOffset,
+  );
+}

package/src/ui-tailwind/editor-surface/pm-command-bridge.ts

@@ -23,6 +23,8 @@ export interface CommandBridgeCallbacks extends SelectionSyncCallbacks {
   onInsertHardBreak: () => void;
   onInsertTab: () => void;
   onOutdentTab?: () => void;
+  onListIndent?: () => void;
+  onListOutdent?: () => void;
   onUndo: () => void;
   onRedo: () => void;
   onBlockedInput?: (command: "paste" | "drop", message: string) => void;
@@ -77,8 +79,14 @@ export function createSelectionSyncPlugin(
   });
 }
 
+export interface CommandBridgePluginOptions {
+  /** P6: when true, omit prosemirror-tables columnResizing() — chrome overlay grips take over. */
+  useChromeColumnResizing?: boolean;
+}
+
 export function createCommandBridgePlugins(
   callbacks: CommandBridgeCallbacks,
+  options?: CommandBridgePluginOptions,
 ): Plugin[] {
   let isComposing = false;
 
@@ -145,6 +153,18 @@ export function createCommandBridgePlugins(
           return false;
         }
 
+        // Alt+Shift+Right → list indent; Alt+Shift+Left → list outdent (Word keyboard behavior)
+        if (event.altKey && event.shiftKey) {
+          if (event.key === "ArrowRight") {
+            callbacks.onListIndent?.();
+            return true;
+          }
+          if (event.key === "ArrowLeft") {
+            callbacks.onListOutdent?.();
+            return true;
+          }
+        }
+
         const resolution = resolveSurfaceShortcut(
           {
             key: event.key,
@@ -195,7 +215,12 @@ export function createCommandBridgePlugins(
   // selection handles. Doc-changing table transactions (new rows, etc.) are
   // filtered by the runtime filter above; navigation-only steps pass through.
   const tablePlugin = tableEditing();
-  const columnResizingPlugin = columnResizing();
-
-  return [filterPlugin, selectionPlugin, inputPlugin, keydownPlugin, tablePlugin, columnResizingPlugin];
+  // P6: chrome overlay grips replace prosemirror-tables column resizing.
+  // useChromeColuumnResizing=true removes the PM plugin; set to false to fall
+  // back to the legacy prosemirror-tables drag handle for one release cycle.
+  const plugins: Plugin[] = [filterPlugin, selectionPlugin, inputPlugin, keydownPlugin, tablePlugin];
+  if (!options?.useChromeColumnResizing) {
+    plugins.push(columnResizing());
+  }
+  return plugins;
 }