@beyondwork/docx-react-component 1.0.37 → 1.0.39

package/src/core/commands/text-commands.ts

@@ -1,5 +1,10 @@
 import type { InsertTableOptions } from "../../api/public-types";
-import type { ParagraphNode } from "../../model/canonical-document.ts";
+import type {
+  DocumentRootNode,
+  ParagraphNode,
+  ParagraphStyleDefinition,
+  StylesCatalog,
+} from "../../model/canonical-document.ts";
 import {
   createSelectionSnapshot,
   type CanonicalDocumentEnvelope,
@@ -18,11 +23,102 @@ import {
   resolveParagraphScope,
   type StructuralMutationResult,
 } from "./structural-helpers.ts";
+import { createEditorSurfaceSnapshot } from "../../runtime/surface-projection.ts";
 
 export interface TextCommandContext {
   timestamp: string;
 }
 
+/**
+ * Walk the `basedOn` chain of paragraph styles looking for a `nextStyle`
+ * definition. Returns the resolved `nextStyle` id, or undefined if none is
+ * found. Caps the walk at 32 steps to guard against circular `basedOn` chains.
+ */
+function resolveNextStyle(
+  styleId: string | undefined,
+  catalog: StylesCatalog,
+): string | undefined {
+  if (!styleId) {
+    return undefined;
+  }
+  let current: string | undefined = styleId;
+  let steps = 0;
+  while (current && steps < 32) {
+    steps += 1;
+    const def: ParagraphStyleDefinition | undefined = catalog.paragraphs[current];
+    if (!def) {
+      return undefined;
+    }
+    if (def.nextStyle && catalog.paragraphs[def.nextStyle]) {
+      return def.nextStyle;
+    }
+    current = def.basedOn;
+  }
+  return undefined;
+}
+
+/**
+ * Given the result document and the head of the new selection (which sits at
+ * the start of the newly-created paragraph), locate that paragraph in the
+ * top-level `doc` children and return a new document with its `styleId` set to
+ * `nextStyleId` and its `numbering` cleared.
+ */
+function applyNextStyleToNewParagraph(
+  result: TextTransactionResult,
+  nextStyleId: string,
+): TextTransactionResult {
+  const root = result.document.content as DocumentRootNode;
+  if (!root || root.type !== "doc") {
+    return result;
+  }
+
+  const head = result.selection.head;
+  const surface = createEditorSurfaceSnapshot(result.document, result.selection);
+
+  let targetBlockIndex = -1;
+  for (let i = 0; i < surface.blocks.length; i += 1) {
+    const surfaceBlock = surface.blocks[i];
+    if (
+      surfaceBlock?.kind === "paragraph" &&
+      surfaceBlock.from === head
+    ) {
+      targetBlockIndex = i;
+      break;
+    }
+  }
+
+  if (targetBlockIndex === -1) {
+    return result;
+  }
+
+  const targetBlock = root.children[targetBlockIndex];
+  if (!targetBlock || targetBlock.type !== "paragraph") {
+    return result;
+  }
+
+  const { numbering: _numbering, ...restProps } = targetBlock;
+  const updatedParagraph: ParagraphNode = {
+    ...restProps,
+    styleId: nextStyleId,
+    children: targetBlock.children,
+  };
+
+  return {
+    ...result,
+    document: {
+      ...result.document,
+      content: {
+        ...root,
+        children: [
+          ...root.children.slice(0, targetBlockIndex),
+          updatedParagraph,
+          ...root.children.slice(targetBlockIndex + 1),
+        ],
+      },
+    },
+  };
+}
+
 export function insertText(
   document: CanonicalDocumentEnvelope,
   selection: SelectionSnapshot,
@@ -122,7 +218,11 @@ export function splitParagraph(
   selection: SelectionSnapshot,
   context: TextCommandContext,
 ): TextTransactionResult {
-  return applyTextTransaction(
+  // Resolve the current paragraph's styleId before the split so we can look up
+  // `nextStyle` from the styles catalog.
+  const scope = resolveParagraphScope(document, selection);
+
+  const result = applyTextTransaction(
     document,
     selection,
     {
@@ -131,6 +231,26 @@ export function splitParagraph(
     },
     context,
   );
+
+  // Only apply nextStyle for top-level paragraphs; table-cell traversal
+  // would require walking into nested blocks which the surface snapshot doesn't expose.
+  if (scope?.kind !== "top-level") {
+    return result;
+  }
+
+  const originalStyleId = scope.paragraph.styleId;
+  const nextStyleId =
+    originalStyleId !== undefined
+      ? resolveNextStyle(originalStyleId, document.styles)
+      : undefined;
+
+  // If the original paragraph's style specifies a `nextStyle`, apply it to the
+  // newly-created paragraph (the one at result.selection.head).
+  if (nextStyleId !== undefined) {
+    return applyNextStyleToNewParagraph(result, nextStyleId);
+  }
+
+  return result;
 }
 
 export function insertPageBreak(

package/src/io/docx-session.ts

@@ -1560,6 +1560,7 @@ function filterValidStyleIds(
     characters: filterRecord(catalog.characters),
     tables: filterRecord(catalog.tables),
     ...(catalog.latentStyles ? { latentStyles: catalog.latentStyles } : {}),
+    ...(catalog.docDefaults ? { docDefaults: catalog.docDefaults } : {}),
     ...(catalog.fromPackage !== undefined ? { fromPackage: catalog.fromPackage } : {}),
   };
 }

package/src/io/export/serialize-main-document.ts

@@ -1263,20 +1263,11 @@ function offsetParagraphBoundary(
   };
 }
 
-/**
- * Detect a production build without referencing the Node-only `process`
- * global directly (the production tsconfig excludes @types/node). Returns
- * true when NODE_ENV === "production"; otherwise false (browser or dev).
- */
-function isProductionEnvironment(): boolean {
+function assertUniqueBookmarkIdsOrWarn(documentXml: string): void {
   const proc = (globalThis as unknown as {
     process?: { env?: Record<string, string | undefined> };
   }).process;
-  return proc?.env?.NODE_ENV === "production";
-}
-
-function assertUniqueBookmarkIdsOrWarn(documentXml: string): void {
-  if (isProductionEnvironment()) {
+  if (proc?.env?.NODE_ENV === "production") {
     return;
   }
   const seen = new Set<string>();

package/src/io/export/serialize-numbering.ts

@@ -3,6 +3,7 @@ import {
   isSyntheticDocxNullAbstractDefinition,
   isSyntheticDocxNullNumberingInstance,
 } from "../ooxml/numbering-sentinels.ts";
+import { buildRunPropertiesXml } from "./serialize-run-formatting.ts";
 import { twip } from "./twip.ts";
 
 export const WORD_NUMBERING_CONTENT_TYPE =
@@ -62,35 +63,61 @@ function serializeAbstractDefinition(definition: NumberingCatalog["abstractDefin
       stripCanonicalPrefix(definition.abstractNumberingId, "abstract-num:"),
     ),
   );
+
+  // ECMA-376 abstractNum child order: nsid, multiLevelType, tmpl, styleLink,
+  // numStyleLink — all before the <w:lvl> children.
+  const nsid = definition.nsid
+    ? `<w:nsid w:val="${escapeAttribute(definition.nsid)}"/>`
+    : "";
+  const multiLevelType = definition.multiLevelType
+    ? `<w:multiLevelType w:val="${escapeAttribute(definition.multiLevelType)}"/>`
+    : "";
+  const tmpl = definition.tplc
+    ? `<w:tmpl w:val="${escapeAttribute(definition.tplc)}"/>`
+    : "";
+  const styleLink = definition.styleLink
+    ? `<w:styleLink w:val="${escapeAttribute(definition.styleLink)}"/>`
+    : "";
+  const numStyleLink = definition.numStyleLink
+    ? `<w:numStyleLink w:val="${escapeAttribute(definition.numStyleLink)}"/>`
+    : "";
+
   const levels = [...definition.levels]
     .sort((left, right) => left.level - right.level)
     .map((level) => serializeLevel(level))
     .join("");
 
-  return `<w:abstractNum w:abstractNumId="${abstractNumId}">${levels}</w:abstractNum>`;
+  return `<w:abstractNum w:abstractNumId="${abstractNumId}">${nsid}${multiLevelType}${tmpl}${styleLink}${numStyleLink}${levels}</w:abstractNum>`;
 }
 
 function serializeLevel(
   level: NumberingCatalog["abstractDefinitions"][string]["levels"][number],
   serializedLevel = level.level,
 ): string {
+  // ECMA-376 canonical lvl child order:
+  // start, numFmt, lvlRestart, pStyle, isLgl, suff, lvlText, lvlJc, pPr, rPr
   const start =
     level.startAt !== undefined
       ? `<w:start w:val="${clampStart(level.startAt)}"/>`
       : "";
+  const numFmt = `<w:numFmt w:val="${escapeAttribute(level.format)}"/>`;
+  const lvlRestart =
+    level.restartAfterLevel !== undefined
+      ? `<w:lvlRestart w:val="${level.restartAfterLevel}"/>`
+      : "";
   const paragraphStyle = level.paragraphStyleId
     ? `<w:pStyle w:val="${escapeAttribute(level.paragraphStyleId)}"/>`
     : "";
   const isLegal = level.isLegalNumbering ? "<w:isLgl/>" : "";
   const suffix = level.suffix ? `<w:suff w:val="${escapeAttribute(level.suffix)}"/>` : "";
+  const lvlText = `<w:lvlText w:val="${escapeAttribute(level.text)}"/>`;
   const justification = level.paragraphGeometry?.justification
     ? `<w:lvlJc w:val="${escapeAttribute(level.paragraphGeometry.justification)}"/>`
     : "";
   const paragraphProperties = serializeLevelParagraphGeometry(level.paragraphGeometry);
+  const runProperties = buildRunPropertiesXml(level.runProperties);
 
-  return `<w:lvl w:ilvl="${clampIlvl(serializedLevel)}">${start}<w:numFmt w:val="${escapeAttribute(
-    level.format,
-  )}"/><w:lvlText w:val="${escapeAttribute(level.text)}"/>${paragraphStyle}${isLegal}${suffix}${justification}${paragraphProperties}</w:lvl>`;
+  return `<w:lvl w:ilvl="${clampIlvl(serializedLevel)}">${start}${numFmt}${lvlRestart}${paragraphStyle}${isLegal}${suffix}${lvlText}${justification}${paragraphProperties}${runProperties}</w:lvl>`;
 }
 
 function serializeLevelOverride(
@@ -101,14 +128,17 @@ function serializeLevelOverride(
     return "";
   }
 
+  // ECMA-376 canonical lvl child order (override subset):
+  // start, numFmt, lvlRestart, pStyle, isLgl, suff, lvlText, lvlJc, pPr, rPr
   const start =
     level.startAt !== undefined
       ? `<w:start w:val="${clampStart(level.startAt)}"/>`
       : "";
   const format = level.format ? `<w:numFmt w:val="${escapeAttribute(level.format)}"/>` : "";
-  const text = level.text !== undefined
-    ? `<w:lvlText w:val="${escapeAttribute(level.text)}"/>`
-    : "";
+  const lvlRestart =
+    level.restartAfterLevel !== undefined
+      ? `<w:lvlRestart w:val="${level.restartAfterLevel}"/>`
+      : "";
   const paragraphStyle = level.paragraphStyleId
     ? `<w:pStyle w:val="${escapeAttribute(level.paragraphStyleId)}"/>`
     : "";
@@ -124,11 +154,15 @@ function serializeLevelOverride(
         ? `<w:isLgl w:val="false"/>`
         : "";
   const suffix = level.suffix ? `<w:suff w:val="${escapeAttribute(level.suffix)}"/>` : "";
+  const text = level.text !== undefined
+    ? `<w:lvlText w:val="${escapeAttribute(level.text)}"/>`
+    : "";
   const justification = level.paragraphGeometry?.justification
     ? `<w:lvlJc w:val="${escapeAttribute(level.paragraphGeometry.justification)}"/>`
     : "";
   const paragraphProperties = serializeLevelParagraphGeometry(level.paragraphGeometry);
-  const body = `${start}${format}${text}${paragraphStyle}${isLegal}${suffix}${justification}${paragraphProperties}`;
+  const runProperties = buildRunPropertiesXml(level.runProperties);
+  const body = `${start}${format}${lvlRestart}${paragraphStyle}${isLegal}${suffix}${text}${justification}${paragraphProperties}${runProperties}`;
 
   return body.length > 0
     ? `<w:lvl w:ilvl="${clampIlvl(serializedLevel)}">${body}</w:lvl>`
@@ -276,8 +310,7 @@ function warnClamp(attr: string, from: number, to: number): void {
   warnedClamps += 1;
   // Only warn outside of production builds. The test runner shows these
   // via console.warn automatically; in production this is a silent no-op
-  // so the Buffer cost is zero. Read NODE_ENV through globalThis so the
-  // production tsconfig (which excludes @types/node) type-checks cleanly.
+  // so the Buffer cost is zero.
   const proc = (globalThis as unknown as {
     process?: { env?: Record<string, string | undefined> };
   }).process;

package/src/io/export/serialize-paragraph-formatting.ts

@@ -0,0 +1,152 @@
+/**
+ * Serialize a `CanonicalParagraphFormatting` back into an OOXML `<w:pPr>` fragment.
+ * Returns empty when the input has no fields. Emits elements in ECMA-376 canonical
+ * order so the OpenXML SDK validator accepts the output.
+ */
+
+import type {
+  CanonicalParagraphFormatting,
+  ParagraphBorders,
+  ParagraphIndentation,
+  ParagraphShading,
+  ParagraphSpacing,
+  TabStop,
+} from "../../model/canonical-document.ts";
+import { buildRunPropertiesXml } from "./serialize-run-formatting.ts";
+
+function escXml(value: string): string {
+  return value
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+}
+
+function toggleEl(tag: string, value: boolean | undefined): string {
+  if (value === undefined) return "";
+  return value ? `<w:${tag}/>` : `<w:${tag} w:val="0"/>`;
+}
+
+function borderAttrs(b: {
+  value?: string;
+  size?: number;
+  space?: number;
+  color?: string;
+}): string {
+  const attrs: string[] = [];
+  if (b.value) attrs.push(`w:val="${escXml(b.value)}"`);
+  if (b.size !== undefined) attrs.push(`w:sz="${b.size}"`);
+  if (b.space !== undefined) attrs.push(`w:space="${b.space}"`);
+  if (b.color) attrs.push(`w:color="${escXml(b.color)}"`);
+  return attrs.join(" ");
+}
+
+function buildBordersXml(b: ParagraphBorders | undefined): string {
+  if (!b) return "";
+  const sides = ["top", "left", "bottom", "right", "between", "bar"] as const;
+  const parts: string[] = [];
+  for (const side of sides) {
+    const spec = b[side];
+    if (!spec) continue;
+    const attrs = borderAttrs(spec);
+    if (attrs) parts.push(`<w:${side} ${attrs}/>`);
+  }
+  return parts.length > 0 ? `<w:pBdr>${parts.join("")}</w:pBdr>` : "";
+}
+
+function buildShadingXml(s: ParagraphShading | undefined): string {
+  if (!s) return "";
+  const attrs: string[] = [];
+  if (s.val) attrs.push(`w:val="${escXml(s.val)}"`);
+  if (s.color) attrs.push(`w:color="${escXml(s.color)}"`);
+  if (s.fill) attrs.push(`w:fill="${escXml(s.fill)}"`);
+  return attrs.length > 0 ? `<w:shd ${attrs.join(" ")}/>` : "";
+}
+
+function buildTabsXml(tabs: TabStop[] | undefined): string {
+  if (!tabs || tabs.length === 0) return "";
+  const parts = tabs.map((t) => {
+    // Canonical "middleDot" → OOXML "middledot"
+    const leader = t.leader === "middleDot" ? "middledot" : t.leader;
+    const attrs: string[] = [`w:val="${escXml(t.align)}"`, `w:pos="${t.position}"`];
+    if (leader) attrs.push(`w:leader="${escXml(leader)}"`);
+    return `<w:tab ${attrs.join(" ")}/>`;
+  });
+  return `<w:tabs>${parts.join("")}</w:tabs>`;
+}
+
+function buildSpacingXml(s: ParagraphSpacing | undefined): string {
+  if (!s) return "";
+  const attrs: string[] = [];
+  if (s.before !== undefined) attrs.push(`w:before="${s.before}"`);
+  if (s.after !== undefined) attrs.push(`w:after="${s.after}"`);
+  if (s.line !== undefined) attrs.push(`w:line="${s.line}"`);
+  if (s.lineRule) attrs.push(`w:lineRule="${escXml(s.lineRule)}"`);
+  return attrs.length > 0 ? `<w:spacing ${attrs.join(" ")}/>` : "";
+}
+
+function buildIndentXml(i: ParagraphIndentation | undefined): string {
+  if (!i) return "";
+  const attrs: string[] = [];
+  if (i.left !== undefined) attrs.push(`w:left="${i.left}"`);
+  if (i.right !== undefined) attrs.push(`w:right="${i.right}"`);
+  if (i.firstLine !== undefined) attrs.push(`w:firstLine="${i.firstLine}"`);
+  if (i.hanging !== undefined) attrs.push(`w:hanging="${i.hanging}"`);
+  return attrs.length > 0 ? `<w:ind ${attrs.join(" ")}/>` : "";
+}
+
+export function buildParagraphPropertiesXml(
+  pPr: CanonicalParagraphFormatting | undefined,
+): string {
+  if (!pPr) return "";
+  const parts: string[] = [];
+
+  // ECMA-376 canonical pPr child order (subset we model):
+  // 1. keepNext, keepLines, pageBreakBefore
+  parts.push(toggleEl("keepNext", pPr.keepNext));
+  parts.push(toggleEl("keepLines", pPr.keepLines));
+  parts.push(toggleEl("pageBreakBefore", pPr.pageBreakBefore));
+
+  // 4. pBdr
+  parts.push(buildBordersXml(pPr.borders));
+
+  // 5. shd
+  parts.push(buildShadingXml(pPr.shading));
+
+  // 6. tabs
+  parts.push(buildTabsXml(pPr.tabStops));
+
+  // 7. spacing
+  parts.push(buildSpacingXml(pPr.spacing));
+
+  // 8. ind
+  parts.push(buildIndentXml(pPr.indentation));
+
+  // 9. contextualSpacing
+  parts.push(toggleEl("contextualSpacing", pPr.contextualSpacing));
+
+  // 10. widowControl
+  parts.push(toggleEl("widowControl", pPr.widowControl));
+
+  // 11. suppressLineNumbers, suppressAutoHyphens
+  parts.push(toggleEl("suppressLineNumbers", pPr.suppressLineNumbers));
+  parts.push(toggleEl("suppressAutoHyphens", pPr.suppressAutoHyphens));
+
+  // 12. bidi
+  parts.push(toggleEl("bidi", pPr.bidi));
+
+  // 13. jc
+  if (pPr.alignment) parts.push(`<w:jc w:val="${escXml(pPr.alignment)}"/>`);
+
+  // 14. outlineLvl
+  if (pPr.outlineLevel !== undefined) parts.push(`<w:outlineLvl w:val="${pPr.outlineLevel}"/>`);
+
+  // 15. rPr (paragraph mark)
+  if (pPr.paragraphMarkRunProperties) {
+    const markXml = buildRunPropertiesXml(pPr.paragraphMarkRunProperties);
+    if (markXml) parts.push(markXml);
+  }
+
+  const body = parts.filter(Boolean).join("");
+  return body.length > 0 ? `<w:pPr>${body}</w:pPr>` : "";
+}

package/src/io/export/serialize-run-formatting.ts

@@ -0,0 +1,90 @@
+/**
+ * Serialize a `CanonicalRunFormatting` back into an OOXML `<w:rPr>` fragment.
+ * Returns an empty string when the input has no fields, so callers can safely
+ * concatenate without emitting a `<w:rPr/>` husk.
+ *
+ * Elements are emitted in ECMA-376 canonical order so the OpenXML SDK
+ * validator accepts the output.
+ */
+
+import type { CanonicalRunFormatting } from "../../model/canonical-document.ts";
+
+function escXml(value: string): string {
+  return value
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+}
+
+function toggleEl(tag: string, value: boolean | undefined): string {
+  if (value === undefined) return "";
+  return value ? `<w:${tag}/>` : `<w:${tag} w:val="0"/>`;
+}
+
+export function buildRunPropertiesXml(rPr: CanonicalRunFormatting | undefined): string {
+  if (!rPr) return "";
+  const parts: string[] = [];
+
+  // 1. rStyle
+  if (rPr.characterStyleId) parts.push(`<w:rStyle w:val="${escXml(rPr.characterStyleId)}"/>`);
+
+  // 2. rFonts
+  if (rPr.fontFamilyAscii || rPr.fontFamilyHAnsi || rPr.fontFamilyEastAsia || rPr.fontFamilyCs) {
+    const attrs: string[] = [];
+    if (rPr.fontFamilyAscii) attrs.push(`w:ascii="${escXml(rPr.fontFamilyAscii)}"`);
+    if (rPr.fontFamilyHAnsi) attrs.push(`w:hAnsi="${escXml(rPr.fontFamilyHAnsi)}"`);
+    if (rPr.fontFamilyEastAsia) attrs.push(`w:eastAsia="${escXml(rPr.fontFamilyEastAsia)}"`);
+    if (rPr.fontFamilyCs) attrs.push(`w:cs="${escXml(rPr.fontFamilyCs)}"`);
+    parts.push(`<w:rFonts ${attrs.join(" ")}/>`);
+  }
+
+  // 3. b, bCs (bCs not modeled, skip)
+  parts.push(toggleEl("b", rPr.bold));
+
+  // 4. i, iCs (iCs not modeled, skip)
+  parts.push(toggleEl("i", rPr.italic));
+
+  // 5. caps, smallCaps
+  parts.push(toggleEl("caps", rPr.allCaps));
+  parts.push(toggleEl("smallCaps", rPr.smallCaps));
+
+  // 6. strike, dstrike
+  parts.push(toggleEl("strike", rPr.strikethrough));
+  parts.push(toggleEl("dstrike", rPr.doubleStrikethrough));
+
+  // 7. vanish
+  parts.push(toggleEl("vanish", rPr.vanish));
+
+  // 8. color
+  if (rPr.colorHex || rPr.colorThemeSlot) {
+    const attrs: string[] = [];
+    if (rPr.colorHex) attrs.push(`w:val="${escXml(rPr.colorHex)}"`);
+    if (rPr.colorThemeSlot) attrs.push(`w:themeColor="${escXml(rPr.colorThemeSlot)}"`);
+    parts.push(`<w:color ${attrs.join(" ")}/>`);
+  }
+
+  // 9. spacing (character spacing)
+  if (rPr.characterSpacingTwips !== undefined) {
+    parts.push(`<w:spacing w:val="${rPr.characterSpacingTwips}"/>`);
+  }
+
+  // 10. highlight
+  if (rPr.highlight) parts.push(`<w:highlight w:val="${escXml(rPr.highlight)}"/>`);
+
+  // 11. u (underline)
+  if (rPr.underline) parts.push(`<w:u w:val="${escXml(rPr.underline)}"/>`);
+
+  // 12. vertAlign
+  if (rPr.verticalAlign) parts.push(`<w:vertAlign w:val="${escXml(rPr.verticalAlign)}"/>`);
+
+  // 13. lang
+  if (rPr.languageCode) parts.push(`<w:lang w:val="${escXml(rPr.languageCode)}"/>`);
+
+  // 14. sz, szCs
+  if (rPr.fontSizeHalfPoints !== undefined) parts.push(`<w:sz w:val="${rPr.fontSizeHalfPoints}"/>`);
+  if (rPr.fontSizeCsHalfPoints !== undefined) parts.push(`<w:szCs w:val="${rPr.fontSizeCsHalfPoints}"/>`);
+
+  const body = parts.filter(Boolean).join("");
+  return body.length > 0 ? `<w:rPr>${body}</w:rPr>` : "";
+}