@beyondwork/docx-react-component 1.0.60 → 1.0.62

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

@@ -0,0 +1,248 @@
+import * as React from "react";
+
+import type {
+  EditorStoryTarget,
+  RuntimeRenderSnapshot,
+} from "../../api/public-types.ts";
+import type { WordReviewEditorLayoutFacet } from "../../runtime/layout/index.ts";
+import { preserveEditorSelectionMouseDown } from "../../ui/headless/preserve-editor-selection.ts";
+import {
+  measureWidgetsViaBoundingRect,
+  resolvePageOverlayRects,
+  type PageOverlayRect,
+  type VisiblePageIndexRange,
+} from "../chrome-overlay/tw-page-stack-overlay-layer.tsx";
+import {
+  collectFloatingImageOverlayItems,
+  type FloatingImagePreviewDescriptor,
+} from "./floating-image-overlay-model.ts";
+
+export interface TwFloatingImageLayerProps {
+  facet: WordReviewEditorLayoutFacet;
+  scrollRoot: HTMLElement | null;
+  renderFrameRevision: number;
+  visiblePageIndexRange?: VisiblePageIndexRange | null;
+  snapshot: RuntimeRenderSnapshot;
+  mediaPreviews?: Record<string, FloatingImagePreviewDescriptor>;
+  plane: "behind" | "front";
+  onActivateFloatingImage?: (payload: {
+    mediaId: string;
+    from: number;
+    to: number;
+    storyTarget: EditorStoryTarget;
+  }) => void;
+}
+
+export const TwFloatingImageLayer: React.FC<TwFloatingImageLayerProps> = ({
+  facet,
+  scrollRoot,
+  renderFrameRevision,
+  visiblePageIndexRange,
+  snapshot,
+  mediaPreviews,
+  plane,
+  onActivateFloatingImage,
+}) => {
+  const overlayRootRef = React.useRef<HTMLDivElement | null>(null);
+  const rafHandleRef = React.useRef<number | null>(null);
+  const [pageRects, setPageRects] = React.useState<readonly PageOverlayRect[]>([]);
+
+  const refreshPageRectsNow = React.useCallback(() => {
+    if (!scrollRoot) {
+      setPageRects([]);
+      return;
+    }
+    const origin = overlayRootRef.current;
+    if (!origin) {
+      setPageRects([]);
+      return;
+    }
+    const pageCount = facet.getPageCount();
+    const widgets = measureWidgetsViaBoundingRect(scrollRoot, origin, {
+      pageCount,
+      visiblePageIndexRange,
+    });
+    const originRect = origin.getBoundingClientRect();
+    setPageRects(
+      resolvePageOverlayRects({
+        widgets,
+        pageCount,
+        scrollHeight:
+          origin.clientHeight > 0 ? origin.clientHeight : originRect.height,
+        visiblePageIndexRange,
+      }),
+    );
+  }, [facet, scrollRoot, visiblePageIndexRange]);
+
+  const refreshPageRects = React.useCallback(() => {
+    if (!scrollRoot) {
+      setPageRects([]);
+      return;
+    }
+    const runtime = scrollRoot.ownerDocument?.defaultView as
+      | (Window & {
+          requestAnimationFrame?: (cb: () => void) => number;
+          cancelAnimationFrame?: (handle: number) => void;
+        })
+      | null;
+    const raf = runtime?.requestAnimationFrame;
+    if (!raf) {
+      refreshPageRectsNow();
+      return;
+    }
+    if (rafHandleRef.current !== null) {
+      return;
+    }
+    rafHandleRef.current = raf(() => {
+      rafHandleRef.current = null;
+      refreshPageRectsNow();
+    });
+  }, [refreshPageRectsNow, scrollRoot]);
+
+  React.useEffect(() => {
+    refreshPageRects();
+    return () => {
+      const runtime = scrollRoot?.ownerDocument?.defaultView as
+        | (Window & { cancelAnimationFrame?: (handle: number) => void })
+        | null;
+      if (rafHandleRef.current !== null && runtime?.cancelAnimationFrame) {
+        runtime.cancelAnimationFrame(rafHandleRef.current);
+        rafHandleRef.current = null;
+      }
+    };
+  }, [refreshPageRects, renderFrameRevision, scrollRoot]);
+
+  React.useEffect(() => {
+    if (!scrollRoot) {
+      return;
+    }
+    const runtime = scrollRoot.ownerDocument?.defaultView as
+      | (Window & { ResizeObserver?: typeof ResizeObserver })
+      | null;
+    if (!runtime?.ResizeObserver) {
+      return;
+    }
+    const observer = new runtime.ResizeObserver(() => refreshPageRects());
+    observer.observe(scrollRoot);
+    return () => observer.disconnect();
+  }, [refreshPageRects, scrollRoot]);
+
+  React.useEffect(() => {
+    if (!scrollRoot) {
+      return;
+    }
+    const runtime = scrollRoot.ownerDocument?.defaultView as
+      | (Window & { MutationObserver?: typeof MutationObserver })
+      | null;
+    if (!runtime?.MutationObserver) {
+      return;
+    }
+    const observer = new runtime.MutationObserver((records) => {
+      const overlay = overlayRootRef.current;
+      if (overlay) {
+        const allSelf = records.every(
+          (record) => record.target instanceof Node && overlay.contains(record.target),
+        );
+        if (allSelf) {
+          return;
+        }
+      }
+      refreshPageRects();
+    });
+    observer.observe(scrollRoot, { childList: true, subtree: false });
+    return () => observer.disconnect();
+  }, [refreshPageRects, scrollRoot]);
+
+  const items = React.useMemo(() => {
+    const allItems = collectFloatingImageOverlayItems({
+      surface: snapshot.surface,
+      activeStory: snapshot.activeStory,
+      facet,
+      pageRects,
+      mediaPreviews,
+    });
+    return allItems.filter((item) =>
+      plane === "behind" ? item.behindDoc : !item.behindDoc,
+    );
+  }, [facet, mediaPreviews, pageRects, plane, snapshot.activeStory, snapshot.surface]);
+
+  return (
+    <div
+      ref={overlayRootRef}
+      className={
+        plane === "behind"
+          ? "pointer-events-none absolute inset-0 z-[5]"
+          : "pointer-events-none absolute inset-0 z-20"
+      }
+      aria-hidden={plane === "behind" ? "true" : undefined}
+      data-testid={plane === "behind" ? "floating-image-layer-behind" : "floating-image-layer-front"}
+      data-floating-image-count={items.length}
+    >
+      {items.map((item) => {
+        const interactive = plane === "front" && typeof onActivateFloatingImage === "function";
+        const commonProps = {
+          key: item.key,
+          className: interactive
+            ? "pointer-events-auto absolute m-0 border-0 bg-transparent p-0"
+            : "pointer-events-none absolute m-0 border-0 bg-transparent p-0",
+          "data-floating-image-overlay": "",
+          "data-floating-image-id": item.mediaId,
+          style: {
+            top: `${item.topPx}px`,
+            left: `${item.leftPx}px`,
+            width: `${item.widthPx}px`,
+            height: `${item.heightPx}px`,
+          },
+        } as const;
+        const content = item.src ? (
+          <img
+            src={item.src}
+            alt={interactive ? item.altText ?? "" : ""}
+            title={item.detail ?? item.altText ?? "Floating image"}
+            draggable={false}
+            style={{
+              display: "block",
+              width: "100%",
+              height: "100%",
+              objectFit: "fill",
+            }}
+          />
+        ) : (
+          <span
+            className="flex h-full w-full items-center justify-center rounded border border-border/70 bg-surface/90 px-2 text-[10px] font-medium uppercase tracking-[0.12em] text-secondary"
+            title={item.detail ?? item.altText ?? "Floating image"}
+          >
+            Image
+          </span>
+        );
+        if (!interactive) {
+          return (
+            <div {...commonProps} aria-hidden="true">
+              {content}
+            </div>
+          );
+        }
+        return (
+          <button
+            {...commonProps}
+            type="button"
+            tabIndex={-1}
+            aria-label={item.altText ?? "Select floating image"}
+            onMouseDown={preserveEditorSelectionMouseDown}
+            onClick={() =>
+              onActivateFloatingImage?.({
+                mediaId: item.mediaId,
+                from: item.from,
+                to: item.to,
+                storyTarget: snapshot.activeStory,
+              })}
+          >
+            {content}
+          </button>
+        );
+      })}
+    </div>
+  );
+};
+
+export default TwFloatingImageLayer;

package/src/ui-tailwind/page-stack/tw-region-block-renderer.tsx

@@ -260,6 +260,10 @@ function RegionTable({
               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/tw-review-workspace.tsx

@@ -91,6 +91,8 @@ import { TwReviewRail, type ReviewRailTab } from "./review/tw-review-rail";
 import { TwStatusBar } from "./status/tw-status-bar";
 import { type ToolbarInteractionPolicy } from "./toolbar/tw-toolbar";
 import { TwChromeOverlay, TwPageStackOverlayLayer } from "./chrome-overlay";
+import { TwFloatingImageLayer } from "./page-stack/tw-floating-image-layer.tsx";
+import type { MediaPreviewDescriptor } from "./editor-surface/pm-state-from-snapshot.ts";
 import {
   cycleScopeIndex,
   shouldHandleScopeNavKey,
@@ -104,6 +106,7 @@ export interface TwReviewWorkspaceProps {
   markupDisplay: MarkupDisplay;
   currentUserId?: string;
   capabilities?: SessionCapabilities;
+  mediaPreviews?: Record<string, MediaPreviewDescriptor>;
   reviewMode?: "editing" | "review";
   /**
    * Runtime-owned layout facet.  Optional so existing tests + host apps
@@ -192,6 +195,12 @@ export interface TwReviewWorkspaceProps {
   selectionContextAnalytics?: RuntimeContextAnalyticsSnapshot | null;
   currentScopeContextAnalytics?: RuntimeContextAnalyticsSnapshot | null;
   commands: EditorCommandBag;
+  onActivateFloatingImage?: (payload: {
+    mediaId: string;
+    from: number;
+    to: number;
+    storyTarget: EditorStoryTarget;
+  }) => void;
   /** N6 — release the grabbed image/shape. Wired to `runtime.deselectObject()` by the host. */
   onDeselectObject?: () => void;
   activeSelectionTool?: ActiveSelectionToolModel | null;
@@ -903,6 +912,17 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
   // of N times.
   useEffect(() => {
     if (!props.layoutFacet) return;
+    let pendingBump = false;
+    let cancelled = false;
+    const scheduleBump = () => {
+      if (pendingBump || cancelled) return;
+      pendingBump = true;
+      queueMicrotask(() => {
+        pendingBump = false;
+        if (cancelled) return;
+        setRenderFrameRevision((n) => n + 1);
+      });
+    };
     const unsub = props.layoutFacet.subscribe((event) => {
       switch (event.kind) {
         case "zoom_changed":
@@ -913,13 +933,16 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
         case "page_field_dirtied":
         case "measurement_backend_ready":
         case "layout_committed":
-          setRenderFrameRevision((n) => n + 1);
+          scheduleBump();
           break;
         default:
           break;
       }
     });
-    return unsub;
+    return () => {
+      cancelled = true;
+      unsub();
+    };
   }, [props.layoutFacet]);
 
   useEffect(() => {
@@ -1077,7 +1100,12 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
   useEffect(() => {
     if (!props.layoutFacet) return;
     const facet = props.layoutFacet;
-    void document.fonts.ready.then(() => {
+    const fontSet = document.fonts;
+    if (!fontSet?.ready) {
+      facet.swapMeasurementProvider(createCanvasBackend());
+      return;
+    }
+    void fontSet.ready.then(() => {
       facet.swapMeasurementProvider(createCanvasBackend());
     });
   }, [props.layoutFacet]);
@@ -1634,6 +1662,17 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
                       data-layer="page-card-backgrounds"
                     />
                   ) : null}
+                  {isPageWorkspace && chromeVisibility.pageChrome && props.layoutFacet ? (
+                    <TwFloatingImageLayer
+                      facet={props.layoutFacet}
+                      scrollRoot={pageStackScrollRoot}
+                      renderFrameRevision={renderFrameRevision}
+                      visiblePageIndexRange={visiblePageIndexRange}
+                      snapshot={snapshot}
+                      mediaPreviews={props.mediaPreviews}
+                      plane="behind"
+                    />
+                  ) : null}
                   {isPageWorkspace && chromeVisibility.pageChrome && pageChromeModel.lineNumberingEnabled ? (
                     <div
                       aria-hidden="true"
@@ -1688,6 +1727,18 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
                         >
                           {props.document}
                         </div>
+                        {isPageWorkspace && chromeVisibility.pageChrome && props.layoutFacet ? (
+                          <TwFloatingImageLayer
+                            facet={props.layoutFacet}
+                            scrollRoot={pageStackScrollRoot}
+                            renderFrameRevision={renderFrameRevision}
+                            visiblePageIndexRange={visiblePageIndexRange}
+                            snapshot={snapshot}
+                            mediaPreviews={props.mediaPreviews}
+                            plane="front"
+                            onActivateFloatingImage={props.onActivateFloatingImage}
+                          />
+                        ) : null}
                         {props.layoutFacet ? (
                           <TwChromeOverlay
                             facet={props.layoutFacet}