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

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

@@ -75,6 +75,7 @@ export interface TwProseMirrorSurfaceProps {
   markupDisplay: MarkupDisplay;
   activeRevisionId?: string;
   showTrackedChanges?: boolean;
+  suggestionsEnabled?: boolean;
   /** When true, the surface renders inside the page workspace (vs canvas). */
   isPageWorkspace?: boolean;
   onFocus: FocusEventHandler<HTMLDivElement>;
@@ -87,6 +88,9 @@ export interface TwProseMirrorSurfaceProps {
   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;
   onSelectionToolbarAnchorChange?: (anchor: SelectionToolbarAnchor | null) => void;
@@ -94,6 +98,8 @@ export interface TwProseMirrorSurfaceProps {
   workflowScopes?: readonly WorkflowScope[];
   workflowCandidates?: readonly WorkflowCandidateRange[];
   workflowBlockedReasons?: readonly WorkflowBlockedCommandReason[];
+  activeWorkflowWorkItemId?: string | null;
+  activeWorkflowScopeIds?: readonly string[];
 }
 
 export interface TwProseMirrorSurfaceRef {
@@ -161,8 +167,11 @@ export const TwProseMirrorSurface = forwardRef<
     onInsertHardBreak: () => props.onInsertHardBreak?.(),
     onInsertTab: () => props.onInsertTab?.(),
     onOutdentTab: () => props.onOutdentTab?.(),
-    onUndo: () => {}, // Handled by toolbar, not PM
-    onRedo: () => {}, // Handled by toolbar, not PM
+    onUndo: () => props.onUndo?.(),
+    onRedo: () => props.onRedo?.(),
+    onBlockedInput: (command, message) => {
+      props.onBlockedInput?.(command, message);
+    },
     onSelectionChange: (sel) => {
       pendingSelectionProbeRef.current = startPerfProbe("selection");
       props.onSelectionChange?.(
@@ -196,6 +205,7 @@ export const TwProseMirrorSurface = forwardRef<
       }),
     [mediaPreviewKey, snapshot.activeStory, surface],
   );
+  const suggestionsEnabled = props.suggestionsEnabled === true;
   const decorationBuildKey = useMemo(
     () =>
       createSurfaceDecorationKey({
@@ -204,9 +214,12 @@ export const TwProseMirrorSurface = forwardRef<
         canEdit,
         activeCommentId: snapshot.comments.activeCommentId,
         activeRevisionId: props.activeRevisionId,
-        workflowScopeSignature: JSON.stringify(props.workflowScopes ?? []),
-        workflowCandidateSignature: JSON.stringify(props.workflowCandidates ?? []),
-        workflowBlockedSignature: JSON.stringify(props.workflowBlockedReasons ?? []),
+        workflowScopeSignature: createWorkflowScopeSignature(props.workflowScopes),
+        workflowCandidateSignature: createWorkflowCandidateSignature(props.workflowCandidates),
+        workflowBlockedSignature: createWorkflowBlockedSignature(props.workflowBlockedReasons),
+        activeWorkflowWorkItemId: props.activeWorkflowWorkItemId ?? null,
+        activeWorkflowScopeIds: props.activeWorkflowScopeIds ?? [],
+        suggestionsEnabled,
       }),
     [
       canEdit,
@@ -214,9 +227,12 @@ export const TwProseMirrorSurface = forwardRef<
       props.activeRevisionId,
       props.workflowCandidates,
       props.workflowBlockedReasons,
+      props.activeWorkflowWorkItemId,
+      props.activeWorkflowScopeIds,
       props.workflowScopes,
       showTrackedChanges,
       snapshot.comments.activeCommentId,
+      suggestionsEnabled,
     ],
   );
 
@@ -233,6 +249,7 @@ export const TwProseMirrorSurface = forwardRef<
         onOutdentTab: () => callbacksRef.current?.onOutdentTab?.(),
         onUndo: () => callbacksRef.current?.onUndo(),
         onRedo: () => callbacksRef.current?.onRedo(),
+        onBlockedInput: (command, message) => callbacksRef.current?.onBlockedInput?.(command, message),
         onSelectionChange: (sel) => callbacksRef.current?.onSelectionChange(sel),
         getPositionMap: () => callbacksRef.current?.getPositionMap() ?? null,
         isSelectionSyncSuppressed: () =>
@@ -259,6 +276,9 @@ export const TwProseMirrorSurface = forwardRef<
         snapshot.activeStory,
         props.workflowCandidates,
         props.workflowBlockedReasons,
+        props.activeWorkflowWorkItemId,
+        props.activeWorkflowScopeIds,
+        suggestionsEnabled,
       );
       view.setProps({
         editable: () => canEdit,
@@ -273,13 +293,13 @@ export const TwProseMirrorSurface = forwardRef<
       commentModel,
       decorationBuildKey,
       markupDisplay,
-      revisionModel,
-      showTrackedChanges,
+      props.activeWorkflowScopeIds,
+      props.activeWorkflowWorkItemId,
       props.workflowBlockedReasons,
       props.workflowCandidates,
       props.workflowScopes,
-      props.workflowCandidates,
-      props.workflowBlockedReasons,
+      revisionModel,
+      showTrackedChanges,
     ],
   );
 
@@ -309,6 +329,8 @@ export const TwProseMirrorSurface = forwardRef<
       snapshot.activeStory,
       props.workflowCandidates,
       props.workflowBlockedReasons,
+      props.activeWorkflowWorkItemId,
+      props.activeWorkflowScopeIds,
     );
     recordPerfSample("pm.rebuild");
     incrementInvalidationCounter("pm.laneA.rebuilds");
@@ -371,6 +393,20 @@ export const TwProseMirrorSurface = forwardRef<
     applyDecorationProps(view, positionMap);
   }, [applyDecorationProps, decorationBuildKey, surface]);
 
+  useEffect(() => {
+    if (!activeSearchRef.current || !surface) {
+      return;
+    }
+    applySearch(activeSearchRef.current.query, activeSearchRef.current.options);
+  }, [
+    markupDisplay,
+    props.canonicalDocument,
+    props.documentNavigation,
+    snapshot.activeStory,
+    snapshot.trackedChanges,
+    surface,
+  ]);
+
   useEffect(() => {
     const view = viewRef.current;
     const positionMap = positionMapRef.current;
@@ -442,7 +478,15 @@ export const TwProseMirrorSurface = forwardRef<
         return getTableSelectionDescriptor(view.state);
       },
     }),
-    [snapshot.selection, snapshot.surface],
+    [
+      markupDisplay,
+      props.canonicalDocument,
+      props.documentNavigation,
+      snapshot.activeStory,
+      snapshot.selection,
+      snapshot.surface,
+      snapshot.trackedChanges,
+    ],
   );
 
   function applySearch(query: string, options: SearchOptions): SearchResultSnapshot[] {
@@ -788,6 +832,84 @@ export const TwProseMirrorSurface = forwardRef<
   }
 });
 
+function createWorkflowScopeSignature(scopes: readonly WorkflowScope[] | undefined): string {
+  if (!scopes || scopes.length === 0) {
+    return "";
+  }
+  return scopes.map((scope) =>
+    [
+      scope.scopeId,
+      scope.mode,
+      scope.workItemId ?? "",
+      serializeAnchorSignature(scope.anchor),
+      serializeStoryTargetSignature(scope.storyTarget),
+    ].join(":")
+  ).join("|");
+}
+
+function createWorkflowCandidateSignature(
+  candidates: readonly WorkflowCandidateRange[] | undefined,
+): string {
+  if (!candidates || candidates.length === 0) {
+    return "";
+  }
+  return candidates.map((candidate) =>
+    [
+      candidate.candidateId,
+      serializeAnchorSignature(candidate.anchor),
+      serializeStoryTargetSignature(candidate.storyTarget),
+      candidate.source ?? "",
+    ].join(":")
+  ).join("|");
+}
+
+function createWorkflowBlockedSignature(
+  blockedReasons: readonly WorkflowBlockedCommandReason[] | undefined,
+): string {
+  if (!blockedReasons || blockedReasons.length === 0) {
+    return "";
+  }
+  return blockedReasons.map((reason) =>
+    [
+      reason.code,
+      reason.scopeId ?? "",
+      reason.workItemId ?? "",
+      serializeAnchorSignature(reason.anchor),
+      serializeStoryTargetSignature(reason.storyTarget),
+    ].join(":")
+  ).join("|");
+}
+
+function serializeAnchorSignature(anchor: WorkflowScope["anchor"] | WorkflowCandidateRange["anchor"] | WorkflowBlockedCommandReason["anchor"] | undefined): string {
+  if (!anchor) {
+    return "";
+  }
+  switch (anchor.kind) {
+    case "range":
+      return `range:${anchor.from}:${anchor.to}:${anchor.assoc.start}:${anchor.assoc.end}`;
+    case "node":
+      return `node:${anchor.at}:${anchor.assoc}`;
+    case "detached":
+      return `detached:${anchor.lastKnownRange.from}:${anchor.lastKnownRange.to}:${anchor.reason}`;
+  }
+}
+
+function serializeStoryTargetSignature(storyTarget: WorkflowScope["storyTarget"] | WorkflowCandidateRange["storyTarget"] | WorkflowBlockedCommandReason["storyTarget"]): string {
+  if (!storyTarget) {
+    return "";
+  }
+  switch (storyTarget.kind) {
+    case "main":
+      return "main";
+    case "header":
+    case "footer":
+      return `${storyTarget.kind}:${storyTarget.relationshipId}:${storyTarget.variant}:${storyTarget.sectionIndex ?? ""}`;
+    case "footnote":
+    case "endnote":
+      return `${storyTarget.kind}:${storyTarget.noteId}`;
+  }
+}
+
 function buildSelectionToolbarMeasurementKey(
   selection: SelectionSnapshot,
   activeStory: RuntimeRenderSnapshot["activeStory"],

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

@@ -33,6 +33,58 @@ interface OpenExplicitRowSpan {
   remainingRows: number;
 }
 
+function readRowPadding(node: PMNode, side: "gridBefore" | "gridAfter"): number {
+  const value = node.attrs[side];
+  return typeof value === "number" && value > 0 ? value : 0;
+}
+
+function sumGridColumns(
+  gridColumns: readonly number[],
+  start: number,
+  count: number,
+): number {
+  let total = 0;
+  for (let index = start; index < start + count; index += 1) {
+    total += gridColumns[index] ?? 0;
+  }
+  return total;
+}
+
+function removePaddingCells(rowElement: HTMLTableRowElement): void {
+  for (const cell of Array.from(rowElement.cells)) {
+    if (cell.hasAttribute("data-row-padding")) {
+      cell.remove();
+    }
+  }
+}
+
+function createPaddingCell(colSpan: number, widthTwips: number): HTMLTableCellElement {
+  const cell = document.createElement("td");
+  cell.setAttribute("data-row-padding", "true");
+  cell.setAttribute("aria-hidden", "true");
+  cell.colSpan = Math.max(1, colSpan);
+  cell.style.border = "none";
+  cell.style.padding = "0";
+  cell.style.background = "transparent";
+  if (widthTwips > 0) {
+    cell.style.width = `${widthTwips / 20}pt`;
+  }
+  return cell;
+}
+
+function nodesAreOnlyRowPadding(nodes: ArrayLike<Node> & { item?(index: number): Node | null }): boolean {
+  for (let index = 0; index < nodes.length; index += 1) {
+    const node = nodes.item ? nodes.item(index) : nodes[index];
+    if (!node) {
+      continue;
+    }
+    if (!(node instanceof HTMLElement) || !node.hasAttribute("data-row-padding")) {
+      return false;
+    }
+  }
+  return true;
+}
+
 function resolveRenderedColspan(node: PMNode): number {
   const colspan = node.attrs.colspan as number | undefined;
   if (typeof colspan === "number" && colspan > 1) {
@@ -172,6 +224,7 @@ function computeTableLayout(tableNode: PMNode): TableCellLayout[][] {
 function syncRenderedTableLayout(tableBody: HTMLTableSectionElement, tableNode: PMNode): void {
   const rowLayouts = computeTableLayout(tableNode);
   const rowElements = Array.from(tableBody.rows);
+  const gridColumns = Array.isArray(tableNode.attrs.gridColumns) ? tableNode.attrs.gridColumns as number[] : [];
 
   for (let rowIndex = 0; rowIndex < rowLayouts.length; rowIndex += 1) {
     const rowLayout = rowLayouts[rowIndex];
@@ -180,6 +233,7 @@ function syncRenderedTableLayout(tableBody: HTMLTableSectionElement, tableNode:
       continue;
     }
 
+    removePaddingCells(rowElement);
     const cellElements = Array.from(rowElement.cells);
     for (const cellLayout of rowLayout) {
       const element = cellElements[cellLayout.cellIndex];
@@ -199,6 +253,22 @@ function syncRenderedTableLayout(tableBody: HTMLTableSectionElement, tableNode:
         element.removeAttribute("data-vertical-merge-hidden");
       }
     }
+
+    const rowNode = tableNode.child(rowIndex);
+    const gridBefore = readRowPadding(rowNode, "gridBefore");
+    const gridAfter = readRowPadding(rowNode, "gridAfter");
+    if (gridBefore > 0) {
+      rowElement.insertBefore(
+        createPaddingCell(gridBefore, sumGridColumns(gridColumns, 0, gridBefore)),
+        rowElement.firstChild,
+      );
+    }
+    if (gridAfter > 0) {
+      const start = Math.max(0, gridColumns.length - gridAfter);
+      rowElement.appendChild(
+        createPaddingCell(gridAfter, sumGridColumns(gridColumns, start, gridAfter)),
+      );
+    }
   }
 }
 
@@ -253,7 +323,18 @@ export class TableNodeView {
   }
 
   ignoreMutation(record: ViewMutationRecord): boolean {
-    return record.type === "attributes" && record.target === this.dom;
+    if (record.type === "attributes") {
+      return record.target === this.dom
+        || (record.target instanceof HTMLElement && record.target.hasAttribute("data-row-padding"));
+    }
+    if (record.type === "childList" && this.dom.contains(record.target)) {
+      const addedNodes = record.addedNodes as ArrayLike<Node> & { item?(index: number): Node | null };
+      const removedNodes = record.removedNodes as ArrayLike<Node> & { item?(index: number): Node | null };
+      const addedOkay = (addedNodes?.length ?? 0) === 0 || nodesAreOnlyRowPadding(addedNodes);
+      const removedOkay = (removedNodes?.length ?? 0) === 0 || nodesAreOnlyRowPadding(removedNodes);
+      return addedOkay && removedOkay;
+    }
+    return false;
   }
 
   private scheduleLayoutSync(): void {

package/src/ui-tailwind/status/tw-status-bar.tsx

@@ -22,7 +22,10 @@ export function TwStatusBar(props: TwStatusBarProps) {
       : "Ready";
 
   return (
-    <footer className="flex h-7 shrink-0 items-center gap-4 border-t border-border px-3 text-xs text-tertiary">
+    <footer
+      data-testid="status-bar"
+      className="flex h-7 shrink-0 items-center gap-4 border-t border-border px-3 text-xs text-tertiary"
+    >
       <span className="flex items-center gap-1.5">
         <span
           className={`inline-block h-1.5 w-1.5 rounded-full ${

package/src/ui-tailwind/theme/editor-theme.css

@@ -323,6 +323,16 @@
   background: var(--wre-workflow-rail-color, var(--color-border-strong));
 }
 
+.prosemirror-surface .ProseMirror .wre-workflow-rail-active::before {
+  width: 0.3125rem;
+  opacity: 1;
+  box-shadow: 0 0 0 1px color-mix(in oklab, var(--wre-workflow-rail-color, var(--color-border-strong)) 30%, transparent);
+}
+
+.prosemirror-surface .ProseMirror .wre-workflow-inline-active {
+  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--wre-workflow-rail-color, var(--color-border-strong)) 28%, transparent);
+}
+
 .prosemirror-surface .ProseMirror .wre-workflow-rail-edit {
   --wre-workflow-rail-color: var(--color-accent);
   background: color-mix(in srgb, var(--color-accent) 7%, transparent);

package/src/ui-tailwind/toolbar/tw-toolbar.tsx

@@ -62,6 +62,7 @@ export interface TwToolbarProps {
   compatibility?: CompatibilityPanelSnapshot;
   warnings?: EditorWarning[];
   blockedReasons?: WorkflowBlockedCommandReason[];
+  interactionPolicy?: ToolbarInteractionPolicy;
   workspaceMode: WorkspaceMode;
   zoomLevel?: ZoomLevel;
   formattingState?: FormattingStateSnapshot;
@@ -99,6 +100,13 @@ export interface TwToolbarProps {
   onShowTrackedChangesChange: (show: boolean) => void;
 }
 
+export interface ToolbarInteractionPolicy {
+  mode: "edit" | "suggest" | "comment" | "view" | "blocked";
+  canFormatText: boolean;
+  canInsertStructural: boolean;
+  canAddComment: boolean;
+}
+
 export function getSupportedZoomPresets(): ReadonlyArray<number> {
   return [75, 100, 125, 150];
 }
@@ -123,7 +131,9 @@ export function TwToolbar(props: TwToolbarProps) {
   const isPageMode = workspaceMode === "page";
   const paragraphStyles = props.styleCatalog?.paragraphs ?? [];
   const zoomLevel = props.zoomLevel ?? 100;
-  const canEdit = caps ? caps.canEdit : false;
+  const canEdit = props.interactionPolicy?.canFormatText ?? (caps ? caps.canEdit : false);
+  const canInsertStructural = props.interactionPolicy?.canInsertStructural ?? canEdit;
+  const canAddComment = props.interactionPolicy?.canAddComment ?? (caps ? caps.canAddComment : false);
   const zoomLabel =
     typeof zoomLevel === "number"
       ? `${zoomLevel}%`
@@ -173,14 +183,14 @@ export function TwToolbar(props: TwToolbarProps) {
           icon={Bold}
           label="Bold"
           active={props.formattingState?.bold ?? false}
-          disabled={caps ? !caps.canEdit : true}
+          disabled={!canEdit}
           onClick={props.onToggleBold}
         />
         <TwToolbarIconButton
           icon={Italic}
           label="Italic"
           active={props.formattingState?.italic ?? false}
-          disabled={caps ? !caps.canEdit : true}
+          disabled={!canEdit}
           onClick={props.onToggleItalic}
         />
         <TwToolbarIconButton
@@ -238,7 +248,7 @@ export function TwToolbar(props: TwToolbarProps) {
           onClick={props.onIndent}
         />
         <ToolbarInsertMenu
-          disabled={!canEdit}
+          disabled={!canInsertStructural}
           onInsertImage={props.onInsertImage}
           onInsertPageBreak={props.onInsertPageBreak}
           onInsertSectionBreak={props.onInsertSectionBreak}
@@ -275,7 +285,7 @@ export function TwToolbar(props: TwToolbarProps) {
         <TwToolbarIconButton
           icon={MessageSquare}
           label="Add comment"
-          disabled={caps ? !caps.canAddComment : true}
+          disabled={!canAddComment}
           emphasis
           onClick={props.onAddComment}
         />
@@ -554,6 +564,8 @@ function ToolbarParagraphStyleSelect(props: {
     >
       <Select.Trigger
         aria-label="Paragraph style"
+        aria-disabled={props.disabled || undefined}
+        data-disabled={props.disabled ? "" : undefined}
         onMouseDown={preserveEditorSelectionMouseDown}
         className={`inline-flex h-7 min-w-[8.5rem] items-center justify-between gap-2 rounded-md border border-border bg-canvas px-2.5 text-xs font-medium text-primary transition-colors hover:bg-surface outline-none disabled:cursor-not-allowed disabled:opacity-40 ${focusRingClass}`}
       >
@@ -601,6 +613,8 @@ function ToolbarFontFamilySelect(props: {
     >
       <Select.Trigger
         aria-label="Font family"
+        aria-disabled={props.disabled || undefined}
+        data-disabled={props.disabled ? "" : undefined}
         onMouseDown={preserveEditorSelectionMouseDown}
         className={`inline-flex h-7 min-w-[7rem] items-center justify-between gap-2 rounded-md border border-border bg-canvas px-2 text-xs font-medium text-primary transition-colors hover:bg-surface outline-none disabled:cursor-not-allowed disabled:opacity-40 ${focusRingClass}`}
       >
@@ -649,6 +663,8 @@ function ToolbarFontSizeSelect(props: {
     >
       <Select.Trigger
         aria-label="Font size"
+        aria-disabled={props.disabled || undefined}
+        data-disabled={props.disabled ? "" : undefined}
         onMouseDown={preserveEditorSelectionMouseDown}
         className={`inline-flex h-7 min-w-[4rem] items-center justify-between gap-2 rounded-md border border-border bg-canvas px-2 text-xs font-medium text-primary transition-colors hover:bg-surface outline-none disabled:cursor-not-allowed disabled:opacity-40 ${focusRingClass}`}
       >