@beyondwork/docx-react-component 1.0.22 → 1.0.24-rc

package/src/ui/editor-runtime-boundary.ts

@@ -718,7 +718,10 @@ function createLoadingRuntimeBridge(input: {
     subscribeToEvents: () => () => undefined,
     emitBlockedCommand: () => undefined,
     getRenderSnapshot: () => input.snapshot,
+    getCanonicalDocument: () => input.sessionState.canonicalDocument,
+    getSourcePackage: () => input.sessionState.sourcePackage,
     replaceText: () => undefined,
+    applyActiveStoryTextCommand: () => undefined,
     dispatch: () => undefined,
     undo: () => undefined,
     redo: () => undefined,
@@ -770,7 +773,7 @@ function createLoadingRuntimeBridge(input: {
     setWorkflowOverlay: () => undefined,
     clearWorkflowOverlay: () => undefined,
     getWorkflowScopeSnapshot: () => null,
-    getInteractionGuardSnapshot: () => ({ blockedReasons: [] }),
+    getInteractionGuardSnapshot: () => ({ effectiveMode: "edit", blockedReasons: [] }),
     getWorkflowMarkupSnapshot: () => ({
       totalCount: 0,
       items: [],
@@ -781,6 +784,12 @@ function createLoadingRuntimeBridge(input: {
       protectedRanges: [],
       opaqueFragments: [],
     }),
+    setHostAnnotationOverlay: () => undefined,
+    clearHostAnnotationOverlay: () => undefined,
+    getHostAnnotationSnapshot: () => ({
+      totalCount: 0,
+      annotations: [],
+    }),
     getWorkflowCandidateRanges: () => [],
     replaceWorkflowMarkupText: () => undefined,
   };

package/src/ui/editor-shell-view.tsx

@@ -7,6 +7,7 @@ import type {
   InteractionGuardSnapshot,
   RuntimeRenderSnapshot,
   StyleCatalogSnapshot,
+  WordReviewEditorChromeVisibility,
   WorkflowScopeSnapshot,
   WorkspaceMode,
   ZoomLevel,
@@ -16,6 +17,7 @@ import type { MarkupDisplay } from "./headless/comment-decoration-model.ts";
 import type {
   SelectionToolbarAnchor,
   SelectionToolbarModel,
+  SuggestionCardModel,
 } from "./headless/selection-toolbar-model.ts";
 import type { EditorCommandBag } from "./editor-command-bag.ts";
 import type { ReviewRailTab } from "../ui-tailwind/review/tw-review-rail.tsx";
@@ -56,17 +58,23 @@ export interface EditorShellViewProps {
   workflowScopeSnapshot?: WorkflowScopeSnapshot | null;
   interactionGuardSnapshot?: InteractionGuardSnapshot;
   selectionToolbar?: SelectionToolbarModel | null;
+  suggestionCard?: SuggestionCardModel | null;
   selectionToolbarAnchor?: SelectionToolbarAnchor | null;
   documentNavigation?: DocumentNavigationSnapshot;
   commands: EditorCommandBag;
   document: ReactNode;
   onAddCommentFromSelection?: () => void;
+  onAddCommentFromSuggestion?: () => void;
+  onAcceptSuggestion?: () => void;
+  onRejectSuggestion?: () => void;
+  onEditSuggestion?: () => void;
   onDismissSelectionToolbar?: () => void;
   onSelectionToolbarFocusCapture?: React.FocusEventHandler<HTMLDivElement>;
   onSelectionToolbarBlurCapture?: React.FocusEventHandler<HTMLDivElement>;
   selectionToolbarRef?: React.Ref<HTMLDivElement>;
   activeImageContext?: ActiveImageContext | null;
   activeObjectContext?: ActiveObjectContext | null;
+  chromeVisibility?: Partial<WordReviewEditorChromeVisibility>;
 }
 
 export function EditorShellView(props: EditorShellViewProps) {

package/src/ui/editor-surface-controller.tsx

@@ -27,6 +27,7 @@ export interface EditorSurfaceControllerProps {
   markupDisplay: MarkupDisplay;
   activeRevisionId?: string;
   showTrackedChanges?: boolean;
+  suggestionsEnabled?: boolean;
   mediaPreviews?: Record<string, MediaPreviewDescriptor>;
   isPageWorkspace?: boolean;
   onSelectionToolbarAnchorChange?: (anchor: SelectionToolbarAnchor | null) => void;
@@ -40,11 +41,16 @@ export interface EditorSurfaceControllerProps {
   onOutdentTab?: () => void;
   onInsertHardBreak?: () => void;
   onSplitParagraph?: () => void;
+  onUndo?: () => void;
+  onRedo?: () => void;
+  onBlockedInput?: (command: "paste" | "drop", message: string) => void;
   onCommentActivated?: (commentId: string) => void;
   onRevisionActivated?: (revisionId: string) => void;
   workflowScopes?: readonly WorkflowScope[];
   workflowCandidates?: readonly WorkflowCandidateRange[];
   workflowBlockedReasons?: readonly WorkflowBlockedCommandReason[];
+  activeWorkflowWorkItemId?: string | null;
+  activeWorkflowScopeIds?: readonly string[];
 }
 
 export const EditorSurfaceController = forwardRef<

package/src/ui/headless/selection-toolbar-model.ts

@@ -14,6 +14,18 @@ export interface SelectionToolbarModel {
   disabledReason?: string;
 }
 
+export interface SuggestionCardModel {
+  revisionId: string;
+  kindLabel: string;
+  previewText: string;
+  badges: SelectionToolbarBadge[];
+  canAccept: boolean;
+  canReject: boolean;
+  canEditSuggestion: boolean;
+  canAddComment: boolean;
+  disabledReason?: string;
+}
+
 export interface SelectionToolbarAnchor {
   left: number;
   right: number;

package/src/ui-tailwind/chrome/tw-suggestion-card.tsx

@@ -0,0 +1,139 @@
+import React from "react";
+import type { FocusEventHandler } from "react";
+import * as Tooltip from "@radix-ui/react-tooltip";
+import { Check, MessageSquare, Pencil, X } from "lucide-react";
+
+import type { SuggestionCardModel } from "../../ui/headless/selection-toolbar-model";
+import { preserveEditorSelectionMouseDown } from "../../ui/headless/preserve-editor-selection";
+
+export interface TwSuggestionCardProps {
+  model: SuggestionCardModel;
+  onFocusCapture?: FocusEventHandler<HTMLDivElement>;
+  onBlurCapture?: FocusEventHandler<HTMLDivElement>;
+  onAccept?: () => void;
+  onReject?: () => void;
+  onEditSuggestion?: () => void;
+  onAddComment?: () => void;
+}
+
+const focusRingClass =
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas";
+
+export function TwSuggestionCard(props: TwSuggestionCardProps) {
+  const contextLabel = summarizeSuggestionContext(props.model);
+  const commentDisabled = !props.model.canAddComment;
+  const tooltipLabel = commentDisabled
+    ? props.model.disabledReason ?? "Commenting is unavailable for this selection"
+    : "Comment on suggestion";
+
+  return (
+    <div
+      data-testid="suggestion-card"
+      className="inline-flex max-w-[min(28rem,calc(100vw-2rem))] flex-col gap-2 rounded-2xl border border-border/80 bg-canvas px-3 py-2 shadow-xl ring-1 ring-border/80"
+      onFocusCapture={props.onFocusCapture}
+      onBlurCapture={props.onBlurCapture}
+      role="group"
+      aria-label="Suggestion actions"
+    >
+      <div className="flex items-start justify-between gap-3">
+        <div className="min-w-0">
+          <div className="text-[11px] font-semibold uppercase tracking-[0.12em] text-warning">
+            {props.model.kindLabel}
+          </div>
+          <div className="mt-1 max-w-[16rem] truncate text-sm text-primary">
+            {props.model.previewText}
+          </div>
+        </div>
+        {contextLabel ? (
+          <div className="shrink-0 rounded-full bg-accent-soft px-2 py-0.5 text-[10px] font-medium uppercase tracking-[0.08em] text-accent">
+            {contextLabel}
+          </div>
+        ) : null}
+      </div>
+
+      <div className="flex flex-wrap items-center gap-1.5">
+        <SuggestionActionButton
+          icon={<Check className="h-3.5 w-3.5" />}
+          label="Accept suggestion"
+          disabled={!props.model.canAccept}
+          tone="accept"
+          onClick={props.onAccept}
+        />
+        <SuggestionActionButton
+          icon={<X className="h-3.5 w-3.5" />}
+          label="Reject suggestion"
+          disabled={!props.model.canReject}
+          tone="reject"
+          onClick={props.onReject}
+        />
+        <SuggestionActionButton
+          icon={<Pencil className="h-3.5 w-3.5" />}
+          label="Edit suggestion"
+          disabled={!props.model.canEditSuggestion}
+          tone="neutral"
+          onClick={props.onEditSuggestion}
+        />
+        <Tooltip.Root>
+          <Tooltip.Trigger asChild>
+            <button
+              type="button"
+              aria-label="Comment on suggestion"
+              disabled={commentDisabled}
+              onMouseDown={preserveEditorSelectionMouseDown}
+              onClick={props.onAddComment}
+              className={`inline-flex h-8 items-center gap-1 rounded-lg border border-border px-2.5 text-xs font-medium text-secondary transition-colors hover:bg-surface disabled:cursor-not-allowed disabled:opacity-40 ${focusRingClass}`}
+            >
+              <MessageSquare className="h-3.5 w-3.5" />
+              Comment
+            </button>
+          </Tooltip.Trigger>
+          <Tooltip.Portal>
+            <Tooltip.Content
+              className="rounded-md bg-primary px-2 py-1 text-xs text-white shadow-md z-50"
+              sideOffset={6}
+            >
+              {tooltipLabel}
+            </Tooltip.Content>
+          </Tooltip.Portal>
+        </Tooltip.Root>
+      </div>
+    </div>
+  );
+}
+
+function summarizeSuggestionContext(model: SuggestionCardModel): string | null {
+  const labels = model.badges.map((badge) => badge.label.trim()).filter(Boolean);
+  if (labels.length === 0) {
+    return null;
+  }
+  const summary = labels.slice(0, 2).join(" · ");
+  return summary.length > 36 ? `${summary.slice(0, 33)}...` : summary;
+}
+
+function SuggestionActionButton(props: {
+  icon: React.ReactNode;
+  label: string;
+  disabled: boolean;
+  tone: "accept" | "reject" | "neutral";
+  onClick?: () => void;
+}) {
+  const toneClass = props.tone === "accept"
+    ? "border-emerald-500/30 bg-emerald-500/10 text-emerald-700 hover:bg-emerald-500/15 dark:text-emerald-300"
+    : props.tone === "reject"
+      ? "border-rose-500/30 bg-rose-500/10 text-rose-700 hover:bg-rose-500/15 dark:text-rose-300"
+      : "border-border text-secondary hover:bg-surface";
+
+  return (
+    <button
+      type="button"
+      aria-label={props.label}
+      disabled={props.disabled}
+      onMouseDown={preserveEditorSelectionMouseDown}
+      onClick={props.onClick}
+      className={`inline-flex h-8 items-center gap-1 rounded-lg border px-2.5 text-xs font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-40 ${toneClass} ${focusRingClass}`}
+    >
+      {props.icon}
+      {props.label.replace(" suggestion", "").replace(" on suggestion", "")}
+    </button>
+  );
+}

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

@@ -19,6 +19,7 @@ export interface CommandBridgeCallbacks {
   onOutdentTab?: () => void;
   onUndo: () => void;
   onRedo: () => void;
+  onBlockedInput?: (command: "paste" | "drop", message: string) => void;
   onSelectionChange: (selection: SelectionSnapshot) => void;
   getPositionMap: () => PositionMap | null;
   isSelectionSyncSuppressed?: () => boolean;
@@ -100,17 +101,22 @@ export function createCommandBridgePlugins(
         },
       },
       handleTextInput(_view, _from, _to, text) {
+        if (isComposing) {
+          return true;
+        }
         callbacks.onInsertText(text);
         return true; // Block PM from processing
       },
 
       // Block paste (rich paste is not safe, plain paste via text.insert is TODO)
       handlePaste() {
+        callbacks.onBlockedInput?.("paste", "Paste is not supported in the mounted editor yet.");
         return true; // Block
       },
 
       // Block drop
       handleDrop() {
+        callbacks.onBlockedInput?.("drop", "Drag and drop is not supported in the mounted editor.");
         return true; // Block
       },
     },

package/src/ui-tailwind/editor-surface/pm-decorations.ts

@@ -21,18 +21,28 @@ type RailDecorationSpec = {
   attrs: Record<string, string>;
 };
 
-function getWorkflowInlineClass(scope: WorkflowScope): string {
-  if (scope.mode === "edit") return "wre-workflow-inline wre-workflow-inline-edit";
-  if (scope.mode === "suggest") return "wre-workflow-inline wre-workflow-inline-suggest";
-  if (scope.mode === "comment") return "wre-workflow-inline wre-workflow-inline-comment";
-  return "wre-workflow-inline wre-workflow-inline-view";
+function getWorkflowInlineClass(scope: WorkflowScope, isActiveWorkItem: boolean): string {
+  const base =
+    scope.mode === "edit"
+      ? "wre-workflow-inline wre-workflow-inline-edit"
+      : scope.mode === "suggest"
+        ? "wre-workflow-inline wre-workflow-inline-suggest"
+        : scope.mode === "comment"
+          ? "wre-workflow-inline wre-workflow-inline-comment"
+          : "wre-workflow-inline wre-workflow-inline-view";
+  return isActiveWorkItem ? `${base} wre-workflow-inline-active` : base;
 }
 
-function getWorkflowRailClass(scope: WorkflowScope): string {
-  if (scope.mode === "edit") return "wre-workflow-rail wre-workflow-rail-edit";
-  if (scope.mode === "suggest") return "wre-workflow-rail wre-workflow-rail-suggest";
-  if (scope.mode === "comment") return "wre-workflow-rail wre-workflow-rail-comment";
-  return "wre-workflow-rail wre-workflow-rail-view";
+function getWorkflowRailClass(scope: WorkflowScope, isActiveWorkItem: boolean): string {
+  const base =
+    scope.mode === "edit"
+      ? "wre-workflow-rail wre-workflow-rail-edit"
+      : scope.mode === "suggest"
+        ? "wre-workflow-rail wre-workflow-rail-suggest"
+        : scope.mode === "comment"
+          ? "wre-workflow-rail wre-workflow-rail-comment"
+          : "wre-workflow-rail wre-workflow-rail-view";
+  return isActiveWorkItem ? `${base} wre-workflow-rail-active` : base;
 }
 
 function getWorkflowCandidateInlineClass(): string {
@@ -142,8 +152,14 @@ function pushRailDecorations(
   from: number,
   to: number,
   spec: RailDecorationSpec,
+  rangeCache: Map<string, Array<{ from: number; to: number }>>,
 ): void {
-  for (const range of collectRailRanges(doc, from, to)) {
+  const cacheKey = `${from}:${to}`;
+  const ranges = rangeCache.get(cacheKey) ?? collectRailRanges(doc, from, to);
+  if (!rangeCache.has(cacheKey)) {
+    rangeCache.set(cacheKey, ranges);
+  }
+  for (const range of ranges) {
     decorations.push(
       Decoration.node(range.from, range.to, {
         class: spec.className,
@@ -172,8 +188,15 @@ export function buildDecorations(
   activeStory: EditorStoryTarget = MAIN_STORY_TARGET,
   workflowCandidates?: readonly WorkflowCandidateRange[],
   workflowBlockedReasons?: readonly WorkflowBlockedCommandReason[],
+  activeWorkflowWorkItemId?: string | null,
+  activeWorkflowScopeIds?: readonly string[],
+  suggestionsEnabled = false,
 ): DecorationSet {
   const decorations: Decoration[] = [];
+  const railRangeCache = new Map<string, Array<{ from: number; to: number }>>();
+  const activeScopeIds = new Set(activeWorkflowScopeIds ?? []);
+  // In suggestions mode, tracked changes are always shown regardless of the toggle.
+  const effectiveShowTracked = suggestionsEnabled ? true : showTrackedChanges;
 
   // Walk comment threads and create inline decorations
   if (commentModel) {
@@ -207,7 +230,7 @@ export function buildDecorations(
       // Always hide deletions in clean mode (final-text semantics).
       // This is the critical behavior: "hide tracked changes" must show
       // the document as if accepted, not show deleted text as kept text.
-      if (markupDisplay === "clean" && rev.kind === "deletion") {
+      if (markupDisplay === "clean" && rev.kind === "deletion" && !suggestionsEnabled) {
         const pmFrom = positionMap.runtimeToPm(rev.from);
         const pmTo = positionMap.runtimeToPm(rev.to);
         if (pmFrom < pmTo) {
@@ -222,7 +245,48 @@ export function buildDecorations(
       }
 
       // Skip visual styling when tracked changes display is off
-      if (!showTrackedChanges) continue;
+      if (!effectiveShowTracked) continue;
+
+      const pmFrom = positionMap.runtimeToPm(rev.from);
+      const pmTo = positionMap.runtimeToPm(rev.to);
+      if (pmFrom >= pmTo) continue;
+
+      if (suggestionsEnabled) {
+        if (rev.kind === "insertion") {
+          decorations.push(
+            Decoration.inline(pmFrom, pmTo, {
+              class: "text-insert",
+              "data-revision-id": rev.revisionId,
+            }),
+          );
+          decorations.push(
+            Decoration.widget(pmFrom, () => {
+              const el = document.createElement("span");
+              el.textContent = "[";
+              el.className = "text-insert";
+              el.setAttribute("contenteditable", "false");
+              return el;
+            }, { side: -1, key: `${rev.revisionId}-open` }),
+          );
+          decorations.push(
+            Decoration.widget(pmTo, () => {
+              const el = document.createElement("span");
+              el.textContent = "]";
+              el.className = "text-insert";
+              el.setAttribute("contenteditable", "false");
+              return el;
+            }, { side: 1, key: `${rev.revisionId}-close` }),
+          );
+        } else if (rev.kind === "deletion") {
+          decorations.push(
+            Decoration.inline(pmFrom, pmTo, {
+              class: "text-danger line-through decoration-danger/80 decoration-1",
+              "data-revision-id": rev.revisionId,
+            }),
+          );
+        }
+        continue;
+      }
 
       const cls = getRevisionHighlightClass(
         revisionModel,
@@ -232,16 +296,12 @@ export function buildDecorations(
       );
       if (!cls) continue;
 
-      const pmFrom = positionMap.runtimeToPm(rev.from);
-      const pmTo = positionMap.runtimeToPm(rev.to);
-      if (pmFrom < pmTo) {
-        decorations.push(
-          Decoration.inline(pmFrom, pmTo, {
-            class: cls,
-            "data-revision-id": rev.revisionId,
-          }),
-        );
-      }
+      decorations.push(
+        Decoration.inline(pmFrom, pmTo, {
+          class: cls,
+          "data-revision-id": rev.revisionId,
+        }),
+      );
     }
   }
 
@@ -251,25 +311,33 @@ export function buildDecorations(
       if (!storyTargetsEqual(scopeStoryTarget, activeStory)) continue;
       const pmRange = buildAnchorPmRange(scope.anchor, positionMap);
       if (!pmRange) continue;
+      const isActiveWorkItem =
+        Boolean(activeWorkflowWorkItemId) &&
+        (
+          scope.workItemId === activeWorkflowWorkItemId ||
+          activeScopeIds.has(scope.scopeId)
+        );
 
       if (pmRange.allowInline && pmRange.from < pmRange.to) {
         decorations.push(
           Decoration.inline(pmRange.from, pmRange.to, {
-            class: getWorkflowInlineClass(scope),
+            class: getWorkflowInlineClass(scope, isActiveWorkItem),
             "data-workflow-scope-id": scope.scopeId,
             "data-workflow-scope-mode": scope.mode,
+            "data-workflow-active": isActiveWorkItem ? "true" : "false",
           }),
         );
       }
 
       pushRailDecorations(decorations, doc, pmRange.from, pmRange.to, {
         railKind: "scope",
-        className: getWorkflowRailClass(scope),
+        className: getWorkflowRailClass(scope, isActiveWorkItem),
         attrs: {
           "data-workflow-scope-id": scope.scopeId,
           "data-workflow-scope-mode": scope.mode,
+          "data-workflow-active": isActiveWorkItem ? "true" : "false",
         },
-      });
+      }, railRangeCache);
     }
   }
 
@@ -295,7 +363,7 @@ export function buildDecorations(
         attrs: {
           "data-workflow-candidate-id": candidate.candidateId,
         },
-      });
+      }, railRangeCache);
     }
   }
 
@@ -327,7 +395,7 @@ export function buildDecorations(
         attrs: {
           "data-workflow-blocked-code": reason.code,
         },
-      });
+      }, railRangeCache);
     }
   }
 

package/src/ui-tailwind/editor-surface/pm-state-from-snapshot.ts

@@ -383,6 +383,8 @@ function buildTable(
     }
     rows.push(editorSchema.nodes.table_row.create(
       {
+        gridBefore: row.gridBefore ?? 0,
+        gridAfter: row.gridAfter ?? 0,
         height: row.height ?? null,
         heightRule: row.heightRule ?? null,
         isHeader: row.isHeader ?? false,

package/src/ui-tailwind/editor-surface/surface-build-keys.ts

@@ -41,6 +41,9 @@ export function createSurfaceDecorationKey(input: {
   workflowScopeSignature?: string;
   workflowCandidateSignature?: string;
   workflowBlockedSignature?: string;
+  activeWorkflowWorkItemId?: string | null;
+  activeWorkflowScopeIds?: readonly string[];
+  suggestionsEnabled?: boolean;
 }): string {
   return JSON.stringify({
     markupDisplay: input.markupDisplay,
@@ -51,5 +54,8 @@ export function createSurfaceDecorationKey(input: {
     workflowScopeSignature: input.workflowScopeSignature ?? null,
     workflowCandidateSignature: input.workflowCandidateSignature ?? null,
     workflowBlockedSignature: input.workflowBlockedSignature ?? null,
+    activeWorkflowWorkItemId: input.activeWorkflowWorkItemId ?? null,
+    activeWorkflowScopeIds: input.activeWorkflowScopeIds ?? [],
+    suggestionsEnabled: input.suggestionsEnabled ?? false,
   });
 }