@beyondwork/docx-react-component 1.0.17 → 1.0.19

package/src/runtime/surface-projection.ts

@@ -1,5 +1,7 @@
 import type {
+  EditorStoryTarget,
   EditorSurfaceSnapshot,
+  SecondaryStorySurface,
   SurfaceBlockSnapshot,
   SurfaceInlineSegment,
   SurfaceTableCellSnapshot,
@@ -20,6 +22,7 @@ import type {
   SdtNode,
   ShapeNode,
   SmartArtPreviewNode,
+  TableCellBorders,
   TableNode,
   TextMark,
   VmlShapeNode,
@@ -29,10 +32,16 @@ import {
   describeOpaqueFragment,
   getOpaqueFragment,
 } from "../preservation/store.ts";
+import { getStoryBlocks } from "./story-targeting.ts";
 import {
   createNumberingPrefixResolver,
   type NumberingPrefixResolver,
 } from "./numbering-prefix.ts";
+import {
+  collectSectionContexts,
+  findHeaderFooterDocumentEntry,
+  resolveSectionVariants,
+} from "./story-context.ts";
 
 interface ParagraphAccumulator {
   blockId: string;
@@ -42,14 +51,19 @@ interface ParagraphAccumulator {
   styleId?: string;
   numbering?: ParagraphNode["numbering"];
   numberingPrefix?: string;
+  numberingSuffix?: "tab" | "space" | "nothing";
   segments: SurfaceInlineSegment[];
 }
 
 export function createEditorSurfaceSnapshot(
   document: CanonicalDocumentEnvelope,
   _selection: SelectionSnapshot,
+  activeStory: EditorStoryTarget = { kind: "main" },
 ): EditorSurfaceSnapshot {
-  const root = normalizeDocumentRoot(document.content);
+  const root = normalizeDocumentRoot({
+    type: "doc",
+    children: [...getStoryBlocks(document, activeStory)],
+  });
   const blocks: SurfaceBlockSnapshot[] = [];
   const lockedFragmentIds: string[] = [];
   const numberingPrefixResolver = createNumberingPrefixResolver(document.numbering);
@@ -79,13 +93,14 @@ export function createEditorSurfaceSnapshot(
     }
   }
 
-  blocks.push(...createSecondaryStoryPreviewBlocks(document, cursor));
+  const secondaryStories = createSecondaryStorySurfaces(document);
 
   return {
     storySize: cursor,
     plainText: createPlainText(blocks),
     blocks,
     lockedFragmentIds,
+    secondaryStories,
   };
 }
 
@@ -263,16 +278,27 @@ function createTableBlock(
         lockedFragmentIds.push(...result.lockedFragmentIds);
         innerCursor = result.nextCursor;
       }
+      const cellBorders = resolveCellBorderStyles(cell.borders);
       cells.push({
         gridSpan: cell.gridSpan ?? 1,
         verticalMerge: cell.verticalMerge ?? null,
         colspan: cell.gridSpan ?? 1,
         rowspan: rowSpans.get(`${rowIndex}:${cellIndex}`) ?? 1,
         ...(cell.shading?.fill ? { backgroundColor: `#${cell.shading.fill}` } : {}),
+        ...(cell.verticalAlign ? { verticalAlign: cell.verticalAlign } : {}),
+        ...(cellBorders.borderTop ? { borderTop: cellBorders.borderTop } : {}),
+        ...(cellBorders.borderRight ? { borderRight: cellBorders.borderRight } : {}),
+        ...(cellBorders.borderBottom ? { borderBottom: cellBorders.borderBottom } : {}),
+        ...(cellBorders.borderLeft ? { borderLeft: cellBorders.borderLeft } : {}),
         content: cellContent,
       });
     }
-    rows.push({ cells });
+    rows.push({
+      cells,
+      ...(row.height !== undefined ? { height: row.height } : {}),
+      ...(row.heightRule ? { heightRule: row.heightRule } : {}),
+      ...(row.isHeader ? { isHeader: row.isHeader } : {}),
+    });
   }
 
   return {
@@ -283,6 +309,8 @@ function createTableBlock(
       to: innerCursor,
       styleId: table.styleId,
       gridColumns: table.gridColumns,
+      ...(table.alignment ? { alignment: table.alignment } : {}),
+      ...(table.tblLook ? { tblLook: table.tblLook } : {}),
       rows,
     },
     lockedFragmentIds,
@@ -339,6 +367,23 @@ function computeTableRowSpans(table: TableNode): Map<string, number> {
   return rowSpans;
 }
 
+function resolveCellBorderStyles(
+  borders: TableCellBorders | undefined,
+): { borderTop?: string; borderRight?: string; borderBottom?: string; borderLeft?: string } {
+  if (!borders) return {};
+  const result: { borderTop?: string; borderRight?: string; borderBottom?: string; borderLeft?: string } = {};
+  const sides = [["top", "borderTop"], ["right", "borderRight"], ["bottom", "borderBottom"], ["left", "borderLeft"]] as const;
+  for (const [side, key] of sides) {
+    const spec = borders[side];
+    if (!spec || spec.value === "none" || spec.value === "nil") continue;
+    const width = spec.size ? `${Math.max(1, Math.round(spec.size / 8))}px` : "1px";
+    const style = spec.value === "double" ? "double" : spec.value === "dashed" || spec.value === "dashSmallGap" ? "dashed" : spec.value === "dotted" ? "dotted" : "solid";
+    const color = spec.color && spec.color !== "auto" ? `#${spec.color}` : "currentColor";
+    result[key] = `${width} ${style} ${color}`;
+  }
+  return result;
+}
+
 function createSdtBlock(
   sdtIndex: number,
   block: SdtNode,
@@ -381,6 +426,11 @@ function createSdtBlock(
       ...(block.properties.alias ? { alias: block.properties.alias } : {}),
       ...(block.properties.tag ? { tag: block.properties.tag } : {}),
       ...(block.properties.lock ? { lock: block.properties.lock } : {}),
+      ...(block.properties.checkbox ? { checkboxChecked: block.properties.checkbox.checked } : {}),
+      ...(block.properties.datePicker?.fullDate ? { dateValue: block.properties.datePicker.fullDate } : {}),
+      ...(block.properties.dropdownList ? { dropdownItems: block.properties.dropdownList } : {}),
+      ...(block.properties.comboBox ? { comboBoxItems: block.properties.comboBox } : {}),
+      ...(block.properties.showingPlcHdr ? { showingPlcHdr: true } : {}),
       children,
     },
     lockedFragmentIds,
@@ -407,10 +457,15 @@ function createParagraphBlock(
     ...(paragraph.styleId ? { styleId: paragraph.styleId } : {}),
     ...(paragraph.numbering ? { numbering: paragraph.numbering } : {}),
     ...(paragraph.numbering
-      ? {
-          numberingPrefix:
-            numberingPrefixResolver.resolve(paragraph.numbering) ?? undefined,
-        }
+      ? (() => {
+          const detailed = numberingPrefixResolver.resolveDetailed(paragraph.numbering);
+          return detailed
+            ? {
+                numberingPrefix: detailed.text,
+                ...(detailed.suffix ? { numberingSuffix: detailed.suffix } : {}),
+              }
+            : {};
+        })()
       : {}),
     ...(paragraph.alignment ? { alignment: paragraph.alignment } : {}),
     ...(paragraph.spacing ? { spacing: paragraph.spacing } : {}),
@@ -425,6 +480,7 @@ function createParagraphBlock(
     ...(paragraph.pageBreakBefore ? { pageBreakBefore: true } : {}),
     ...(paragraph.outlineLevel !== undefined ? { outlineLevel: paragraph.outlineLevel } : {}),
     ...(paragraph.bidi ? { bidi: true } : {}),
+    ...(paragraph.suppressLineNumbers ? { suppressLineNumbers: true } : {}),
     segments: [],
   };
   const lockedFragmentIds: string[] = [];
@@ -530,6 +586,7 @@ function appendInlineSegments(
           preview?.detail ??
           descriptor?.detail ??
           "Locked whole-unit to keep unsupported inline OOXML intact through export.",
+        ...(preview?.presentation ? { presentation: preview.presentation } : {}),
         state: "locked-preserve-only",
       });
       return { nextCursor: start + 1, lockedFragmentIds: [node.fragmentId] };
@@ -569,11 +626,12 @@ function appendInlineSegments(
     case "footnote_ref":
       paragraph.segments.push({
         segmentId: `${paragraph.blockId}-segment-${paragraph.segments.length}`,
-        kind: "text",
+        kind: "note_ref",
         from: start,
         to: start + 1,
-        text: node.noteId ?? "*",
-        marks: ["superscript" as SurfaceTextMark],
+        noteKind: node.noteKind ?? "footnote",
+        noteId: node.noteId ?? "",
+        label: node.noteId ?? "*",
       });
       return { nextCursor: start + 1, lockedFragmentIds: [] };
     case "field": {
@@ -643,7 +701,7 @@ function createSmartArtDetail(node: SmartArtPreviewNode): string {
 }
 
 function createShapeDetail(node: ShapeNode): string {
-  const parts = ["Shape read-only preview."];
+  const parts = [node.isTextBox ? "Text box read-only preview." : "Shape read-only preview."];
   if (node.geometry) parts.push(`Geometry: ${node.geometry}.`);
   if (node.text) parts.push(`Text: "${node.text}".`);
   parts.push("Original XML preserved for export.");
@@ -717,6 +775,131 @@ function createPlainText(
   return text.join("");
 }
 
+function createSecondaryStorySurfaces(
+  document: CanonicalDocumentEnvelope,
+): SecondaryStorySurface[] {
+  const surfaces: SecondaryStorySurface[] = [];
+  const subParts = document.subParts;
+  if (!subParts) {
+    return surfaces;
+  }
+
+  const numberingPrefixResolver = createNumberingPrefixResolver(document.numbering);
+
+  for (const section of collectSectionContexts(document)) {
+    const headerVariants = resolveSectionVariants(
+      "header",
+      section.index,
+      section.properties?.headerReferences,
+      subParts.headers ?? [],
+    );
+    for (const headerVariant of headerVariants) {
+      const target: EditorStoryTarget = {
+        kind: "header",
+        relationshipId: headerVariant.relationshipId,
+        variant: headerVariant.variant,
+        sectionIndex: section.index,
+      };
+      const header = findHeaderFooterDocumentEntry(document, target);
+      if (!header) {
+        continue;
+      }
+      surfaces.push(
+        createStorySurface(
+          target,
+          `Header · ${headerVariant.variant}`,
+          header.blocks,
+          document,
+          numberingPrefixResolver,
+        ),
+      );
+    }
+
+    const footerVariants = resolveSectionVariants(
+      "footer",
+      section.index,
+      section.properties?.footerReferences,
+      subParts.footers ?? [],
+    );
+    for (const footerVariant of footerVariants) {
+      const target: EditorStoryTarget = {
+        kind: "footer",
+        relationshipId: footerVariant.relationshipId,
+        variant: footerVariant.variant,
+        sectionIndex: section.index,
+      };
+      const footer = findHeaderFooterDocumentEntry(document, target);
+      if (!footer) {
+        continue;
+      }
+      surfaces.push(
+        createStorySurface(
+          target,
+          `Footer · ${footerVariant.variant}`,
+          footer.blocks,
+          document,
+          numberingPrefixResolver,
+        ),
+      );
+    }
+  }
+
+  const footnotes = Object.values(subParts.footnoteCollection?.footnotes ?? {}).sort(compareNoteIds);
+  for (const note of footnotes) {
+    const target: EditorStoryTarget = { kind: "footnote", noteId: note.noteId };
+    surfaces.push(createStorySurface(target, `Footnote ${note.noteId}`, note.blocks, document, numberingPrefixResolver));
+  }
+
+  const endnotes = Object.values(subParts.footnoteCollection?.endnotes ?? {}).sort(compareNoteIds);
+  for (const note of endnotes) {
+    const target: EditorStoryTarget = { kind: "endnote", noteId: note.noteId };
+    surfaces.push(createStorySurface(target, `Endnote ${note.noteId}`, note.blocks, document, numberingPrefixResolver));
+  }
+
+  return surfaces;
+}
+
+function createStorySurface(
+  target: EditorStoryTarget,
+  label: string,
+  blocks: readonly BlockNode[],
+  document: CanonicalDocumentEnvelope,
+  numberingPrefixResolver: NumberingPrefixResolver,
+): SecondaryStorySurface {
+  const surfaceBlocks: SurfaceBlockSnapshot[] = [];
+  let cursor = 0;
+  const counters = {
+    paragraph: 0,
+    table: 0,
+    opaque: 0,
+    sdt: 0,
+    customXml: 0,
+    altChunk: 0,
+  };
+
+  for (let index = 0; index < blocks.length; index += 1) {
+    const surfaceBlock = createSurfaceBlock(
+      blocks[index],
+      document,
+      cursor,
+      counters,
+      numberingPrefixResolver,
+    );
+    surfaceBlocks.push(surfaceBlock.block);
+    cursor = surfaceBlock.nextCursor;
+    if (index < blocks.length - 1 && blocks[index + 1]?.type === "paragraph") {
+      cursor += 1;
+    }
+  }
+
+  return {
+    target,
+    label,
+    storySize: cursor,
+    blocks: surfaceBlocks,
+  };
+}
+
 function createSecondaryStoryPreviewBlocks(
   document: CanonicalDocumentEnvelope,
   cursor: number,
@@ -887,7 +1070,51 @@ function toSurfaceTabStop(
 
 function describePreservedInlinePreview(
   payloadReference: string,
-): { label: string; detail: string } | null {
+): {
+  label: string;
+  detail: string;
+  presentation?: "inline-chip" | "quiet-marker";
+} | null {
+  if (/\b(?:w:)?proofErr\b/u.test(payloadReference)) {
+    const proofType = /\bw:type="([^"]+)"/u.exec(payloadReference)?.[1];
+    return {
+      label: "Proofing marker",
+      detail:
+        proofType && proofType.trim().length > 0
+          ? `Word proofing marker (${proofType}) preserved for export safety.`
+          : "Word proofing marker preserved for export safety.",
+      presentation: "quiet-marker",
+    };
+  }
+
+  if (/\b(?:w:)?lastRenderedPageBreak\b/u.test(payloadReference)) {
+    return {
+      label: "Rendered page break",
+      detail: "Word rendered page-break marker preserved for export safety.",
+      presentation: "quiet-marker",
+    };
+  }
+
+  if (/\b(?:w:)?permStart\b/u.test(payloadReference)) {
+    const editorGroup = /\bw:edGrp="([^"]+)"/u.exec(payloadReference)?.[1];
+    return {
+      label: "Protected range start",
+      detail:
+        editorGroup && editorGroup.trim().length > 0
+          ? `Protected range start for ${editorGroup} preserved for export safety.`
+          : "Protected range start preserved for export safety.",
+      presentation: "quiet-marker",
+    };
+  }
+
+  if (/\b(?:w:)?permEnd\b/u.test(payloadReference)) {
+    return {
+      label: "Protected range end",
+      detail: "Protected range end preserved for export safety.",
+      presentation: "quiet-marker",
+    };
+  }
+
   if (/\b(?:w:)?bookmarkStart\b/u.test(payloadReference)) {
     const name = /\bw:name="([^"]+)"/u.exec(payloadReference)?.[1];
     return {

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,10 +223,18 @@ 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];
   },
 };