@beyondwork/docx-react-component 1.0.42 → 1.0.45

package/src/ui/WordReviewEditor.tsx

@@ -97,14 +97,15 @@ import {
 } from "../core/commands/style-commands.ts";
 import {
   continueNumbering as continueListNumbering,
-  backspaceAtListStart,
-  indentListItems,
-  outdentListItems,
   restartNumbering as restartListNumbering,
-  splitListParagraph,
   toggleBulletedList,
   toggleNumberedList,
 } from "../core/commands/list-commands.ts";
+import {
+  dispatchTextCommand,
+  type DispatchContext,
+  type DispatchTextCommand,
+} from "../runtime/edit-dispatch/index.ts";
 import {
   resolveActiveParagraphIndex,
   setActiveParagraphIndentation,
@@ -242,6 +243,12 @@ const BROWSER_SAFE_PREVIEW_TYPES = new Set([
   "image/gif",
   "image/webp",
   "image/bmp",
+  // SVG is served through `<img src="data:image/svg+xml;base64,...">` by
+  // `createImageDataUrl`. Chromium sandboxes SVGs loaded via <img> — scripts
+  // don't execute, external references are blocked, XSS surface matches PNG.
+  // Needed for docs/plans/lane-5-charts.md Stage 0B synthesized chart previews and
+  // any host that ships .svg inside `word/media/` as a logo or figure.
+  "image/svg+xml",
 ]);
 
 const ACCESSIBLE_REGION_ORDER = [
@@ -938,6 +945,22 @@ export function __createWordReviewEditorRefBridge(
         pendingConflicts,
       });
     },
+    // Schema 1.2 — EditorStateChannel delegation.
+    configureEditorStatePolicy: (policy) => {
+      runtime.configureEditorStatePolicy(policy);
+    },
+    registerEditorStateResolver: (resolver) => {
+      runtime.registerEditorStateResolver(resolver);
+    },
+    registerEditorStatePersister: (persister) => {
+      runtime.registerEditorStatePersister(persister);
+    },
+    getEditorStateKey: (namespace) => {
+      return runtime.getEditorStateKey(namespace);
+    },
+    retryPendingPersist: async (namespace) => {
+      await runtime.retryPendingPersist(namespace);
+    },
     setHostAnnotationOverlay: (overlay) => {
       runtime.setHostAnnotationOverlay(clonePublicValue(overlay));
     },
@@ -985,16 +1008,9 @@ export function __createWordReviewEditorRefBridge(
 
 export function __applyRuntimeTextCommand(
   runtime: WordReviewEditorRuntime,
-  command:
-    | { type: "insert-text"; text: string }
-    | { type: "delete-backward" }
-    | { type: "delete-forward" }
-    | { type: "insert-tab" }
-    | { type: "outdent-tab" }
-    | { type: "insert-hard-break" }
-    | { type: "split-paragraph" },
+  command: DispatchTextCommand,
 ): void {
-  applyRuntimeTextCommand(runtime, command);
+  dispatchTextCommand(runtime, command, DISPATCH_CONTEXT);
 }
 
 export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditorProps>(
@@ -1023,6 +1039,9 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
       onWarning,
       onReviewSidebarTrackedChanges,
       onReviewSidebarComments,
+      onFindRequested,
+      onPrintRequested,
+      onZoomRequested,
       readOnly = false,
       reviewMode = "review",
       suggestionsEnabled = false,
@@ -1961,6 +1980,22 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
             pendingConflicts: metadataConflictPendingRef.current,
           });
         },
+        // Schema 1.2 — EditorStateChannel delegation.
+        configureEditorStatePolicy: (policy) => {
+          activeRuntime.configureEditorStatePolicy(policy);
+        },
+        registerEditorStateResolver: (resolver) => {
+          activeRuntime.registerEditorStateResolver(resolver);
+        },
+        registerEditorStatePersister: (persister) => {
+          activeRuntime.registerEditorStatePersister(persister);
+        },
+        getEditorStateKey: (namespace) => {
+          return activeRuntime.getEditorStateKey(namespace);
+        },
+        retryPendingPersist: async (namespace) => {
+          await activeRuntime.retryPendingPersist(namespace);
+        },
         setHostAnnotationOverlay: (overlay) => {
           setHostAnnotationOverlayState(clonePublicValue(overlay));
         },
@@ -2109,7 +2144,7 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
 
     function addReviewComment(): string | null {
       try {
-        const commentId = activeRuntime.addComment({
+        const { commentId } = activeRuntime.addComment({
           anchor: snapshot.selection.activeRange,
           body: "",
           authorId: currentUser.userId,
@@ -2538,7 +2573,46 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
         },
       );
 
-      if (shortcut.kind === "none" || shortcut.kind === "delegate") {
+      if (shortcut.kind === "none") {
+        return;
+      }
+
+      if (shortcut.kind === "delegate") {
+        // Host-delegated shortcuts: if the host has wired a typed
+        // callback we call it and suppress the browser default; if
+        // not, the event falls through to the browser (Ctrl+F opens
+        // Find, Ctrl+Plus zooms, etc.) — matching the legacy behavior.
+        let handled = false;
+        if (shortcut.shortcut === "find" && onFindRequested) {
+          // selectionText is intentionally empty — hosts that need the
+          // selected text already receive it via the selection_changed
+          // event + canonicalDocument they have via onEvent listeners.
+          // The range is the load-bearing field so host Find panels can
+          // scope their search to the selection or pre-populate from it.
+          onFindRequested({
+            selectionText: "",
+            selectionRange: snapshot.selection,
+          });
+          handled = true;
+        } else if (shortcut.shortcut === "print" && onPrintRequested) {
+          onPrintRequested();
+          handled = true;
+        } else if (
+          (shortcut.shortcut === "zoom-in" ||
+            shortcut.shortcut === "zoom-out" ||
+            shortcut.shortcut === "zoom-reset") &&
+          onZoomRequested
+        ) {
+          const direction =
+            shortcut.shortcut === "zoom-in" ? "in" :
+            shortcut.shortcut === "zoom-out" ? "out" : "reset";
+          onZoomRequested(direction);
+          handled = true;
+        }
+        if (handled) {
+          event.preventDefault();
+          event.stopPropagation();
+        }
         return;
       }
 
@@ -2604,13 +2678,13 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
       onFocus: handleSurfaceFocus,
       onBlur: handleSurfaceBlur,
       onSelectionChange: dispatchSelection,
-      onInsertText: (text: string) => applyRuntimeTextCommand(activeRuntime, { type: "insert-text", text }),
-      onDeleteBackward: () => applyRuntimeTextCommand(activeRuntime, { type: "delete-backward" }),
-      onDeleteForward: () => applyRuntimeTextCommand(activeRuntime, { type: "delete-forward" }),
-      onInsertTab: () => applyRuntimeTextCommand(activeRuntime, { type: "insert-tab" }),
-      onOutdentTab: () => applyRuntimeTextCommand(activeRuntime, { type: "outdent-tab" }),
-      onInsertHardBreak: () => applyRuntimeTextCommand(activeRuntime, { type: "insert-hard-break" }),
-      onSplitParagraph: () => applyRuntimeTextCommand(activeRuntime, { type: "split-paragraph" }),
+      onInsertText: (text: string) => dispatchTextCommand(activeRuntime, { type: "insert-text", text }, DISPATCH_CONTEXT),
+      onDeleteBackward: () => dispatchTextCommand(activeRuntime, { type: "delete-backward" }, DISPATCH_CONTEXT),
+      onDeleteForward: () => dispatchTextCommand(activeRuntime, { type: "delete-forward" }, DISPATCH_CONTEXT),
+      onInsertTab: () => dispatchTextCommand(activeRuntime, { type: "insert-tab" }, DISPATCH_CONTEXT),
+      onOutdentTab: () => dispatchTextCommand(activeRuntime, { type: "outdent-tab" }, DISPATCH_CONTEXT),
+      onInsertHardBreak: () => dispatchTextCommand(activeRuntime, { type: "insert-hard-break" }, DISPATCH_CONTEXT),
+      onSplitParagraph: () => dispatchTextCommand(activeRuntime, { type: "split-paragraph" }, DISPATCH_CONTEXT),
       onUndo: () => activeRuntime.undo(),
       onRedo: () => activeRuntime.redo(),
       onBlockedInput: (command: "paste" | "drop", message: string) =>
@@ -2618,6 +2692,19 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
           code: "unsupported_surface",
           message,
         }]),
+      onPasteApplied: (meta: {
+        segmentCount: number;
+        charCount: number;
+        source: "paste" | "drop";
+      }) => {
+        onEventRef.current?.({
+          type: "paste_applied",
+          documentId: props.documentId,
+          segmentCount: meta.segmentCount,
+          charCount: meta.charCount,
+          source: meta.source,
+        });
+      },
     };
 
     const reviewCallbacks = {
@@ -2763,14 +2850,21 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
         applyRuntimeImageResize(activeRuntime, mediaId, dimensions),
       onSetImageFrame: (mediaId, offsets) =>
         applyRuntimeImageReposition(activeRuntime, mediaId, offsets),
-      onOpenHeaderStory: () =>
-        openDefaultStoryVariant(activeRuntime, snapshot.pageLayout, documentNavigation, "header"),
-      onOpenFooterStory: () =>
-        openDefaultStoryVariant(activeRuntime, snapshot.pageLayout, documentNavigation, "footer"),
+      // P8.11 — `onOpenHeaderStory` / `onOpenFooterStory` retired from the
+      // WordReviewEditor wiring.  Per-page header / footer bands rendered
+      // by `TwPageStackChromeLayer` call `onOpenStory(target)` with the
+      // exact `EditorStoryTarget` they represent, so the variant /
+      // relationship resolution happens inside the layout facet instead
+      // of the UI.  The deprecated props remain in the workspace type
+      // with a mount-time `console.warn`; hosts that still pass them can
+      // migrate to `onOpenStory` at their leisure.
       onOpenHeaderStoryForPage: (pageIndex: number) =>
         openStoryForPage(activeRuntime, pageIndex, "header"),
       onOpenFooterStoryForPage: (pageIndex: number) =>
         openStoryForPage(activeRuntime, pageIndex, "footer"),
+      onOpenStory: (target) => {
+        activeRuntime.openStory(target);
+      },
       onDeleteSectionBreak: (sectionIndex) =>
         applyRuntimeDeleteSectionBreak(activeRuntime, sectionIndex),
       onUpdateSectionLayout: (sectionIndex, patch) =>
@@ -2901,6 +2995,17 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
         interactionGuardSnapshot={interactionGuardSnapshot}
         chromePreset={effectiveChromePreset}
         chromeOptions={chromeOptions}
+        {...(props.collabSession ? { collabSession: props.collabSession } : {})}
+        {...(props.collabTransportStatus
+          ? { collabTransportStatus: props.collabTransportStatus }
+          : {})}
+        {...(props.activeCommentId !== undefined
+          ? { activeCommentId: props.activeCommentId }
+          : {})}
+        collabActorId={currentUser.userId}
+        {...(props.collabSendBaseline
+          ? { collabSendBaseline: props.collabSendBaseline }
+          : {})}
         reviewQueue={reviewQueueSnapshot}
         documentContextAnalytics={documentContextAnalytics}
         selectionContextAnalytics={selectionContextAnalytics}
@@ -3231,7 +3336,11 @@ function applyRuntimeListToggle(
   dispatchStoryMutationResult(
     runtime,
     context,
-    createListMutationResult(result, context.localSnapshot.selection),
+    {
+      changed: result.affectedParagraphIndexes.length > 0,
+      document: result.document,
+      selection: toRuntimeSelectionSnapshot(context.localSnapshot.selection),
+    },
     context.timestamp,
   );
 }
@@ -4355,175 +4464,12 @@ function buildTablesFacet(
 
 export { buildTablesFacet as __buildTablesFacet };
 
-function applyRuntimeTextCommand(
-  runtime: WordReviewEditorRuntime,
-  command:
-    | { type: "insert-text"; text: string }
-    | { type: "delete-backward" }
-    | { type: "delete-forward" }
-    | { type: "insert-tab" }
-    | { type: "outdent-tab" }
-    | { type: "insert-hard-break" }
-    | { type: "split-paragraph" },
-): void {
-  const snapshot = runtime.getRenderSnapshot();
-  const context = getStoryMutationContext(runtime, getMountedTextCommandName(command));
-  if (!context) {
-    return;
-  }
-
-  const effectiveSelectionMode = runtime.getInteractionGuardSnapshot().effectiveMode;
-  const listAwareResult = applyListAwareTextCommand(context, command);
-  if (effectiveSelectionMode === "suggest" && listAwareResult) {
-    runtime.emitBlockedCommand(getMountedTextCommandName(command), [{
-      code: "suggesting_unsupported",
-      message: "List structure changes are not supported in suggesting mode.",
-    }]);
-    return;
-  }
-
-  if (listAwareResult) {
-    dispatchStoryMutationResult(runtime, context, listAwareResult, context.timestamp);
-    return;
-  }
-
-  switch (command.type) {
-    case "insert-text":
-      runtime.applyActiveStoryTextCommand({ type: "text.insert", text: command.text });
-      return;
-    case "delete-backward":
-      runtime.applyActiveStoryTextCommand({ type: "text.delete-backward" });
-      return;
-    case "delete-forward":
-      runtime.applyActiveStoryTextCommand({ type: "text.delete-forward" });
-      return;
-    case "insert-tab":
-      runtime.applyActiveStoryTextCommand({ type: "text.insert-tab" });
-      return;
-    case "outdent-tab":
-      return;
-    case "insert-hard-break":
-      runtime.applyActiveStoryTextCommand({ type: "text.insert-hard-break" });
-      return;
-    case "split-paragraph":
-      runtime.applyActiveStoryTextCommand({ type: "paragraph.split" });
-      return;
-  }
-}
-
-function getMountedTextCommandName(
-  command:
-    | { type: "insert-text"; text: string }
-    | { type: "delete-backward" }
-    | { type: "delete-forward" }
-    | { type: "insert-tab" }
-    | { type: "outdent-tab" }
-    | { type: "insert-hard-break" }
-    | { type: "split-paragraph" },
-): string {
-  switch (command.type) {
-    case "insert-text":
-      return "text.insert";
-    case "delete-backward":
-      return "text.delete-backward";
-    case "delete-forward":
-      return "text.delete-forward";
-    case "insert-tab":
-    case "outdent-tab":
-      return "text.insert-tab";
-    case "insert-hard-break":
-      return "text.insert-hard-break";
-    case "split-paragraph":
-      return "paragraph.split";
-  }
-}
-
-function applyListAwareTextCommand(
-  context: NonNullable<ReturnType<typeof getStoryMutationContext>>,
-  command:
-    | { type: "insert-text"; text: string }
-    | { type: "delete-backward" }
-    | { type: "delete-forward" }
-    | { type: "insert-tab" }
-    | { type: "outdent-tab" }
-    | { type: "insert-hard-break" }
-    | { type: "split-paragraph" },
-): {
-  changed: boolean;
-  document: EditorSessionState["canonicalDocument"];
-  selection: InternalSelectionSnapshot;
-} | null {
-  const paragraphContext = resolveActiveParagraphContext(context.localSnapshot);
-  if (!paragraphContext?.paragraph.numbering) {
-    return null;
-  }
-
-  switch (command.type) {
-    case "insert-tab": {
-      const result = indentListItems(
-        context.localDocument,
-        [paragraphContext.paragraphIndex],
-        { timestamp: context.timestamp },
-      );
-      return createListMutationResult(result, context.localSnapshot.selection);
-    }
-    case "outdent-tab": {
-      const result = outdentListItems(
-        context.localDocument,
-        [paragraphContext.paragraphIndex],
-        { timestamp: context.timestamp },
-      );
-      return createListMutationResult(result, context.localSnapshot.selection);
-    }
-    case "delete-backward": {
-      if (!paragraphContext.atParagraphStart || !context.localSnapshot.selection.isCollapsed) {
-        return null;
-      }
-      const result = backspaceAtListStart(
-        context.localDocument,
-        paragraphContext.paragraphIndex,
-        { timestamp: context.timestamp },
-      );
-      return result.handled
-        ? createListMutationResult(result, context.localSnapshot.selection)
-        : null;
-    }
-    case "split-paragraph": {
-      if (!context.localSnapshot.selection.isCollapsed || !paragraphContext.isEmpty) {
-        return null;
-      }
-      const result = splitListParagraph(
-        context.localDocument,
-        paragraphContext.paragraphIndex,
-        true,
-        { timestamp: context.timestamp },
-      );
-      return result.action === "split"
-        ? null
-        : createListMutationResult(result, context.localSnapshot.selection);
-    }
-    default:
-      return null;
-  }
-}
-
-function createListMutationResult(
-  result: {
-    document: EditorSessionState["canonicalDocument"];
-    affectedParagraphIndexes: number[];
-  },
-  selection: RuntimeRenderSnapshot["selection"],
-): {
-  changed: boolean;
-  document: EditorSessionState["canonicalDocument"];
-  selection: InternalSelectionSnapshot;
-} {
-  return {
-    changed: result.affectedParagraphIndexes.length > 0,
-    document: result.document,
-    selection: toRuntimeSelectionSnapshot(selection),
-  };
-}
+const DISPATCH_CONTEXT: DispatchContext = {
+  getStoryMutationContext,
+  dispatchStoryMutationResult,
+  resolveActiveParagraphContext,
+  toRuntimeSelectionSnapshot,
+};
 
 function resolveActiveParagraphContext(
   snapshot: Pick<RuntimeRenderSnapshot, "surface" | "selection">,
@@ -4866,47 +4812,6 @@ function openStoryForPage(
   runtime.openStory(target);
 }
 
-function openDefaultStoryVariant(
-  runtime: WordReviewEditorRuntime,
-  pageLayout: PageLayoutSnapshot | undefined,
-  navigation: ReturnType<WordReviewEditorRuntime["getDocumentNavigationSnapshot"]> | undefined,
-  kind: "header" | "footer",
-): void {
-  const variants =
-    kind === "header"
-      ? pageLayout?.headerVariants
-      : pageLayout?.footerVariants;
-  const activePage = navigation?.pages[navigation.activePageIndex];
-  const isFirstPageInSection =
-    activePage !== undefined &&
-    activePage.sectionIndex === pageLayout?.sectionIndex &&
-    activePage.pageInSection === 0;
-  const isEvenDocumentPage = activePage !== undefined && (activePage.pageIndex + 1) % 2 === 0;
-
-  let variant =
-    pageLayout?.differentFirstPage && isFirstPageInSection
-      ? variants?.find((entry) => entry.variant === "first")
-      : undefined;
-
-  if (!variant && pageLayout?.differentOddEvenPages && isEvenDocumentPage) {
-    variant = variants?.find((entry) => entry.variant === "even");
-  }
-
-  if (!variant) {
-    variant = variants?.find((entry) => entry.variant === "default") ?? variants?.[0];
-  }
-
-  if (!variant) {
-    return;
-  }
-  runtime.openStory({
-    kind,
-    relationshipId: variant.relationshipId,
-    variant: variant.variant,
-    sectionIndex: pageLayout?.sectionIndex,
-  });
-}
-
 function searchRuntimeDocument(
   runtime: WordReviewEditorRuntime,
   mountedSurface: TwProseMirrorSurfaceRef | null,

package/src/ui/editor-command-bag.ts

@@ -2,6 +2,7 @@ import { useMemo, useRef } from "react";
 
 import type {
   CommentSidebarThreadSnapshot,
+  EditorStoryTarget,
   FormattingAlignment,
   HeaderFooterLinkPatch,
   InsertImageOptions,
@@ -87,12 +88,25 @@ export interface EditorCommandBag {
   onAcceptAllChanges(): void;
   onRejectAllChanges(): void;
   onCloseStory?(): void;
+  /**
+   * @deprecated P8.11 — see the matching prop on `TwReviewWorkspaceProps`.
+   * Kept optional for back-compat; per-page bands use `onOpenStory`.
+   */
   onOpenHeaderStory?(): void;
+  /**
+   * @deprecated P8.11 — see `onOpenHeaderStory`.
+   */
   onOpenFooterStory?(): void;
   /** Open the header story for a specific page (double-click on its band). */
   onOpenHeaderStoryForPage?(pageIndex: number): void;
   /** Open the footer story for a specific page (double-click on its band). */
   onOpenFooterStoryForPage?(pageIndex: number): void;
+  /**
+   * P8.11 — per-page header/footer band click handler.  Receives the
+   * exact `EditorStoryTarget` the band represents; the command bag wires
+   * this to `runtime.openStory(target)`.
+   */
+  onOpenStory?(target: EditorStoryTarget): void;
   onSetParagraphIndentation?(indentation: {
     left?: number;
     right?: number;