@beyondwork/docx-react-component 1.0.59 → 1.0.61

package/src/runtime/surface-projection.ts

@@ -32,6 +32,7 @@ import type {
   BorderSpec,
   TableBorders,
   TableCellBorders,
+  TableCellMargins,
   TableNode,
   TextMark,
   DrawingFrameNode,
@@ -491,6 +492,10 @@ function createTableBlock(
               .map((region) => `band-${region}`)
               .join(" ")
           : null;
+      const cellPadding = resolveEffectiveCellMargins(
+        cell.margins,
+        resolvedTable.table?.cellMargins,
+      );
       cells.push({
         gridSpan: cell.gridSpan ?? 1,
         verticalMerge: cell.verticalMerge ?? null,
@@ -502,6 +507,10 @@ function createTableBlock(
         ...(cellBorders.borderRight ? { borderRight: cellBorders.borderRight } : {}),
         ...(cellBorders.borderBottom ? { borderBottom: cellBorders.borderBottom } : {}),
         ...(cellBorders.borderLeft ? { borderLeft: cellBorders.borderLeft } : {}),
+        ...(cellPadding.top !== undefined ? { paddingTop: cellPadding.top } : {}),
+        ...(cellPadding.right !== undefined ? { paddingRight: cellPadding.right } : {}),
+        ...(cellPadding.bottom !== undefined ? { paddingBottom: cellPadding.bottom } : {}),
+        ...(cellPadding.left !== undefined ? { paddingLeft: cellPadding.left } : {}),
         // R3.a Phase 2: per-cell text-flow direction copied from canonical
         // TableCellNode. Node-view renders `tbRl` / `btLr` as CSS writing-mode.
         ...(cell.textDirection ? { textDirection: cell.textDirection } : {}),
@@ -626,6 +635,18 @@ function computeTableRowSpans(table: TableNode): Map<string, number> {
   return rowSpans;
 }
 
+function resolveEffectiveCellMargins(
+  direct: TableCellMargins | undefined,
+  tableDefault: TableCellMargins | undefined,
+): TableCellMargins {
+  return {
+    ...(direct?.top !== undefined ? { top: direct.top } : tableDefault?.top !== undefined ? { top: tableDefault.top } : {}),
+    ...(direct?.right !== undefined ? { right: direct.right } : tableDefault?.right !== undefined ? { right: tableDefault.right } : {}),
+    ...(direct?.bottom !== undefined ? { bottom: direct.bottom } : tableDefault?.bottom !== undefined ? { bottom: tableDefault.bottom } : {}),
+    ...(direct?.left !== undefined ? { left: direct.left } : tableDefault?.left !== undefined ? { left: tableDefault.left } : {}),
+  };
+}
+
 /**
  * SOW gap G3 — resolve the final paintable fill for a cell `w:shd`. Precedence
  * matches Word: a concrete `w:fill` (non-"auto") wins; otherwise the theme
@@ -660,6 +681,42 @@ function resolveCellShadingFill(
   return resolved.startsWith("#") ? resolved.slice(1) : resolved;
 }
 
+function resolveSurfaceParagraphShading(
+  shading: ParagraphNode["shading"],
+  themeResolver: ThemeColorResolver | undefined,
+): NonNullable<Extract<SurfaceBlockSnapshot, { kind: "paragraph" }>["shading"]> {
+  const resolvedFill = resolveCellShadingFill(shading, themeResolver);
+  return {
+    ...(shading?.val ? { val: shading.val } : {}),
+    ...(shading?.color ? { color: shading.color } : {}),
+    ...(resolvedFill !== undefined
+      ? { fill: resolvedFill }
+      : shading?.fill !== undefined
+        ? { fill: shading.fill }
+        : {}),
+  };
+}
+
+function resolveSurfaceParagraphFormatting(
+  formatting: CanonicalParagraphFormatting,
+  themeResolver: ThemeColorResolver | undefined,
+): CanonicalParagraphFormatting {
+  if (!formatting.shading) {
+    return formatting;
+  }
+  const resolvedFill = resolveCellShadingFill(formatting.shading, themeResolver);
+  if (resolvedFill === undefined && formatting.shading.fill === undefined) {
+    return formatting;
+  }
+  return {
+    ...formatting,
+    shading: {
+      ...formatting.shading,
+      ...(resolvedFill !== undefined ? { fill: resolvedFill } : {}),
+    },
+  };
+}
+
 /**
  * SOW gap G1 — derive relative column widths (percent 0–100, sum 100)
  * from the canonical `gridColumns` (twips). Only populated when the table
@@ -842,6 +899,9 @@ function createParagraphBlock(
   nextCursor: number;
   lockedFragmentIds: string[];
 } {
+  const themeResolver = document.subParts?.canonicalTheme
+    ? new ThemeColorResolver(document.subParts.canonicalTheme)
+    : undefined;
   // L7 Phase 2.9 — viewport bail. When the paragraph is outside the
   // viewport, the returned block is discarded (the outer caller in
   // `createEditorSurfaceSnapshot` replaces it with a placeholder-culled
@@ -871,6 +931,9 @@ function createParagraphBlock(
         { styleId: paragraph.styleId, direct: directParagraphFormatting },
         stylesCatalog,
       );
+  const surfaceResolvedParagraphFormatting = resolvedParagraphFormatting
+    ? resolveSurfaceParagraphFormatting(resolvedParagraphFormatting, themeResolver)
+    : undefined;
 
   // Task 11: compute cascaded marker run formatting (expensive).
   const markerRunProperties =
@@ -905,8 +968,8 @@ function createParagraphBlock(
           },
         }
       : {}),
-    ...(resolvedParagraphFormatting && Object.keys(resolvedParagraphFormatting).length > 0
-      ? { resolvedParagraphFormatting }
+    ...(surfaceResolvedParagraphFormatting && Object.keys(surfaceResolvedParagraphFormatting).length > 0
+      ? { resolvedParagraphFormatting: surfaceResolvedParagraphFormatting }
       : {}),
     ...(paragraph.alignment ? { alignment: paragraph.alignment } : {}),
     ...(paragraph.spacing ? { spacing: paragraph.spacing } : {}),
@@ -915,28 +978,26 @@ function createParagraphBlock(
       : {}),
     ...(paragraph.indentation ? { indentation: paragraph.indentation } : {}),
     ...(paragraph.borders ? { borders: paragraph.borders } : {}),
-    ...(paragraph.shading ? { shading: paragraph.shading } : {}),
+    ...(paragraph.shading
+      ? { shading: resolveSurfaceParagraphShading(paragraph.shading, themeResolver) }
+      : {}),
     ...(paragraph.tabStops && paragraph.tabStops.length > 0
       ? { tabStops: paragraph.tabStops.map((tabStop) => toSurfaceTabStop(tabStop)) }
       : {}),
-    ...(paragraph.keepNext ? { keepNext: true } : {}),
-    ...(paragraph.keepLines ? { keepLines: true } : {}),
-    ...(paragraph.pageBreakBefore ? { pageBreakBefore: true } : {}),
+    ...(paragraph.keepNext !== undefined ? { keepNext: paragraph.keepNext } : {}),
+    ...(paragraph.keepLines !== undefined ? { keepLines: paragraph.keepLines } : {}),
+    ...(paragraph.pageBreakBefore !== undefined ? { pageBreakBefore: paragraph.pageBreakBefore } : {}),
     ...(paragraph.widowControl !== undefined ? { widowControl: paragraph.widowControl } : {}),
     ...(paragraph.outlineLevel !== undefined ? { outlineLevel: paragraph.outlineLevel } : {}),
-    ...(paragraph.bidi ? { bidi: true } : {}),
-    ...(paragraph.suppressLineNumbers ? { suppressLineNumbers: true } : {}),
+    ...(paragraph.bidi !== undefined ? { bidi: paragraph.bidi } : {}),
+    ...(paragraph.suppressLineNumbers !== undefined
+      ? { suppressLineNumbers: paragraph.suppressLineNumbers }
+      : {}),
     segments: [],
   };
   const lockedFragmentIds: string[] = [];
   let cursor = start;
   const children = Array.isArray(paragraph.children) ? paragraph.children : [];
-  // Build once per paragraph block — ThemeColorResolver is a thin wrapper
-  // around CanonicalTheme that applies clrMap remapping. Constructed here so
-  // it is not recreated on every text segment (inner hot loop).
-  const themeResolver = document.subParts?.canonicalTheme
-    ? new ThemeColorResolver(document.subParts.canonicalTheme)
-    : undefined;
 
   for (const child of children) {
     const result = appendInlineSegments(

package/src/runtime/table-schema.ts

@@ -42,6 +42,10 @@ type TableCellAttrs = {
   borderRight?: string | null;
   borderBottom?: string | null;
   borderLeft?: string | null;
+  paddingTop?: number | null;
+  paddingRight?: number | null;
+  paddingBottom?: number | null;
+  paddingLeft?: number | null;
   /** R3.a Phase 2 — per-cell text-flow direction. */
   textDirection?: "lrTb" | "tbRl" | "btLr" | null;
   bandClasses?: string | null;
@@ -83,6 +87,12 @@ function getCellAttrs(dom: HTMLElement): TableCellAttrs {
   const backgroundColor =
     dom.getAttribute("data-cell-background") ?? dom.style.backgroundColor ?? null;
   const verticalAlign = dom.getAttribute("data-vertical-align") as "top" | "center" | "bottom" | null;
+  const readPadding = (name: string): number | null => {
+    const raw = dom.getAttribute(name);
+    if (!raw) return null;
+    const parsed = Number.parseInt(raw, 10);
+    return Number.isFinite(parsed) ? parsed : null;
+  };
 
   return {
     colspan,
@@ -99,6 +109,10 @@ function getCellAttrs(dom: HTMLElement): TableCellAttrs {
     borderRight: dom.getAttribute("data-border-right"),
     borderBottom: dom.getAttribute("data-border-bottom"),
     borderLeft: dom.getAttribute("data-border-left"),
+    paddingTop: readPadding("data-cell-padding-top"),
+    paddingRight: readPadding("data-cell-padding-right"),
+    paddingBottom: readPadding("data-cell-padding-bottom"),
+    paddingLeft: readPadding("data-cell-padding-left"),
     bandClasses: dom.getAttribute("data-band-classes"),
   };
 }
@@ -133,6 +147,10 @@ function setCellDomAttrs(nodeAttrs: TableCellAttrs, className: string): Record<s
   if (nodeAttrs.borderRight) attrs["data-border-right"] = nodeAttrs.borderRight;
   if (nodeAttrs.borderBottom) attrs["data-border-bottom"] = nodeAttrs.borderBottom;
   if (nodeAttrs.borderLeft) attrs["data-border-left"] = nodeAttrs.borderLeft;
+  if (typeof nodeAttrs.paddingTop === "number") attrs["data-cell-padding-top"] = String(nodeAttrs.paddingTop);
+  if (typeof nodeAttrs.paddingRight === "number") attrs["data-cell-padding-right"] = String(nodeAttrs.paddingRight);
+  if (typeof nodeAttrs.paddingBottom === "number") attrs["data-cell-padding-bottom"] = String(nodeAttrs.paddingBottom);
+  if (typeof nodeAttrs.paddingLeft === "number") attrs["data-cell-padding-left"] = String(nodeAttrs.paddingLeft);
   if (nodeAttrs.bandClasses) {
     attrs["data-band-classes"] = nodeAttrs.bandClasses;
     // Concatenate band classes onto the base `class` so Tailwind's @apply resolves at parse time.
@@ -151,6 +169,10 @@ function setCellDomAttrs(nodeAttrs: TableCellAttrs, className: string): Record<s
   if (bBottom) styles.push(`border-bottom: ${bBottom}`);
   const bLeft = safeCssBorder(nodeAttrs.borderLeft);
   if (bLeft) styles.push(`border-left: ${bLeft}`);
+  if (typeof nodeAttrs.paddingTop === "number") styles.push(`padding-top: ${nodeAttrs.paddingTop / 20}pt`);
+  if (typeof nodeAttrs.paddingRight === "number") styles.push(`padding-right: ${nodeAttrs.paddingRight / 20}pt`);
+  if (typeof nodeAttrs.paddingBottom === "number") styles.push(`padding-bottom: ${nodeAttrs.paddingBottom / 20}pt`);
+  if (typeof nodeAttrs.paddingLeft === "number") styles.push(`padding-left: ${nodeAttrs.paddingLeft / 20}pt`);
   if (styles.length > 0) attrs.style = styles.join("; ");
 
   return attrs;
@@ -190,6 +212,10 @@ const tableCellSpecAttrs = {
   borderRight: { default: null },
   borderBottom: { default: null },
   borderLeft: { default: null },
+  paddingTop: { default: null },
+  paddingRight: { default: null },
+  paddingBottom: { default: null },
+  paddingLeft: { default: null },
   /**
    * R3.a Phase 2 — per-cell text-flow direction copied from
    * `TableCellNode.textDirection` ("lrTb" | "tbRl" | "btLr"). Node-view maps

package/src/ui/WordReviewEditor.tsx

@@ -218,6 +218,7 @@ import {
   resolveChromePreset,
   resolveChromeVisibilityForPreset,
 } from "../ui-tailwind/chrome/chrome-preset-model.ts";
+import { TwRuntimeReplDialog } from "../ui-tailwind/chrome/tw-runtime-repl-dialog.tsx";
 import { createRuntimeCollabSync } from "../runtime/collab/runtime-collab-sync.ts";
 import {
   clearLocalCursorState,
@@ -689,6 +690,7 @@ export function __createWordReviewEditorRefBridge(
         color,
       });
     },
+    clearHighlight: (options) => runtime.clearHighlight(options),
     setAlignment: (alignment) => {
       applyRuntimeFormattingOperation(runtime, {
         type: "set-alignment",
@@ -1237,6 +1239,7 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
     const surfaceRef = useRef<TwProseMirrorSurfaceRef | null>(null);
     const selectionToolbarElementRef = useRef<HTMLDivElement | null>(null);
     const shellRef = useRef<HTMLDivElement | null>(null);
+    const editorRefForRepl = useRef<WordReviewEditorRef | null>(null);
     const lastSelectionToolbarKeyRef = useRef<string | null>(null);
     const lastAnnouncedErrorIdRef = useRef<string | null>(null);
     const scopeMetadataResolverRef = useRef<ScopeMetadataResolver | null>(null);
@@ -1817,6 +1820,7 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
             color,
           });
         },
+        clearHighlight: (options) => activeRuntime.clearHighlight(options),
         setAlignment: (alignment) => {
           applyRuntimeFormattingOperation(activeRuntime, {
             type: "set-alignment",
@@ -2304,6 +2308,7 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
         ...projections,
       }) as WordReviewEditorRef;
         refHolder.current = refValue;
+        editorRefForRepl.current = refValue;
         return refValue;
       },
       [
@@ -3368,6 +3373,7 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
     );
 
     return (
+      <>
       <EditorShellView
         shellRef={shellRef}
         documentId={documentId}
@@ -3486,6 +3492,23 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
         onScopeRejectSuggestionGroup={(payload) => {
           applySuggestionGroupAction(activeRuntime, payload.groupId, "reject");
         }}
+        mediaPreviews={mediaPreviews}
+        onActivateFloatingImage={(payload) => {
+          activeRuntime.focus();
+          applyRuntimeSelection(activeRuntime, {
+            anchor: payload.from,
+            head: payload.from,
+            isCollapsed: true,
+            activeRange: {
+              kind: "node",
+              at: payload.from,
+              assoc: 1,
+            },
+            ...(payload.storyTarget.kind === "main"
+              ? {}
+              : { storyTarget: payload.storyTarget }),
+          });
+        }}
         onDeselectObject={() => activeRuntime.deselectObject()}
         onScopeAskAgent={(payload) => {
           // Resolve the scope's anchor + story from the facet's card
@@ -3522,6 +3545,8 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
           onEventRef.current?.(eventPayload);
         }}
       />
+      <TwRuntimeReplDialog runtime={activeRuntime} editorRef={editorRefForRepl} />
+      </>
     );
   },
 );

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

@@ -1071,6 +1071,7 @@ function createLoadingRuntimeBridge(input: {
     rejectChange: () => undefined,
     acceptAllChanges: () => undefined,
     rejectAllChanges: () => undefined,
+    clearHighlight: () => undefined,
     openStory: () => false,
     closeStory: () => undefined,
     getActiveStory: () => input.snapshot.activeStory,

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

@@ -27,6 +27,7 @@ import type { EditorCommandBag } from "./editor-command-bag.ts";
 import type { ReviewRailTab } from "../ui-tailwind/review/tw-review-rail.tsx";
 import { TwReviewWorkspace } from "../ui-tailwind/tw-review-workspace.tsx";
 import type { EditorViewStateSnapshot } from "../api/public-types.ts";
+import type { MediaPreviewDescriptor } from "../ui-tailwind/editor-surface/pm-state-from-snapshot.ts";
 
 export interface EditorShellViewProps {
   shellRef: React.RefObject<HTMLDivElement | null>;
@@ -129,6 +130,13 @@ export interface EditorShellViewProps {
   onScopeAskAgent?: (payload: { scopeId: string }) => void;
   /** N6 — deselects the currently grabbed object; wired to runtime.deselectObject(). */
   onDeselectObject?: () => void;
+  mediaPreviews?: Record<string, MediaPreviewDescriptor>;
+  onActivateFloatingImage?: (payload: {
+    mediaId: string;
+    from: number;
+    to: number;
+    storyTarget: import("../api/public-types.ts").EditorStoryTarget;
+  }) => void;
 }
 
 export function EditorShellView(props: EditorShellViewProps) {