@beyondwork/docx-react-component 1.0.84 → 1.0.85

package/src/runtime/surface-projection.ts

@@ -1536,7 +1536,34 @@ function appendInlineSegments(
         node.fieldFamily === "NOTEREF" ||
         node.fieldFamily === "TOC" ||
         node.fieldFamily === "PAGE" ||
-        node.fieldFamily === "NUMPAGES";
+        node.fieldFamily === "NUMPAGES" ||
+        node.fieldFamily === "SECTIONPAGES";
+      const isPageScopedField =
+        node.fieldFamily === "PAGE" ||
+        node.fieldFamily === "NUMPAGES" ||
+        node.fieldFamily === "SECTIONPAGES";
+      if (isPageScopedField) {
+        const fieldLabel =
+          node.fieldFamily === "PAGE"
+            ? "Current page number"
+            : node.fieldFamily === "NUMPAGES"
+              ? "Total pages"
+              : "Section pages";
+        const displayText = flattenSurfaceFieldDisplayText(node.children);
+        paragraph.segments.push({
+          segmentId: `${paragraph.blockId}-segment-${paragraph.segments.length}`,
+          kind: "field_ref",
+          from: start,
+          to: start + 1,
+          fieldFamily: node.fieldFamily,
+          fieldTarget: node.fieldTarget,
+          instruction: node.instruction,
+          refreshStatus: node.refreshStatus ?? "stale",
+          label: fieldLabel,
+          ...(displayText ? { displayText } : {}),
+        } as SurfaceInlineSegment);
+        return { nextCursor: start + 1, lockedFragmentIds: [] };
+      }
       if (node.children && node.children.length > 0) {
         // For REF \h, pass the bookmark as a hyperlink href so child text gets hyperlink styling
         const refHyperlinkHref =
@@ -1574,7 +1601,9 @@ function appendInlineSegments(
               ? "Current page number"
               : node.fieldFamily === "NUMPAGES"
                 ? "Total pages"
-                : `${node.fieldFamily ?? "Field"}: ${node.fieldTarget ?? node.instruction.trim()}`;
+                : node.fieldFamily === "SECTIONPAGES"
+                  ? "Section pages"
+                  : `${node.fieldFamily ?? "Field"}: ${node.fieldTarget ?? node.instruction.trim()}`;
         paragraph.segments.push({
           segmentId: `${paragraph.blockId}-segment-${paragraph.segments.length}`,
           kind: "field_ref",
@@ -1743,6 +1772,34 @@ function normalizeSafeCssHexColor(value: string | undefined): string | undefined
   return trimmed.replace(/^#/, "").toUpperCase();
 }
 
+function flattenSurfaceFieldDisplayText(
+  children: readonly InlineNode[] | undefined,
+): string {
+  if (!children || children.length === 0) return "";
+  const parts: string[] = [];
+  for (const child of children) {
+    switch (child.type) {
+      case "text":
+        parts.push(child.text);
+        break;
+      case "tab":
+      case "hard_break":
+        parts.push(" ");
+        break;
+      case "symbol":
+        parts.push(child.char ? String.fromCodePoint(parseInt(child.char, 16)) : "\uFFFD");
+        break;
+      case "field":
+      case "hyperlink":
+        parts.push(flattenSurfaceFieldDisplayText(child.children));
+        break;
+      default:
+        break;
+    }
+  }
+  return parts.join("");
+}
+
 /**
  * V2c.5 — Extract the first paragraph's plain text from a parsed
  * `txbxBlocks` tree for the `txbxText` segment preview.  The recursion

package/src/shell/ref-commands.ts

@@ -30,7 +30,6 @@
 import type {
   EditorSessionState,
   EditorStoryTarget,
-  FormattingAlignment,
   HeaderFooterLinkPatch,
   InsertImageOptions,
   InsertTableOptions,
@@ -41,7 +40,6 @@ import type {
   SelectionSnapshot as PublicSelectionSnapshot,
   StyleCatalogSnapshot,
   SurfaceBlockSnapshot,
-  SurfaceInlineSegment,
   TableOp,
 } from "../api/public-types";
 import {
@@ -51,7 +49,7 @@ import {
   storyTargetsEqual,
   type TransactionMapping,
 } from "../core/selection/mapping.ts";
-import { applyFormattingOperationToDocument } from "../core/commands/formatting-commands.ts";
+import type { FormattingOperation } from "../core/commands/formatting-commands.ts";
 import {
   applyParagraphStyleToDocument,
   applyTableStyleToDocument,
@@ -220,178 +218,15 @@ export function getRuntimeStyleCatalog(
 // Formatting (flat + suggesting-mode)
 // ---------------------------------------------------------------------------
 
-type FormattingOperation =
-  | { type: "toggle"; mark: "bold" | "italic" | "underline" | "strikethrough" | "superscript" | "subscript" }
-  | { type: "set-font-family"; fontFamily: string | null }
-  | { type: "set-font-size"; size: number | null }
-  | { type: "set-text-color"; color: string | null }
-  | { type: "set-highlight-color"; color: string | null }
-  | { type: "set-alignment"; alignment: FormattingAlignment }
-  | { type: "indent" }
-  | { type: "outdent" };
-
 export function applyRuntimeFormattingOperation(
   runtime: WordReviewEditorRuntime,
   operation: FormattingOperation,
 ): void {
-  if (isSelectionSuggesting(runtime)) {
-    if (applySuggestingFormattingOperation(runtime, operation)) {
-      return;
-    }
-  }
-  if (emitSuggestingUnsupportedMutation(runtime, getFormattingOperationCommandName(operation))) {
-    return;
-  }
-  const context = getStoryMutationContext(runtime, getFormattingOperationCommandName(operation));
-  if (!context) {
-    return;
-  }
-
-  const result = applyFormattingOperationToDocument(
-    context.localDocument,
-    context.localSnapshot,
-    operation,
-  );
-  dispatchStoryMutationResult(
-    runtime,
-    context,
-    {
-      ...result,
-      selection: toRuntimeSelectionSnapshot(result.selection),
-    },
-    context.timestamp,
-  );
-}
-
-function applySuggestingFormattingOperation(
-  runtime: WordReviewEditorRuntime,
-  operation: FormattingOperation,
-): boolean {
-  const commandName = getFormattingOperationCommandName(operation);
-  const context = getStoryMutationContext(runtime, commandName);
-  if (!context) {
-    return true;
-  }
-  if (context.activeStory.kind !== "main") {
-    runtime.emitBlockedCommand(commandName, [{
-      code: "suggesting_unsupported",
-      message: `"${commandName}" is not supported in suggesting mode for this story.`,
-    }]);
-    return true;
-  }
-
-  if (operation.type === "set-alignment" || operation.type === "indent" || operation.type === "outdent") {
-    const paragraphContext = resolveActiveParagraphContext(context.localSnapshot);
-    if (!paragraphContext) {
-      return true;
-    }
-    const beforeXml = buildParagraphPropertyBeforeXml(paragraphContext.paragraph);
-    const result = applyFormattingOperationToDocument(
-      context.localDocument,
-      context.localSnapshot,
-      operation,
-    );
-    if (!result.changed) {
-      return true;
-    }
-    const nextDocument = appendPropertyChangeSuggestion(
-      result.document,
-      {
-        from: paragraphContext.paragraph.from,
-        to: paragraphContext.paragraph.to,
-      },
-      {
-        originalRevisionType: "pPrChange",
-        xmlTag: "pPrChange",
-        beforeXml,
-        semanticKind: "paragraph-property-change",
-        storyTarget: context.activeStory,
-        authorId: runtime.getDefaultAuthorId?.(),
-      },
-      context.timestamp,
-    );
-    dispatchStoryMutationResult(
-      runtime,
-      context,
-      {
-        changed: true,
-        document: nextDocument,
-        selection: toRuntimeSelectionSnapshot(result.selection),
-      },
-      context.timestamp,
-    );
-    return true;
-  }
-
-  const segment = findSingleSelectedTextSegment(context.localSnapshot);
-  if (!segment) {
-    runtime.emitBlockedCommand(commandName, [{
-      code: "suggesting_unsupported",
-      message: `"${commandName}" requires one bounded text segment in suggesting mode.`,
-    }]);
-    return true;
-  }
-  const beforeXml = buildRunPropertyBeforeXml(segment);
-  const result = applyFormattingOperationToDocument(
-    context.localDocument,
-    context.localSnapshot,
-    operation,
-  );
-  if (!result.changed) {
-    return true;
-  }
-  const nextDocument = appendPropertyChangeSuggestion(
-    result.document,
-    {
-      from: segment.from,
-      to: segment.to,
-    },
-    {
-      originalRevisionType: "rPrChange",
-      xmlTag: "rPrChange",
-      beforeXml,
-      semanticKind: "formatting-change",
-      storyTarget: context.activeStory,
-      authorId: runtime.getDefaultAuthorId?.(),
-    },
-    context.timestamp,
-  );
-  dispatchStoryMutationResult(
-    runtime,
-    context,
-    {
-      changed: true,
-      document: nextDocument,
-      selection: toRuntimeSelectionSnapshot(result.selection),
-    },
-    context.timestamp,
-  );
-  return true;
-}
-
-function getFormattingOperationCommandName(operation: FormattingOperation): string {
-  switch (operation.type) {
-    case "toggle":
-      return `toggle${operation.mark.charAt(0).toUpperCase()}${operation.mark.slice(1)}`;
-    case "set-font-family":
-      return "setFontFamily";
-    case "set-font-size":
-      return "setFontSize";
-    case "set-text-color":
-      return "setTextColor";
-    case "set-highlight-color":
-      return "setHighlightColor";
-    case "set-alignment":
-      return "setAlignment";
-    case "indent":
-      return "indent";
-    case "outdent":
-      return "outdent";
-  }
+  runtime.applyFormattingOperation(operation);
 }
 
 // ---------------------------------------------------------------------------
-// Suggesting-mode property-change plumbing
+// Suggesting-mode guard helper for commands without bounded redline support
 // ---------------------------------------------------------------------------
 
 function emitSuggestingUnsupportedMutation(
@@ -409,192 +244,6 @@ function emitSuggestingUnsupportedMutation(
   return true;
 }
 
-function appendPropertyChangeSuggestion(
-  document: EditorSessionState["canonicalDocument"],
-  anchor: { from: number; to: number },
-  input: {
-    originalRevisionType: "rPrChange" | "pPrChange";
-    xmlTag: "rPrChange" | "pPrChange";
-    beforeXml: string;
-    semanticKind: "formatting-change" | "paragraph-property-change";
-    storyTarget: EditorStoryTarget;
-    authorId?: string;
-  },
-  timestamp: string,
-): EditorSessionState["canonicalDocument"] {
-  const existing = document.review.revisions;
-  const changeId = createRuntimeSuggestionChangeId(existing, timestamp);
-  const resolvedAuthorId = input.authorId ?? "unknown";
-  return {
-    ...document,
-    review: {
-      ...document.review,
-      revisions: {
-        ...existing,
-        [changeId]: {
-          changeId,
-          kind: "property-change",
-          anchor: createRangeAnchor(anchor.from, anchor.to, { start: 1, end: -1 }),
-          authorId: resolvedAuthorId,
-          createdAt: timestamp,
-          warningIds: [],
-          metadata: {
-            source: "runtime",
-            storyTarget: input.storyTarget,
-            suggestionId: changeId,
-            semanticKind: input.semanticKind,
-            originalRevisionType: input.originalRevisionType,
-            propertyChangeData: {
-              xmlTag: input.xmlTag,
-              beforeXml: input.beforeXml,
-            },
-          },
-          status: "open",
-        },
-      },
-    },
-  };
-}
-
-function createRuntimeSuggestionChangeId(
-  existing: EditorSessionState["canonicalDocument"]["review"]["revisions"],
-  timestamp: string,
-): string {
-  const base = `change-${timestamp.replace(/[^0-9]/gu, "")}`;
-  let counter = Object.keys(existing).length + 1;
-  let candidate = `${base}-p${counter}`;
-  while (existing[candidate]) {
-    counter += 1;
-    candidate = `${base}-p${counter}`;
-  }
-  return candidate;
-}
-
-function findSingleSelectedTextSegment(
-  snapshot: Pick<RuntimeRenderSnapshot, "surface" | "selection">,
-): Extract<SurfaceInlineSegment, { kind: "text" }> | null {
-  if (!snapshot.surface || snapshot.selection.activeRange.kind !== "range" || snapshot.selection.isCollapsed) {
-    return null;
-  }
-  const selectionFrom = Math.min(snapshot.selection.anchor, snapshot.selection.head);
-  const selectionTo = Math.max(snapshot.selection.anchor, snapshot.selection.head);
-  const segments = collectSelectedTextSegments(snapshot.surface.blocks, selectionFrom, selectionTo);
-  if (segments.length !== 1) {
-    return null;
-  }
-  const [segment] = segments;
-  if (!segment || segment.from !== selectionFrom || segment.to !== selectionTo) {
-    return null;
-  }
-  return segment;
-}
-
-function collectSelectedTextSegments(
-  blocks: readonly SurfaceBlockSnapshot[],
-  selectionFrom: number,
-  selectionTo: number,
-  output: Array<Extract<SurfaceInlineSegment, { kind: "text" }>> = [],
-): Array<Extract<SurfaceInlineSegment, { kind: "text" }>> {
-  for (const block of blocks) {
-    if (block.kind === "paragraph") {
-      for (const segment of block.segments) {
-        if (
-          segment.kind === "text" &&
-          rangesOverlap(selectionFrom, selectionTo, segment.from, segment.to)
-        ) {
-          output.push(segment);
-        }
-      }
-      continue;
-    }
-    if (block.kind === "table") {
-      for (const row of block.rows) {
-        for (const cell of row.cells) {
-          collectSelectedTextSegments(cell.content, selectionFrom, selectionTo, output);
-        }
-      }
-      continue;
-    }
-    if (block.kind === "sdt_block") {
-      collectSelectedTextSegments(block.children, selectionFrom, selectionTo, output);
-    }
-  }
-  return output;
-}
-
-function rangesOverlap(
-  leftFrom: number,
-  leftTo: number,
-  rightFrom: number,
-  rightTo: number,
-): boolean {
-  return leftFrom < rightTo && rightFrom < leftTo;
-}
-
-function buildRunPropertyBeforeXml(
-  segment: Extract<SurfaceInlineSegment, { kind: "text" }>,
-): string {
-  const parts: string[] = [];
-  const marks = new Set(segment.marks ?? []);
-  if (marks.has("bold")) parts.push("<w:b/>");
-  if (marks.has("italic")) parts.push("<w:i/>");
-  if (marks.has("underline")) parts.push("<w:u w:val=\"single\"/>");
-  if (marks.has("strikethrough")) parts.push("<w:strike/>");
-  if (marks.has("superscript")) parts.push("<w:vertAlign w:val=\"superscript\"/>");
-  if (marks.has("subscript")) parts.push("<w:vertAlign w:val=\"subscript\"/>");
-  if (segment.markAttrs?.fontFamily) {
-    parts.push(`<w:rFonts w:ascii="${escapeAttributeXml(segment.markAttrs.fontFamily)}" w:hAnsi="${escapeAttributeXml(segment.markAttrs.fontFamily)}"/>`);
-  }
-  if (segment.markAttrs?.fontSize !== undefined) {
-    parts.push(`<w:sz w:val="${segment.markAttrs.fontSize}"/>`);
-  }
-  if (segment.markAttrs?.textColor) {
-    parts.push(`<w:color w:val="${escapeAttributeXml(segment.markAttrs.textColor)}"/>`);
-  }
-  if (segment.markAttrs?.backgroundColor) {
-    parts.push(`<w:shd w:val="clear" w:color="auto" w:fill="${escapeAttributeXml(segment.markAttrs.backgroundColor)}"/>`);
-  }
-  return `<w:rPr>${parts.join("")}</w:rPr>`;
-}
-
-function buildParagraphPropertyBeforeXml(
-  paragraph: Extract<SurfaceBlockSnapshot, { kind: "paragraph" }>,
-): string {
-  const parts: string[] = [];
-  if (paragraph.styleId) {
-    parts.push(`<w:pStyle w:val="${escapeAttributeXml(paragraph.styleId)}"/>`);
-  }
-  if (paragraph.numbering) {
-    parts.push(
-      `<w:numPr><w:ilvl w:val="${paragraph.numbering.level}"/><w:numId w:val="${escapeAttributeXml(
-        paragraph.numbering.numberingInstanceId.replace(/^num:/u, ""),
-      )}"/></w:numPr>`,
-    );
-  }
-  if (paragraph.alignment) {
-    parts.push(`<w:jc w:val="${escapeAttributeXml(paragraph.alignment)}"/>`);
-  }
-  if (paragraph.indentation) {
-    const attrs: string[] = [];
-    if (paragraph.indentation.left !== undefined) attrs.push(`w:left="${paragraph.indentation.left}"`);
-    if (paragraph.indentation.right !== undefined) attrs.push(`w:right="${paragraph.indentation.right}"`);
-    if (paragraph.indentation.firstLine !== undefined) attrs.push(`w:firstLine="${paragraph.indentation.firstLine}"`);
-    if (paragraph.indentation.hanging !== undefined) attrs.push(`w:hanging="${paragraph.indentation.hanging}"`);
-    if (attrs.length > 0) {
-      parts.push(`<w:ind ${attrs.join(" ")}/>`);
-    }
-  }
-  return `<w:pPr>${parts.join("")}</w:pPr>`;
-}
-
-function escapeAttributeXml(value: string): string {
-  return value
-    .replace(/&/g, "&amp;")
-    .replace(/</g, "&lt;")
-    .replace(/>/g, "&gt;")
-    .replace(/"/g, "&quot;");
-}
-
 // ---------------------------------------------------------------------------
 // List toggle / paragraph style / table style
 // ---------------------------------------------------------------------------

package/src/shell/session-bootstrap.ts

@@ -1098,6 +1098,7 @@ function createLoadingRuntimeBridge(input: {
     getFontEntry: (name: string) =>
       input.sessionState.canonicalDocument.fontTable?.fonts[name],
     replaceText: () => undefined,
+    applyFormattingOperation: () => undefined,
     applyScopeReplacement: () => undefined,
     insertFragment: () => undefined,
     copy: () => undefined,
@@ -1133,6 +1134,13 @@ function createLoadingRuntimeBridge(input: {
     addCommentReply: () => {
       throw createLoadingBoundaryError(input.snapshot.documentId, "comment");
     },
+    getCommentThreadForChange: () => null,
+    ensureCommentThreadForChange: () => {
+      throw createLoadingBoundaryError(input.snapshot.documentId, "comment");
+    },
+    addReplyToChange: () => {
+      throw createLoadingBoundaryError(input.snapshot.documentId, "comment");
+    },
     editCommentBody: () => undefined,
     addScope: () => {
       throw createLoadingBoundaryError(input.snapshot.documentId, "scope");

package/src/ui/WordReviewEditor.tsx

@@ -66,6 +66,7 @@ import type {
   ViewMode as EditorViewMode,
   WorkflowBlockedCommandReason,
   WorkflowMarkupSnapshot,
+  WorkflowMarkupMode,
   WorkflowScopeSnapshot,
   WordReviewEditorChromeOptions,
   WordReviewEditorChromePreset,
@@ -250,6 +251,21 @@ function normalizeHostMarkupDisplay(
   return "markup";
 }
 
+function toWorkflowMarkupMode(mode: MarkupDisplay): WorkflowMarkupMode {
+  switch (mode) {
+    case "all":
+    case "all-markup":
+      return "all";
+    case "simple":
+    case "simple-markup":
+      return "simple";
+    case "clean":
+    case "no-markup":
+    case "original":
+      return "clean";
+  }
+}
+
 const VISUALLY_HIDDEN_STYLES: React.CSSProperties = {
   position: "absolute",
   width: "1px",
@@ -383,6 +399,11 @@ export function __createWordReviewEditorRefBridge(
     resolveComment: (commentId) => runtime.resolveComment(commentId),
     reopenComment: (commentId) => runtime.reopenComment(commentId),
     addCommentReply: (commentId, body) => runtime.addCommentReply(commentId, body),
+    getCommentThreadForChange: (changeId) =>
+      clonePublicValue(runtime.getCommentThreadForChange(changeId)),
+    ensureCommentThreadForChange: (changeId) =>
+      runtime.ensureCommentThreadForChange(changeId),
+    addReplyToChange: (changeId, body) => runtime.addReplyToChange(changeId, body),
     editCommentBody: (commentId, body) => runtime.editCommentBody(commentId, body),
     deleteComment: (commentId) => {
       applyRuntimeDeleteComment(runtime, commentId);
@@ -1041,7 +1062,9 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
     } = props;
 
     const [activeRailTab, setActiveRailTab] = useState<ReviewRailTab>("comments");
-    const [showTrackedChanges, setShowTrackedChanges] = useState(false);
+    const [showTrackedChanges, setShowTrackedChanges] = useState(() => suggestionsEnabled);
+    const [localMarkupDisplay, setLocalMarkupDisplay] =
+      useState<WorkflowMarkupMode | null>(() => suggestionsEnabled ? "all" : null);
     const [activeRevisionId, setActiveRevisionId] = useState<string | undefined>();
     const [suppressedSuggestionRevisionId, setSuppressedSuggestionRevisionId] = useState<string | null>(null);
     const [selectionToolbarAnchor, setSelectionToolbarAnchor] = useState<SelectionToolbarAnchor | null>(null);
@@ -1343,7 +1366,8 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
       loadingViewState,
     );
     const isPageWorkspace = viewState.workspaceMode === "page";
-    const liveMarkupDisplay = __resolveLiveMarkupDisplay(markupDisplay, isPageWorkspace);
+    const liveMarkupDisplay = localMarkupDisplay ??
+      __resolveLiveMarkupDisplay(markupDisplay, isPageWorkspace);
     const documentNavigation = useRuntimeValue(
       runtime
         ? {
@@ -1483,9 +1507,29 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
       activeRuntime.setViewMode(effectiveViewMode);
     }, [activeRuntime, effectiveViewMode]);
 
+    const setReviewMarkupMode = useCallback((mode: MarkupDisplay) => {
+      const workflowMode = toWorkflowMarkupMode(mode);
+      setLocalMarkupDisplay(workflowMode);
+      setShowTrackedChanges(workflowMode !== "clean");
+      api.ui?.viewport.setLocalMarkupMode(workflowMode);
+    }, [api]);
+
+    const setTrackedChangesAuthoring = useCallback((enabled: boolean) => {
+      const workflowMode: WorkflowMarkupMode = enabled ? "all" : "clean";
+      setShowTrackedChanges(enabled);
+      setLocalMarkupDisplay(workflowMode);
+      api.runtime.document.setMode(enabled ? "suggesting" : "editing");
+      api.ui?.viewport.setLocalMarkupMode(workflowMode);
+    }, [api]);
+
     useEffect(() => {
-      activeRuntime.setDocumentMode(suggestionsEnabled ? "suggesting" : "editing");
-    }, [activeRuntime, suggestionsEnabled]);
+      if (suggestionsEnabled) {
+        setTrackedChangesAuthoring(true);
+        return;
+      }
+      setShowTrackedChanges(false);
+      api.runtime.document.setMode("editing");
+    }, [api, setTrackedChangesAuthoring, suggestionsEnabled]);
 
     // design-close-chrome Phase 2 — density contract (designsystem §4.2).
     // When the `density` prop is supplied, drive the root `data-density`
@@ -1645,6 +1689,12 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
         reopenComment: (commentId) => activeRuntime.reopenComment(commentId),
         addCommentReply: (commentId, body) =>
           activeRuntime.addCommentReply(commentId, body, currentUser.userId),
+        getCommentThreadForChange: (changeId) =>
+          clonePublicValue(activeRuntime.getCommentThreadForChange(changeId)),
+        ensureCommentThreadForChange: (changeId) =>
+          activeRuntime.ensureCommentThreadForChange(changeId, currentUser.userId),
+        addReplyToChange: (changeId, body) =>
+          activeRuntime.addReplyToChange(changeId, body, currentUser.userId),
         editCommentBody: (commentId, body) =>
           activeRuntime.editCommentBody(commentId, body),
         deleteComment: (commentId) => {
@@ -2740,7 +2790,20 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
     );
 
     const addSelectionToolbarComment = useCallback(() => {
-      const commentId = addReviewComment();
+      let commentId: string | null = null;
+      if (activeSelectionTool?.kind === "suggestion-review") {
+        const primaryChangeId = activeSelectionTool.changeIds[0];
+        const linkedThread = primaryChangeId
+          ? activeRuntime.ensureCommentThreadForChange(primaryChangeId, currentUser.userId)
+          : null;
+        commentId = linkedThread?.commentId ?? null;
+        if (commentId) {
+          activeRuntime.openComment(commentId);
+          setActiveRailTab("comments");
+        }
+      } else {
+        commentId = addReviewComment();
+      }
       if (!commentId) {
         return;
       }
@@ -2748,7 +2811,13 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
       queueMicrotask(() => {
         focusDocumentSurface();
       });
-    }, [dismissSelectionToolbar, focusDocumentSurface]);
+    }, [
+      activeRuntime,
+      activeSelectionTool,
+      currentUser.userId,
+      dismissSelectionToolbar,
+      focusDocumentSurface,
+    ]);
 
     const handleSelectionToolbarAnchorChange = useCallback(
       (nextAnchor: SelectionToolbarAnchor | null) => {
@@ -3166,7 +3235,8 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
       onWorkspaceModeChange: (mode) => activeRuntime.setWorkspaceMode(mode),
       onZoomChange: (level) => activeRuntime.setZoom(level),
       onActiveRailTabChange: setActiveRailTab,
-      onShowTrackedChangesChange: setShowTrackedChanges,
+      onShowTrackedChangesChange: setTrackedChangesAuthoring,
+      onReviewMarkupModeChange: setReviewMarkupMode,
       onToggleBold: () =>
         applyRuntimeFormattingOperation(activeRuntime, { type: "toggle", mark: "bold" }),
       onToggleItalic: () =>
@@ -3263,10 +3333,20 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
       // 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"),
+        isPageWorkspace
+          ? openStoryForPage(activeRuntime, pageIndex, "header")
+          : undefined,
       onOpenFooterStoryForPage: (pageIndex: number) =>
-        openStoryForPage(activeRuntime, pageIndex, "footer"),
+        isPageWorkspace
+          ? openStoryForPage(activeRuntime, pageIndex, "footer")
+          : undefined,
       onOpenStory: (target) => {
+        if (
+          !isPageWorkspace &&
+          (target.kind === "header" || target.kind === "footer")
+        ) {
+          return;
+        }
         activeRuntime.openStory(target);
       },
       onDeleteSectionBreak: (sectionIndex) =>
@@ -4740,6 +4820,12 @@ function buildSuggestionCardModel(args: {
     canReject: canReviewSuggestion && capabilities.canRejectChange && focusedSuggestion.canReject,
     canEditSuggestion: canReviewSuggestion && focusedSuggestion.editable,
     canAddComment,
+    ...(focusedSuggestion.commentThreadIds
+      ? { commentThreadIds: focusedSuggestion.commentThreadIds }
+      : {}),
+    ...(focusedSuggestion.replyCount !== undefined
+      ? { replyCount: focusedSuggestion.replyCount }
+      : {}),
     ...(disabledReason ? { disabledReason } : {}),
   };
 }