@beyondwork/docx-react-component 1.0.42 → 1.0.45

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

@@ -98,6 +98,7 @@ function buildPageBreakDecorationsFromProps(
     footerBandPx?: number;
     interGapPx?: number;
   } = {},
+  surfaceBlocks?: readonly import("../../api/public-types.ts").SurfaceBlockSnapshot[],
 ): ReturnType<typeof buildPageBreakDecorations> {
   if (!facet || !isMainStory) return [];
   if (typeof facet.getRenderFrame !== "function") return [];
@@ -133,6 +134,41 @@ function buildPageBreakDecorationsFromProps(
         })
       : undefined;
 
+  // L7 Phase 2 Task 2.2.4a — compute per-page block-index ranges from the
+  // render frame's page offsets + the surface blocks list.  Each block has a
+  // `from`/`to` offset; we find the first and last block whose offset range
+  // falls within each page's [startOffset, nextPage.startOffset) window.
+  // This map is passed into `buildPageBreakDecorations` so the chrome widgets
+  // carry `data-page-first-block-index` / `data-page-last-block-index`
+  // attributes needed by `useVisibleBlockRange`.
+  let blockIndexRangeByPageIndex: Map<number, { first: number; last: number }> | undefined;
+  if (surfaceBlocks && surfaceBlocks.length > 0 && frame.pages.length > 0) {
+    blockIndexRangeByPageIndex = new Map();
+    for (let pi = 0; pi < frame.pages.length; pi++) {
+      const page = frame.pages[pi]!;
+      if (page.page.isBlankFiller) continue;
+      const pageStart = page.page.startOffset;
+      const pageEnd =
+        pi + 1 < frame.pages.length
+          ? frame.pages[pi + 1]!.page.startOffset
+          : Infinity;
+      let first = -1;
+      let last = -1;
+      for (let bi = 0; bi < surfaceBlocks.length; bi++) {
+        const block = surfaceBlocks[bi]!;
+        const blockFrom = block.from;  // from is required on all SurfaceBlockSnapshot variants
+        // Block belongs to this page if its start falls within the page's offset window.
+        if (blockFrom >= pageStart && blockFrom < pageEnd) {
+          if (first === -1) first = bi;
+          last = bi;
+        }
+      }
+      if (first !== -1) {
+        blockIndexRangeByPageIndex.set(page.page.pageIndex, { first, last });
+      }
+    }
+  }
+
   return buildPageBreakDecorations({
     graph: fakeGraph as never,
     posture,
@@ -142,6 +178,7 @@ function buildPageBreakDecorationsFromProps(
     runtimeToPmOffset: (offset) => positionMap.runtimeToPm(offset),
     headerPreviewByPageId: previews?.headerPreviewByPageId,
     footerPreviewByPageId: previews?.footerPreviewByPageId,
+    blockIndexRangeByPageIndex,
   });
 }
 
@@ -188,6 +225,11 @@ export interface TwProseMirrorSurfaceProps {
   onUndo?: () => void;
   onRedo?: () => void;
   onBlockedInput?: (command: "paste" | "drop", message: string) => void;
+  onPasteApplied?: (meta: {
+    segmentCount: number;
+    charCount: number;
+    source: "paste" | "drop";
+  }) => void;
   onCommentActivated?: (commentId: string) => void;
   onRevisionActivated?: (revisionId: string) => void;
   onSelectionToolbarAnchorChange?: (anchor: SelectionToolbarAnchor | null) => void;
@@ -321,6 +363,9 @@ export const TwProseMirrorSurface = forwardRef<
     onBlockedInput: (command, message) => {
       props.onBlockedInput?.(command, message);
     },
+    onPasteApplied: (meta) => {
+      props.onPasteApplied?.(meta);
+    },
     onSelectionChange: (sel) => {
       pendingSelectionProbeRef.current = startPerfProbe("selection");
       props.onSelectionChange?.(
@@ -448,6 +493,7 @@ export const TwProseMirrorSurface = forwardRef<
       onUndo: () => callbacksRef.current?.onUndo(),
       onRedo: () => callbacksRef.current?.onRedo(),
       onBlockedInput: (command, message) => callbacksRef.current?.onBlockedInput?.(command, message),
+      onPasteApplied: (meta) => callbacksRef.current?.onPasteApplied?.(meta),
       onCompositionChange: (composing) => {
         sessionRef.current?.setComposing(composing);
       },
@@ -503,6 +549,7 @@ export const TwProseMirrorSurface = forwardRef<
           footerBandPx: props.pageChromeFooterBandPx,
           interGapPx: props.pageChromeInterGapPx,
         },
+        snapshot.surface?.blocks,
       );
       const decorations = pageBreakDecos.length > 0
         ? DecorationSet.create(view.state.doc, [

package/src/ui-tailwind/index.ts

@@ -11,7 +11,11 @@ export { renderTwCaret } from "./editor-surface/tw-caret";
 
 // Review rail
 export { TwReviewRail, type TwReviewRailProps, type ReviewRailTab } from "./review/tw-review-rail";
-export { TwCommentSidebar } from "./review/tw-comment-sidebar";
+export { TwCommentSidebar, type TwCommentSidebarProps } from "./review/tw-comment-sidebar";
+export {
+  CommentMarkdownRenderer,
+  type CommentMarkdownRendererProps,
+} from "./review/comment-markdown-renderer";
 export { TwRevisionSidebar } from "./review/tw-revision-sidebar";
 export { TwHealthPanel } from "./review/tw-health-panel";
 export { TwWorkflowTab, type TwWorkflowTabProps } from "./review/tw-workflow-tab";

package/src/ui-tailwind/page-stack/tw-endnote-area.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+
+import type { SurfaceBlockSnapshot } from "../../api/public-types.ts";
+import { TwRegionBlockRenderer } from "./tw-region-block-renderer.tsx";
+
+// ---------------------------------------------------------------------------
+// TwEndnoteArea (P8.7)
+//
+// Read-only area for document-end endnote placement.  Unlike footnotes, which
+// the chrome layer positions per-page via an absolute rectangle, endnotes in
+// the default mode sit at the end of the document (Word's `w:pos="docEnd"`
+// behavior).  This component is mounted as a sibling of the chrome layer
+// after the last page rect — not as an absolutely positioned chrome overlay.
+//
+// It renders:
+//   1. A default 1px separator (1/3 of the parent width) along the top edge,
+//      and
+//   2. The ordered endnote bodies via `TwRegionBlockRenderer` (P8.4).
+//
+// When `blocks` is empty the component returns `null` so the document-end
+// slot stays visually absent.
+//
+// Per-section endnote placement (`w:endnotePr/w:pos` other than `docEnd`)
+// is a follow-up — tracked with the P8.b polish pass.
+// ---------------------------------------------------------------------------
+
+export interface TwEndnoteAreaProps {
+  blocks: readonly SurfaceBlockSnapshot[];
+  "data-testid"?: string;
+}
+
+export const TwEndnoteArea: React.FC<TwEndnoteAreaProps> = ({
+  blocks,
+  "data-testid": testId,
+}) => {
+  if (blocks.length === 0) return null;
+  return (
+    <div
+      data-endnote-area
+      data-testid={testId}
+      style={{ marginTop: "24pt" }}
+    >
+      <div
+        data-endnote-separator
+        style={{
+          width: "33%",
+          height: "1px",
+          backgroundColor: "currentColor",
+          marginBottom: "8pt",
+        }}
+      />
+      <TwRegionBlockRenderer blocks={blocks} />
+    </div>
+  );
+};
+
+export default TwEndnoteArea;

package/src/ui-tailwind/page-stack/tw-footnote-area.tsx

@@ -0,0 +1,71 @@
+import React from "react";
+
+import type { SurfaceBlockSnapshot } from "../../api/public-types.ts";
+import { TwRegionBlockRenderer } from "./tw-region-block-renderer.tsx";
+
+// ---------------------------------------------------------------------------
+// TwFootnoteArea (P8.6)
+//
+// Read-only area mounted at an absolute pixel rectangle inside a per-page
+// chrome overlay.  Renders:
+//   1. A default 1px separator (1/3 of the parent width) along the top edge,
+//      and
+//   2. The ordered footnote bodies via `TwRegionBlockRenderer` (P8.4).
+//
+// The chrome layer (P8.8) computes the `topPx / leftPx / widthPx / heightPx`
+// rectangle from the page graph's `regions.footnotes` geometry and mounts
+// this component above the footer band.
+//
+// The default separator matches Word's implicit footnote separator; reading
+// the `w:separator` / `w:continuationSeparator` parts from the footnotes
+// package is deferred to P8.b polish.  No active-slot / portal plumbing in
+// this pass — the P8 plan only reserves portal slots for header / footer.
+// ---------------------------------------------------------------------------
+
+export interface TwFootnoteAreaProps {
+  pageIndex: number;
+  blocks: readonly SurfaceBlockSnapshot[];
+  topPx: number;
+  leftPx: number;
+  widthPx: number;
+  heightPx: number;
+  "data-testid"?: string;
+}
+
+export const TwFootnoteArea: React.FC<TwFootnoteAreaProps> = ({
+  pageIndex,
+  blocks,
+  topPx,
+  leftPx,
+  widthPx,
+  heightPx,
+  "data-testid": testId,
+}) => {
+  return (
+    <div
+      data-footnote-area
+      data-page-index={pageIndex}
+      data-testid={testId}
+      style={{
+        position: "absolute",
+        top: `${topPx}px`,
+        left: `${leftPx}px`,
+        width: `${widthPx}px`,
+        height: `${heightPx}px`,
+      }}
+    >
+      <div
+        data-footnote-separator
+        style={{
+          width: `${Math.round(widthPx / 3)}px`,
+          height: "1px",
+          backgroundColor: "currentColor",
+          marginBottom: "4pt",
+        }}
+      />
+      <TwRegionBlockRenderer blocks={blocks} />
+    </div>
+  );
+};
+
+export default TwFootnoteArea;

package/src/ui-tailwind/page-stack/tw-page-footer-band.tsx

@@ -0,0 +1,73 @@
+import React from "react";
+
+import type { SurfaceBlockSnapshot } from "../../api/public-types.ts";
+import { TwRegionBlockRenderer } from "./tw-region-block-renderer.tsx";
+
+// ---------------------------------------------------------------------------
+// TwPageFooterBand (P8.5)
+//
+// Symmetric counterpart to `TwPageHeaderBand` (see its header for design
+// context).  The footer band positions itself via `bottom` rather than
+// `top` so the chrome layer can measure the footer margin up from the
+// page rect's bottom edge and keep footer content pinned correctly when
+// page size / margin changes.
+//
+// When `isActiveSlot` is true, the band emits a single `data-pm-portal-slot`
+// div tagged `data-page-band-slot="footer"` — the chrome layer portals the
+// PM surface into this target in P8.10.  Otherwise it renders the footer
+// story's `SurfaceBlockSnapshot[]` through `TwRegionBlockRenderer` (P8.4).
+// ---------------------------------------------------------------------------
+
+export interface TwPageFooterBandProps {
+  pageIndex: number;
+  blocks: readonly SurfaceBlockSnapshot[];
+  bandHeightPx: number;
+  bottomPx: number;
+  leftPx: number;
+  widthPx: number;
+  /** True when this band is the active-story slot. Renders portal target instead of read-only DOM. */
+  isActiveSlot: boolean;
+  onClick: () => void;
+  "data-testid"?: string;
+}
+
+export const TwPageFooterBand: React.FC<TwPageFooterBandProps> = ({
+  pageIndex,
+  blocks,
+  bandHeightPx,
+  bottomPx,
+  leftPx,
+  widthPx,
+  isActiveSlot,
+  onClick,
+  "data-testid": testId,
+}) => {
+  return (
+    <div
+      data-page-band="footer"
+      data-page-index={pageIndex}
+      data-testid={testId}
+      onClick={onClick}
+      style={{
+        position: "absolute",
+        bottom: `${bottomPx}px`,
+        left: `${leftPx}px`,
+        width: `${widthPx}px`,
+        height: `${bandHeightPx}px`,
+        cursor: "pointer",
+      }}
+    >
+      {isActiveSlot ? (
+        <div
+          data-pm-portal-slot
+          data-page-band-slot="footer"
+          style={{ width: "100%", height: "100%" }}
+        />
+      ) : (
+        <TwRegionBlockRenderer blocks={blocks} />
+      )}
+    </div>
+  );
+};
+
+export default TwPageFooterBand;

package/src/ui-tailwind/page-stack/tw-page-header-band.tsx

@@ -0,0 +1,74 @@
+import React from "react";
+
+import type { SurfaceBlockSnapshot } from "../../api/public-types.ts";
+import { TwRegionBlockRenderer } from "./tw-region-block-renderer.tsx";
+
+// ---------------------------------------------------------------------------
+// TwPageHeaderBand (P8.5)
+//
+// Read-only band mounted at an absolute pixel position inside a per-page
+// chrome overlay.  The band either:
+//   - Renders the header story's `SurfaceBlockSnapshot[]` through
+//     `TwRegionBlockRenderer` (P8.4) as pure presentational DOM, or
+//   - Emits a single `data-pm-portal-slot` div when the chrome layer has
+//     promoted this band to the active story slot (P8.10 wires the PM
+//     surface into this target via React portal).
+//
+// Clicks on the band bubble to the chrome layer's `openStory` dispatch
+// (wired in P8.8 / P8.10) so legal reviewers can promote a header into
+// the active editing surface.
+// ---------------------------------------------------------------------------
+
+export interface TwPageHeaderBandProps {
+  pageIndex: number;
+  blocks: readonly SurfaceBlockSnapshot[];
+  bandHeightPx: number;
+  topPx: number;
+  leftPx: number;
+  widthPx: number;
+  /** True when this band is the active-story slot. Renders portal target instead of read-only DOM. */
+  isActiveSlot: boolean;
+  onClick: () => void;
+  "data-testid"?: string;
+}
+
+export const TwPageHeaderBand: React.FC<TwPageHeaderBandProps> = ({
+  pageIndex,
+  blocks,
+  bandHeightPx,
+  topPx,
+  leftPx,
+  widthPx,
+  isActiveSlot,
+  onClick,
+  "data-testid": testId,
+}) => {
+  return (
+    <div
+      data-page-band="header"
+      data-page-index={pageIndex}
+      data-testid={testId}
+      onClick={onClick}
+      style={{
+        position: "absolute",
+        top: `${topPx}px`,
+        left: `${leftPx}px`,
+        width: `${widthPx}px`,
+        height: `${bandHeightPx}px`,
+        cursor: "pointer",
+      }}
+    >
+      {isActiveSlot ? (
+        <div
+          data-pm-portal-slot
+          data-page-band-slot="header"
+          style={{ width: "100%", height: "100%" }}
+        />
+      ) : (
+        <TwRegionBlockRenderer blocks={blocks} />
+      )}
+    </div>
+  );
+};
+
+export default TwPageHeaderBand;