@beyondwork/docx-react-component 1.0.60 → 1.0.62

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

@@ -9,6 +9,7 @@ import type {
   SurfaceTableRowSnapshot,
   SurfaceTableCellSnapshot,
 } from "../../api/public-types";
+import { shouldRenderAbsoluteFloatingImageInPageOverlay } from "../page-stack/floating-image-overlay-model.ts";
 import { editorSchema } from "./pm-schema";
 import { buildPositionMap, type PositionMap } from "./pm-position-map";
 import { chartModelStore } from "../../runtime/chart/chart-model-store.ts";
@@ -24,7 +25,7 @@ export interface PMStateResult {
  * can pass partial objects in tests.
  */
 export function buildPmStateFromSnapshot(snapshot: EditorSurfaceSnapshot): EditorState {
-  const doc = buildPMDoc(snapshot, {}, false);
+  const doc = buildPMDoc(snapshot, {}, false, false);
   return EditorState.create({ doc, plugins: [] });
 }
 
@@ -153,8 +154,14 @@ export function createPMStateFromSnapshot(
   plugins: Plugin[],
   mediaPreviews: Record<string, MediaPreviewDescriptor> = {},
   showUnsupportedObjectPreviews = false,
+  renderAbsoluteFloatingObjectsInPageOverlay = false,
 ): PMStateResult {
-  const doc = buildPMDoc(surface, mediaPreviews, showUnsupportedObjectPreviews);
+  const doc = buildPMDoc(
+    surface,
+    mediaPreviews,
+    showUnsupportedObjectPreviews,
+    renderAbsoluteFloatingObjectsInPageOverlay,
+  );
   const positionMap = buildPositionMap(surface);
   const pmSelection = createPMSelectionFromSnapshot(doc, positionMap, selection);
 
@@ -229,8 +236,14 @@ function buildPMDoc(
   surface: EditorSurfaceSnapshot,
   mediaPreviews: Record<string, MediaPreviewDescriptor>,
   showUnsupportedObjectPreviews: boolean,
+  renderAbsoluteFloatingObjectsInPageOverlay: boolean,
 ): PMNode {
-  const blocks = buildPMBlocks(surface.blocks, mediaPreviews, showUnsupportedObjectPreviews);
+  const blocks = buildPMBlocks(
+    surface.blocks,
+    mediaPreviews,
+    showUnsupportedObjectPreviews,
+    renderAbsoluteFloatingObjectsInPageOverlay,
+  );
 
   // Ensure at least one block (PM requires non-empty doc)
   if (blocks.length === 0) {
@@ -244,6 +257,7 @@ function buildPMBlocks(
   blocks: SurfaceBlockSnapshot[],
   mediaPreviews: Record<string, MediaPreviewDescriptor>,
   showUnsupportedObjectPreviews: boolean,
+  renderAbsoluteFloatingObjectsInPageOverlay: boolean,
 ): PMNode[] {
   const nodes: PMNode[] = [];
 
@@ -262,12 +276,27 @@ function buildPMBlocks(
           nextParagraph,
           mediaPreviews,
           showUnsupportedObjectPreviews,
+          renderAbsoluteFloatingObjectsInPageOverlay,
         ),
       );
     } else if (block.kind === "table") {
-      nodes.push(buildTable(block, mediaPreviews, showUnsupportedObjectPreviews));
+      nodes.push(
+        buildTable(
+          block,
+          mediaPreviews,
+          showUnsupportedObjectPreviews,
+          renderAbsoluteFloatingObjectsInPageOverlay,
+        ),
+      );
     } else if (block.kind === "sdt_block") {
-      nodes.push(buildSdtBlock(block, mediaPreviews, showUnsupportedObjectPreviews));
+      nodes.push(
+        buildSdtBlock(
+          block,
+          mediaPreviews,
+          showUnsupportedObjectPreviews,
+          renderAbsoluteFloatingObjectsInPageOverlay,
+        ),
+      );
     } else {
       nodes.push(buildOpaqueBlock(block, showUnsupportedObjectPreviews));
     }
@@ -282,6 +311,7 @@ function buildParagraph(
   nextParagraph: Extract<SurfaceBlockSnapshot, { kind: "paragraph" }> | null,
   mediaPreviews: Record<string, MediaPreviewDescriptor>,
   showUnsupportedObjectPreviews: boolean,
+  renderAbsoluteFloatingObjectsInPageOverlay: boolean,
 ): PMNode {
   const content: PMNode[] = [];
   const paragraphLayout = resolveParagraphLayout(block);
@@ -318,7 +348,12 @@ function buildParagraph(
       );
       tabIndex++;
     } else {
-      const nodes = buildInlineContent(segment, mediaPreviews, showUnsupportedObjectPreviews);
+      const nodes = buildInlineContent(
+        segment,
+        mediaPreviews,
+        showUnsupportedObjectPreviews,
+        renderAbsoluteFloatingObjectsInPageOverlay,
+      );
       content.push(...nodes);
     }
   }
@@ -429,6 +464,7 @@ function buildInlineContent(
   segment: SurfaceInlineSegment,
   mediaPreviews: Record<string, MediaPreviewDescriptor>,
   showUnsupportedObjectPreviews: boolean,
+  renderAbsoluteFloatingObjectsInPageOverlay: boolean,
 ): PMNode[] {
   switch (segment.kind) {
     case "text": {
@@ -451,6 +487,9 @@ function buildInlineContent(
     case "image":
       {
         const preview = mediaPreviews[segment.mediaId];
+        const renderInPageOverlay =
+          renderAbsoluteFloatingObjectsInPageOverlay &&
+          shouldRenderAbsoluteFloatingImageInPageOverlay(segment.anchor);
       return [
         editorSchema.nodes.image_atom.create({
           mediaId: segment.mediaId,
@@ -470,6 +509,8 @@ function buildInlineContent(
           wrapMode: segment.anchor?.wrapMode ?? null,
           distMargins: segment.anchor?.distMargins ?? null,
           positionH: segment.anchor?.positionH ?? null,
+          positionV: segment.anchor?.positionV ?? null,
+          renderInPageOverlay,
           // Lane 6d N9.b — polygon clip.
           wrapPolygon: segment.anchor?.wrapPolygon ?? null,
           // Lane 6d N11.b — filter effects.
@@ -528,6 +569,7 @@ function buildTable(
   block: Extract<SurfaceBlockSnapshot, { kind: "table" }>,
   mediaPreviews: Record<string, MediaPreviewDescriptor>,
   showUnsupportedObjectPreviews: boolean,
+  renderAbsoluteFloatingObjectsInPageOverlay: boolean,
 ): PMNode {
   const rows: PMNode[] = [];
   for (const row of block.rows) {
@@ -537,6 +579,7 @@ function buildTable(
         cell.content,
         mediaPreviews,
         showUnsupportedObjectPreviews,
+        renderAbsoluteFloatingObjectsInPageOverlay,
       );
       // Ensure at least one paragraph in cell (PM requires non-empty)
       if (cellContent.length === 0) {
@@ -558,6 +601,10 @@ function buildTable(
             borderRight: cell.borderRight ?? null,
             borderBottom: cell.borderBottom ?? null,
             borderLeft: cell.borderLeft ?? null,
+            paddingTop: cell.paddingTop ?? null,
+            paddingRight: cell.paddingRight ?? null,
+            paddingBottom: cell.paddingBottom ?? null,
+            paddingLeft: cell.paddingLeft ?? null,
             // R3.a Phase 2 — per-cell text-flow direction.
             textDirection: cell.textDirection ?? null,
             bandClasses: cell.bandClasses ?? null,
@@ -651,11 +698,13 @@ function buildSdtBlock(
   block: Extract<SurfaceBlockSnapshot, { kind: "sdt_block" }>,
   mediaPreviews: Record<string, MediaPreviewDescriptor>,
   showUnsupportedObjectPreviews: boolean,
+  renderAbsoluteFloatingObjectsInPageOverlay: boolean,
 ): PMNode {
   const children = buildPMBlocks(
     block.children,
     mediaPreviews,
     showUnsupportedObjectPreviews,
+    renderAbsoluteFloatingObjectsInPageOverlay,
   );
 
   if (children.length === 0) {

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

@@ -22,6 +22,7 @@ export function createSurfaceDocumentBuildKey(input: {
   activeStory: EditorStoryTarget;
   mediaPreviewKey: string;
   showUnsupportedObjectPreviews?: boolean;
+  isPageWorkspace?: boolean;
 }): string {
   const vp = input.surface?.viewportBlockRange ?? null;
   return JSON.stringify({
@@ -32,6 +33,7 @@ export function createSurfaceDocumentBuildKey(input: {
     activeStory: input.activeStory,
     mediaPreviewKey: input.mediaPreviewKey,
     showUnsupportedObjectPreviews: input.showUnsupportedObjectPreviews ?? false,
+    isPageWorkspace: input.isPageWorkspace ?? false,
     viewport: vp ? `${vp.start}:${vp.end}` : "full",
   });
 }

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

@@ -223,6 +223,10 @@ function TableBlock({
               if (cell.borderRight) cellStyle.borderRight = cell.borderRight;
               if (cell.borderBottom) cellStyle.borderBottom = cell.borderBottom;
               if (cell.borderLeft) cellStyle.borderLeft = cell.borderLeft;
+              if (typeof cell.paddingTop === "number") cellStyle.paddingTop = `${cell.paddingTop / 20}pt`;
+              if (typeof cell.paddingRight === "number") cellStyle.paddingRight = `${cell.paddingRight / 20}pt`;
+              if (typeof cell.paddingBottom === "number") cellStyle.paddingBottom = `${cell.paddingBottom / 20}pt`;
+              if (typeof cell.paddingLeft === "number") cellStyle.paddingLeft = `${cell.paddingLeft / 20}pt`;
 
               return (
                 <td

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

@@ -399,8 +399,15 @@ export const TwProseMirrorSurface = forwardRef<
         activeStory: snapshot.activeStory,
         mediaPreviewKey,
         showUnsupportedObjectPreviews: props.showUnsupportedObjectPreviews,
+        isPageWorkspace: props.isPageWorkspace,
       }),
-    [mediaPreviewKey, props.showUnsupportedObjectPreviews, snapshot.activeStory, surface],
+    [
+      mediaPreviewKey,
+      props.isPageWorkspace,
+      props.showUnsupportedObjectPreviews,
+      snapshot.activeStory,
+      surface,
+    ],
   );
   const decorationBuildKey = useMemo(
     () =>
@@ -718,6 +725,7 @@ export const TwProseMirrorSurface = forwardRef<
       plugins,
       props.mediaPreviews,
       props.showUnsupportedObjectPreviews,
+      props.isPageWorkspace,
     );
     positionMapRef.current = positionMap;
     const decorations = buildDecorations(

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

@@ -488,6 +488,10 @@ function applyCellAttrs(cell: HTMLTableCellElement, node: PMNode, isHeader: bool
   const borderRight = node.attrs.borderRight as string | null | undefined;
   const borderBottom = node.attrs.borderBottom as string | null | undefined;
   const borderLeft = node.attrs.borderLeft as string | null | undefined;
+  const paddingTop = node.attrs.paddingTop as number | null | undefined;
+  const paddingRight = node.attrs.paddingRight as number | null | undefined;
+  const paddingBottom = node.attrs.paddingBottom as number | null | undefined;
+  const paddingLeft = node.attrs.paddingLeft as number | null | undefined;
   const bandClasses = node.attrs.bandClasses as string | null | undefined;
 
   if (backgroundColor) cell.setAttribute("data-cell-background", backgroundColor);
@@ -502,6 +506,14 @@ function applyCellAttrs(cell: HTMLTableCellElement, node: PMNode, isHeader: bool
   else cell.removeAttribute("data-border-bottom");
   if (borderLeft) cell.setAttribute("data-border-left", borderLeft);
   else cell.removeAttribute("data-border-left");
+  if (typeof paddingTop === "number") cell.setAttribute("data-cell-padding-top", String(paddingTop));
+  else cell.removeAttribute("data-cell-padding-top");
+  if (typeof paddingRight === "number") cell.setAttribute("data-cell-padding-right", String(paddingRight));
+  else cell.removeAttribute("data-cell-padding-right");
+  if (typeof paddingBottom === "number") cell.setAttribute("data-cell-padding-bottom", String(paddingBottom));
+  else cell.removeAttribute("data-cell-padding-bottom");
+  if (typeof paddingLeft === "number") cell.setAttribute("data-cell-padding-left", String(paddingLeft));
+  else cell.removeAttribute("data-cell-padding-left");
 
   // R2b: band classes come from the resolved style cascade. They layer on top
   // of the base Tailwind classes so theme vars (bg-surface-*, text-secondary,
@@ -522,6 +534,10 @@ function applyCellAttrs(cell: HTMLTableCellElement, node: PMNode, isHeader: bool
   cell.style.borderRight = borderRight ?? "";
   cell.style.borderBottom = borderBottom ?? "";
   cell.style.borderLeft = borderLeft ?? "";
+  cell.style.paddingTop = typeof paddingTop === "number" ? `${paddingTop / 20}pt` : "";
+  cell.style.paddingRight = typeof paddingRight === "number" ? `${paddingRight / 20}pt` : "";
+  cell.style.paddingBottom = typeof paddingBottom === "number" ? `${paddingBottom / 20}pt` : "";
+  cell.style.paddingLeft = typeof paddingLeft === "number" ? `${paddingLeft / 20}pt` : "";
 
   // R3.a Phase 2 — vertical text direction. OOXML: tbRl = top→bottom, right→left
   // (most common for vertical headers, reads when tilting the head right);

package/src/ui-tailwind/page-stack/floating-image-overlay-model.ts

@@ -0,0 +1,319 @@
+import type {
+  EditorStoryTarget,
+  EditorSurfaceSnapshot,
+  PublicPageNode,
+  SurfaceBlockSnapshot,
+  SurfaceDrawingAnchor,
+  SurfaceInlineSegment,
+} from "../../api/public-types.ts";
+import type { WordReviewEditorLayoutFacet } from "../../runtime/layout/index.ts";
+import { storyTargetKey } from "../../runtime/story-targeting.ts";
+import { EMU_PER_PX } from "../../runtime/units.ts";
+import type { PageOverlayRect } from "../chrome-overlay/tw-page-stack-overlay-layer.tsx";
+
+const FRAME_PX_PER_TWIP_AT_96DPI = 96 / 1440;
+
+export interface FloatingImagePreviewDescriptor {
+  src: string;
+  widthEmu?: number;
+  heightEmu?: number;
+}
+
+export interface FloatingImageOverlayItem {
+  key: string;
+  mediaId: string;
+  from: number;
+  to: number;
+  pageId: string;
+  pageIndex: number;
+  topPx: number;
+  leftPx: number;
+  widthPx: number;
+  heightPx: number;
+  behindDoc: boolean;
+  src: string | null;
+  altText: string | null;
+  detail: string | null;
+}
+
+const SUPPORTED_HORIZONTAL_RELATIVE_FROM = new Set(["page", "margin"]);
+const SUPPORTED_VERTICAL_RELATIVE_FROM = new Set(["page", "margin"]);
+
+export function shouldRenderAbsoluteFloatingImageInPageOverlay(
+  anchor: SurfaceDrawingAnchor | undefined,
+): boolean {
+  if (!anchor || anchor.display !== "floating" || anchor.wrapMode !== "none") {
+    return false;
+  }
+  if (anchor.layoutInCell) {
+    return false;
+  }
+  if (!anchor.positionH || !anchor.positionV) {
+    return false;
+  }
+  if (!SUPPORTED_HORIZONTAL_RELATIVE_FROM.has(anchor.positionH.relativeFrom)) {
+    return false;
+  }
+  if (!SUPPORTED_VERTICAL_RELATIVE_FROM.has(anchor.positionV.relativeFrom)) {
+    return false;
+  }
+  return true;
+}
+
+export function collectFloatingImageOverlayItems(input: {
+  surface: EditorSurfaceSnapshot | null | undefined;
+  activeStory: EditorStoryTarget;
+  facet: WordReviewEditorLayoutFacet;
+  pageRects: readonly PageOverlayRect[];
+  mediaPreviews?: Record<string, FloatingImagePreviewDescriptor>;
+}): FloatingImageOverlayItem[] {
+  const { surface, activeStory, facet } = input;
+  if (!surface) {
+    return [];
+  }
+
+  const rectByPageIndex = new Map<number, PageOverlayRect>(
+    input.pageRects.map((rect) => [rect.pageIndex, rect]),
+  );
+  const items: FloatingImageOverlayItem[] = [];
+
+  walkSurfaceBlocks(surface.blocks, (segment) => {
+    if (segment.kind !== "image" || !shouldRenderAbsoluteFloatingImageInPageOverlay(segment.anchor)) {
+      return;
+    }
+
+    const pages = resolveTargetPages(facet, segment.from, activeStory);
+    for (const page of pages) {
+      const pageRect = rectByPageIndex.get(page.pageIndex);
+      if (!pageRect) {
+        continue;
+      }
+      const localRect = resolveFloatingImageLocalRect(page, activeStory, segment);
+      if (!localRect) {
+        continue;
+      }
+      const preview = input.mediaPreviews?.[segment.mediaId];
+      items.push({
+        key: `${segment.segmentId}:${page.pageId}`,
+        mediaId: segment.mediaId,
+        from: segment.from,
+        to: segment.to,
+        pageId: page.pageId,
+        pageIndex: page.pageIndex,
+        topPx: pageRect.topPx + localRect.topPx,
+        leftPx: localRect.leftPx,
+        widthPx: localRect.widthPx,
+        heightPx: localRect.heightPx,
+        behindDoc: Boolean(segment.anchor?.behindDoc),
+        src: preview?.src ?? null,
+        altText: segment.altText ?? null,
+        detail: segment.detail ?? null,
+      });
+    }
+  });
+
+  return items;
+}
+
+function walkSurfaceBlocks(
+  blocks: readonly SurfaceBlockSnapshot[],
+  visit: (segment: SurfaceInlineSegment) => void,
+): void {
+  for (const block of blocks) {
+    switch (block.kind) {
+      case "paragraph":
+        block.segments.forEach(visit);
+        break;
+      case "table":
+        for (const row of block.rows) {
+          for (const cell of row.cells) {
+            walkSurfaceBlocks(cell.content, visit);
+          }
+        }
+        break;
+      case "sdt_block":
+        walkSurfaceBlocks(block.children, visit);
+        break;
+    }
+  }
+}
+
+function resolveTargetPages(
+  facet: WordReviewEditorLayoutFacet,
+  offset: number,
+  activeStory: EditorStoryTarget,
+): PublicPageNode[] {
+  if (activeStory.kind === "main") {
+    const page = facet.getPageForOffset(offset, activeStory);
+    return page ? [page] : [];
+  }
+
+  const activeKey = storyTargetKey(activeStory);
+  return facet.getPages().filter((page) => {
+    const target =
+      activeStory.kind === "header"
+        ? page.stories.header
+        : activeStory.kind === "footer"
+          ? page.stories.footer
+          : undefined;
+    return target ? storyTargetKey(target) === activeKey : false;
+  });
+}
+
+function resolveFloatingImageLocalRect(
+  page: PublicPageNode,
+  activeStory: EditorStoryTarget,
+  segment: Extract<SurfaceInlineSegment, { kind: "image" }>,
+): {
+  topPx: number;
+  leftPx: number;
+  widthPx: number;
+  heightPx: number;
+} | null {
+  const anchor = segment.anchor;
+  if (!anchor) {
+    return null;
+  }
+
+  const widthPx = Math.max(24, Math.round(anchor.extent.widthEmu / EMU_PER_PX));
+  const heightPx = Math.max(24, Math.round(anchor.extent.heightEmu / EMU_PER_PX));
+  const horizontalSpace = resolveHorizontalSpace(page, activeStory, anchor);
+  const verticalSpace = resolveVerticalSpace(page, activeStory, anchor);
+
+  if (!horizontalSpace || !verticalSpace) {
+    return null;
+  }
+
+  return {
+    topPx: resolveAxisPosition(verticalSpace, heightPx, anchor.positionV, page, "vertical"),
+    leftPx: resolveAxisPosition(horizontalSpace, widthPx, anchor.positionH, page, "horizontal"),
+    widthPx,
+    heightPx,
+  };
+}
+
+function resolveHorizontalSpace(
+  page: PublicPageNode,
+  activeStory: EditorStoryTarget,
+  anchor: SurfaceDrawingAnchor,
+): { startPx: number; sizePx: number } | null {
+  const pageWidthPx = twipsToPx(page.layout.pageWidth);
+  const storyHost = resolveStoryHostSpace(page, activeStory);
+  switch (anchor.positionH?.relativeFrom) {
+    case "page":
+      return { startPx: 0, sizePx: pageWidthPx };
+    case "margin":
+      return storyHost ? { startPx: storyHost.leftPx, sizePx: storyHost.widthPx } : null;
+    default:
+      return null;
+  }
+}
+
+function resolveVerticalSpace(
+  page: PublicPageNode,
+  activeStory: EditorStoryTarget,
+  anchor: SurfaceDrawingAnchor,
+): { startPx: number; sizePx: number } | null {
+  const pageHeightPx = twipsToPx(page.layout.pageHeight);
+  const storyHost = resolveStoryHostSpace(page, activeStory);
+  switch (anchor.positionV?.relativeFrom) {
+    case "page":
+      return { startPx: 0, sizePx: pageHeightPx };
+    case "margin":
+      return storyHost ? { startPx: storyHost.topPx, sizePx: storyHost.heightPx } : null;
+    default:
+      return null;
+  }
+}
+
+function resolveStoryHostSpace(
+  page: PublicPageNode,
+  activeStory: EditorStoryTarget,
+): { topPx: number; leftPx: number; widthPx: number; heightPx: number } | null {
+  switch (activeStory.kind) {
+    case "main":
+      return {
+        topPx: twipsToPx(page.regions.body.originTwips),
+        leftPx: twipsToPx(page.layout.marginLeft),
+        widthPx: twipsToPx(page.regions.body.widthTwips),
+        heightPx: twipsToPx(page.regions.body.heightTwips),
+      };
+    case "header":
+      return page.regions.header
+        ? {
+            topPx: twipsToPx(page.regions.header.originTwips),
+            leftPx: twipsToPx(page.layout.marginLeft),
+            widthPx: twipsToPx(page.regions.header.widthTwips),
+            heightPx: twipsToPx(page.regions.header.heightTwips),
+          }
+        : null;
+    case "footer":
+      return page.regions.footer
+        ? {
+            topPx: twipsToPx(page.regions.footer.originTwips),
+            leftPx: twipsToPx(page.layout.marginLeft),
+            widthPx: twipsToPx(page.regions.footer.widthTwips),
+            heightPx: twipsToPx(page.regions.footer.heightTwips),
+          }
+        : null;
+    default:
+      return null;
+  }
+}
+
+function resolveAxisPosition(
+  space: { startPx: number; sizePx: number },
+  objectSizePx: number,
+  axis:
+    | { relativeFrom: string; align?: string; offset?: number }
+    | undefined,
+  page: PublicPageNode,
+  orientation: "horizontal" | "vertical",
+): number {
+  if (!axis) {
+    return space.startPx;
+  }
+  if (axis.align) {
+    return alignAxisPosition(space, objectSizePx, axis.align, page, orientation);
+  }
+  if (axis.offset !== undefined) {
+    return space.startPx + Math.round(axis.offset / EMU_PER_PX);
+  }
+  return space.startPx;
+}
+
+function alignAxisPosition(
+  space: { startPx: number; sizePx: number },
+  objectSizePx: number,
+  align: string,
+  page: PublicPageNode,
+  orientation: "horizontal" | "vertical",
+): number {
+  const remainder = Math.max(0, space.sizePx - objectSizePx);
+  switch (align) {
+    case "left":
+    case "top":
+      return space.startPx;
+    case "center":
+      return space.startPx + remainder / 2;
+    case "right":
+    case "bottom":
+      return space.startPx + remainder;
+    case "inside":
+      if (orientation === "horizontal") {
+        return page.isEvenPage ? space.startPx + remainder : space.startPx;
+      }
+      return space.startPx;
+    case "outside":
+      if (orientation === "horizontal") {
+        return page.isEvenPage ? space.startPx : space.startPx + remainder;
+      }
+      return space.startPx + remainder;
+    default:
+      return space.startPx;
+  }
+}
+
+function twipsToPx(value: number): number {
+  return value * FRAME_PX_PER_TWIP_AT_96DPI;
+}