@beyondwork/docx-react-component 1.0.28 → 1.0.30

package/src/runtime/table-style-resolver.ts

@@ -0,0 +1,409 @@
+import type {
+  BorderSpec,
+  CellShading,
+  TableBorders,
+  TableCellBorders,
+  TableCellMargins,
+  TableLook,
+  TableNode,
+  TableStyleConditionalRegion,
+  TableStyleDefinition,
+  TableStyleFormatting,
+  TableWidth,
+} from "../model/canonical-document.ts";
+
+export interface ResolvedTableCellStyle {
+  width?: TableWidth;
+  borders?: TableCellBorders;
+  shading?: CellShading;
+  verticalAlign?: "top" | "center" | "bottom";
+  activeConditionalRegions: TableStyleConditionalRegion[];
+}
+
+export interface ResolvedTableRowStyle {
+  height?: number;
+  heightRule?: "auto" | "atLeast" | "exact";
+  isHeader?: boolean;
+  activeConditionalRegions: TableStyleConditionalRegion[];
+}
+
+export interface ResolvedTableStyleResolution {
+  rawTblLook?: TableLook;
+  effectiveTblLook: TableLook;
+  table?: TableStyleFormatting["table"];
+  rows: Array<{
+    style: ResolvedTableRowStyle;
+    cells: ResolvedTableCellStyle[];
+  }>;
+}
+
+const DEFAULT_EFFECTIVE_TABLE_LOOK: TableLook = {
+  val: "04A0",
+  firstRow: true,
+  lastRow: false,
+  firstColumn: true,
+  lastColumn: false,
+  noHBand: false,
+  noVBand: true,
+};
+
+const CONDITIONAL_REGION_ORDER: TableStyleConditionalRegion[] = [
+  "band1Horz",
+  "band2Horz",
+  "band1Vert",
+  "band2Vert",
+  "firstColumn",
+  "lastColumn",
+  "firstRow",
+  "lastRow",
+];
+
+export function resolveTableStyleResolution(
+  table: TableNode,
+  tableStyles: Record<string, TableStyleDefinition>,
+): ResolvedTableStyleResolution {
+  const resolvedStyle = table.styleId ? resolveTableStyleDefinition(table.styleId, tableStyles) : {};
+  const effectiveTblLook = resolveEffectiveTableLook(table.tblLook, resolvedStyle.formatting?.table?.tblLook);
+  const columnCount = table.gridColumns.length > 0
+    ? table.gridColumns.length
+    : table.rows.reduce(
+        (max, row) =>
+          Math.max(
+            max,
+            (row.gridBefore ?? 0) +
+              row.cells.reduce((sum, cell) => sum + (cell.gridSpan ?? 1), 0) +
+              (row.gridAfter ?? 0),
+          ),
+        0,
+      );
+
+  const rows = table.rows.map((row, rowIndex) => {
+    const rowRegions = getActiveRowRegions(rowIndex, table.rows.length, effectiveTblLook);
+    const rowStyleFormatting = mergeStyleFormattingRow(
+      resolvedStyle.formatting?.row,
+      rowRegions.map((region) => resolvedStyle.conditionalFormatting?.[region]?.row),
+      {
+        ...(row.height !== undefined ? { height: row.height } : {}),
+        ...(row.heightRule ? { heightRule: row.heightRule } : {}),
+        ...(row.isHeader !== undefined ? { isHeader: row.isHeader } : {}),
+      },
+    );
+
+    let columnCursor = row.gridBefore ?? 0;
+    const cells = row.cells.map((cell) => {
+      const startColumn = columnCursor;
+      const span = cell.gridSpan ?? 1;
+      const endColumn = startColumn + span - 1;
+      columnCursor += span;
+
+      const cellRegions = getActiveCellRegions(
+        rowRegions,
+        startColumn,
+        endColumn,
+        columnCount,
+        effectiveTblLook,
+      );
+      const cellStyleFormatting = mergeStyleFormattingCell(
+        resolvedStyle.formatting?.cell,
+        cellRegions.map((region) => resolvedStyle.conditionalFormatting?.[region]?.cell),
+        {
+          ...(cell.width ? { width: cell.width } : {}),
+          ...(cell.borders ? { borders: cell.borders } : {}),
+          ...(cell.shading ? { shading: cell.shading } : {}),
+          ...(cell.verticalAlign ? { verticalAlign: cell.verticalAlign } : {}),
+        },
+      );
+
+      return {
+        ...(cellStyleFormatting ?? {}),
+        activeConditionalRegions: cellRegions,
+      };
+    });
+
+    return {
+      style: {
+        ...(rowStyleFormatting ?? {}),
+        activeConditionalRegions: rowRegions,
+      },
+      cells,
+    };
+  });
+
+  const tableFormatting = mergeTableFormatting(
+    resolvedStyle.formatting?.table,
+    {
+      ...(table.width ? { width: table.width } : {}),
+      ...(table.alignment ? { alignment: table.alignment } : {}),
+      ...(table.borders ? { borders: table.borders } : {}),
+      ...(table.cellMargins ? { cellMargins: table.cellMargins } : {}),
+      ...(table.tblLook ? { tblLook: table.tblLook } : {}),
+    },
+  );
+
+  return {
+    ...(table.tblLook ? { rawTblLook: table.tblLook } : {}),
+    effectiveTblLook,
+    ...(tableFormatting ? { table: tableFormatting } : {}),
+    rows,
+  };
+}
+
+function resolveTableStyleDefinition(
+  styleId: string,
+  tableStyles: Record<string, TableStyleDefinition>,
+  visited = new Set<string>(),
+): {
+  formatting?: TableStyleFormatting;
+  conditionalFormatting?: Partial<Record<TableStyleConditionalRegion, TableStyleFormatting>>;
+} {
+  if (visited.has(styleId)) {
+    return {};
+  }
+  visited.add(styleId);
+
+  const style = tableStyles[styleId];
+  if (!style) {
+    return {};
+  }
+
+  const inherited = style.basedOn
+    ? resolveTableStyleDefinition(style.basedOn, tableStyles, visited)
+    : {};
+
+  return {
+    formatting: mergeWholeStyleFormatting(inherited.formatting, style.formatting),
+    conditionalFormatting: mergeConditionalFormatting(
+      inherited.conditionalFormatting,
+      style.conditionalFormatting,
+    ),
+  };
+}
+
+function resolveEffectiveTableLook(rawTblLook: TableLook | undefined, styleTblLook: TableLook | undefined): TableLook {
+  const decodedStyleLook = decodeTableLookMask(styleTblLook?.val);
+  const decodedRawLook = decodeTableLookMask(rawTblLook?.val);
+  return {
+    ...DEFAULT_EFFECTIVE_TABLE_LOOK,
+    ...(decodedStyleLook ?? {}),
+    ...(styleTblLook ?? {}),
+    ...(decodedRawLook ?? {}),
+    ...(rawTblLook ?? {}),
+  };
+}
+
+function decodeTableLookMask(val: string | undefined): TableLook | undefined {
+  if (!val) {
+    return undefined;
+  }
+
+  const mask = Number.parseInt(val, 16);
+  if (Number.isNaN(mask)) {
+    return { val };
+  }
+
+  return {
+    val,
+    firstRow: (mask & 0x0020) !== 0,
+    lastRow: (mask & 0x0040) !== 0,
+    firstColumn: (mask & 0x0080) !== 0,
+    lastColumn: (mask & 0x0100) !== 0,
+    noHBand: (mask & 0x0200) !== 0,
+    noVBand: (mask & 0x0400) !== 0,
+  };
+}
+
+function getActiveRowRegions(
+  rowIndex: number,
+  rowCount: number,
+  effectiveTblLook: TableLook,
+): TableStyleConditionalRegion[] {
+  const active = new Set<TableStyleConditionalRegion>();
+
+  if (effectiveTblLook.firstRow && rowIndex === 0) {
+    active.add("firstRow");
+  }
+  if (effectiveTblLook.lastRow && rowIndex === rowCount - 1) {
+    active.add("lastRow");
+  }
+
+  if (!effectiveTblLook.noHBand) {
+    const bandStart = effectiveTblLook.firstRow ? 1 : 0;
+    const bandEndExclusive = effectiveTblLook.lastRow ? rowCount - 1 : rowCount;
+    if (rowIndex >= bandStart && rowIndex < bandEndExclusive) {
+      const bandIndex = rowIndex - bandStart;
+      active.add(bandIndex % 2 === 0 ? "band1Horz" : "band2Horz");
+    }
+  }
+
+  return CONDITIONAL_REGION_ORDER.filter((region) => active.has(region));
+}
+
+function getActiveCellRegions(
+  rowRegions: TableStyleConditionalRegion[],
+  startColumn: number,
+  endColumn: number,
+  columnCount: number,
+  effectiveTblLook: TableLook,
+): TableStyleConditionalRegion[] {
+  const active = new Set<TableStyleConditionalRegion>(rowRegions);
+
+  if (effectiveTblLook.firstColumn && startColumn === 0) {
+    active.add("firstColumn");
+  }
+  if (effectiveTblLook.lastColumn && endColumn === columnCount - 1) {
+    active.add("lastColumn");
+  }
+
+  if (!effectiveTblLook.noVBand) {
+    const bandStart = effectiveTblLook.firstColumn ? 1 : 0;
+    const bandEndExclusive = effectiveTblLook.lastColumn ? columnCount - 1 : columnCount;
+    if (startColumn >= bandStart && startColumn < bandEndExclusive) {
+      const bandIndex = startColumn - bandStart;
+      active.add(bandIndex % 2 === 0 ? "band1Vert" : "band2Vert");
+    }
+  }
+
+  return CONDITIONAL_REGION_ORDER.filter((region) => active.has(region));
+}
+
+function mergeConditionalFormatting(
+  base: Partial<Record<TableStyleConditionalRegion, TableStyleFormatting>> | undefined,
+  override: Partial<Record<TableStyleConditionalRegion, TableStyleFormatting>> | undefined,
+): Partial<Record<TableStyleConditionalRegion, TableStyleFormatting>> | undefined {
+  if (!base && !override) {
+    return undefined;
+  }
+
+  const merged: Partial<Record<TableStyleConditionalRegion, TableStyleFormatting>> = {};
+  for (const region of CONDITIONAL_REGION_ORDER) {
+    const formatting = mergeWholeStyleFormatting(base?.[region], override?.[region]);
+    if (formatting) {
+      merged[region] = formatting;
+    }
+  }
+  return Object.keys(merged).length > 0 ? merged : undefined;
+}
+
+function mergeWholeStyleFormatting(
+  base: TableStyleFormatting | undefined,
+  override: TableStyleFormatting | undefined,
+): TableStyleFormatting | undefined {
+  if (!base && !override) {
+    return undefined;
+  }
+
+  const merged: TableStyleFormatting = {};
+  const table = mergeTableFormatting(base?.table, override?.table);
+  const row = mergeRowFormatting(base?.row, override?.row);
+  const cell = mergeCellFormatting(base?.cell, override?.cell);
+
+  if (table) merged.table = table;
+  if (row) merged.row = row;
+  if (cell) merged.cell = cell;
+
+  return Object.keys(merged).length > 0 ? merged : undefined;
+}
+
+function mergeStyleFormattingRow(
+  base: TableStyleFormatting["row"],
+  conditionals: Array<TableStyleFormatting["row"] | undefined>,
+  direct: TableStyleFormatting["row"],
+): TableStyleFormatting["row"] {
+  const styleResolved = conditionals.reduce(
+    (current, formatting) => mergeRowFormatting(current, formatting),
+    base,
+  );
+  return mergeRowFormatting(styleResolved, direct);
+}
+
+function mergeStyleFormattingCell(
+  base: TableStyleFormatting["cell"],
+  conditionals: Array<TableStyleFormatting["cell"] | undefined>,
+  direct: TableStyleFormatting["cell"],
+): TableStyleFormatting["cell"] {
+  const styleResolved = conditionals.reduce(
+    (current, formatting) => mergeCellFormatting(current, formatting),
+    base,
+  );
+  return mergeCellFormatting(styleResolved, direct);
+}
+
+function mergeTableFormatting(
+  base: TableStyleFormatting["table"],
+  override: TableStyleFormatting["table"],
+): TableStyleFormatting["table"] {
+  if (!base && !override) {
+    return undefined;
+  }
+  return {
+    ...(base ?? {}),
+    ...(override ?? {}),
+    borders: mergeBorderMap(base?.borders, override?.borders),
+    cellMargins: mergePlainObject(base?.cellMargins, override?.cellMargins),
+    tblLook: mergeTableLook(base?.tblLook, override?.tblLook),
+  };
+}
+
+function mergeRowFormatting(
+  base: TableStyleFormatting["row"],
+  override: TableStyleFormatting["row"],
+): TableStyleFormatting["row"] {
+  if (!base && !override) {
+    return undefined;
+  }
+  return { ...(base ?? {}), ...(override ?? {}) };
+}
+
+function mergeCellFormatting(
+  base: TableStyleFormatting["cell"],
+  override: TableStyleFormatting["cell"],
+): TableStyleFormatting["cell"] {
+  if (!base && !override) {
+    return undefined;
+  }
+  return {
+    ...(base ?? {}),
+    ...(override ?? {}),
+    borders: mergeBorderMap(base?.borders, override?.borders),
+    shading: mergePlainObject(base?.shading, override?.shading),
+  };
+}
+
+function mergeBorderMap<T extends TableBorders | TableCellBorders>(
+  base: T | undefined,
+  override: T | undefined,
+): T | undefined {
+  if (!base && !override) {
+    return undefined;
+  }
+
+  const sides = ["top", "left", "bottom", "right", "insideH", "insideV"] as const;
+  const merged = {} as T;
+  for (const side of sides) {
+    const spec = mergePlainObject(base?.[side], override?.[side]) as BorderSpec | undefined;
+    if (spec) {
+      merged[side] = spec as T[typeof side];
+    }
+  }
+  return Object.keys(merged).length > 0 ? merged : undefined;
+}
+
+function mergePlainObject<T extends object>(base: T | undefined, override: T | undefined): T | undefined {
+  if (!base && !override) {
+    return undefined;
+  }
+  return { ...(base ?? {}), ...(override ?? {}) } as T;
+}
+
+function mergeTableLook(base: TableLook | undefined, override: TableLook | undefined): TableLook | undefined {
+  if (!base && !override) {
+    return undefined;
+  }
+  if (!override) {
+    return base ? { ...base } : undefined;
+  }
+  if (override.val !== undefined) {
+    return { ...override };
+  }
+  return { ...(base ?? {}), ...override };
+}

package/src/runtime/view-state.ts

@@ -168,7 +168,7 @@ export function deriveLayoutMeasurement(
         ? selectionOrPosition.activeRange.at
         : selectionOrPosition.head;
   const block = surface ? findBlockAtPosition(surface.blocks, selectionHead) : null;
-  const tabStops = block?.kind === "paragraph" && block.tabStops ? block.tabStops : [];
+  const tabStops = resolveMeasurementTabStops(block);
   const listMarkerLane = deriveListMarkerLane(block);
 
   return {
@@ -469,9 +469,25 @@ function deriveListMarkerLane(
   block: SurfaceBlockSnapshot | null,
 ): { indent: number; markerWidth: number } | null {
   if (!block || block.kind !== "paragraph" || !block.numbering) return null;
+  const resolvedMarkerLane = block.resolvedNumbering?.geometry.markerLane;
+  if (resolvedMarkerLane) {
+    return {
+      indent: resolvedMarkerLane.textStart,
+      markerWidth: resolvedMarkerLane.width,
+    };
+  }
   const indent = block.indentation?.hanging ?? block.indentation?.left ?? 360;
   return {
     indent,
     markerWidth: Math.min(indent, 360),
   };
 }
+
+function resolveMeasurementTabStops(
+  block: SurfaceBlockSnapshot | null,
+): Array<{ pos: number; val?: string; leader?: string }> {
+  if (!block || block.kind !== "paragraph") {
+    return [];
+  }
+  return block.resolvedNumbering?.geometry.tabStops ?? block.tabStops ?? [];
+}

package/src/runtime/workflow-markup.ts

@@ -12,6 +12,8 @@ import type {
   WorkflowCandidateRangeOptions,
   WorkflowFieldMarkup,
   WorkflowHighlightMarkup,
+  WorkflowMetadataMarkup,
+  WorkflowMetadataSnapshot,
   WorkflowMarkupItem,
   WorkflowMarkupSnapshot,
   WorkflowOpaqueFragmentMarkup,
@@ -21,18 +23,18 @@ import type {
 } from "../api/public-types";
 import { MAIN_STORY_TARGET } from "../core/selection/mapping.ts";
 import { searchSurfaceBlocks } from "../core/search/search-text.ts";
-import { describeOpaqueFragment } from "../preservation/store.ts";
+import { describeOpaqueFragment, isBlockedImportFeatureKey } from "../preservation/store.ts";
 import type { CanonicalDocumentEnvelope } from "../core/state/editor-state.ts";
 
-const BLOCKED_IMPORT_FEATURE_KEYS = new Set(["alt-chunk", "alternate-content", "custom-xml"]);
-
 export function collectWorkflowMarkupSnapshot(input: {
   renderSnapshot: RuntimeRenderSnapshot;
   fieldSnapshot: FieldSnapshot;
   protectionSnapshot: ProtectionSnapshot;
   preservation: CanonicalDocumentEnvelope["preservation"];
+  workflowMetadataSnapshot?: WorkflowMetadataSnapshot;
 }): WorkflowMarkupSnapshot {
   const highlights: WorkflowHighlightMarkup[] = [];
+  const metadata = collectWorkflowMetadataMarkup(input.workflowMetadataSnapshot);
   const fields: WorkflowFieldMarkup[] = [];
   const opaqueFragments: WorkflowOpaqueFragmentMarkup[] = [];
   const surface = input.renderSnapshot.surface;
@@ -113,6 +115,7 @@ export function collectWorkflowMarkupSnapshot(input: {
 
   const items: WorkflowMarkupItem[] = [
     ...highlights,
+    ...metadata,
     ...comments,
     ...revisions,
     ...fields,
@@ -124,6 +127,7 @@ export function collectWorkflowMarkupSnapshot(input: {
     totalCount: items.length,
     items,
     highlights,
+    metadata,
     comments,
     revisions,
     fields,
@@ -132,6 +136,42 @@ export function collectWorkflowMarkupSnapshot(input: {
   };
 }
 
+function collectWorkflowMetadataMarkup(
+  snapshot?: WorkflowMetadataSnapshot,
+): WorkflowMetadataMarkup[] {
+  if (!snapshot) {
+    return [];
+  }
+
+  const definitionsById = new Map(
+    snapshot.definitions.map((definition) => [definition.metadataId, definition] as const),
+  );
+
+  return snapshot.entries.flatMap((entry) => {
+    const definition = definitionsById.get(entry.metadataId);
+    if (!definition) {
+      return [];
+    }
+
+    return [{
+      markupId: `metadata:${entry.entryId}`,
+      kind: "metadata",
+      entryId: entry.entryId,
+      metadataId: entry.metadataId,
+      anchor: entry.anchor,
+      storyTarget: entry.storyTarget,
+      label: definition.label,
+      excerpt: definition.kind,
+      color: definition.color,
+      icon: definition.icon,
+      persistence: definition.persistence,
+      value: entry.value,
+      scopeId: entry.scopeId,
+      workItemId: entry.workItemId,
+    } satisfies WorkflowMetadataMarkup];
+  });
+}
+
 export function deriveWorkflowCandidateRangesFromMarkup(
   snapshot: WorkflowMarkupSnapshot,
   options: WorkflowCandidateRangeOptions = {},
@@ -184,10 +224,6 @@ function collectSurfaceMarkup(
 
     const fragment = preservation.opaqueFragments[block.fragmentId];
     const descriptor = fragment ? describeOpaqueFragment(fragment) : null;
-    const blockedReasonCode =
-      fragment && BLOCKED_IMPORT_FEATURE_KEYS.has(descriptor?.featureKey ?? "")
-        ? "workflow_blocked_import"
-        : "workflow_preserve_only";
     opaqueFragments.push({
       markupId: `opaque:${block.fragmentId}`,
       kind: "opaque_fragment",
@@ -198,7 +234,11 @@ function collectSurfaceMarkup(
       label: block.label,
       excerpt: block.detail,
       detail: block.detail,
-      blockedReasonCode,
+      blockedReasonCode:
+        block.blockedReasonCode ??
+        (fragment && descriptor && isBlockedImportFeatureKey(descriptor.featureKey)
+          ? "workflow_blocked_import"
+          : "workflow_preserve_only"),
     });
   }
 }
@@ -227,10 +267,6 @@ function collectSegmentMarkup(
   if (segment.kind === "opaque_inline") {
     const fragment = preservation.opaqueFragments[segment.fragmentId];
     const descriptor = fragment ? describeOpaqueFragment(fragment) : null;
-    const blockedReasonCode =
-      fragment && BLOCKED_IMPORT_FEATURE_KEYS.has(descriptor?.featureKey ?? "")
-        ? "workflow_blocked_import"
-        : "workflow_preserve_only";
     opaqueFragments.push({
       markupId: `opaque:${segment.fragmentId}`,
       kind: "opaque_fragment",
@@ -241,7 +277,11 @@ function collectSegmentMarkup(
       label: segment.label,
       excerpt: segment.detail,
       detail: segment.detail,
-      blockedReasonCode,
+      blockedReasonCode:
+        segment.blockedReasonCode ??
+        (fragment && descriptor && isBlockedImportFeatureKey(descriptor.featureKey)
+          ? "workflow_blocked_import"
+          : "workflow_preserve_only"),
     });
   }
 }
@@ -308,7 +348,7 @@ function collectOpaqueFragmentMarkup(
     )
     .map((fragment) => {
       const descriptor = describeOpaqueFragment(fragment);
-      const blockedReasonCode = BLOCKED_IMPORT_FEATURE_KEYS.has(descriptor.featureKey)
+      const blockedReasonCode = isBlockedImportFeatureKey(descriptor.featureKey)
         ? "workflow_blocked_import"
         : "workflow_preserve_only";