@beyondwork/docx-react-component 1.0.109 → 1.0.110

package/src/runtime/layout/resolve-page-previews.ts

@@ -31,6 +31,16 @@ export interface PagePreviewMaps {
   footerPreviewByPageId: Map<string, string>;
 }
 
+type PageLocalFieldLedger = readonly {
+  readonly family: string;
+  readonly displayText: string;
+}[];
+
+interface PagePreviewFieldState {
+  readonly ledger: PageLocalFieldLedger | undefined;
+  ordinal: number;
+}
+
 export function buildPagePreviewMaps(
   graph: RuntimePageGraph,
   subParts: {
@@ -49,7 +59,10 @@ export function buildPagePreviewMaps(
       if (source) {
         headerPreviewByPageId.set(
           page.pageId,
-          flattenBlocksToPreview(source.blocks, page, graph),
+          flattenBlocksToPreview(source.blocks, page, graph, {
+            ledger: findPageLocalStoryFieldLedger(page, headerStory),
+            ordinal: 0,
+          }),
         );
       }
     }
@@ -59,7 +72,10 @@ export function buildPagePreviewMaps(
       if (source) {
         footerPreviewByPageId.set(
           page.pageId,
-          flattenBlocksToPreview(source.blocks, page, graph),
+          flattenBlocksToPreview(source.blocks, page, graph, {
+            ledger: findPageLocalStoryFieldLedger(page, footerStory),
+            ordinal: 0,
+          }),
         );
       }
     }
@@ -76,14 +92,30 @@ function findSubPart<T extends HeaderDocument | FooterDocument>(
   return parts.find((p) => p.relationshipId === relationshipId);
 }
 
+function findPageLocalStoryFieldLedger(
+  page: RuntimePageNode,
+  story: NonNullable<RuntimePageNode["stories"]["header" | "footer"]>,
+): PageLocalFieldLedger | undefined {
+  const pageLocalStory = page.frame?.pageLocalStories.find(
+    (candidate) =>
+      candidate.kind === story.kind &&
+      candidate.relationshipId === story.relationshipId &&
+      candidate.variant === story.variant &&
+      (story.sectionIndex === undefined ||
+        candidate.sectionIndex === story.sectionIndex),
+  );
+  return pageLocalStory?.resolvedFields;
+}
+
 function flattenBlocksToPreview(
   blocks: ReadonlyArray<BlockNode>,
   page: RuntimePageNode,
   graph: RuntimePageGraph,
+  fieldState: PagePreviewFieldState,
 ): string {
   const parts: string[] = [];
   for (const block of blocks) {
-    collectBlockText(block, page, graph, parts);
+    collectBlockText(block, page, graph, fieldState, parts);
     if (joinPreview(parts).length >= MAX_PREVIEW_CHARS) break;
   }
   return truncate(joinPreview(parts));
@@ -93,26 +125,27 @@ function collectBlockText(
   block: BlockNode,
   page: RuntimePageNode,
   graph: RuntimePageGraph,
+  fieldState: PagePreviewFieldState,
   out: string[],
 ): void {
   switch (block.type) {
     case "paragraph":
       for (const child of block.children) {
-        collectInlineText(child, page, graph, out);
+        collectInlineText(child, page, graph, fieldState, out);
       }
       break;
     case "table":
       for (const row of block.rows) {
         for (const cell of row.cells) {
           for (const childBlock of cell.children) {
-            collectBlockText(childBlock, page, graph, out);
+            collectBlockText(childBlock, page, graph, fieldState, out);
           }
         }
       }
       break;
     case "sdt":
       for (const child of block.children) {
-        collectBlockText(child, page, graph, out);
+        collectBlockText(child, page, graph, fieldState, out);
       }
       break;
     // opaque_block / section_break / custom_xml / alt_chunk — no preview text.
@@ -125,6 +158,7 @@ function collectInlineText(
   inline: InlineNode,
   page: RuntimePageNode,
   graph: RuntimePageGraph,
+  fieldState: PagePreviewFieldState,
   out: string[],
 ): void {
   switch (inline.type) {
@@ -141,8 +175,12 @@ function collectInlineText(
       const family = inline.fieldFamily ?? classifyFieldInstructionLocal(inline.instruction);
       const cached = flattenInline(inline.children);
       if (family === "PAGE" || family === "NUMPAGES" || family === "SECTIONPAGES") {
+        const ledgerField = fieldState.ledger?.[fieldState.ordinal];
+        fieldState.ordinal += 1;
         out.push(
-          resolvePageFieldDisplayText(family, cached, { page, graph }),
+          ledgerField?.family === family
+            ? ledgerField.displayText
+            : resolvePageFieldDisplayText(family, cached, { page, graph }),
         );
       } else {
         out.push(cached);
@@ -151,7 +189,7 @@ function collectInlineText(
     }
     case "hyperlink":
       for (const child of inline.children) {
-        collectInlineText(child, page, graph, out);
+        collectInlineText(child, page, graph, fieldState, out);
       }
       break;
     // bookmark_start/end, opaque_inline, note_ref etc — skip.

package/src/ui-tailwind/chrome-overlay/tw-table-split-row-carry-overlay.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+
+export interface TableSplitRowCarryOverlayEntry {
+  blockId: string;
+  rowIndex: number;
+  topPx: number;
+  leftPx: number;
+  widthPx: number;
+  heightPx: number;
+  continuesFromPreviousPage?: boolean;
+  continuesToNextPage?: boolean;
+}
+
+export interface TwTableSplitRowCarryOverlayProps {
+  entries: readonly TableSplitRowCarryOverlayEntry[];
+}
+
+function TwTableSplitRowCarryOverlayInner({
+  entries,
+}: TwTableSplitRowCarryOverlayProps): React.ReactElement | null {
+  if (entries.length === 0) return null;
+
+  return (
+    <>
+      {entries.map((entry) => (
+        <div
+          key={`${entry.blockId}:${entry.rowIndex}:${entry.topPx}:${entry.heightPx}`}
+          aria-hidden
+          data-table-split-row-carry=""
+          data-block-id={entry.blockId}
+          data-row-index={entry.rowIndex}
+          data-continues-from-previous-page={
+            entry.continuesFromPreviousPage ? "true" : undefined
+          }
+          data-continues-to-next-page={
+            entry.continuesToNextPage ? "true" : undefined
+          }
+          style={{
+            position: "absolute",
+            top: `${entry.topPx}px`,
+            left: `${entry.leftPx}px`,
+            width: `${entry.widthPx}px`,
+            height: `${entry.heightPx}px`,
+            pointerEvents: "none",
+            boxSizing: "border-box",
+            borderTop: entry.continuesFromPreviousPage
+              ? "1px dashed var(--color-border-accent)"
+              : undefined,
+            borderBottom: entry.continuesToNextPage
+              ? "1px dashed var(--color-border-accent)"
+              : undefined,
+            backgroundColor: "color-mix(in srgb, var(--color-accent) 8%, transparent)",
+          }}
+        />
+      ))}
+    </>
+  );
+}
+
+export const TwTableSplitRowCarryOverlay = React.memo(
+  TwTableSplitRowCarryOverlayInner,
+);

package/src/ui-tailwind/editor-surface/tw-prosemirror-surface.tsx

@@ -151,6 +151,7 @@ function buildPageBreakDecorationsFromProps(
       pageIndex: p.page.pageIndex,
       startOffset: p.page.startOffset,
       isBlankFiller: p.page.isBlankFiller,
+      frame: p.page.frame,
       stories: {
         displayPageNumber: p.page.stories.displayPageNumber,
         header: p.page.stories.header,

package/src/ui-tailwind/page-stack/tw-page-chrome-entry.tsx

@@ -16,6 +16,7 @@
 import React from "react";
 import type {
   EditorStoryTarget,
+  GeometryFacet,
   PublicPageNode,
   SurfaceTableRowSnapshot,
   WordReviewEditorLayoutFacet,
@@ -23,6 +24,10 @@ import type {
 import { buildPageAnchorAttributes } from "../../api/v3/_page-anchor-id.ts";
 import type { PageOverlayRect } from "../chrome-overlay/tw-page-stack-overlay-layer.tsx";
 import { TwTableContinuationHeader } from "../chrome-overlay/tw-table-continuation-header.tsx";
+import {
+  TwTableSplitRowCarryOverlay,
+  type TableSplitRowCarryOverlayEntry,
+} from "../chrome-overlay/tw-table-split-row-carry-overlay.tsx";
 import { FRAME_PX_PER_TWIP_AT_96DPI } from "../tw-review-workspace.tsx";
 import { TwPageHeaderBand } from "./tw-page-header-band.tsx";
 import { TwPageFooterBand } from "./tw-page-footer-band.tsx";
@@ -35,6 +40,7 @@ export interface TwPageChromeEntryProps {
   pageIndex: number;
   page: PublicPageNode;
   facet: WordReviewEditorLayoutFacet;
+  geometryFacet?: GeometryFacet;
   activeStory: EditorStoryTarget;
   activeStoryPageIndex?: number | null;
   onOpenStory?: (target: EditorStoryTarget, pageIndex: number) => void;
@@ -60,6 +66,7 @@ function TwPageChromeEntryInner({
   pageIndex,
   page,
   facet,
+  geometryFacet,
   activeStory,
   activeStoryPageIndex,
   onOpenStory,
@@ -134,6 +141,16 @@ function TwPageChromeEntryInner({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [facet, pageIndex, page, renderFrameRevision]);
 
+  const splitRowCarryEntries = React.useMemo(
+    () =>
+      collectSplitRowCarryOverlayEntries({
+        geometryFacet,
+        pageIndex,
+        pageTopPx: rect.topPx,
+      }),
+    [geometryFacet, pageIndex, rect.topPx, renderFrameRevision],
+  );
+
   const handleHeaderDoubleClick = React.useCallback(
     () => headerStory && onOpenStory?.(headerStory, pageIndex),
     [onOpenStory, headerStory, pageIndex],
@@ -257,6 +274,7 @@ function TwPageChromeEntryInner({
           bodyOriginTopPx={px(layout.marginTop)}
         />
       ))}
+      <TwTableSplitRowCarryOverlay entries={splitRowCarryEntries} />
     </div>
   );
 }
@@ -269,6 +287,7 @@ function propsAreEqual(
     prev.pageIndex === next.pageIndex &&
     prev.page === next.page &&
     prev.facet === next.facet &&
+    prev.geometryFacet === next.geometryFacet &&
     prev.activeStory === next.activeStory &&
     prev.activeStoryPageIndex === next.activeStoryPageIndex &&
     prev.onOpenStory === next.onOpenStory &&
@@ -285,6 +304,49 @@ function propsAreEqual(
 
 export const TwPageChromeEntry = React.memo(TwPageChromeEntryInner, propsAreEqual);
 
+function collectSplitRowCarryOverlayEntries(input: {
+  geometryFacet?: GeometryFacet;
+  pageIndex: number;
+  pageTopPx: number;
+}): readonly TableSplitRowCarryOverlayEntry[] {
+  const index = input.geometryFacet?.getGeometryIndex();
+  if (!index) return [];
+
+  const entries: TableSplitRowCarryOverlayEntry[] = [];
+  const seen = new Set<string>();
+  for (const entry of index.semanticEntries) {
+    if (entry.kind !== "table-row") continue;
+    if (entry.pageIndex !== input.pageIndex) continue;
+    if (entry.rect.space !== "frame") continue;
+    const carries = entry.tableContinuation?.splitRowCarry ?? [];
+    if (carries.length === 0) continue;
+    const blockId = entry.blockId;
+    if (!blockId) continue;
+    for (const carry of carries) {
+      const rowIndex = entry.rowIndex ?? carry.rowIndex;
+      if (rowIndex === undefined) continue;
+      const topPx = Math.max(0, entry.rect.topPx - input.pageTopPx);
+      const leftPx = Math.max(0, entry.rect.leftPx);
+      const widthPx = Math.max(1, entry.rect.widthPx);
+      const heightPx = Math.max(1, entry.rect.heightPx);
+      const key = `${blockId}:${rowIndex}:${topPx}:${leftPx}:${widthPx}:${heightPx}`;
+      if (seen.has(key)) continue;
+      seen.add(key);
+      entries.push({
+        blockId,
+        rowIndex,
+        topPx,
+        leftPx,
+        widthPx,
+        heightPx,
+        continuesFromPreviousPage: carry.continuesFromPreviousPage,
+        continuesToNextPage: carry.continuesToNextPage,
+      });
+    }
+  }
+  return entries;
+}
+
 function isActiveStoryMatch(
   active: EditorStoryTarget,
   candidate: EditorStoryTarget,

package/src/ui-tailwind/page-stack/tw-page-stack-chrome-layer.tsx

@@ -503,6 +503,7 @@ const TwPageStackChromeLayerInner: React.FC<TwPageStackChromeLayerProps> = ({
             pageIndex={rect.pageIndex}
             page={page}
             facet={facet}
+            geometryFacet={geometryFacet}
             activeStory={activeStory}
             activeStoryPageIndex={activeStoryPageIndex}
             onOpenStory={handleOpenStoryForPage}