@beyondwork/docx-react-component 1.0.19 → 1.0.21

package/src/runtime/read-only-diagnostics-runtime.ts

@@ -193,6 +193,14 @@ function createDiagnosticsRenderSnapshot(
       canRedo: false,
       readOnly: true,
     },
+    documentMode: "viewing",
+    protectionSnapshot: {
+      hasDocumentProtection: false,
+      enforcementActive: false,
+      ranges: [],
+      enforcedRangeCount: 0,
+      preservedRangeCount: 0,
+    },
   };
 }
 

package/src/runtime/session-capabilities.ts

@@ -1,4 +1,4 @@
-import type { RuntimeRenderSnapshot } from "../api/public-types";
+import type { RuntimeRenderSnapshot, WorkflowScopeSnapshot } from "../api/public-types";
 import {
   createDetachedAnchor,
   createNodeAnchor,
@@ -21,6 +21,10 @@ export interface SessionCapabilities {
   /** Effective editor mode after accounting for runtime state. */
   mode: "editing" | "review" | "read-only-diagnostics";
 
+  // ── Document mode ──
+  /** Runtime document mode — editing authority, distinct from view/workspace mode. */
+  documentMode: "editing" | "suggesting" | "viewing";
+
   // ── Command capabilities ──
   canUndo: boolean;
   canRedo: boolean;
@@ -44,10 +48,22 @@ export interface SessionCapabilities {
   preserveOnlyCount: number;
   unsupportedFatalCount: number;
 
+  // ── Protection posture ──
+  /** Whether the source package declares document-level protection. */
+  hasDocumentProtection: boolean;
+  /** Count of permission ranges from the source package. */
+  protectedRangeCount: number;
+
   // ── Health ──
   /** Total count of health issues (preserve-only + unsupported-fatal + warnings). */
   healthIssueCount: number;
 
+  // ── Workflow ──
+  /** Whether a workflow overlay is currently applied. */
+  workflowOverlayPresent: boolean;
+  /** Whether the current selection is blocked by workflow scope enforcement. */
+  workflowBlocked: boolean;
+
   // ── Status ──
   isDirty: boolean;
   isReady: boolean;
@@ -63,12 +79,14 @@ export interface SessionCapabilities {
 export function deriveCapabilities(
   snapshot: RuntimeRenderSnapshot,
   reviewMode: "editing" | "review",
+  workflowScope?: WorkflowScopeSnapshot | null,
 ): SessionCapabilities {
   const hasFatalError = Boolean(snapshot.fatalError);
   const isReady = snapshot.isReady;
   const isReadOnly = snapshot.readOnly;
   const exportBlocked = snapshot.compatibility.blockExport;
   const activeStory = snapshot.activeStory ?? { kind: "main" as const };
+  const documentMode = snapshot.documentMode ?? "editing";
 
   // Phase derivation
   const phase: SessionCapabilities["phase"] = !isReady
@@ -83,8 +101,8 @@ export function deriveCapabilities(
       ? "read-only-diagnostics"
       : reviewMode;
 
-  // Command capabilities
-  const canEdit = isReady && !isReadOnly && !hasFatalError;
+  // Command capabilities — document mode "viewing" disables editing
+  const canEdit = isReady && !isReadOnly && !hasFatalError && documentMode !== "viewing";
   const canUndo = snapshot.commandState.canUndo && canEdit;
   const canRedo = snapshot.commandState.canRedo && canEdit;
   const canAddComment =
@@ -125,9 +143,17 @@ export function deriveCapabilities(
 
   const healthIssueCount = preserveOnlyCount + unsupportedFatalCount + snapshot.warnings.length;
 
+  const protection = snapshot.protectionSnapshot;
+  const hasDocumentProtection = protection?.hasDocumentProtection ?? false;
+  const protectedRangeCount = protection?.ranges?.length ?? 0;
+
+  const workflowOverlayPresent = workflowScope?.overlayPresent ?? false;
+  const workflowBlocked = (workflowScope?.blockedReasons?.length ?? 0) > 0;
+
   return {
     phase,
     mode,
+    documentMode,
     canUndo,
     canRedo,
     canEdit,
@@ -142,7 +168,11 @@ export function deriveCapabilities(
     exportBlocked,
     preserveOnlyCount,
     unsupportedFatalCount,
+    hasDocumentProtection,
+    protectedRangeCount,
     healthIssueCount,
+    workflowOverlayPresent,
+    workflowBlocked,
     isDirty: snapshot.isDirty,
     isReady,
     hasFatalError,

package/src/runtime/surface-projection.ts

@@ -52,6 +52,7 @@ interface ParagraphAccumulator {
   numbering?: ParagraphNode["numbering"];
   numberingPrefix?: string;
   numberingSuffix?: "tab" | "space" | "nothing";
+  contextualSpacing?: boolean;
   segments: SurfaceInlineSegment[];
 }
 
@@ -469,6 +470,9 @@ function createParagraphBlock(
       : {}),
     ...(paragraph.alignment ? { alignment: paragraph.alignment } : {}),
     ...(paragraph.spacing ? { spacing: paragraph.spacing } : {}),
+    ...(paragraph.contextualSpacing !== undefined
+      ? { contextualSpacing: paragraph.contextualSpacing }
+      : {}),
     ...(paragraph.indentation ? { indentation: paragraph.indentation } : {}),
     ...(paragraph.borders ? { borders: paragraph.borders } : {}),
     ...(paragraph.shading ? { shading: paragraph.shading } : {}),
@@ -592,15 +596,16 @@ function appendInlineSegments(
       return { nextCursor: start + 1, lockedFragmentIds: [node.fragmentId] };
     }
     case "chart_preview":
-      return appendComplexPreviewSegment(paragraph, node, start, "Chart", createChartDetail(node));
+      return appendComplexPreviewSegment(paragraph, node, start, "Embedded chart", createChartDetail(node));
     case "smartart_preview":
-      return appendComplexPreviewSegment(paragraph, node, start, "SmartArt", createSmartArtDetail(node));
+      return appendComplexPreviewSegment(paragraph, node, start, "SmartArt diagram", createSmartArtDetail(node));
     case "shape":
-      return appendComplexPreviewSegment(paragraph, node, start, "Shape", createShapeDetail(node));
+      return appendComplexPreviewSegment(paragraph, node, start,
+        node.isTextBox ? "Text box" : "Drawing shape", createShapeDetail(node));
     case "wordart":
       return appendComplexPreviewSegment(paragraph, node, start, "WordArt", createWordArtDetail(node));
     case "vml_shape":
-      return appendComplexPreviewSegment(paragraph, node, start, "VML shape", createVmlDetail(node));
+      return appendComplexPreviewSegment(paragraph, node, start, "Legacy VML drawing", createVmlDetail(node));
     case "symbol":
       paragraph.segments.push({
         segmentId: `${paragraph.blockId}-segment-${paragraph.segments.length}`,
@@ -635,6 +640,11 @@ function appendInlineSegments(
       });
       return { nextCursor: start + 1, lockedFragmentIds: [] };
     case "field": {
+      const isSupportedField =
+        node.fieldFamily === "REF" ||
+        node.fieldFamily === "PAGEREF" ||
+        node.fieldFamily === "NOTEREF" ||
+        node.fieldFamily === "TOC";
       if (node.children && node.children.length > 0) {
         let cursor = start;
         const lockedIds: string[] = [];
@@ -645,6 +655,25 @@ function appendInlineSegments(
         }
         return { nextCursor: cursor, lockedFragmentIds: lockedIds };
       }
+      if (isSupportedField) {
+        // Supported field with no resolved content — show as field chip
+        const fieldLabel =
+          node.fieldFamily === "TOC"
+            ? "Table of Contents"
+            : `${node.fieldFamily ?? "Field"}: ${node.fieldTarget ?? node.instruction.trim()}`;
+        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,
+        } as SurfaceInlineSegment);
+        return { nextCursor: start + 1, lockedFragmentIds: [] };
+      }
       paragraph.segments.push({
         segmentId: `${paragraph.blockId}-segment-${paragraph.segments.length}`,
         kind: "opaque_inline",
@@ -653,7 +682,7 @@ function appendInlineSegments(
         fragmentId: "",
         warningId: "",
         label: "Field",
-        detail: "Field code preserved for export.",
+        detail: `Preserve-only field: ${node.instruction.trim()}`,
         state: "locked-preserve-only",
       });
       return { nextCursor: start + 1, lockedFragmentIds: [] };
@@ -689,38 +718,54 @@ function appendComplexPreviewSegment(
 }
 
 function createChartDetail(node: ChartPreviewNode): string {
-  return node.previewMediaId
-    ? `Chart read-only preview. Fallback image ${node.previewMediaId}. Original XML preserved for export.`
-    : "Chart read-only preview. Original XML preserved for export.";
+  const parts = ["Embedded chart."];
+  if (node.previewMediaId) {
+    parts.push(`Preview available via fallback image (${node.previewMediaId}).`);
+  } else {
+    parts.push("No fallback preview image found; chart data preserved in package.");
+  }
+  parts.push("Edit in Word to modify chart data. Original DrawingML preserved for lossless export.");
+  return parts.join(" ");
 }
 
 function createSmartArtDetail(node: SmartArtPreviewNode): string {
-  return node.previewMediaId
-    ? `SmartArt diagram read-only preview. Fallback image ${node.previewMediaId}. Original XML preserved for export.`
-    : "SmartArt diagram read-only preview. Original XML preserved for export.";
+  const parts = ["SmartArt diagram."];
+  if (node.previewMediaId) {
+    parts.push(`Preview available via fallback image (${node.previewMediaId}).`);
+  } else {
+    parts.push("No fallback preview image found; diagram structure preserved in package.");
+  }
+  parts.push("Edit in Word to modify diagram layout and content. Original DrawingML preserved for lossless export.");
+  return parts.join(" ");
 }
 
 function createShapeDetail(node: ShapeNode): string {
-  const parts = [node.isTextBox ? "Text box read-only preview." : "Shape read-only preview."];
+  if (node.isTextBox) {
+    const parts = ["Text box."];
+    if (node.text) parts.push(`Content: "${node.text}".`);
+    parts.push("Text content is visible; formatting and geometry preserved for export.");
+    return parts.join(" ");
+  }
+  const parts = ["Drawing shape."];
   if (node.geometry) parts.push(`Geometry: ${node.geometry}.`);
-  if (node.text) parts.push(`Text: "${node.text}".`);
-  parts.push("Original XML preserved for export.");
+  if (node.text) parts.push(`Text content: "${node.text}".`);
+  parts.push("Visual geometry is preview-only. Original DrawingML preserved for export.");
   return parts.join(" ");
 }
 
 function createWordArtDetail(node: WordArtNode): string {
-  const parts = ["WordArt read-only preview."];
+  const parts = ["WordArt decorative text."];
   if (node.text) parts.push(`Text: "${node.text}".`);
   if (node.geometry) parts.push(`Effect: ${node.geometry}.`);
-  parts.push("Original XML preserved for export.");
+  parts.push("Text effect is preview-only. Edit in Word for full formatting. Original DrawingML preserved for export.");
   return parts.join(" ");
 }
 
 function createVmlDetail(node: VmlShapeNode): string {
-  const parts = ["VML shape read-only preview."];
+  const parts = ["Legacy VML drawing."];
   if (node.shapeType) parts.push(`Type: ${node.shapeType}.`);
-  if (node.text) parts.push(`Text: "${node.text}".`);
-  parts.push("Legacy VML; original XML preserved for export.");
+  if (node.text) parts.push(`Text content: "${node.text}".`);
+  parts.push("VML content is preview-only. Edit in Word for full control. Original VML XML preserved for export.");
   return parts.join(" ");
 }
 
@@ -1039,15 +1084,16 @@ function summarizePreviewInline(node: InlineNode): string {
     case "column_break":
       return "[Column break]";
     case "chart_preview":
-      return "[Chart]";
+      return "[Embedded chart]";
     case "smartart_preview":
-      return "[SmartArt]";
+      return "[SmartArt diagram]";
     case "shape":
-      return node.text ? `[Shape: ${node.text}]` : "[Shape]";
+      if (node.isTextBox && node.text) return `[Text box: ${node.text}]`;
+      return node.text ? `[Shape: ${node.text}]` : "[Drawing shape]";
     case "wordart":
       return node.text ? `[WordArt: ${node.text}]` : "[WordArt]";
     case "vml_shape":
-      return node.text ? `[VML: ${node.text}]` : "[VML shape]";
+      return node.text ? `[VML: ${node.text}]` : "[Legacy VML drawing]";
   }
 }
 
@@ -1139,8 +1185,15 @@ function describePreservedInlinePreview(
       .join("")
       .trim();
     const instruction = (simpleInstruction ?? complexInstruction ?? "").trim();
+    const family = /^([A-Z]+)/i.exec(instruction)?.[1]?.toUpperCase();
+    const label =
+      family === "TOC"
+        ? "Table of Contents field"
+        : family
+          ? `${family} field`
+          : "Field";
     return {
-      label: "Field",
+      label,
       detail:
         instruction.length > 0
           ? `Read-only field preserved for export safety. Instruction: ${instruction}.`
@@ -1182,6 +1235,8 @@ function cloneMarks(marks: TextMark[]): {
     fontSize?: number;
     textColor?: string;
   } = {};
+  let shadingColor: string | undefined;
+  let highlightColor: string | undefined;
   for (const mark of marks) {
     switch (mark.type) {
       case "bold":
@@ -1200,7 +1255,10 @@ function cloneMarks(marks: TextMark[]): {
         else if (mark.val < 0) supported.push("subscript");
         break;
       case "backgroundColor":
-        attrs.backgroundColor = mark.color;
+        shadingColor = mark.color;
+        break;
+      case "highlight":
+        highlightColor = mark.color;
         break;
       case "charSpacing":
         attrs.charSpacing = mark.val;
@@ -1231,6 +1289,9 @@ function cloneMarks(marks: TextMark[]): {
         break;
     }
   }
+  if (highlightColor || shadingColor) {
+    attrs.backgroundColor = highlightColor ?? shadingColor;
+  }
   const hasAttrs = Object.keys(attrs).length > 0;
   return hasAttrs ? { marks: supported, markAttrs: attrs } : { marks: supported };
 }

package/src/runtime/table-schema.ts

@@ -239,7 +239,7 @@ export const tableRowNodeSpec: NodeSpec = {
 };
 
 export const tableCellNodeSpec: NodeSpec = {
-  content: "paragraph+",
+  content: "block+",
   tableRole: "cell",
   isolating: true,
   attrs: tableCellSpecAttrs,
@@ -264,7 +264,7 @@ export const tableCellNodeSpec: NodeSpec = {
 };
 
 export const tableHeaderCellNodeSpec: NodeSpec = {
-  content: "paragraph+",
+  content: "block+",
   tableRole: "header_cell",
   isolating: true,
   attrs: tableCellSpecAttrs,

package/src/runtime/view-state.ts

@@ -19,6 +19,7 @@ import type {
   ActiveListContext,
   ActiveNoteContext,
   CaretAffinity,
+  DocumentMode,
   EditorStoryTarget,
   EditorSurfaceSnapshot,
   EditorViewStateSnapshot,
@@ -36,6 +37,7 @@ import type { NumberingCatalog } from "../model/canonical-document.ts";
 
 export interface ViewState {
   viewMode: ViewMode;
+  documentMode: DocumentMode;
   workspaceMode: WorkspaceMode;
   zoomLevel: ZoomLevel;
   isFocused: boolean;
@@ -49,6 +51,7 @@ const MAX_ZOOM_PERCENT = 200;
 
 const DEFAULT_VIEW_STATE: ViewState = {
   viewMode: "editing",
+  documentMode: "editing",
   workspaceMode: "canvas",
   zoomLevel: 100,
   isFocused: false,
@@ -66,6 +69,11 @@ export function setViewMode(state: ViewState, mode: ViewMode): ViewState {
   return { ...state, viewMode: mode };
 }
 
+export function setDocumentMode(state: ViewState, mode: DocumentMode): ViewState {
+  if (state.documentMode === mode) return state;
+  return { ...state, documentMode: mode };
+}
+
 export function setWorkspaceMode(
   state: ViewState,
   workspaceMode: WorkspaceMode,
@@ -199,6 +207,7 @@ export function createEditorViewStateSnapshot(
 
   return {
     viewMode: derivedViewState.viewMode,
+    documentMode: derivedViewState.documentMode,
     workspaceMode: derivedViewState.workspaceMode,
     zoomLevel: derivedViewState.zoomLevel,
     activeStory,
@@ -227,6 +236,14 @@ function findBlockAtPosition(
         const inner = findBlockAtPosition(block.children, position);
         if (inner) return inner;
       }
+      if (block.kind === "table") {
+        for (const row of block.rows) {
+          for (const cell of row.cells) {
+            const inner = findBlockAtPosition(cell.content, position);
+            if (inner) return inner;
+          }
+        }
+      }
       return block;
     }
   }
@@ -262,7 +279,7 @@ function deriveInteractionViewState(
   pageLayout: PageLayoutSnapshot | null | undefined,
 ): ViewState {
   const activePageRegion = deriveActivePageRegion(activeStory, pageLayout) ?? viewState.activePageRegion;
-  const activeObjectFrame = deriveActiveObjectFrame(surface, selection) ?? viewState.activeObjectFrame;
+  const activeObjectFrame = deriveActiveObjectFrame(surface, selection);
   const caretAffinity = deriveCaretAffinity(surface, selection);
 
   return {
@@ -434,12 +451,13 @@ function isObjectLikeSegment(
 function inferOpaqueObjectKind(
   segment: Extract<SurfaceInlineSegment, { kind: "opaque_inline" }>,
 ): "textbox" | "shape" | null {
-  if (segment.label === "Shape") {
-    return segment.detail.startsWith("Text box")
-      ? "textbox"
-      : "shape";
+  if (segment.label === "Text box") {
+    return "textbox";
+  }
+  if (segment.label === "Drawing shape") {
+    return "shape";
   }
-  if (segment.label === "VML shape") {
+  if (segment.label === "Legacy VML drawing") {
     return segment.detail.includes("#_x0000_t202")
       ? "textbox"
       : "shape";