@beyondwork/docx-react-component 1.0.18 → 1.0.19

package/src/ui-tailwind/editor-surface/tw-prosemirror-surface.tsx

@@ -1,6 +1,7 @@
 import React, {
   forwardRef,
   type FocusEventHandler,
+  useCallback,
   useEffect,
   useImperativeHandle,
   useMemo,
@@ -9,12 +10,15 @@ import React, {
 import { EditorView } from "prosemirror-view";
 
 import type {
+  DocumentNavigationSnapshot,
   EditorUser,
   RuntimeRenderSnapshot,
   SearchOptions,
   SearchResultSnapshot,
   SelectionSnapshot,
 } from "../../api/public-types";
+import type { CanonicalDocumentEnvelope } from "../../core/state/editor-state.ts";
+import { searchDocument } from "../../runtime/document-search.ts";
 import {
   getTableSelectionDescriptor,
   type TableSelectionDescriptor,
@@ -24,22 +28,27 @@ import {
   type MarkupDisplay,
 } from "../../ui/headless/comment-decoration-model";
 import { createRevisionDecorationModel } from "../../ui/headless/revision-decoration-model";
-import { createPMStateFromSnapshot } from "./pm-state-from-snapshot";
+import {
+  createPMSelectionFromSnapshot,
+  createPMStateFromSnapshot,
+} from "./pm-state-from-snapshot";
 import {
   createCommandBridgePlugins,
   type CommandBridgeCallbacks,
 } from "./pm-command-bridge";
 import { buildDecorations } from "./pm-decorations";
+import { createContextualInteractionPlugin } from "./pm-contextual-ui";
+import { finishPerfProbe, startPerfProbe } from "./perf-probe";
 import type { PositionMap } from "./pm-position-map";
 import {
   clearSearch as clearSearchPlugin,
-  createSearchExcerpt,
   createSearchPlugin,
   DEFAULT_SEARCH_HIGHLIGHT_COLOR,
   performSearch,
   searchPluginKey,
 } from "./search-plugin";
 import { tableNodeViews } from "./tw-table-node-view";
+import type { SelectionToolbarAnchor } from "../../ui/headless/selection-toolbar-model";
 
 /**
  * Same props interface as the legacy TwEditorSurface — drop-in replacement.
@@ -47,10 +56,14 @@ import { tableNodeViews } from "./tw-table-node-view";
 export interface TwProseMirrorSurfaceProps {
   currentUser: EditorUser;
   snapshot: RuntimeRenderSnapshot;
+  canonicalDocument: CanonicalDocumentEnvelope;
+  documentNavigation: DocumentNavigationSnapshot;
   reviewMode: "editing" | "review";
   markupDisplay: MarkupDisplay;
   activeRevisionId?: string;
   showTrackedChanges?: boolean;
+  /** When true, the surface renders inside the page workspace (vs canvas). */
+  isPageWorkspace?: boolean;
   onFocus: FocusEventHandler<HTMLDivElement>;
   onBlur: FocusEventHandler<HTMLDivElement>;
   onSelectionChange?: (selection: SelectionSnapshot) => void;
@@ -58,10 +71,12 @@ export interface TwProseMirrorSurfaceProps {
   onDeleteBackward?: () => void;
   onDeleteForward?: () => void;
   onInsertTab?: () => void;
+  onOutdentTab?: () => void;
   onInsertHardBreak?: () => void;
   onSplitParagraph?: () => void;
   onCommentActivated?: (commentId: string) => void;
   onRevisionActivated?: (revisionId: string) => void;
+  onSelectionToolbarAnchorChange?: (anchor: SelectionToolbarAnchor | null) => void;
 }
 
 export interface TwProseMirrorSurfaceRef {
@@ -92,19 +107,43 @@ export const TwProseMirrorSurface = forwardRef<
   const positionMapRef = useRef<PositionMap | null>(null);
   const callbacksRef = useRef<CommandBridgeCallbacks | null>(null);
   const activeSearchRef = useRef<{ query: string; options: SearchOptions } | null>(null);
+  const pendingTypingProbeRef = useRef<string | null>(null);
+  const pendingSelectionProbeRef = useRef<string | null>(null);
+  const surfaceBuildKeyRef = useRef<string | null>(null);
+  const suppressSelectionEchoRef = useRef(false);
+  const selectionToolbarFrameRef = useRef<number | null>(null);
+  const lastSelectionToolbarMeasurementRef = useRef<{
+    key: string | null;
+    anchor: SelectionToolbarAnchor | null;
+  }>({
+    key: null,
+    anchor: null,
+  });
 
   // Keep callbacks ref up to date (avoids stale closures in PM plugins)
   callbacksRef.current = {
-    onInsertText: (text) => props.onInsertText?.(text),
+    onInsertText: (text) => {
+      pendingTypingProbeRef.current = startPerfProbe("typing");
+      props.onInsertText?.(text);
+    },
     onDeleteBackward: () => props.onDeleteBackward?.(),
     onDeleteForward: () => props.onDeleteForward?.(),
     onSplitParagraph: () => props.onSplitParagraph?.(),
     onInsertHardBreak: () => props.onInsertHardBreak?.(),
     onInsertTab: () => props.onInsertTab?.(),
+    onOutdentTab: () => props.onOutdentTab?.(),
     onUndo: () => {}, // Handled by toolbar, not PM
     onRedo: () => {}, // Handled by toolbar, not PM
-    onSelectionChange: (sel) => props.onSelectionChange?.(sel),
+    onSelectionChange: (sel) => {
+      pendingSelectionProbeRef.current = startPerfProbe("selection");
+      props.onSelectionChange?.(
+        snapshot.activeStory.kind === "main"
+          ? sel
+          : { ...sel, storyTarget: snapshot.activeStory },
+      );
+    },
     getPositionMap: () => positionMapRef.current,
+    isSelectionSyncSuppressed: () => suppressSelectionEchoRef.current,
   };
 
   // Comment/revision decoration models
@@ -130,14 +169,19 @@ export const TwProseMirrorSurface = forwardRef<
         onSplitParagraph: () => callbacksRef.current?.onSplitParagraph(),
         onInsertHardBreak: () => callbacksRef.current?.onInsertHardBreak(),
         onInsertTab: () => callbacksRef.current?.onInsertTab(),
+        onOutdentTab: () => callbacksRef.current?.onOutdentTab?.(),
         onUndo: () => callbacksRef.current?.onUndo(),
         onRedo: () => callbacksRef.current?.onRedo(),
         onSelectionChange: (sel) => callbacksRef.current?.onSelectionChange(sel),
         getPositionMap: () => callbacksRef.current?.getPositionMap() ?? null,
       }),
+      createContextualInteractionPlugin({
+        onCommentActivated: (commentId) => props.onCommentActivated?.(commentId),
+        onRevisionActivated: (revisionId) => props.onRevisionActivated?.(revisionId),
+      }),
       createSearchPlugin(),
     ];
-  }, []);
+  }, [props.onCommentActivated, props.onRevisionActivated]);
 
   // Create or update PM view whenever surface becomes available or changes.
   // The view is created lazily — if surface is null on first render (loading),
@@ -145,6 +189,34 @@ export const TwProseMirrorSurface = forwardRef<
   useEffect(() => {
     if (!mountRef.current || !surface) return;
 
+    const surfaceBuildKey = JSON.stringify({
+      revisionToken: snapshot.revisionToken,
+      activeStory: snapshot.activeStory,
+      markupDisplay,
+      canEdit,
+      showTrackedChanges,
+    });
+
+    if (viewRef.current && surfaceBuildKeyRef.current === surfaceBuildKey) {
+      const positionMap = positionMapRef.current;
+      if (!positionMap) {
+        return;
+      }
+      const decorations = buildDecorations(
+        viewRef.current.state.doc,
+        positionMap,
+        commentModel,
+        revisionModel,
+        markupDisplay,
+        showTrackedChanges,
+      );
+      viewRef.current.setProps({
+        editable: () => canEdit,
+        decorations: () => decorations,
+      });
+      return;
+    }
+
     const { state, positionMap } = createPMStateFromSnapshot(
       surface,
       snapshot.selection,
@@ -180,8 +252,13 @@ export const TwProseMirrorSurface = forwardRef<
         editable: () => canEdit,
         decorations: () => decorations,
       });
+      suppressSelectionEchoRef.current = true;
       viewRef.current.updateState(state);
+      queueMicrotask(() => {
+        suppressSelectionEchoRef.current = false;
+      });
     }
+    surfaceBuildKeyRef.current = surfaceBuildKey;
 
     if (activeSearchRef.current) {
       applySearch(
@@ -189,11 +266,60 @@ export const TwProseMirrorSurface = forwardRef<
         activeSearchRef.current.options,
       );
     }
-  }, [snapshot.revisionToken, surface, commentModel, revisionModel, markupDisplay, canEdit]);
+    if (pendingTypingProbeRef.current) {
+      finishPerfProbe(pendingTypingProbeRef.current);
+      pendingTypingProbeRef.current = null;
+    }
+  }, [
+    snapshot.activeStory,
+    snapshot.revisionToken,
+    surface,
+    commentModel,
+    revisionModel,
+    markupDisplay,
+    canEdit,
+    showTrackedChanges,
+  ]);
+
+  useEffect(() => {
+    const view = viewRef.current;
+    const positionMap = positionMapRef.current;
+    if (!view || !surface || !positionMap) {
+      return;
+    }
+
+    const nextSelection = createPMSelectionFromSnapshot(
+      view.state.doc,
+      positionMap,
+      snapshot.selection,
+    );
+    if (view.state.selection.eq(nextSelection)) {
+      return;
+    }
+
+    suppressSelectionEchoRef.current = true;
+    view.dispatch(view.state.tr.setSelection(nextSelection));
+    queueMicrotask(() => {
+      suppressSelectionEchoRef.current = false;
+    });
+  }, [snapshot.selection, surface]);
+
+  useEffect(() => {
+    if (!pendingSelectionProbeRef.current) {
+      return;
+    }
+    finishPerfProbe(pendingSelectionProbeRef.current);
+    pendingSelectionProbeRef.current = null;
+  }, [snapshot.selection]);
 
   // Cleanup on unmount
   useEffect(() => {
     return () => {
+      const win = mountRef.current?.ownerDocument.defaultView;
+      if (selectionToolbarFrameRef.current !== null && win) {
+        win.cancelAnimationFrame(selectionToolbarFrameRef.current);
+        selectionToolbarFrameRef.current = null;
+      }
       viewRef.current?.destroy();
       viewRef.current = null;
     };
@@ -230,46 +356,27 @@ export const TwProseMirrorSurface = forwardRef<
 
   function applySearch(query: string, options: SearchOptions): SearchResultSnapshot[] {
     const view = viewRef.current;
-    const positionMap = positionMapRef.current;
-    if (!view || !positionMap) {
-      return [];
+    if (view) {
+      const rawResults = performSearch(view.state, query, options).slice(
+        0,
+        options.limit ?? Number.POSITIVE_INFINITY,
+      );
+      view.dispatch(
+        view.state.tr.setMeta(searchPluginKey, {
+          results: rawResults,
+          highlightColor: DEFAULT_SEARCH_HIGHLIGHT_COLOR,
+        }),
+      );
     }
 
-    const rawResults = performSearch(view.state, query, options).slice(
-      0,
-      options.limit ?? Number.POSITIVE_INFINITY,
-    );
-    view.dispatch(
-      view.state.tr.setMeta(searchPluginKey, {
-        results: rawResults,
-        highlightColor: DEFAULT_SEARCH_HIGHLIGHT_COLOR,
-      }),
-    );
-
-    const activeResultIndex = getActiveSearchResultIndex(
-      rawResults,
-      (position) => positionMap.pmToRuntime(position),
+    return searchDocument(
+      props.canonicalDocument,
       snapshot.selection,
+      snapshot.activeStory,
+      props.documentNavigation,
+      query,
+      options,
     );
-    const plainText = snapshot.surface?.plainText ?? "";
-    return rawResults.map((result, index) => {
-      const runtimeFrom = positionMap.pmToRuntime(result.from);
-      const runtimeTo = positionMap.pmToRuntime(result.to);
-      return {
-        resultId: `search-result-${index}`,
-        anchor: {
-          kind: "range",
-          from: runtimeFrom,
-          to: runtimeTo,
-          assoc: {
-            start: -1,
-            end: 1,
-          },
-        },
-        excerpt: createSearchExcerpt(plainText, runtimeFrom, runtimeTo),
-        isActive: index === activeResultIndex,
-      };
-    });
   }
 
   function clearLiveSearch(): void {
@@ -288,37 +395,192 @@ export const TwProseMirrorSurface = forwardRef<
       ? "font-[family-name:var(--font-legal-sans)]"
       : "font-[family-name:var(--font-legal-serif)]";
 
+  // Story focus indicator — runtime-backed, not DOM-only
+  const storyKind = snapshot.activeStory.kind;
+  const storyFocusAttr = storyKind !== "main" ? storyKind : undefined;
+
+  // Table focus cue — add subtle ring when selection head is inside a table block
+  const tableFocusClass = (() => {
+    if (!surface || !snapshot.selection) return "";
+    const head = snapshot.selection.head;
+    const inTable = surface.blocks.some(
+      (b) => b.kind === "table" && head >= b.from && head <= b.to,
+    );
+    return inTable ? "prosemirror-table-focus" : "";
+  })();
+
+  const workspaceLabel = props.isPageWorkspace ? "Document page" : "Document canvas";
+
+  const selectionToolbarMeasurementKey = useMemo(
+    () => buildSelectionToolbarMeasurementKey(snapshot.selection, snapshot.activeStory),
+    [snapshot.activeStory, snapshot.selection],
+  );
+
+  const emitSelectionToolbarAnchor = useCallback((): void => {
+    const callback = props.onSelectionToolbarAnchorChange;
+    if (!callback) {
+      return;
+    }
+
+    const nextAnchor = measureSelectionToolbarAnchor();
+    const previous = lastSelectionToolbarMeasurementRef.current;
+    if (
+      previous.key === selectionToolbarMeasurementKey &&
+      selectionToolbarAnchorsEqual(previous.anchor, nextAnchor)
+    ) {
+      return;
+    }
+
+    lastSelectionToolbarMeasurementRef.current = {
+      key: selectionToolbarMeasurementKey,
+      anchor: nextAnchor,
+    };
+    callback(nextAnchor);
+  }, [
+    props.onSelectionToolbarAnchorChange,
+    selectionToolbarMeasurementKey,
+    snapshot.activeStory,
+    snapshot.selection,
+  ]);
+
+  const scheduleSelectionToolbarAnchorUpdate = useCallback((): void => {
+    const callback = props.onSelectionToolbarAnchorChange;
+    const mount = mountRef.current;
+    const win = mount?.ownerDocument.defaultView;
+    if (!callback || !win) {
+      emitSelectionToolbarAnchor();
+      return;
+    }
+
+    if (selectionToolbarFrameRef.current !== null) {
+      win.cancelAnimationFrame(selectionToolbarFrameRef.current);
+      selectionToolbarFrameRef.current = null;
+    }
+
+    selectionToolbarFrameRef.current = win.requestAnimationFrame(() => {
+      selectionToolbarFrameRef.current = null;
+      emitSelectionToolbarAnchor();
+    });
+  }, [emitSelectionToolbarAnchor, props.onSelectionToolbarAnchorChange]);
+
+  useEffect(() => {
+    scheduleSelectionToolbarAnchorUpdate();
+  }, [
+    scheduleSelectionToolbarAnchorUpdate,
+    snapshot.revisionToken,
+    snapshot.selection,
+    snapshot.surface,
+    props.isPageWorkspace,
+  ]);
+
+  useEffect(() => {
+    const mount = mountRef.current;
+    const callback = props.onSelectionToolbarAnchorChange;
+    if (!mount || !callback) {
+      return;
+    }
+
+    const updateAnchor = () => {
+      scheduleSelectionToolbarAnchorUpdate();
+    };
+    const scrollRoot = mount.closest<HTMLElement>("[data-wre-scroll-root='true']");
+    const win = mount.ownerDocument.defaultView;
+    const resizeObserver =
+      typeof ResizeObserver !== "undefined"
+        ? new ResizeObserver(() => {
+          updateAnchor();
+        })
+        : null;
+
+    updateAnchor();
+    scrollRoot?.addEventListener("scroll", updateAnchor, { passive: true });
+    win?.addEventListener("resize", updateAnchor);
+    resizeObserver?.observe(mount);
+    if (scrollRoot) {
+      resizeObserver?.observe(scrollRoot);
+    }
+
+    return () => {
+      scrollRoot?.removeEventListener("scroll", updateAnchor);
+      win?.removeEventListener("resize", updateAnchor);
+      resizeObserver?.disconnect();
+    };
+  }, [
+    props.onSelectionToolbarAnchorChange,
+    scheduleSelectionToolbarAnchorUpdate,
+    snapshot.revisionToken,
+    snapshot.selection,
+  ]);
+
+  useEffect(() => {
+    return () => {
+      lastSelectionToolbarMeasurementRef.current = {
+        key: null,
+        anchor: null,
+      };
+      props.onSelectionToolbarAnchorChange?.(null);
+    };
+  }, [props.onSelectionToolbarAnchorChange]);
+
   return (
-    <section aria-label="Document canvas" className="min-w-0">
+    <section
+      aria-label={workspaceLabel}
+      className="min-w-0"
+      data-active-story={storyFocusAttr}
+      data-workspace={props.isPageWorkspace ? "page" : "canvas"}
+    >
       {/* ProseMirror mount point — document content including headings is editable */}
       {surface ? (
         <div
           ref={mountRef}
           role="textbox"
+          tabIndex={0}
           aria-multiline="true"
-          className={`px-12 py-10 ${fontClass} text-[15px] text-primary leading-relaxed prosemirror-surface outline-none`}
-          onFocus={onFocus as unknown as React.FocusEventHandler<HTMLDivElement>}
+          className={`px-12 py-10 ${fontClass} text-[15px] text-primary leading-relaxed prosemirror-surface outline-none ${tableFocusClass}`}
+          onFocus={(event) => {
+            onFocus(event);
+            if (event.target === event.currentTarget) {
+              viewRef.current?.focus();
+            }
+          }}
           onBlur={onBlur as unknown as React.FocusEventHandler<HTMLDivElement>}
-          onClick={(e) => {
-            // Activate comment or revision when clicking on decorated text
-            const target = e.target as HTMLElement;
-            const commentEl = target.closest?.("[data-comment-id]");
-            if (commentEl) {
-              const commentId = commentEl.getAttribute("data-comment-id");
-              if (commentId) {
-                props.onCommentActivated?.(commentId);
-                return;
-              }
+          onKeyDown={(event) => {
+            if (event.target !== event.currentTarget) {
+              return;
             }
-            const revisionEl = target.closest?.("[data-revision-id]");
-            if (revisionEl) {
-              const revisionId = revisionEl.getAttribute("data-revision-id");
-              if (revisionId) {
-                props.onRevisionActivated?.(revisionId);
-              }
+
+            switch (event.key) {
+              case "Backspace":
+                event.preventDefault();
+                props.onDeleteBackward?.();
+                return;
+              case "Delete":
+                event.preventDefault();
+                props.onDeleteForward?.();
+                return;
+              case "Enter":
+                event.preventDefault();
+                if (event.shiftKey) {
+                  props.onInsertHardBreak?.();
+                } else {
+                  props.onSplitParagraph?.();
+                }
+                return;
+              case "Tab":
+                event.preventDefault();
+                if (event.shiftKey) {
+                  props.onOutdentTab?.();
+                } else {
+                  props.onInsertTab?.();
+                }
+                return;
+              default:
+                return;
             }
           }}
           aria-label="Document surface"
+          data-wre-document-surface="true"
+          data-story-focus={storyFocusAttr}
         />
       ) : (
         <div className="px-12 pb-10">
@@ -337,27 +599,82 @@ export const TwProseMirrorSurface = forwardRef<
       ) : null}
     </section>
   );
+
+  function measureSelectionToolbarAnchor(): SelectionToolbarAnchor | null {
+    const callback = props.onSelectionToolbarAnchorChange;
+    const view = viewRef.current;
+    const mount = mountRef.current;
+    const positionMap = positionMapRef.current;
+    const range = snapshot.selection.activeRange;
+
+    if (!callback || !view || !mount || !positionMap || snapshot.selection.isCollapsed || range.kind !== "range") {
+      return null;
+    }
+
+    const rootRect = mount.getBoundingClientRect();
+    if (rootRect.width <= 0 || rootRect.height <= 0) {
+      return null;
+    }
+
+    try {
+      const pmFrom = positionMap.runtimeToPm(range.from);
+      const pmTo = positionMap.runtimeToPm(range.to);
+      const startRect = view.coordsAtPos(pmFrom);
+      const endRect = view.coordsAtPos(pmTo);
+      const left = Math.max(rootRect.left, Math.min(startRect.left, endRect.left));
+      const right = Math.min(rootRect.right, Math.max(startRect.right, endRect.right));
+      const top = Math.max(rootRect.top, Math.min(startRect.top, endRect.top));
+      const bottom = Math.min(rootRect.bottom, Math.max(startRect.bottom, endRect.bottom));
+
+      if (
+        !Number.isFinite(left) ||
+        !Number.isFinite(right) ||
+        !Number.isFinite(top) ||
+        !Number.isFinite(bottom) ||
+        right <= left ||
+        bottom <= top ||
+        bottom < rootRect.top ||
+        top > rootRect.bottom
+      ) {
+        return null;
+      }
+
+      return { left, right, top, bottom };
+    } catch {
+      return null;
+    }
+  }
 });
 
-function getActiveSearchResultIndex(
-  results: Array<{ from: number; to: number }>,
-  toRuntimePosition: (position: number) => number,
+function buildSelectionToolbarMeasurementKey(
   selection: SelectionSnapshot,
-): number {
-  if (results.length === 0) {
-    return -1;
+  activeStory: RuntimeRenderSnapshot["activeStory"],
+): string | null {
+  if (selection.isCollapsed || selection.activeRange.kind !== "range") {
+    return null;
   }
 
-  const selectionFrom = Math.min(selection.anchor, selection.head);
-  const selectionTo = Math.max(selection.anchor, selection.head);
-  const activeIndex = results.findIndex((result) => {
-    const from = toRuntimePosition(result.from);
-    const to = toRuntimePosition(result.to);
-    if (selectionFrom === selectionTo) {
-      return selectionFrom >= from && selectionFrom <= to;
-    }
-    return selectionFrom < to && selectionTo > from;
+  return JSON.stringify({
+    story: activeStory,
+    from: selection.activeRange.from,
+    to: selection.activeRange.to,
   });
+}
 
-  return activeIndex >= 0 ? activeIndex : 0;
+function selectionToolbarAnchorsEqual(
+  left: SelectionToolbarAnchor | null,
+  right: SelectionToolbarAnchor | null,
+): boolean {
+  if (left === right) {
+    return true;
+  }
+  if (!left || !right) {
+    return false;
+  }
+  return (
+    left.left === right.left &&
+    left.right === right.right &&
+    left.top === right.top &&
+    left.bottom === right.bottom
+  );
 }

package/src/ui-tailwind/editor-surface/tw-table-node-view.tsx

@@ -350,7 +350,6 @@ export class TableCellNodeView {
  */
 export const tableNodeViews: { [node: string]: NodeViewConstructor } = {
   table: (node: PMNode) => new TableNodeView(node),
-  table_row: (node: PMNode) => new TableRowNodeView(node),
   table_cell: (node: PMNode) => new TableCellNodeView(node),
   table_header_cell: (node: PMNode) => new TableCellNodeView(node),
 };

package/src/ui-tailwind/index.ts

@@ -16,8 +16,9 @@ export { TwRevisionSidebar } from "./review/tw-revision-sidebar";
 export { TwHealthPanel } from "./review/tw-health-panel";
 
 // Toolbar
-export { TwToolbar, type TwToolbarProps, type ViewMode } from "./toolbar/tw-toolbar";
+export { TwToolbar, type TwToolbarProps } from "./toolbar/tw-toolbar";
 export { TwToolbarIconButton } from "./toolbar/tw-toolbar-icon-button";
+export type { WorkspaceMode, ZoomLevel } from "../api/public-types";
 
 // Status
 export { TwStatusBar } from "./status/tw-status-bar";