@beyondwork/docx-react-component 1.0.105 → 1.0.108

package/src/ui-tailwind/editor-surface/pm-position-map.ts

@@ -28,13 +28,21 @@ export function buildPositionMap(surface: EditorSurfaceSnapshot): PositionMap {
         return entries[entries.length - 1]?.pmEnd ?? pmDocSize - 1;
       }
 
+      let previous: MapEntry | null = null;
       for (const entry of entries) {
+        if (
+          entry.runtimeStart === entry.runtimeEnd &&
+          runtimePos === entry.runtimeStart
+        ) {
+          return entry.pmStart;
+        }
         if (runtimePos >= entry.runtimeStart && runtimePos < entry.runtimeEnd) {
           return entry.pmStart + (runtimePos - entry.runtimeStart);
         }
         if (runtimePos < entry.runtimeStart) {
-          return entry.pmStart;
+          return nearestRuntimeGapPm(runtimePos, previous, entry);
         }
+        previous = entry;
       }
 
       return entries[entries.length - 1]?.pmEnd ?? 1;
@@ -48,13 +56,15 @@ export function buildPositionMap(surface: EditorSurfaceSnapshot): PositionMap {
         return runtimeStorySize;
       }
 
+      let previous: MapEntry | null = null;
       for (const entry of entries) {
         if (pmPos >= entry.pmStart && pmPos <= entry.pmEnd) {
           return entry.runtimeStart + (pmPos - entry.pmStart);
         }
         if (pmPos < entry.pmStart) {
-          return entry.runtimeStart;
+          return nearestPmGapRuntime(pmPos, previous, entry);
         }
+        previous = entry;
       }
 
       return runtimeStorySize;
@@ -65,6 +75,32 @@ export function buildPositionMap(surface: EditorSurfaceSnapshot): PositionMap {
   };
 }
 
+function nearestRuntimeGapPm(
+  runtimePos: number,
+  previous: MapEntry | null,
+  next: MapEntry,
+): number {
+  if (!previous) {
+    return next.pmStart;
+  }
+  const distanceToPrevious = Math.abs(runtimePos - previous.runtimeEnd);
+  const distanceToNext = Math.abs(next.runtimeStart - runtimePos);
+  return distanceToPrevious <= distanceToNext ? previous.pmEnd : next.pmStart;
+}
+
+function nearestPmGapRuntime(
+  pmPos: number,
+  previous: MapEntry | null,
+  next: MapEntry,
+): number {
+  if (!previous) {
+    return next.runtimeStart;
+  }
+  const distanceToPrevious = Math.abs(pmPos - previous.pmEnd);
+  const distanceToNext = Math.abs(next.pmStart - pmPos);
+  return distanceToPrevious <= distanceToNext ? previous.runtimeEnd : next.runtimeStart;
+}
+
 function walkBlocks(
   blocks: SurfaceBlockSnapshot[],
   pmCursor: number,

package/src/ui-tailwind/editor-surface/pm-schema.ts

@@ -4,7 +4,7 @@ import {
   tableRowNodeSpec,
   tableCellNodeSpec,
   tableHeaderCellNodeSpec,
-} from "../../runtime/table-schema.ts";
+} from "../../api/table-node-specs.ts";
 import {
   isSupportedShapeGeometry,
   renderShapeSvg,
@@ -199,6 +199,7 @@ export const editorSchema = new Schema({
         bidi: { default: null },
         pageBreakBefore: { default: null },
         hiddenTextOnly: { default: null },
+        tabLayout: { default: null },
         placeholderCulled: { default: null },
         /**
          * Rendered height (in twips) of the block that this placeholder
@@ -541,11 +542,17 @@ export const editorSchema = new Schema({
               : (numberingPrefix ?? ""),
           ]);
         }
+        const contentAttrs: Record<string, string> = {
+          class: "pm-paragraph-content",
+        };
+        if (node.attrs.tabLayout === "right") {
+          contentAttrs["data-tab-layout"] = "right";
+          contentAttrs.style =
+            "display: inline-flex; align-items: baseline; width: 100%; min-width: 0; white-space: nowrap";
+        }
         children.push([
           "span",
-          {
-            class: "pm-paragraph-content",
-          },
+          contentAttrs,
           0,
         ]);
         return ["p", attrs, ...children];
@@ -585,6 +592,9 @@ export const editorSchema = new Schema({
           `width: ${width && width > 0 ? width : 32}px`,
           `min-width: 8px`,
         ];
+        if (align === "right" || align === "end") {
+          styles.push(`flex: 1 1 auto`);
+        }
         if (leader === "dot" || leader === "middleDot") {
           styles.push(
             `background-image: radial-gradient(circle, currentColor 1px, transparent 1.25px)`,

package/src/ui-tailwind/editor-surface/pm-state-from-snapshot.ts

@@ -343,8 +343,14 @@ export function createPMSelectionFromSnapshot(
     );
   } catch {
     // If the mapped runtime selection is invalid or lands in a non-text block,
-    // let ProseMirror choose the nearest valid starting selection.
-    return Selection.atStart(doc);
+    // keep the cursor near the mapped anchor. Falling back to doc start makes
+    // table-boundary mapping failures show up as visible cursor jumps.
+    try {
+      const safeAnchor = clamp(pmAnchor, 0, doc.content.size);
+      return Selection.near(doc.resolve(safeAnchor), selection.head >= selection.anchor ? 1 : -1);
+    } catch {
+      return Selection.atStart(doc);
+    }
   }
 }
 
@@ -512,7 +518,7 @@ function buildParagraph(
         : 0;
       const widthPx = Math.round((stopPos - prevPos) / 15);
       const leader = (stop as { leader?: string }).leader ?? null;
-      const align = (stop as { val?: string }).val ?? null;
+      const align = (stop as { val?: string; align?: string }).val ?? (stop as { align?: string }).align ?? null;
       content.push(
         editorSchema.nodes.tab_char.create({
           tabWidth: widthPx > 8 ? widthPx : null,
@@ -594,6 +600,7 @@ function buildParagraph(
       bidi: block.bidi ?? cascade?.bidi ?? null,
       pageBreakBefore: block.pageBreakBefore ?? cascade?.pageBreakBefore ?? null,
       hiddenTextOnly: fullyVanishedParagraph || null,
+      tabLayout: hasRightAlignedTabStop(block, paragraphLayout.tabStops) ? "right" : null,
       // `<w:framePr>` out-of-flow frame — forward to the PM paragraph node
       // so `pm-schema.ts::paragraph.toDOM` emits the absolute positioning
       // that matches the static `buildParagraphStyle` path (L04
@@ -605,12 +612,30 @@ function buildParagraph(
   );
 }
 
+function readTabStopAlign(stop: { val?: string; align?: string }): string | undefined {
+  return stop.val ?? stop.align;
+}
+
+function hasRightAlignedTabStop(
+  block: Extract<SurfaceBlockSnapshot, { kind: "paragraph" }>,
+  tabStops: Array<{ val?: string; align?: string }>,
+): boolean {
+  let tabIndex = 0;
+  for (const segment of block.segments) {
+    if (segment.kind !== "tab") continue;
+    const align = readTabStopAlign(tabStops[tabIndex] ?? {});
+    if (align === "right" || align === "end") return true;
+    tabIndex += 1;
+  }
+  return false;
+}
+
 function resolveParagraphLayout(
   block: Extract<SurfaceBlockSnapshot, { kind: "paragraph" }>,
 ): {
   spacing: Extract<SurfaceBlockSnapshot, { kind: "paragraph" }>["spacing"];
   indentation: Extract<SurfaceBlockSnapshot, { kind: "paragraph" }>["indentation"];
-  tabStops: Array<{ pos: number; val?: string; leader?: string }>;
+  tabStops: Array<{ pos?: number; position?: number; val?: string; align?: string; leader?: string }>;
   markerLane: NonNullable<
     NonNullable<Extract<SurfaceBlockSnapshot, { kind: "paragraph" }>["resolvedNumbering"]>["geometry"]["markerLane"]
   > | undefined;
@@ -628,7 +653,11 @@ function resolveParagraphLayout(
       block.resolvedNumbering?.geometry.indentation ??
       block.indentation ??
       cascadeFormatting?.indentation,
-    tabStops: block.resolvedNumbering?.geometry.tabStops ?? block.tabStops ?? [],
+    tabStops:
+      block.resolvedNumbering?.geometry.tabStops ??
+      block.tabStops ??
+      cascadeFormatting?.tabStops ??
+      [],
     markerLane: block.resolvedNumbering?.geometry.markerLane,
     markerJustification: block.resolvedNumbering?.geometry.markerJustification,
   };

package/src/ui-tailwind/editor-surface/runtime-decoration-plugin.ts

@@ -51,7 +51,8 @@ import type {
   RevisionDecorationModel,
   RevisionDisplayFlags,
 } from "../../ui/headless/revision-decoration-model";
-import { buildDecorations } from "./pm-decorations";
+import { buildRuntimeDecorations } from "./pm-decorations";
+import { recordPerfSample } from "./perf-probe";
 import type { PositionMap } from "./pm-position-map";
 
 /** Inputs that drive every call to `buildDecorations`, plus an opaque
@@ -116,24 +117,7 @@ export function __resetRuntimeDecorationCountersForTests(): void {
 }
 
 function rebuildSet(doc: PMNode, inputs: RuntimeDecorationInputs): DecorationSet {
-  const base = buildDecorations(
-    doc,
-    inputs.positionMap,
-    inputs.commentModel,
-    inputs.revisionModel,
-    inputs.markupDisplay,
-    inputs.showTrackedChanges,
-    inputs.suggestionsEnabled,
-    inputs.workflowScopes,
-    inputs.activeStory,
-    inputs.workflowCandidates,
-    inputs.workflowBlockedReasons,
-    inputs.workflowLockedZones,
-    inputs.activeWorkflowWorkItemId,
-    inputs.activeWorkflowScopeIds,
-    inputs.workflowMetadata,
-    inputs.revisionDisplayByOffset,
-  );
+  const base = buildRuntimeDecorations({ doc, ...inputs });
   const extras = inputs.extraDecorations ? inputs.extraDecorations(doc) : [];
   if (extras.length === 0) return base;
   // Layer extras on top of the base set. `DecorationSet.add` is the
@@ -186,5 +170,11 @@ export function applyRuntimeDecorationInputs(
   const tr: Transaction = view.state.tr.setMeta(runtimeDecorationPluginKey, {
     inputs,
   });
+  const startedAt = nowMs();
   view.dispatch(tr);
+  recordPerfSample("pm.decorations.apply", nowMs() - startedAt);
+}
+
+function nowMs(): number {
+  return typeof performance !== "undefined" ? performance.now() : Date.now();
 }

package/src/ui-tailwind/editor-surface/surface-build-keys.ts

@@ -21,7 +21,7 @@ export function createSurfaceDocumentBuildKey(input: {
   surface: EditorSurfaceSnapshot | null | undefined;
   activeStory: EditorStoryTarget;
   mediaPreviewKey: string;
-  showUnsupportedObjectPreviews?: boolean;
+  unsupportedObjectPreviewsVisible?: boolean;
   isPageWorkspace?: boolean;
 }): string {
   const ranges = input.surface?.viewportBlockRanges ?? null;
@@ -32,7 +32,7 @@ export function createSurfaceDocumentBuildKey(input: {
         : getSurfaceIdentity(input.surface),
     activeStory: input.activeStory,
     mediaPreviewKey: input.mediaPreviewKey,
-    showUnsupportedObjectPreviews: input.showUnsupportedObjectPreviews ?? false,
+    unsupportedObjectPreviewsVisible: input.unsupportedObjectPreviewsVisible ?? false,
     isPageWorkspace: input.isPageWorkspace ?? false,
     // Serialize all intervals (sorted by start) — disjoint viewport+caret
     // ranges must key distinctly from a single merged range so PM rebuilds

package/src/ui-tailwind/editor-surface/tw-page-block-view.helpers.ts

@@ -136,6 +136,151 @@ export function computeTabWidthsInPoints(
   return widths;
 }
 
+export interface TabRenderInfo {
+  widthPt: number;
+  align?: string;
+  leader?: string;
+}
+
+function readTabStop(
+  stop: {
+    pos?: number;
+    position?: number;
+    val?: string;
+    align?: string;
+    leader?: string;
+  },
+): { pos: number; align?: string; leader?: string } {
+  return {
+    pos: stop.pos ?? stop.position ?? 0,
+    align: stop.val ?? stop.align,
+    leader: stop.leader,
+  };
+}
+
+function resolveTabStops(
+  block: Extract<SurfaceBlockSnapshot, { kind: "paragraph" }>,
+):
+  | Array<{
+      pos?: number;
+      position?: number;
+      val?: string;
+      align?: string;
+      leader?: string;
+    }>
+  | undefined {
+  return (
+    block.resolvedNumbering?.geometry.tabStops ??
+    block.tabStops ??
+    block.resolvedParagraphFormatting?.tabStops
+  );
+}
+
+function isRightAlignedTab(align: string | undefined): boolean {
+  return align === "right" || align === "end";
+}
+
+export function hasRightAlignedTabStop(
+  block: Extract<SurfaceBlockSnapshot, { kind: "paragraph" }>,
+): boolean {
+  const rawStops = resolveTabStops(block);
+  if (!rawStops || rawStops.length === 0) return false;
+
+  let tabIndex = 0;
+  for (const seg of block.segments) {
+    if (seg.kind !== "tab") continue;
+    const stop = rawStops[tabIndex];
+    if (stop && isRightAlignedTab(readTabStop(stop).align)) return true;
+    tabIndex += 1;
+  }
+  return false;
+}
+
+export function buildParagraphContentStyle(
+  block: Extract<SurfaceBlockSnapshot, { kind: "paragraph" }>,
+): React.CSSProperties | undefined {
+  if (!hasRightAlignedTabStop(block)) return undefined;
+  return {
+    display: "inline-flex",
+    alignItems: "baseline",
+    width: "100%",
+    minWidth: 0,
+    whiteSpace: "nowrap",
+  };
+}
+
+/**
+ * Precompute per-tab render data from paragraph tab stops.
+ *
+ * Mirrors `computeTabWidthsInPoints`, but keeps the tab stop's alignment and
+ * leader metadata so static body and region renderers can match the PM
+ * `tab_char.toDOM` path for TOC leader dots and related leader styles.
+ */
+export function computeTabRenderInfoBySegment(
+  block: Extract<SurfaceBlockSnapshot, { kind: "paragraph" }>,
+): Map<string, TabRenderInfo> {
+  const infos = new Map<string, TabRenderInfo>();
+  const rawStops = resolveTabStops(block);
+  if (!rawStops || rawStops.length === 0) return infos;
+
+  let tabIndex = 0;
+  for (const seg of block.segments) {
+    if (seg.kind !== "tab") continue;
+    const stop = rawStops[tabIndex];
+    if (stop) {
+      const current = readTabStop(stop);
+      const prevPos =
+        tabIndex > 0 ? readTabStop(rawStops[tabIndex - 1]!).pos : 0;
+      const widthTwips = current.pos - prevPos;
+      if (widthTwips > 0) {
+        infos.set(seg.segmentId, {
+          widthPt: widthTwips / 20,
+          ...(current.align ? { align: current.align } : {}),
+          ...(current.leader ? { leader: current.leader } : {}),
+        });
+      }
+    }
+    tabIndex += 1;
+  }
+  return infos;
+}
+
+export function buildTabStyle(
+  info: TabRenderInfo | undefined,
+): React.CSSProperties {
+  const style: React.CSSProperties =
+    typeof info?.widthPt === "number"
+      ? { display: "inline-block", width: `${info.widthPt}pt`, minWidth: "8px" }
+      : { display: "inline-block", width: "32px", minWidth: "8px" };
+
+  if (isRightAlignedTab(info?.align)) {
+    style.flex = "1 1 auto";
+  }
+
+  switch (info?.leader) {
+    case "dot":
+    case "middleDot":
+      style.backgroundImage =
+        "radial-gradient(circle, currentColor 1px, transparent 1.25px)";
+      style.backgroundSize = "6px 3px";
+      style.backgroundRepeat = "repeat-x";
+      style.backgroundPosition = "left calc(100% - 2px)";
+      style.opacity = 0.55;
+      break;
+    case "hyphen":
+      style.borderBottom = "1px dashed rgba(107,107,107,0.65)";
+      break;
+    case "underscore":
+      style.borderBottom = "1px solid rgba(107,107,107,0.65)";
+      break;
+    case "heavy":
+      style.borderBottom = "2px solid rgba(107,107,107,0.75)";
+      break;
+  }
+
+  return style;
+}
+
 /** Build CSSProperties for a paragraph block from spacing/indent/alignment. */
 export function buildParagraphStyle(
   block: Extract<SurfaceBlockSnapshot, { kind: "paragraph" }>,

package/src/ui-tailwind/editor-surface/tw-page-block-view.tsx

@@ -6,12 +6,15 @@ import type {
 } from "../../api/public-types.ts";
 import {
   buildMarkerStyle,
+  buildParagraphContentStyle,
   buildParagraphStyle,
   buildSegmentStyle,
-  computeTabWidthsInPoints,
+  buildTabStyle,
+  computeTabRenderInfoBySegment,
   hasStyleEntries,
   headingClassList,
   resolveHeadingLevel,
+  type TabRenderInfo,
 } from "./tw-page-block-view.helpers.ts";
 
 // ---------------------------------------------------------------------------
@@ -19,7 +22,7 @@ import {
 // ---------------------------------------------------------------------------
 
 /** Render a single inline segment. */
-function renderSegment(seg: SurfaceInlineSegment, tabWidthsPt: Map<string, number>): React.ReactNode {
+function renderSegment(seg: SurfaceInlineSegment, tabInfoBySegment: Map<string, TabRenderInfo>): React.ReactNode {
   switch (seg.kind) {
     case "text": {
       const style = buildSegmentStyle(seg.marks, seg.markAttrs);
@@ -34,16 +37,13 @@ function renderSegment(seg: SurfaceInlineSegment, tabWidthsPt: Map<string, numbe
       );
     }
     case "tab": {
-      const widthPt = tabWidthsPt.get(seg.segmentId);
-      const tabStyle: React.CSSProperties =
-        typeof widthPt === "number"
-          ? { display: "inline-block", width: `${widthPt}pt`, minWidth: "8px" }
-          : { display: "inline-block", width: "32px", minWidth: "8px" };
+      const tabInfo = tabInfoBySegment.get(seg.segmentId);
       return (
         <span
           key={seg.segmentId}
           data-node-type="tab"
-          style={tabStyle}
+          style={buildTabStyle(tabInfo)}
+          title={tabInfo?.align ? `Tab stop · ${tabInfo.align}` : "Tab stop"}
         >
           {"\u00A0"}
         </span>
@@ -121,7 +121,8 @@ function ParagraphBlock({
   }
 
   const pStyle = buildParagraphStyle(block);
-  const tabWidthsPt = computeTabWidthsInPoints(block);
+  const tabInfoBySegment = computeTabRenderInfoBySegment(block);
+  const contentStyle = buildParagraphContentStyle(block);
   const attrs: React.HTMLAttributes<HTMLParagraphElement> & {
     "data-heading-level"?: string;
     "data-numbered"?: string;
@@ -199,8 +200,12 @@ function ParagraphBlock({
   return (
     <p {...attrs}>
       {prefixSpan}
-      <span className="pm-paragraph-content">
-        {block.segments.map((seg) => renderSegment(seg, tabWidthsPt))}
+      <span
+        className="pm-paragraph-content"
+        data-tab-layout={contentStyle ? "right" : undefined}
+        style={contentStyle}
+      >
+        {block.segments.map((seg) => renderSegment(seg, tabInfoBySegment))}
       </span>
     </p>
   );

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

@@ -13,6 +13,7 @@ import type {
   DocumentNavigationSnapshot,
   EditorStoryTarget,
   EditorUser,
+  GeometryFacet,
   RuntimeRenderSnapshot,
   SearchOptions,
   SearchResultSnapshot,
@@ -105,13 +106,12 @@ const BOUNDED_TYPING_SCROLL_RESTORE_MAX_DELTA_PX = 256;
 export function shouldPreserveScrollAnchorForRebuild(options: {
   policy: RebuildScrollAnchorPolicy | null;
   view: Pick<EditorView, "hasFocus"> | null;
-  geometryFacet?: import("../../runtime/geometry/index.ts").GeometryFacet;
+  geometryFacet?: GeometryFacet;
   previousStory: EditorStoryTarget | null;
   nextStory: EditorStoryTarget;
 }): boolean {
   if (options.policy !== "bounded-same-story") return false;
   if (!options.view?.hasFocus()) return false;
-  if (!options.geometryFacet) return false;
   if (!options.previousStory) return false;
   return storyTargetsEqual(options.previousStory, options.nextStory);
 }
@@ -128,9 +128,7 @@ export function shouldPreserveScrollAnchorForRebuild(options: {
  * between adjacent blocks.
  */
 function buildPageBreakDecorationsFromProps(
-  geometryFacet:
-    | import("../../runtime/geometry/index.ts").GeometryFacet
-    | undefined,
+  geometryFacet: GeometryFacet | undefined,
   isMainStory: boolean,
   positionMap: PositionMap,
   posture: "canvas" | "page",
@@ -232,7 +230,7 @@ export interface TwProseMirrorSurfaceProps {
   documentNavigation: DocumentNavigationSnapshot;
   reviewMode: "editing" | "review";
   markupDisplay: MarkupDisplay;
-  showUnsupportedObjectPreviews?: boolean;
+  unsupportedObjectPreviewsVisible?: boolean;
   activeRevisionId?: string;
   activeSelectionToolKind?: ActiveSelectionToolModel["kind"] | null;
   showTrackedChanges?: boolean;
@@ -340,7 +338,7 @@ export interface TwProseMirrorSurfaceProps {
    * render-frame access; layout-facet's `getRenderFrame` is being
    * deleted.
    */
-  geometryFacet?: import("../../runtime/geometry/index.ts").GeometryFacet;
+  geometryFacet?: GeometryFacet;
   /** Height in px of each page's header band. Default 32. */
   pageChromeHeaderBandPx?: number;
   /** Height in px of each page's footer band. Default 32. */
@@ -544,13 +542,13 @@ export const TwProseMirrorSurface = forwardRef<
         surface,
         activeStory: snapshot.activeStory,
         mediaPreviewKey,
-        showUnsupportedObjectPreviews: props.showUnsupportedObjectPreviews,
+        unsupportedObjectPreviewsVisible: props.unsupportedObjectPreviewsVisible,
         isPageWorkspace: props.isPageWorkspace,
       }),
     [
       mediaPreviewKey,
       props.isPageWorkspace,
-      props.showUnsupportedObjectPreviews,
+      props.unsupportedObjectPreviewsVisible,
       snapshot.activeStory,
       surface,
     ],
@@ -924,7 +922,7 @@ export const TwProseMirrorSurface = forwardRef<
       snapshot.selection,
       plugins,
       props.mediaPreviews,
-      props.showUnsupportedObjectPreviews,
+      props.unsupportedObjectPreviewsVisible ?? false,
       props.isPageWorkspace,
     );
     positionMapRef.current = positionMap;

package/src/ui-tailwind/editor-surface/tw-table-node-view.tsx

@@ -69,6 +69,9 @@ function createPaddingCell(colSpan: number, widthTwips: number): HTMLTableCellEl
   const cell = document.createElement("td");
   cell.setAttribute("data-row-padding", "true");
   cell.setAttribute("aria-hidden", "true");
+  cell.setAttribute("contenteditable", "false");
+  cell.setAttribute("role", "presentation");
+  cell.tabIndex = -1;
   cell.colSpan = Math.max(1, colSpan);
   cell.style.border = "none";
   cell.style.padding = "0";

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

@@ -20,6 +20,7 @@ import type {
   SurfaceTableRowSnapshot,
   WordReviewEditorLayoutFacet,
 } from "../../api/public-types.ts";
+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 { FRAME_PX_PER_TWIP_AT_96DPI } from "../tw-review-workspace.tsx";
@@ -144,6 +145,7 @@ function TwPageChromeEntryInner({
   );
 
   const frameHeightPx = rect.bottomPx - rect.topPx;
+  const pageAnchorAttributes = buildPageAnchorAttributes(rect.pageId, pageIndex);
 
   // Viewport cull — lightweight placeholder outside the visible range.
   const isCulled =
@@ -154,8 +156,8 @@ function TwPageChromeEntryInner({
   if (isCulled) {
     return (
       <div
+        {...pageAnchorAttributes}
         data-page-chrome-frame=""
-        data-page-index={pageIndex}
         data-page-chrome-culled=""
         style={{
           position: "absolute",
@@ -190,8 +192,8 @@ function TwPageChromeEntryInner({
 
   return (
     <div
+      {...pageAnchorAttributes}
       data-page-chrome-frame=""
-      data-page-index={pageIndex}
       style={{
         position: "absolute",
         top: `${rect.topPx}px`,