@beyondwork/docx-react-component 1.0.28 → 1.0.30

package/src/ui-tailwind/chrome/tw-table-context-toolbar.tsx

@@ -1,10 +1,15 @@
 import React from "react";
 
-import type { StyleCatalogSnapshot } from "../../api/public-types";
+import type {
+  StyleCatalogSnapshot,
+  TableOperationCapabilitySnapshot,
+  TableStructureContextSnapshot,
+} from "../../api/public-types";
 import { preserveEditorSelectionMouseDown } from "../../ui/headless/preserve-editor-selection";
 
 export interface TwTableContextToolbarProps {
   disabled: boolean;
+  tableContext: TableStructureContextSnapshot | null;
   tableStyles: StyleCatalogSnapshot["tables"];
   onSetTableStyle?: (styleId: string) => void;
   onAddRowBefore?: () => void;
@@ -38,13 +43,25 @@ export function TwTableContextToolbar(props: TwTableContextToolbarProps) {
         Table
       </span>
 
+      {props.tableContext?.currentCell.isHeader ? (
+        <span className="rounded bg-accent-soft px-2 py-1 text-[10px] font-medium text-accent">
+          Header row
+        </span>
+      ) : null}
+
       <select
         aria-label="Table style"
         className="h-8 rounded-md border border-border bg-canvas px-2 text-xs text-primary disabled:opacity-40"
-        disabled={props.disabled || props.tableStyles.length === 0 || !props.onSetTableStyle}
+        disabled={
+          props.disabled ||
+          props.tableStyles.length === 0 ||
+          !props.onSetTableStyle ||
+          !props.tableContext?.operations.setTableStyle.enabled
+        }
         onMouseDown={preserveEditorSelectionMouseDown}
         onChange={(event) => props.onSetTableStyle?.(event.target.value)}
-        defaultValue=""
+        value={props.tableContext?.currentStyleId ?? ""}
+        title={props.tableContext?.operations.setTableStyle.reason}
       >
         <option value="" disabled>Table style</option>
         {props.tableStyles.map((style) => (
@@ -54,28 +71,68 @@ export function TwTableContextToolbar(props: TwTableContextToolbarProps) {
         ))}
       </select>
 
-      <ToolbarButton ariaLabel="Add row above" disabled={props.disabled} onClick={props.onAddRowBefore}>
+      <ToolbarButton
+        ariaLabel="Add row above"
+        capability={props.tableContext?.operations.addRowBefore}
+        disabled={props.disabled}
+        onClick={props.onAddRowBefore}
+      >
         Row above
       </ToolbarButton>
-      <ToolbarButton ariaLabel="Add row below" disabled={props.disabled} onClick={props.onAddRowAfter}>
+      <ToolbarButton
+        ariaLabel="Add row below"
+        capability={props.tableContext?.operations.addRowAfter}
+        disabled={props.disabled}
+        onClick={props.onAddRowAfter}
+      >
         Row below
       </ToolbarButton>
-      <ToolbarButton ariaLabel="Delete row" disabled={props.disabled} onClick={props.onDeleteRow}>
+      <ToolbarButton
+        ariaLabel="Delete row"
+        capability={props.tableContext?.operations.deleteRow}
+        disabled={props.disabled}
+        onClick={props.onDeleteRow}
+      >
         Delete row
       </ToolbarButton>
-      <ToolbarButton ariaLabel="Add column left" disabled={props.disabled} onClick={props.onAddColumnBefore}>
+      <ToolbarButton
+        ariaLabel="Add column left"
+        capability={props.tableContext?.operations.addColumnBefore}
+        disabled={props.disabled}
+        onClick={props.onAddColumnBefore}
+      >
         Column left
       </ToolbarButton>
-      <ToolbarButton ariaLabel="Add column right" disabled={props.disabled} onClick={props.onAddColumnAfter}>
+      <ToolbarButton
+        ariaLabel="Add column right"
+        capability={props.tableContext?.operations.addColumnAfter}
+        disabled={props.disabled}
+        onClick={props.onAddColumnAfter}
+      >
         Column right
       </ToolbarButton>
-      <ToolbarButton ariaLabel="Delete column" disabled={props.disabled} onClick={props.onDeleteColumn}>
+      <ToolbarButton
+        ariaLabel="Delete column"
+        capability={props.tableContext?.operations.deleteColumn}
+        disabled={props.disabled}
+        onClick={props.onDeleteColumn}
+      >
         Delete column
       </ToolbarButton>
-      <ToolbarButton ariaLabel="Merge cells" disabled={props.disabled} onClick={props.onMergeCells}>
+      <ToolbarButton
+        ariaLabel="Merge cells"
+        capability={props.tableContext?.operations.mergeCells}
+        disabled={props.disabled}
+        onClick={props.onMergeCells}
+      >
         Merge
       </ToolbarButton>
-      <ToolbarButton ariaLabel="Split cell" disabled={props.disabled} onClick={props.onSplitCell}>
+      <ToolbarButton
+        ariaLabel="Split cell"
+        capability={props.tableContext?.operations.splitCell}
+        disabled={props.disabled}
+        onClick={props.onSplitCell}
+      >
         Split
       </ToolbarButton>
 
@@ -86,16 +143,27 @@ export function TwTableContextToolbar(props: TwTableContextToolbarProps) {
             key={color}
             type="button"
             aria-label={`Set cell fill ${color}`}
-            disabled={props.disabled || !props.onSetCellBackground}
+            disabled={
+              props.disabled ||
+              !props.onSetCellBackground ||
+              !props.tableContext?.operations.setCellBackground.enabled
+            }
             onMouseDown={preserveEditorSelectionMouseDown}
             onClick={() => props.onSetCellBackground?.(color)}
             className="h-6 w-6 rounded border border-border disabled:opacity-40"
             style={{ backgroundColor: color }}
+            title={props.tableContext?.operations.setCellBackground.reason}
           />
         ))}
       </div>
 
-      <ToolbarButton ariaLabel="Delete table" danger disabled={props.disabled} onClick={props.onDeleteTable}>
+      <ToolbarButton
+        ariaLabel="Delete table"
+        capability={props.tableContext?.operations.deleteTable}
+        danger
+        disabled={props.disabled}
+        onClick={props.onDeleteTable}
+      >
         Delete table
       </ToolbarButton>
     </div>
@@ -104,18 +172,22 @@ export function TwTableContextToolbar(props: TwTableContextToolbarProps) {
 
 function ToolbarButton(props: {
   ariaLabel: string;
+  capability?: TableOperationCapabilitySnapshot;
   children: React.ReactNode;
   danger?: boolean;
   disabled: boolean;
   onClick?: () => void;
 }) {
+  const capabilityEnabled = props.capability?.enabled ?? true;
+  const title = !capabilityEnabled ? props.capability?.reason : undefined;
   return (
     <button
       type="button"
       aria-label={props.ariaLabel}
-      disabled={props.disabled || !props.onClick}
+      disabled={props.disabled || !props.onClick || !capabilityEnabled}
       onMouseDown={preserveEditorSelectionMouseDown}
       onClick={props.onClick}
+      title={title}
       className={`inline-flex h-8 items-center rounded-md px-2 text-xs font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-40 ${
         props.danger
           ? "text-danger hover:bg-danger/10"

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

@@ -1,5 +1,4 @@
 import { NodeSelection, Plugin, PluginKey } from "prosemirror-state";
-import { keymap } from "prosemirror-keymap";
 import { columnResizing, goToNextCell, isInTable, tableEditing } from "prosemirror-tables";
 
 import type { SelectionSnapshot } from "../../api/public-types";
@@ -7,6 +6,7 @@ import {
   createNodeSelectionSnapshot,
   createSelectionSnapshot,
 } from "../../ui/headless/selection-helpers";
+import { resolveSurfaceShortcut } from "../../ui/runtime-shortcut-dispatch";
 import type { PositionMap } from "./pm-position-map";
 
 export interface CommandBridgeCallbacks {
@@ -74,8 +74,10 @@ export function createCommandBridgePlugins(
             }
 
             const { anchor, head } = view.state.selection;
+            const runtimeAnchor = posMap.pmToRuntime(anchor);
+            const runtimeHead = posMap.pmToRuntime(head);
             callbacks.onSelectionChange(
-              createSelectionSnapshot(posMap.pmToRuntime(anchor), posMap.pmToRuntime(head)),
+              createSelectionSnapshot(runtimeAnchor, runtimeHead),
             );
           }
         },
@@ -122,55 +124,58 @@ export function createCommandBridgePlugins(
     },
   });
 
-  // Keymap: intercept editing keys and dispatch runtime commands.
-  const keymapPlugin = keymap({
-    Backspace: () => {
-      if (isComposing) return false;
-      callbacks.onDeleteBackward();
-      return true;
-    },
-    Delete: () => {
-      if (isComposing) return false;
-      callbacks.onDeleteForward();
-      return true;
-    },
-    Enter: () => {
-      if (isComposing) return false;
-      callbacks.onSplitParagraph();
-      return true;
-    },
-    "Shift-Enter": () => {
-      if (isComposing) return false;
-      callbacks.onInsertHardBreak();
-      return true;
-    },
-    Tab: (state, dispatch, view) => {
-      if (isComposing) return false;
-      if (isInTable(state)) {
-        return goToNextCell(1)(state, dispatch, view);
-      }
-      callbacks.onInsertTab();
-      return true;
-    },
-    "Shift-Tab": (state, dispatch, view) => {
-      if (isComposing) return false;
-      if (isInTable(state)) {
-        return goToNextCell(-1)(state, dispatch, view);
-      }
-      callbacks.onOutdentTab?.();
-      return true;
-    },
-    "Mod-z": () => {
-      callbacks.onUndo();
-      return true;
-    },
-    "Mod-y": () => {
-      callbacks.onRedo();
-      return true;
-    },
-    "Shift-Mod-z": () => {
-      callbacks.onRedo();
-      return true;
+  // Keydown bridge: normalize mounted editor keys through the shared shortcut
+  // dispatcher so the PM layer and shell layer follow the same routing model.
+  const keydownPlugin = new Plugin({
+    props: {
+      handleKeyDown(view, event) {
+        if (isComposing) {
+          return false;
+        }
+
+        const resolution = resolveSurfaceShortcut(
+          {
+            key: event.key,
+            ctrlKey: event.ctrlKey,
+            metaKey: event.metaKey,
+            altKey: event.altKey,
+            shiftKey: event.shiftKey,
+          },
+          { inTable: isInTable(view.state) },
+        );
+
+        switch (resolution.kind) {
+          case "none":
+            return false;
+          case "delete-backward":
+            callbacks.onDeleteBackward();
+            return true;
+          case "delete-forward":
+            callbacks.onDeleteForward();
+            return true;
+          case "split-paragraph":
+            callbacks.onSplitParagraph();
+            return true;
+          case "insert-hard-break":
+            callbacks.onInsertHardBreak();
+            return true;
+          case "insert-tab":
+            callbacks.onInsertTab();
+            return true;
+          case "outdent-tab":
+            callbacks.onOutdentTab?.();
+            return true;
+          case "navigate-table-cell":
+            return goToNextCell(resolution.direction)(view.state, view.dispatch, view);
+          case "history":
+            if (resolution.history === "undo") {
+              callbacks.onUndo();
+            } else {
+              callbacks.onRedo();
+            }
+            return true;
+        }
+      },
     },
   });
 
@@ -180,5 +185,5 @@ export function createCommandBridgePlugins(
   const tablePlugin = tableEditing();
   const columnResizingPlugin = columnResizing();
 
-  return [filterPlugin, selectionPlugin, inputPlugin, keymapPlugin, tablePlugin, columnResizingPlugin];
+  return [filterPlugin, selectionPlugin, inputPlugin, keydownPlugin, tablePlugin, columnResizingPlugin];
 }

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

@@ -9,6 +9,7 @@ import type {
   EditorStoryTarget,
   WorkflowBlockedCommandReason,
   WorkflowCandidateRange,
+  WorkflowMetadataMarkup,
   WorkflowScope,
 } from "../../api/public-types";
 import { MAIN_STORY_TARGET, storyTargetsEqual } from "../../core/selection/mapping.ts";
@@ -74,6 +75,10 @@ function getWorkflowCandidateRailClass(): string {
   return "wre-workflow-rail wre-workflow-rail-candidate";
 }
 
+function getWorkflowMetadataInlineClass(): string {
+  return "wre-workflow-inline wre-workflow-inline-metadata";
+}
+
 function getWorkflowBlockedInlineClass(reason: WorkflowBlockedCommandReason): string {
   if (reason.code === "workflow_blocked_import") {
     return "wre-workflow-inline wre-workflow-inline-blocked-import";
@@ -211,13 +216,11 @@ export function buildDecorations(
   workflowBlockedReasons?: readonly WorkflowBlockedCommandReason[],
   activeWorkflowWorkItemId?: string | null,
   activeWorkflowScopeIds?: readonly string[],
-  suggestionsEnabled = false,
+  workflowMetadata?: readonly WorkflowMetadataMarkup[],
 ): 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) {
@@ -251,7 +254,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" && !suggestionsEnabled) {
+      if (markupDisplay === "clean" && rev.kind === "deletion") {
         const pmFrom = positionMap.runtimeToPm(rev.from);
         const pmTo = positionMap.runtimeToPm(rev.to);
         if (pmFrom < pmTo) {
@@ -266,48 +269,7 @@ export function buildDecorations(
       }
 
       // Skip visual styling when tracked changes display is off
-      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;
-      }
+      if (!showTrackedChanges) continue;
 
       const cls = getRevisionHighlightClass(
         revisionModel,
@@ -317,12 +279,16 @@ export function buildDecorations(
       );
       if (!cls) continue;
 
-      decorations.push(
-        Decoration.inline(pmFrom, pmTo, {
-          class: cls,
-          "data-revision-id": rev.revisionId,
-        }),
-      );
+      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,
+          }),
+        );
+      }
     }
   }
 
@@ -365,6 +331,24 @@ export function buildDecorations(
     }
   }
 
+  if (workflowMetadata) {
+    for (const metadata of workflowMetadata) {
+      const metadataStoryTarget = metadata.storyTarget ?? MAIN_STORY_TARGET;
+      if (!storyTargetsEqual(metadataStoryTarget, activeStory)) continue;
+      const pmRange = buildAnchorPmRange(metadata.anchor, positionMap);
+      if (!pmRange || !pmRange.allowInline || pmRange.from >= pmRange.to) continue;
+
+      decorations.push(
+        Decoration.inline(pmRange.from, pmRange.to, {
+          class: getWorkflowMetadataInlineClass(),
+          ...(metadata.color ? { style: `--wre-workflow-metadata-color: ${metadata.color};` } : {}),
+          "data-workflow-entry-id": metadata.entryId,
+          "data-workflow-metadata-id": metadata.metadataId,
+        }),
+      );
+    }
+  }
+
   if (workflowCandidates) {
     for (const candidate of workflowCandidates) {
       const candidateStoryTarget = candidate.storyTarget ?? MAIN_STORY_TARGET;

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

@@ -99,6 +99,20 @@ function sanitizeLinkHref(raw: string | null | undefined): string | null {
   return null;
 }
 
+function resolveMarkerJustificationCss(raw: string | null): string {
+  switch (raw) {
+    case "left":
+      return "flex-start";
+    case "center":
+      return "center";
+    case "right":
+    case "both":
+    case "distribute":
+    default:
+      return "flex-end";
+  }
+}
+
 /**
  * ProseMirror schema for the supported live surface slice.
  *
@@ -121,6 +135,8 @@ export const editorSchema = new Schema({
         numberingLevel: { default: null },
         numberingPrefix: { default: null },
         numberingSuffix: { default: null },
+        numberingMarkerWidth: { default: null },
+        numberingMarkerJustification: { default: null },
         alignment: { default: null },
         spacingBefore: { default: null },
         spacingAfter: { default: null },
@@ -142,6 +158,7 @@ export const editorSchema = new Schema({
         outlineLevel: { default: null },
         bidi: { default: null },
         pageBreakBefore: { default: null },
+        hiddenTextOnly: { default: null },
       },
       parseDOM: [{ tag: "p" }],
       toDOM(node) {
@@ -191,6 +208,12 @@ export const editorSchema = new Schema({
         }
         const pageBreak = node.attrs.pageBreakBefore as boolean | null;
         if (pageBreak) styles.push("border-top: 2px dashed rgba(0,0,0,0.1); padding-top: 8px; margin-top: 16px");
+        const hiddenTextOnly = node.attrs.hiddenTextOnly as boolean | null;
+        if (hiddenTextOnly) {
+          attrs["data-hidden-paragraph"] = "true";
+          attrs["aria-hidden"] = "true";
+          styles.push("display: none");
+        }
         const bidi = node.attrs.bidi as boolean | null;
         if (bidi) attrs.dir = "rtl";
         if (headingLevel) {
@@ -218,6 +241,8 @@ export const editorSchema = new Schema({
         const numberingPrefix = node.attrs.numberingPrefix as string | null;
         const numberingLevel = node.attrs.numberingLevel as number | null;
         const numberingSuffix = node.attrs.numberingSuffix as "tab" | "space" | "nothing" | null;
+        const numberingMarkerWidth = node.attrs.numberingMarkerWidth as number | null;
+        const numberingMarkerJustification = node.attrs.numberingMarkerJustification as string | null;
         const children: Array<string | number | readonly unknown[]> = [];
         if (pageBreak) {
           children.push([
@@ -232,20 +257,46 @@ export const editorSchema = new Schema({
           ]);
         }
         if (numberingPrefix) {
-          const minWidth = Math.min(Math.max(numberingPrefix.length + 1, 4), 14);
-          const marginRight = numberingSuffix === "nothing" ? "0.25rem" : numberingSuffix === "space" ? "0.5rem" : "0.75rem";
+          const hasResolvedMarkerWidth =
+            typeof numberingMarkerWidth === "number" && numberingMarkerWidth > 0;
+          const fallbackMinWidth = Math.min(Math.max(numberingPrefix.length + 1, 4), 14);
+          const fallbackMarginRight =
+            numberingSuffix === "nothing"
+              ? "0.25rem"
+              : numberingSuffix === "space"
+                ? "0.5rem"
+                : "0.75rem";
+          const prefixStyles = [
+            `font-variant-numeric: tabular-nums`,
+            `justify-content: ${resolveMarkerJustificationCss(numberingMarkerJustification)}`,
+          ];
+          if (hasResolvedMarkerWidth) {
+            const markerWidthPx = Math.max(1, Math.round(numberingMarkerWidth / 20));
+            prefixStyles.push(
+              `width: ${markerWidthPx}px`,
+              `min-width: ${markerWidthPx}px`,
+              `flex-basis: ${markerWidthPx}px`,
+              `margin-right: 0`,
+              `overflow: visible`,
+            );
+          } else {
+            prefixStyles.push(
+              `min-width: ${fallbackMinWidth}ch`,
+              `margin-right: ${fallbackMarginRight}`,
+            );
+          }
           children.push([
             "span",
             {
               class:
-                "inline-flex select-none items-center justify-end text-tertiary font-[family-name:var(--font-legal-sans)]",
+                "inline-flex select-none items-center text-tertiary font-[family-name:var(--font-legal-sans)]",
               contenteditable: "false",
               "data-numbering-prefix": numberingPrefix,
               ...(typeof numberingLevel === "number"
                 ? { "data-numbering-level": String(numberingLevel) }
                 : {}),
               ...(numberingSuffix ? { "data-numbering-suffix": numberingSuffix } : {}),
-              style: `min-width: ${minWidth}ch; margin-right: ${marginRight}; font-variant-numeric: tabular-nums;`,
+              style: prefixStyles.join("; "),
             },
             numberingPrefix,
           ]);
@@ -569,7 +620,7 @@ export const editorSchema = new Schema({
         return [
           "span",
           {
-            class: "inline-flex items-center gap-1 mx-0.5 px-1.5 py-0.5 rounded text-xs text-green-700 bg-green-50 border border-green-200",
+            class: "inline-flex items-center gap-1 mx-0.5 rounded border border-success/25 bg-success-soft px-1.5 py-0.5 text-xs text-success",
             "data-node-type": "shape_atom",
             contenteditable: "false",
             title: (node.attrs.detail as string) ?? label,