@beyondwork/docx-react-component 1.0.18 → 1.0.20

package/src/runtime/table-schema.ts

@@ -11,6 +11,25 @@
 
 import type { NodeSpec } from "prosemirror-model";
 
+/** Characters that must never appear in CSS values derived from OOXML tokens. */
+const CSS_INJECTION_RE = /[;{}()[\]\\@!]/;
+
+/** Validate a CSS color token — allows #hex (3/6/8 digits) and named colors only. */
+function safeCssColor(raw: string | null | undefined): string | null {
+  if (!raw) return null;
+  if (/^#[0-9A-Fa-f]{3,8}$/.test(raw)) return raw;
+  if (/^[a-zA-Z]+$/.test(raw) && raw !== "expression") return raw;
+  return null;
+}
+
+/** Sanitize a composite CSS border shorthand (e.g. "1px solid #abc"). Rejects injection attempts. */
+function safeCssBorder(raw: string | null | undefined): string | null {
+  if (!raw) return null;
+  if (CSS_INJECTION_RE.test(raw)) return null;
+  if (raw.length > 100) return null;
+  return raw;
+}
+
 type TableCellAttrs = {
   colspan?: number | null;
   rowspan?: number | null;
@@ -18,6 +37,11 @@ type TableCellAttrs = {
   gridSpan?: number | null;
   verticalMerge?: "restart" | "continue" | null;
   backgroundColor?: string | null;
+  verticalAlign?: "top" | "center" | "bottom" | null;
+  borderTop?: string | null;
+  borderRight?: string | null;
+  borderBottom?: string | null;
+  borderLeft?: string | null;
 };
 
 function resolveRenderedColspan(attrs: {
@@ -55,6 +79,7 @@ function getCellAttrs(dom: HTMLElement): TableCellAttrs {
   const gridSpan = gridSpanAttr ? Number.parseInt(gridSpanAttr, 10) : colspan;
   const backgroundColor =
     dom.getAttribute("data-cell-background") ?? dom.style.backgroundColor ?? null;
+  const verticalAlign = dom.getAttribute("data-vertical-align") as "top" | "center" | "bottom" | null;
 
   return {
     colspan,
@@ -66,6 +91,11 @@ function getCellAttrs(dom: HTMLElement): TableCellAttrs {
         ? verticalMergeAttr
         : null,
     backgroundColor,
+    verticalAlign: verticalAlign === "top" || verticalAlign === "center" || verticalAlign === "bottom" ? verticalAlign : null,
+    borderTop: dom.getAttribute("data-border-top"),
+    borderRight: dom.getAttribute("data-border-right"),
+    borderBottom: dom.getAttribute("data-border-bottom"),
+    borderLeft: dom.getAttribute("data-border-left"),
   };
 }
 
@@ -91,8 +121,28 @@ function setCellDomAttrs(nodeAttrs: TableCellAttrs, className: string): Record<s
   }
   if (nodeAttrs.backgroundColor) {
     attrs["data-cell-background"] = nodeAttrs.backgroundColor;
-    attrs.style = `background-color: ${nodeAttrs.backgroundColor}`;
   }
+  if (nodeAttrs.verticalAlign && nodeAttrs.verticalAlign !== "top") {
+    attrs["data-vertical-align"] = nodeAttrs.verticalAlign;
+  }
+  if (nodeAttrs.borderTop) attrs["data-border-top"] = nodeAttrs.borderTop;
+  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;
+
+  const styles: string[] = [];
+  const bgColor = safeCssColor(nodeAttrs.backgroundColor);
+  if (bgColor) styles.push(`background-color: ${bgColor}`);
+  if (nodeAttrs.verticalAlign) styles.push(`vertical-align: ${nodeAttrs.verticalAlign === "center" ? "middle" : nodeAttrs.verticalAlign}`);
+  const bTop = safeCssBorder(nodeAttrs.borderTop);
+  if (bTop) styles.push(`border-top: ${bTop}`);
+  const bRight = safeCssBorder(nodeAttrs.borderRight);
+  if (bRight) styles.push(`border-right: ${bRight}`);
+  const bBottom = safeCssBorder(nodeAttrs.borderBottom);
+  if (bBottom) styles.push(`border-bottom: ${bBottom}`);
+  const bLeft = safeCssBorder(nodeAttrs.borderLeft);
+  if (bLeft) styles.push(`border-left: ${bLeft}`);
+  if (styles.length > 0) attrs.style = styles.join("; ");
 
   return attrs;
 }
@@ -126,6 +176,11 @@ const tableCellSpecAttrs = {
   rowspan: { default: 1, validate: "number" },
   colwidth: { default: null, validate: validateColwidth },
   backgroundColor: { default: null },
+  verticalAlign: { default: null },
+  borderTop: { default: null },
+  borderRight: { default: null },
+  borderBottom: { default: null },
+  borderLeft: { default: null },
 } as const;
 
 export const tableNodeSpec: NodeSpec = {
@@ -137,10 +192,29 @@ export const tableNodeSpec: NodeSpec = {
     styleId: { default: null },
     propertiesXml: { default: null },
     gridColumns: { default: [] },
+    alignment: { default: null },
+    tblLookFirstRow: { default: false },
+    tblLookLastRow: { default: false },
+    tblLookFirstColumn: { default: false },
+    tblLookLastColumn: { default: false },
+    tblLookNoHBand: { default: false },
+    tblLookNoVBand: { default: false },
   },
   parseDOM: [{ tag: "table" }],
-  toDOM() {
-    return ["table", { class: "border-collapse w-full my-2 text-sm" }, ["tbody", 0]];
+  toDOM(node) {
+    const style = node.attrs.alignment === "center"
+      ? "margin-left: auto; margin-right: auto"
+      : node.attrs.alignment === "right"
+        ? "margin-left: auto"
+        : undefined;
+    return [
+      "table",
+      {
+        class: "border-collapse w-full my-2 text-sm",
+        ...(style ? { style } : {}),
+      },
+      ["tbody", 0],
+    ];
   },
 };
 
@@ -149,15 +223,23 @@ export const tableRowNodeSpec: NodeSpec = {
   tableRole: "row",
   attrs: {
     propertiesXml: { default: null },
+    height: { default: null },
+    heightRule: { default: null },
+    isHeader: { default: false },
   },
   parseDOM: [{ tag: "tr" }],
-  toDOM() {
-    return ["tr", 0];
+  toDOM(node) {
+    const style = node.attrs.heightRule === "exact" && node.attrs.height
+      ? `height: ${Math.round((node.attrs.height as number) / 20)}pt`
+      : node.attrs.heightRule === "atLeast" && node.attrs.height
+        ? `min-height: ${Math.round((node.attrs.height as number) / 20)}pt`
+        : undefined;
+    return ["tr", { ...(style ? { style } : {}) }, 0];
   },
 };
 
 export const tableCellNodeSpec: NodeSpec = {
-  content: "paragraph+",
+  content: "block+",
   tableRole: "cell",
   isolating: true,
   attrs: tableCellSpecAttrs,
@@ -182,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

@@ -0,0 +1,477 @@
+/**
+ * Runtime-owned view state — non-canonical interaction model.
+ *
+ * This module owns the editor's interaction and measurement state that is
+ * separate from the canonical document model. View state is never serialized
+ * into persisted snapshots or exported DOCX; it exists only while the editor
+ * session is live.
+ *
+ * Design boundaries:
+ * - Canonical document state lives in EditorState / CanonicalDocumentEnvelope.
+ * - View state is runtime-owned, non-canonical, non-exported.
+ * - Builds on Wave 35's activeStory and PageLayoutSnapshot model.
+ * - Runtime viewMode models editor posture ("editing" | "review" | "view").
+ * - Workspace mode and zoom are runtime-owned so hosts and the mounted shell
+ *   share one view-state contract.
+ */
+
+import type {
+  ActiveListContext,
+  ActiveNoteContext,
+  CaretAffinity,
+  DocumentMode,
+  EditorStoryTarget,
+  EditorSurfaceSnapshot,
+  EditorViewStateSnapshot,
+  LayoutMeasurement,
+  PageLayoutSnapshot,
+  PageRegionHitTest,
+  SelectionSnapshot,
+  SurfaceBlockSnapshot,
+  SurfaceInlineSegment,
+  ViewMode,
+  WorkspaceMode,
+  ZoomLevel,
+} from "../api/public-types";
+import type { NumberingCatalog } from "../model/canonical-document.ts";
+
+export interface ViewState {
+  viewMode: ViewMode;
+  documentMode: DocumentMode;
+  workspaceMode: WorkspaceMode;
+  zoomLevel: ZoomLevel;
+  isFocused: boolean;
+  caretAffinity: CaretAffinity;
+  activePageRegion: PageRegionHitTest | null;
+  activeObjectFrame: LayoutMeasurement["objectFrame"] | null;
+}
+
+const MIN_ZOOM_PERCENT = 50;
+const MAX_ZOOM_PERCENT = 200;
+
+const DEFAULT_VIEW_STATE: ViewState = {
+  viewMode: "editing",
+  documentMode: "editing",
+  workspaceMode: "canvas",
+  zoomLevel: 100,
+  isFocused: false,
+  caretAffinity: "none",
+  activePageRegion: null,
+  activeObjectFrame: null,
+};
+
+export function createViewState(initial?: Partial<ViewState>): ViewState {
+  return { ...DEFAULT_VIEW_STATE, ...initial };
+}
+
+export function setViewMode(state: ViewState, mode: ViewMode): ViewState {
+  if (state.viewMode === mode) return state;
+  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,
+): ViewState {
+  if (state.workspaceMode === workspaceMode) {
+    return state;
+  }
+  return { ...state, workspaceMode };
+}
+
+export function setZoomLevel(state: ViewState, zoomLevel: ZoomLevel): ViewState {
+  const normalizedZoom = normalizeZoomLevel(zoomLevel, state.zoomLevel);
+  if (state.zoomLevel === normalizedZoom) {
+    return state;
+  }
+  return { ...state, zoomLevel: normalizedZoom };
+}
+
+export function setFocused(state: ViewState, focused: boolean): ViewState {
+  if (state.isFocused === focused) return state;
+  return { ...state, isFocused: focused };
+}
+
+export function setCaretAffinity(state: ViewState, affinity: CaretAffinity): ViewState {
+  if (state.caretAffinity === affinity) return state;
+  return { ...state, caretAffinity: affinity };
+}
+
+export function setActivePageRegion(state: ViewState, region: PageRegionHitTest | null): ViewState {
+  return { ...state, activePageRegion: region };
+}
+
+export function setActiveObjectFrame(
+  state: ViewState,
+  frame: LayoutMeasurement["objectFrame"] | null,
+): ViewState {
+  return { ...state, activeObjectFrame: frame };
+}
+
+/**
+ * Derive list context from the surface block at the current selection head.
+ */
+export function deriveActiveListContext(
+  surface: EditorSurfaceSnapshot | undefined,
+  selectionHead: number,
+  numberingCatalog?: NumberingCatalog,
+): ActiveListContext | null {
+  if (!surface) return null;
+  const block = findBlockAtPosition(surface.blocks, selectionHead);
+  if (!block || block.kind !== "paragraph" || !block.numbering) return null;
+
+  const isOrdered = resolveListOrdering(block.numbering, numberingCatalog);
+  return {
+    numberingInstanceId: block.numbering.numberingInstanceId,
+    level: block.numbering.level,
+    isOrdered,
+    ...(block.numberingPrefix ? { markerText: block.numberingPrefix } : {}),
+  };
+}
+
+/**
+ * Derive note context when the active story targets a footnote or endnote.
+ */
+export function deriveActiveNoteContext(
+  activeStory: EditorStoryTarget,
+  mainSurface: EditorSurfaceSnapshot | undefined,
+): ActiveNoteContext | null {
+  if (activeStory.kind !== "footnote" && activeStory.kind !== "endnote") {
+    return null;
+  }
+
+  const referencePosition = findNoteReferencePosition(mainSurface, activeStory);
+  return {
+    noteKind: activeStory.kind,
+    noteId: activeStory.noteId,
+    referencePosition,
+  };
+}
+
+/**
+ * Derive layout measurement from the surface at the current selection.
+ */
+export function deriveLayoutMeasurement(
+  surface: EditorSurfaceSnapshot | undefined,
+  selectionOrPosition: SelectionSnapshot | number,
+  viewState: ViewState,
+): LayoutMeasurement {
+  const selectionHead =
+    typeof selectionOrPosition === "number"
+      ? selectionOrPosition
+      : selectionOrPosition.activeRange.kind === "node"
+        ? selectionOrPosition.activeRange.at
+        : selectionOrPosition.head;
+  const block = surface ? findBlockAtPosition(surface.blocks, selectionHead) : null;
+  const tabStops = block?.kind === "paragraph" && block.tabStops ? block.tabStops : [];
+  const listMarkerLane = deriveListMarkerLane(block);
+
+  return {
+    pageRegions: viewState.activePageRegion ? [viewState.activePageRegion] : [],
+    caretAffinity: viewState.caretAffinity,
+    tabStops,
+    listMarkerLane: listMarkerLane ?? undefined,
+    objectFrame: viewState.activeObjectFrame ?? undefined,
+  };
+}
+
+/**
+ * Build the full EditorViewStateSnapshot from runtime + surface state.
+ */
+export function createEditorViewStateSnapshot(
+  viewState: ViewState,
+  activeStory: EditorStoryTarget,
+  selection: SelectionSnapshot,
+  surface: EditorSurfaceSnapshot | undefined,
+  mainSurface: EditorSurfaceSnapshot | undefined,
+  pageLayout: PageLayoutSnapshot | null | undefined,
+  numberingCatalog?: NumberingCatalog,
+): EditorViewStateSnapshot {
+  const selectionPosition =
+    selection.activeRange.kind === "node" ? selection.activeRange.at : selection.head;
+  const derivedViewState = deriveInteractionViewState(
+    viewState,
+    activeStory,
+    selection,
+    surface,
+    pageLayout,
+  );
+  const activeListContext = deriveActiveListContext(surface, selectionPosition, numberingCatalog);
+  const activeNoteContext = deriveActiveNoteContext(activeStory, mainSurface);
+  const measurement = deriveLayoutMeasurement(surface, selection, derivedViewState);
+
+  return {
+    viewMode: derivedViewState.viewMode,
+    documentMode: derivedViewState.documentMode,
+    workspaceMode: derivedViewState.workspaceMode,
+    zoomLevel: derivedViewState.zoomLevel,
+    activeStory,
+    selection,
+    caretAffinity: derivedViewState.caretAffinity,
+    activeListContext,
+    activeNoteContext,
+    activePageRegion: derivedViewState.activePageRegion,
+    activeObjectFrame: derivedViewState.activeObjectFrame,
+    measurement,
+    isFocused: derivedViewState.isFocused,
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Internal helpers
+// ---------------------------------------------------------------------------
+
+function findBlockAtPosition(
+  blocks: readonly SurfaceBlockSnapshot[],
+  position: number,
+): SurfaceBlockSnapshot | null {
+  for (const block of blocks) {
+    if (position >= block.from && position <= block.to) {
+      if (block.kind === "sdt_block") {
+        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;
+    }
+  }
+  return null;
+}
+
+function resolveListOrdering(
+  numbering: NonNullable<Extract<SurfaceBlockSnapshot, { kind: "paragraph" }>["numbering"]>,
+  numberingCatalog?: NumberingCatalog,
+): boolean {
+  if (!numberingCatalog) {
+    return true;
+  }
+
+  const instance = numberingCatalog.instances[numbering.numberingInstanceId];
+  const definition = instance
+    ? numberingCatalog.abstractDefinitions[instance.abstractNumberingId]
+    : undefined;
+  const levelDefinition = definition?.levels.find((level) => level.level === numbering.level);
+
+  if (!levelDefinition) {
+    return true;
+  }
+
+  return levelDefinition.format !== "bullet";
+}
+
+function deriveInteractionViewState(
+  viewState: ViewState,
+  activeStory: EditorStoryTarget,
+  selection: SelectionSnapshot,
+  surface: EditorSurfaceSnapshot | undefined,
+  pageLayout: PageLayoutSnapshot | null | undefined,
+): ViewState {
+  const activePageRegion = deriveActivePageRegion(activeStory, pageLayout) ?? viewState.activePageRegion;
+  const activeObjectFrame = deriveActiveObjectFrame(surface, selection);
+  const caretAffinity = deriveCaretAffinity(surface, selection);
+
+  return {
+    ...viewState,
+    caretAffinity,
+    activePageRegion,
+    activeObjectFrame,
+  };
+}
+
+function deriveActivePageRegion(
+  activeStory: EditorStoryTarget,
+  pageLayout: PageLayoutSnapshot | null | undefined,
+): PageRegionHitTest | null {
+  if (!pageLayout) {
+    return null;
+  }
+  const sectionIndex = pageLayout?.sectionIndex ?? 0;
+  switch (activeStory.kind) {
+    case "header":
+      return { region: "header", sectionIndex, columnIndex: 0 };
+    case "footer":
+      return { region: "footer", sectionIndex, columnIndex: 0 };
+    default:
+      return { region: "body", sectionIndex, columnIndex: 0 };
+  }
+}
+
+function deriveActiveObjectFrame(
+  surface: EditorSurfaceSnapshot | undefined,
+  selection: SelectionSnapshot,
+): LayoutMeasurement["objectFrame"] | null {
+  if (!surface) {
+    return null;
+  }
+
+  const position =
+    selection.activeRange.kind === "node" ? selection.activeRange.at : selection.head;
+  const block = findBlockAtPosition(surface.blocks, position);
+  if (!block || block.kind !== "paragraph") {
+    return null;
+  }
+
+  const segment = findObjectSegmentAtPosition(block.segments, position);
+  if (!segment) {
+    return null;
+  }
+
+  if (segment.kind === "image") {
+    return {
+      kind: "image",
+      anchorPos: segment.from,
+      display: segment.display === "floating" ? "floating" : "inline",
+    };
+  }
+
+  const objectKind = inferOpaqueObjectKind(segment);
+  if (!objectKind) {
+    return null;
+  }
+
+  return {
+    kind: objectKind,
+    anchorPos: segment.from,
+    display: "inline",
+  };
+}
+
+function deriveCaretAffinity(
+  surface: EditorSurfaceSnapshot | undefined,
+  selection: SelectionSnapshot,
+): CaretAffinity {
+  if (selection.activeRange.kind === "node") {
+    return selection.activeRange.assoc < 0 ? "backward" : "forward";
+  }
+  if (!selection.isCollapsed || !surface) {
+    return "none";
+  }
+  const block = findBlockAtPosition(surface.blocks, selection.head);
+  if (!block || block.kind !== "paragraph") {
+    return "none";
+  }
+  for (const segment of block.segments) {
+    if (!isObjectLikeSegment(segment)) {
+      continue;
+    }
+    if (selection.head === segment.from) {
+      return "forward";
+    }
+    if (selection.head === segment.to) {
+      return "backward";
+    }
+  }
+  return "none";
+}
+
+export function findNoteReferencePosition(
+  mainSurface: EditorSurfaceSnapshot | undefined,
+  target: EditorStoryTarget & { kind: "footnote" | "endnote" },
+): number {
+  if (!mainSurface) return 0;
+  for (const block of mainSurface.blocks) {
+    if (block.kind === "paragraph") {
+      for (const segment of block.segments) {
+        if (
+          segment.kind === "note_ref" &&
+          segment.noteKind === target.kind &&
+          segment.noteId === target.noteId
+        ) {
+          return segment.from;
+        }
+        // Fallback: opaque_inline references from older surface projections
+        if (
+          segment.kind === "opaque_inline" &&
+          segment.label.toLowerCase().includes(target.kind) &&
+          segment.detail.includes(target.noteId)
+        ) {
+          return segment.from;
+        }
+      }
+    }
+  }
+  return 0;
+}
+
+function normalizeZoomLevel(
+  zoomLevel: ZoomLevel,
+  currentZoom: ZoomLevel,
+): ZoomLevel {
+  if (zoomLevel === "pageWidth" || zoomLevel === "onePage") {
+    return zoomLevel;
+  }
+  if (!Number.isFinite(zoomLevel) || zoomLevel <= 0) {
+    return currentZoom;
+  }
+  return Math.max(
+    MIN_ZOOM_PERCENT,
+    Math.min(MAX_ZOOM_PERCENT, Math.round(zoomLevel)),
+  );
+}
+
+function findObjectSegmentAtPosition(
+  segments: readonly SurfaceInlineSegment[],
+  position: number,
+): Extract<SurfaceInlineSegment, { kind: "image" | "opaque_inline" }> | null {
+  for (const segment of segments) {
+    if (!isObjectLikeSegment(segment)) {
+      continue;
+    }
+    if (position >= segment.from && position <= segment.to) {
+      return segment;
+    }
+  }
+  return null;
+}
+
+function isObjectLikeSegment(
+  segment: SurfaceInlineSegment,
+): segment is Extract<SurfaceInlineSegment, { kind: "image" | "opaque_inline" }> {
+  if (segment.kind === "image") {
+    return true;
+  }
+  if (segment.kind !== "opaque_inline") {
+    return false;
+  }
+  return inferOpaqueObjectKind(segment) !== null;
+}
+
+function inferOpaqueObjectKind(
+  segment: Extract<SurfaceInlineSegment, { kind: "opaque_inline" }>,
+): "textbox" | "shape" | null {
+  if (segment.label === "Text box") {
+    return "textbox";
+  }
+  if (segment.label === "Drawing shape") {
+    return "shape";
+  }
+  if (segment.label === "Legacy VML drawing") {
+    return segment.detail.includes("#_x0000_t202")
+      ? "textbox"
+      : "shape";
+  }
+  return null;
+}
+
+function deriveListMarkerLane(
+  block: SurfaceBlockSnapshot | null,
+): { indent: number; markerWidth: number } | null {
+  if (!block || block.kind !== "paragraph" || !block.numbering) return null;
+  const indent = block.indentation?.hanging ?? block.indentation?.left ?? 360;
+  return {
+    indent,
+    markerWidth: Math.min(indent, 360),
+  };
+}