@beyondwork/docx-react-component 1.0.18 → 1.0.19

package/src/runtime/numbering-prefix.ts

@@ -9,8 +9,14 @@ interface NumberingSequenceState {
   lastLevel: number | null;
 }
 
+export interface NumberingPrefixResult {
+  text: string;
+  suffix?: "tab" | "space" | "nothing";
+}
+
 export interface NumberingPrefixResolver {
   resolve(numbering: ParagraphNode["numbering"] | undefined): string | null;
+  resolveDetailed(numbering: ParagraphNode["numbering"] | undefined): NumberingPrefixResult | null;
 }
 
 const DEFAULT_START_AT = 1;
@@ -20,34 +26,49 @@ export function createNumberingPrefixResolver(
 ): NumberingPrefixResolver {
   const sequenceStates = new Map<string, NumberingSequenceState>();
 
+  function resolveInternal(numbering: ParagraphNode["numbering"] | undefined): NumberingPrefixResult | null {
+    if (!numbering) {
+      return null;
+    }
+
+    const instance = catalog.instances[numbering.numberingInstanceId];
+    if (!instance) {
+      return null;
+    }
+
+    const definition = catalog.abstractDefinitions[instance.abstractNumberingId];
+    if (!definition) {
+      return null;
+    }
+
+    const levelDefinitions = new Map(
+      definition.levels.map((level) => [level.level, level] as const),
+    );
+    const levelDefinition = levelDefinitions.get(numbering.level);
+    if (!levelDefinition || levelDefinition.format === "none") {
+      return null;
+    }
+
+    const sequenceState = getSequenceState(sequenceStates, numbering.numberingInstanceId);
+    advanceSequence(sequenceState, numbering.level, levelDefinitions, instance.overrides);
+
+    // When isLegalNumbering is true, use decimal format for all referenced levels
+    const effectiveLevelDefs = levelDefinition.isLegalNumbering
+      ? new Map(Array.from(levelDefinitions.entries()).map(([k, v]) => [k, { ...v, format: "decimal" }]))
+      : levelDefinitions;
+
+    const text = renderLevelText(levelDefinition.text, sequenceState.counters, effectiveLevelDefs);
+    if (text === null) return null;
+    return { text, suffix: levelDefinition.suffix };
+  }
+
   return {
     resolve(numbering) {
-      if (!numbering) {
-        return null;
-      }
-
-      const instance = catalog.instances[numbering.numberingInstanceId];
-      if (!instance) {
-        return null;
-      }
-
-      const definition = catalog.abstractDefinitions[instance.abstractNumberingId];
-      if (!definition) {
-        return null;
-      }
-
-      const levelDefinitions = new Map(
-        definition.levels.map((level) => [level.level, level] as const),
-      );
-      const levelDefinition = levelDefinitions.get(numbering.level);
-      if (!levelDefinition || levelDefinition.format === "none") {
-        return null;
-      }
-
-      const sequenceState = getSequenceState(sequenceStates, numbering.numberingInstanceId);
-      advanceSequence(sequenceState, numbering.level, levelDefinitions, instance.overrides);
-
-      return renderLevelText(levelDefinition.text, sequenceState.counters, levelDefinitions);
+      const result = resolveInternal(numbering);
+      return result?.text ?? null;
+    },
+    resolveDetailed(numbering) {
+      return resolveInternal(numbering);
     },
   };
 }

package/src/runtime/page-layout-estimation.ts

@@ -0,0 +1,212 @@
+import type {
+  PageLayoutSnapshot,
+  SurfaceBlockSnapshot,
+  SurfaceInlineSegment,
+} from "../api/public-types";
+
+const DEFAULT_FONT_SIZE_POINTS = 12;
+const DEFAULT_LINE_HEIGHT_TWIPS = 280;
+const MIN_BLOCK_HEIGHT_TWIPS = 240;
+const TABLE_ROW_PADDING_TWIPS = 120;
+
+export const DEFAULT_PAGE_ESTIMATE_PX_PER_TWIP = 1 / 15;
+
+export function estimateBlockHeight(
+  block: SurfaceBlockSnapshot | undefined,
+  columnWidth: number,
+): number {
+  if (!block) {
+    return 0;
+  }
+
+  switch (block.kind) {
+    case "paragraph":
+      return estimateParagraphHeight(block, columnWidth);
+    case "table":
+      return estimateTableHeight(block, columnWidth);
+    case "sdt_block":
+      return Math.max(
+        MIN_BLOCK_HEIGHT_TWIPS,
+        block.children.reduce((total, child) => total + estimateBlockHeight(child, columnWidth), 0),
+      );
+    case "opaque_block":
+      return block.label === "Section break" ? 0 : MIN_BLOCK_HEIGHT_TWIPS;
+  }
+}
+
+export function estimateParagraphHeight(
+  block: Extract<SurfaceBlockSnapshot, { kind: "paragraph" }>,
+  columnWidth: number,
+): number {
+  const lineHeight = estimateParagraphLineHeight(block);
+  const lineCount = estimateParagraphLineCount(block, columnWidth);
+  const spacingBefore = block.spacing?.before ?? 0;
+  const spacingAfter = block.spacing?.after ?? 0;
+  return Math.max(
+    MIN_BLOCK_HEIGHT_TWIPS,
+    lineHeight * lineCount + spacingBefore + spacingAfter,
+  );
+}
+
+export function estimateParagraphLineHeight(
+  block: Extract<SurfaceBlockSnapshot, { kind: "paragraph" }>,
+): number {
+  const explicitLine = block.spacing?.line;
+  if (typeof explicitLine === "number" && explicitLine > 0) {
+    return explicitLine;
+  }
+
+  const fontSizeHalfPoints = block.segments.find(
+    (segment): segment is Extract<SurfaceInlineSegment, { kind: "text" }> =>
+      segment.kind === "text" && typeof segment.markAttrs?.fontSize === "number",
+  )?.markAttrs?.fontSize;
+  const fontSizePoints =
+    typeof fontSizeHalfPoints === "number"
+      ? fontSizeHalfPoints / 2
+      : DEFAULT_FONT_SIZE_POINTS;
+  return Math.max(
+    DEFAULT_LINE_HEIGHT_TWIPS,
+    Math.round(fontSizePoints * 20 * 1.35),
+  );
+}
+
+export function estimateParagraphLineCount(
+  block: Extract<SurfaceBlockSnapshot, { kind: "paragraph" }>,
+  columnWidth: number,
+): number {
+  const averageCharWidth = estimateAverageCharWidth(block);
+  const charsPerLine = Math.max(12, Math.floor(columnWidth / averageCharWidth));
+  let lineCount = 1;
+  let currentLineChars = estimatedPrefixLength(block);
+
+  for (const segment of block.segments) {
+    switch (segment.kind) {
+      case "text":
+        currentLineChars += Array.from(segment.text).length;
+        while (currentLineChars > charsPerLine) {
+          lineCount += 1;
+          currentLineChars -= charsPerLine;
+        }
+        break;
+      case "tab":
+        currentLineChars += 4;
+        break;
+      case "hard_break":
+        lineCount += 1;
+        currentLineChars = 0;
+        break;
+      case "image":
+        lineCount += Math.max(1, Math.round(segment.display === "floating" ? 2 : 1));
+        currentLineChars = 0;
+        break;
+      case "note_ref":
+        currentLineChars += 1;
+        break;
+      case "opaque_inline":
+        if (segment.presentation !== "quiet-marker") {
+          currentLineChars += segment.label.length > 0 ? 1 : 0;
+        }
+        break;
+    }
+  }
+
+  return Math.max(1, lineCount);
+}
+
+export function getUsablePageHeight(layout: PageLayoutSnapshot): number {
+  return Math.max(
+    1440,
+    layout.pageHeight - layout.marginTop - layout.marginBottom,
+  );
+}
+
+export interface PageColumnMetric {
+  width: number;
+  space: number;
+}
+
+export function getUsableColumnMetrics(
+  layout: PageLayoutSnapshot,
+): PageColumnMetric[] {
+  const usableWidth = Math.max(
+    1440,
+    layout.pageWidth - layout.marginLeft - layout.marginRight - layout.gutter,
+  );
+  const columnCount = Math.max(1, layout.columns);
+  if (
+    !layout.equalWidthColumns &&
+    layout.columnDefinitions.length > 0
+  ) {
+    return layout.columnDefinitions.map((column, index) => ({
+      width: Math.max(720, column.width),
+      space:
+        index < layout.columnDefinitions.length - 1
+          ? Math.max(0, column.space ?? 0)
+          : 0,
+    }));
+  }
+
+  const width = columnCount <= 1
+    ? usableWidth
+    : Math.max(720, Math.floor(usableWidth / columnCount));
+  return Array.from({ length: columnCount }, () => ({
+    width,
+    space: 0,
+  }));
+}
+
+export function getUsableColumnWidth(layout: PageLayoutSnapshot): number {
+  return getUsableColumnMetrics(layout)[0]?.width ?? 1440;
+}
+
+function estimateTableHeight(
+  block: Extract<SurfaceBlockSnapshot, { kind: "table" }>,
+  columnWidth: number,
+): number {
+  let totalHeight = 0;
+  for (const row of block.rows) {
+    const explicitHeight = row.height ?? 0;
+    if (explicitHeight > 0) {
+      totalHeight += explicitHeight;
+      continue;
+    }
+
+    let rowHeight = MIN_BLOCK_HEIGHT_TWIPS;
+    for (const cell of row.cells) {
+      const cellHeight = cell.content.reduce(
+        (total, child) => total + estimateBlockHeight(child, columnWidth),
+        0,
+      );
+      rowHeight = Math.max(rowHeight, cellHeight + TABLE_ROW_PADDING_TWIPS);
+    }
+    totalHeight += rowHeight;
+  }
+  return Math.max(MIN_BLOCK_HEIGHT_TWIPS, totalHeight);
+}
+
+function estimateAverageCharWidth(
+  block: Extract<SurfaceBlockSnapshot, { kind: "paragraph" }>,
+): number {
+  const fontSizeHalfPoints = block.segments.find(
+    (segment): segment is Extract<SurfaceInlineSegment, { kind: "text" }> =>
+      segment.kind === "text" && typeof segment.markAttrs?.fontSize === "number",
+  )?.markAttrs?.fontSize;
+  const fontSizePoints =
+    typeof fontSizeHalfPoints === "number"
+      ? fontSizeHalfPoints / 2
+      : DEFAULT_FONT_SIZE_POINTS;
+  return Math.max(96, Math.round(fontSizePoints * 12));
+}
+
+function estimatedPrefixLength(
+  block: Extract<SurfaceBlockSnapshot, { kind: "paragraph" }>,
+): number {
+  const prefix = block.numberingPrefix ?? "";
+  const suffix =
+    block.numberingSuffix === "space"
+      ? 1
+      : block.numberingSuffix === "tab"
+        ? 4
+        : 0;
+  return prefix.length + suffix;
+}

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

@@ -155,6 +155,7 @@ function createDiagnosticsRenderSnapshot(
     isDirty: false,
     readOnly: true,
     selection: collapsedSelection(),
+    activeStory: { kind: "main" },
     documentStats: {
       storyLength: 0,
       commentCount: 0,

package/src/runtime/session-capabilities.ts

@@ -68,6 +68,7 @@ export function deriveCapabilities(
   const isReady = snapshot.isReady;
   const isReadOnly = snapshot.readOnly;
   const exportBlocked = snapshot.compatibility.blockExport;
+  const activeStory = snapshot.activeStory ?? { kind: "main" as const };
 
   // Phase derivation
   const phase: SessionCapabilities["phase"] = !isReady
@@ -88,6 +89,7 @@ export function deriveCapabilities(
   const canRedo = snapshot.commandState.canRedo && canEdit;
   const canAddComment =
     canEdit &&
+    activeStory.kind === "main" &&
     !snapshot.selection.isCollapsed &&
     Boolean(snapshot.surface) &&
     canCreateDocxCommentAnchor(snapshot.surface, toRuntimeAnchor(snapshot.selection.activeRange));

package/src/runtime/story-context.ts

@@ -0,0 +1,164 @@
+import type { EditorStoryTarget } from "../api/public-types";
+import type { CanonicalDocumentEnvelope } from "../core/state/editor-state.ts";
+import type {
+  FooterDocument,
+  HeaderDocument,
+  SectionProperties,
+} from "../model/canonical-document.ts";
+
+export interface DocumentSectionContext {
+  index: number;
+  properties?: SectionProperties;
+}
+
+export type HeaderFooterStoryTarget =
+  | Extract<EditorStoryTarget, { kind: "header" }>
+  | Extract<EditorStoryTarget, { kind: "footer" }>;
+
+export function collectSectionContexts(
+  document: CanonicalDocumentEnvelope,
+): DocumentSectionContext[] {
+  const sections: DocumentSectionContext[] = [];
+  let sectionIndex = 0;
+
+  for (const block of document.content.children) {
+    if (block.type !== "section_break") {
+      continue;
+    }
+    sections.push({
+      index: sectionIndex,
+      properties: block.sectionProperties,
+    });
+    sectionIndex += 1;
+  }
+
+  sections.push({
+    index: sectionIndex,
+    properties: document.subParts?.finalSectionProperties,
+  });
+
+  return sections;
+}
+
+export function resolveSectionVariants(
+  kind: "header" | "footer",
+  sectionIndex: number,
+  explicitReferences:
+    | SectionProperties["headerReferences"]
+    | SectionProperties["footerReferences"]
+    | undefined,
+  documents: HeaderDocument[] | FooterDocument[],
+): Array<{ variant: "default" | "first" | "even"; relationshipId: string }> {
+  if (explicitReferences && explicitReferences.length > 0) {
+    return explicitReferences.map((ref) => ({
+      variant: ref.variant,
+      relationshipId: ref.relationshipId,
+    }));
+  }
+
+  return documents
+    .filter(
+      (entry) =>
+        entry.sectionIndex === undefined || entry.sectionIndex === sectionIndex,
+    )
+    .map((entry) => ({
+      variant: entry.variant,
+      relationshipId: entry.relationshipId,
+    }));
+}
+
+export function findHeaderFooterDocumentEntry(
+  document: CanonicalDocumentEnvelope,
+  target: HeaderFooterStoryTarget,
+): HeaderDocument | FooterDocument | undefined {
+  const documents =
+    target.kind === "header"
+      ? document.subParts?.headers ?? []
+      : document.subParts?.footers ?? [];
+  const matches = documents.filter(
+    (entry) =>
+      entry.relationshipId === target.relationshipId &&
+      entry.variant === target.variant,
+  );
+  if (matches.length === 0) {
+    return undefined;
+  }
+  if (target.sectionIndex !== undefined) {
+    return (
+      matches.find((entry) => entry.sectionIndex === target.sectionIndex) ??
+      matches.find((entry) => entry.sectionIndex === undefined) ??
+      matches[0]
+    );
+  }
+  return matches[0];
+}
+
+export function sectionSupportsStoryTarget(
+  document: CanonicalDocumentEnvelope,
+  sectionIndex: number,
+  target: HeaderFooterStoryTarget,
+): boolean {
+  if (!findHeaderFooterDocumentEntry(document, target)) {
+    return false;
+  }
+
+  const section = collectSectionContexts(document).find(
+    (candidate) => candidate.index === sectionIndex,
+  );
+  if (!section) {
+    return false;
+  }
+
+  const variants = resolveSectionVariants(
+    target.kind,
+    sectionIndex,
+    target.kind === "header"
+      ? section.properties?.headerReferences
+      : section.properties?.footerReferences,
+    target.kind === "header"
+      ? document.subParts?.headers ?? []
+      : document.subParts?.footers ?? [],
+  );
+
+  return variants.some(
+    (variant) =>
+      variant.relationshipId === target.relationshipId &&
+      variant.variant === target.variant,
+  );
+}
+
+export function normalizeHeaderFooterTarget(
+  document: CanonicalDocumentEnvelope,
+  target: HeaderFooterStoryTarget,
+  preferredSectionIndex?: number,
+): HeaderFooterStoryTarget | undefined {
+  if (!findHeaderFooterDocumentEntry(document, target)) {
+    return undefined;
+  }
+
+  if (target.sectionIndex !== undefined) {
+    return sectionSupportsStoryTarget(document, target.sectionIndex, target)
+      ? target
+      : undefined;
+  }
+
+  const candidateIndexes = collectSectionContexts(document)
+    .map((section) => section.index)
+    .filter((sectionIndex) =>
+      sectionSupportsStoryTarget(document, sectionIndex, target),
+    );
+  if (candidateIndexes.length === 0) {
+    return undefined;
+  }
+
+  const resolvedSectionIndex =
+    preferredSectionIndex !== undefined &&
+    candidateIndexes.includes(preferredSectionIndex)
+      ? preferredSectionIndex
+      : candidateIndexes[0];
+
+  return {
+    ...target,
+    sectionIndex: resolvedSectionIndex,
+  };
+}

package/src/runtime/story-targeting.ts

@@ -0,0 +1,162 @@
+import type { EditorStoryTarget } from "../api/public-types";
+import type { CanonicalDocumentEnvelope } from "../core/state/editor-state.ts";
+import type { BlockNode } from "../model/canonical-document.ts";
+import {
+  findHeaderFooterDocumentEntry,
+  normalizeHeaderFooterTarget,
+} from "./story-context.ts";
+
+export function storyTargetKey(target: EditorStoryTarget): string {
+  switch (target.kind) {
+    case "main":
+      return "main";
+    case "header":
+      return `header:${target.relationshipId}:${target.variant}:${target.sectionIndex ?? "*"}`;
+    case "footer":
+      return `footer:${target.relationshipId}:${target.variant}:${target.sectionIndex ?? "*"}`;
+    case "footnote":
+      return `footnote:${target.noteId}`;
+    case "endnote":
+      return `endnote:${target.noteId}`;
+  }
+}
+
+export function getStoryBlocks(
+  document: CanonicalDocumentEnvelope,
+  target: EditorStoryTarget,
+): readonly BlockNode[] {
+  if (target.kind === "main") {
+    return document.content.children;
+  }
+
+  const subParts = document.subParts;
+  if (!subParts) {
+    return [];
+  }
+
+  switch (target.kind) {
+    case "header": {
+      const resolvedTarget = normalizeHeaderFooterTarget(document, target);
+      return (
+        resolvedTarget &&
+        findHeaderFooterDocumentEntry(document, resolvedTarget)?.blocks
+      ) ?? [];
+    }
+    case "footer": {
+      const resolvedTarget = normalizeHeaderFooterTarget(document, target);
+      return (
+        resolvedTarget &&
+        findHeaderFooterDocumentEntry(document, resolvedTarget)?.blocks
+      ) ?? [];
+    }
+    case "footnote":
+      return subParts.footnoteCollection?.footnotes[target.noteId]?.blocks ?? [];
+    case "endnote":
+      return subParts.footnoteCollection?.endnotes[target.noteId]?.blocks ?? [];
+  }
+}
+
+export function replaceStoryBlocks(
+  document: CanonicalDocumentEnvelope,
+  target: EditorStoryTarget,
+  blocks: readonly BlockNode[],
+): CanonicalDocumentEnvelope {
+  if (target.kind === "main") {
+    return {
+      ...document,
+      content: {
+        ...document.content,
+        children: [...blocks],
+      },
+    };
+  }
+
+  if (!document.subParts) {
+    return document;
+  }
+
+  switch (target.kind) {
+    case "header": {
+      const resolvedTarget = normalizeHeaderFooterTarget(document, target);
+      const matchedEntry = resolvedTarget
+        ? findHeaderFooterDocumentEntry(document, resolvedTarget)
+        : undefined;
+      if (!matchedEntry) {
+        return document;
+      }
+      return {
+        ...document,
+        subParts: {
+          ...document.subParts,
+          headers: document.subParts.headers.map((header) =>
+            header.relationshipId === matchedEntry.relationshipId &&
+              header.variant === matchedEntry.variant &&
+              header.partPath === matchedEntry.partPath
+              ? { ...header, blocks: [...blocks] }
+              : header,
+          ),
+        },
+      };
+    }
+    case "footer": {
+      const resolvedTarget = normalizeHeaderFooterTarget(document, target);
+      const matchedEntry = resolvedTarget
+        ? findHeaderFooterDocumentEntry(document, resolvedTarget)
+        : undefined;
+      if (!matchedEntry) {
+        return document;
+      }
+      return {
+        ...document,
+        subParts: {
+          ...document.subParts,
+          footers: document.subParts.footers.map((footer) =>
+            footer.relationshipId === matchedEntry.relationshipId &&
+              footer.variant === matchedEntry.variant &&
+              footer.partPath === matchedEntry.partPath
+              ? { ...footer, blocks: [...blocks] }
+              : footer,
+          ),
+        },
+      };
+    }
+    case "footnote":
+      return !document.subParts.footnoteCollection?.footnotes[target.noteId]
+        ? document
+        : {
+            ...document,
+            subParts: {
+              ...document.subParts,
+              footnoteCollection: {
+                ...document.subParts.footnoteCollection,
+                footnotes: {
+                  ...document.subParts.footnoteCollection.footnotes,
+                  [target.noteId]: {
+                    ...document.subParts.footnoteCollection.footnotes[target.noteId],
+                    blocks: [...blocks],
+                  },
+                },
+              },
+            },
+          };
+    case "endnote":
+      return !document.subParts.footnoteCollection?.endnotes[target.noteId]
+        ? document
+        : {
+            ...document,
+            subParts: {
+              ...document.subParts,
+              footnoteCollection: {
+                ...document.subParts.footnoteCollection,
+                endnotes: {
+                  ...document.subParts.footnoteCollection.endnotes,
+                  [target.noteId]: {
+                    ...document.subParts.footnoteCollection.endnotes[target.noteId],
+                    blocks: [...blocks],
+                  },
+                },
+              },
+            },
+          };
+  }
+}