@beyondwork/docx-react-component 1.0.96 → 1.0.97

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

@@ -17,6 +17,7 @@ import {
   ROTATION_UNITS_PER_DEGREE,
   SRCRECT_UNITS_PER_PERCENT,
 } from "../../api/public-types.ts";
+import { buildPictureFilterCss } from "./picture-effects.ts";
 
 const HEX_COLOR_RE = /^[0-9A-Fa-f]{3,8}$/;
 const SAFE_FONT_RE = /^[A-Za-z0-9 ,\-'"]+$/;
@@ -632,6 +633,7 @@ export const editorSchema = new Schema({
         flipH: { default: false },
         flipV: { default: false },
         srcRect: { default: null },
+        lum: { default: null },
         // Lane 6d N9 — float-wrap fields surfaced from `SurfaceDrawingAnchor`.
         wrapMode: { default: null },
         distMargins: { default: null },
@@ -653,14 +655,34 @@ export const editorSchema = new Schema({
         const widthEmu = node.attrs.widthEmu as number | null;
         const heightEmu = node.attrs.heightEmu as number | null;
         if (renderInPageOverlay && isFloating) {
+          const wrapMode = node.attrs.wrapMode as string | null;
+          const distMargins = node.attrs.distMargins as
+            | { top?: number; bottom?: number; left?: number; right?: number }
+            | null;
+          const overlayAnchorAttrs: Record<string, string> = {
+            class: "inline-block h-0 w-0 overflow-hidden align-middle",
+            "data-node-type": "image-floating-anchor",
+            title: (node.attrs.detail as string) ?? (node.attrs.altText as string) ?? "Floating image anchor",
+            "aria-hidden": "true",
+          };
+          if (wrapMode) overlayAnchorAttrs["data-wrap-mode"] = wrapMode;
+          if (wrapMode === "topAndBottom" && heightEmu) {
+            const heightPx = Math.max(1, Math.round(heightEmu / EMU_PER_PX));
+            const marginTopPx = distMargins?.top ? Math.round(distMargins.top / EMU_PER_PX) : 0;
+            const marginBottomPx = distMargins?.bottom ? Math.round(distMargins.bottom / EMU_PER_PX) : 0;
+            overlayAnchorAttrs.class = "block overflow-hidden";
+            overlayAnchorAttrs.style = [
+              "display:block",
+              "width:0",
+              `height:${heightPx}px`,
+              `margin:${marginTopPx}px 0 ${marginBottomPx}px 0`,
+              "padding:0",
+            ].join(";");
+            overlayAnchorAttrs["data-overlay-reserves-flow"] = "true";
+          }
           return [
             "span",
-            {
-              class: "inline-block h-0 w-0 overflow-hidden align-middle",
-              "data-node-type": "image-floating-anchor",
-              title: (node.attrs.detail as string) ?? (node.attrs.altText as string) ?? "Floating image anchor",
-              "aria-hidden": "true",
-            },
+            overlayAnchorAttrs,
           ];
         }
         if (!isMissing && src) {
@@ -673,6 +695,7 @@ export const editorSchema = new Schema({
           const srcRect = node.attrs.srcRect as
             | { top: number; bottom: number; left: number; right: number }
             | null;
+          const lum = node.attrs.lum as { bright?: number; contrast?: number } | null;
           const transformParts: string[] = [];
           if (rotation && rotation !== 0) {
             transformParts.push(`rotate(${(rotation / ROTATION_UNITS_PER_DEGREE).toFixed(3)}deg)`);
@@ -687,7 +710,6 @@ export const editorSchema = new Schema({
               `inset(${(srcRect.top / SRCRECT_UNITS_PER_PERCENT).toFixed(3)}% ${(srcRect.right / SRCRECT_UNITS_PER_PERCENT).toFixed(3)}% ${(srcRect.bottom / SRCRECT_UNITS_PER_PERCENT).toFixed(3)}% ${(srcRect.left / SRCRECT_UNITS_PER_PERCENT).toFixed(3)}%)`,
             );
           }
-          // N11.b filter effects → CSS filter on the img element.
           const softEdgeRadius = node.attrs.softEdgeRadius as number | null;
           const outerShadow = node.attrs.outerShadow as {
             blurRad: number; dist: number; dir: number; color: string;
@@ -697,41 +719,16 @@ export const editorSchema = new Schema({
             radius: number; color: string;
             colorType: "srgbClr" | "schemeClr";
           } | null;
-          const filterParts: string[] = [];
-          if (softEdgeRadius) {
-            filterParts.push(`blur(${(softEdgeRadius / EMU_PER_PX).toFixed(2)}px)`);
-          }
-          // Defense in depth: even though parse-picture.ts validates
-          // srgbClr@val against a strict hex allowlist, re-validate here at
-          // the CSS sink so a future parser refactor or a bypass that lands
-          // attacker-controlled text in node.attrs cannot escape
-          // `drop-shadow(#…)` into arbitrary CSS (e.g. `FF0000) url(…)/*`).
-          // safeFilterHexColor returns `#RRGGBB` on valid hex input and
-          // empty string otherwise, so schemeClr tokens (e.g. "accent1")
-          // naturally skip this branch until a theme resolver runs.
-          const safeFilterHexColor = (raw: unknown): string => {
-            return typeof raw === "string" &&
-              /^[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?$/.test(raw)
-              ? `#${raw.toUpperCase()}`
-              : "";
-          };
-          if (glow) {
-            const glowColor = safeFilterHexColor(glow.color);
-            if (glowColor) {
-              filterParts.push(`drop-shadow(0 0 ${(glow.radius / EMU_PER_PX).toFixed(2)}px ${glowColor})`);
-            }
-          }
-          if (outerShadow) {
-            const shadowColor = safeFilterHexColor(outerShadow.color);
-            if (shadowColor) {
-              const blurPx = (outerShadow.blurRad / EMU_PER_PX).toFixed(2);
-              const distPx = outerShadow.dist / EMU_PER_PX;
-              const dirRad = (outerShadow.dir / ROTATION_UNITS_PER_DEGREE) * (Math.PI / 180);
-              const dx = (distPx * Math.cos(dirRad)).toFixed(2);
-              const dy = (distPx * Math.sin(dirRad)).toFixed(2);
-              filterParts.push(`drop-shadow(${dx}px ${dy}px ${blurPx}px ${shadowColor})`);
-            }
-          }
+          // N11.b filter effects → CSS filter on the img element. The helper
+          // re-validates colors at the CSS sink and maps OOXML luminance to
+          // an affine CSS filter, so brightened cover photos do not keep
+          // black pixels pinned at black.
+          const filter = buildPictureFilterCss({
+            ...(lum ? { lum } : {}),
+            ...(softEdgeRadius ? { softEdgeRadius } : {}),
+            ...(glow ? { glow } : {}),
+            ...(outerShadow ? { outerShadow } : {}),
+          });
           // N9 float-wrap → CSS float + shape-outside on the wrapper span.
           const wrapMode = node.attrs.wrapMode as string | null;
           const positionH = node.attrs.positionH as { align?: string } | null;
@@ -771,7 +768,7 @@ export const editorSchema = new Schema({
             heightPx ? `height:${heightPx}px` : "",
             transformParts.length > 0 ? `transform:${transformParts.join(" ")}` : "",
             clipParts.length > 0 ? `clip-path:${clipParts[0]}` : "",
-            filterParts.length > 0 ? `filter:${filterParts.join(" ")}` : "",
+            filter ? `filter:${filter}` : "",
           ].filter(Boolean).join(";");
           const wrapperStyle = wrapperStyleParts.join(";");
           const wrapperAttrs: Record<string, string> = {
@@ -822,32 +819,29 @@ export const editorSchema = new Schema({
         dropdownItems: { default: null },
         comboBoxItems: { default: null },
         showingPlcHdr: { default: false },
+        containsPageBreak: { default: false },
       },
       toDOM(node) {
-        const sdtType = node.attrs.sdtType as string | null;
-        const typeLabel = sdtType === "checkbox" ? "\u2611 Checkbox"
-          : sdtType === "date" ? "\uD83D\uDCC5 Date"
-          : sdtType === "dropDownList" ? "\u25BE Dropdown"
-          : sdtType === "comboBox" ? "\u25BE Combo box"
-          : sdtType === "plainText" ? "\u270E Plain text"
-          : sdtType === "richText" ? "\u270E Rich text"
-          : sdtType ?? undefined;
-        const meta = [node.attrs.alias, node.attrs.tag, typeLabel].filter(Boolean).join(" \u00B7 ");
+        const containsPageBreak = Boolean(node.attrs.containsPageBreak);
+        if (containsPageBreak) {
+          return [
+            "section",
+            {
+              class: "my-0 border-0 bg-transparent p-0",
+              style: "min-height:var(--wre-page-frame-height-px,1056px);position:relative",
+              "data-node-type": "sdt_block",
+              "data-sdt-page-break": "true",
+            },
+            ["div", 0],
+          ];
+        }
         return [
           "section",
           {
-            class: "my-2 rounded-xl border border-primary/15 bg-surface-raised/60 px-3 py-2",
+            class: "my-0 border-0 bg-transparent p-0",
             "data-node-type": "sdt_block",
-            ...(sdtType ? { "data-sdt-type": sdtType } : {}),
+            ...(node.attrs.sdtType ? { "data-sdt-type": String(node.attrs.sdtType) } : {}),
           },
-          [
-            "div",
-            {
-              class: "mb-2 text-[11px] uppercase tracking-[0.18em] text-tertiary",
-              contenteditable: "false",
-            },
-            meta || "Content control",
-          ],
           ["div", 0],
         ];
       },
@@ -1103,8 +1097,10 @@ export const editorSchema = new Schema({
         txbxText: { default: null },
         wrapMode: { default: "none" },
         display: { default: "inline" },
+        renderInPageOverlay: { default: false },
         widthEmu: { default: null },
         heightEmu: { default: null },
+        positionH: { default: null },
       },
       toDOM(node) {
         // V2c.5: when the rich attrs are present (DrawingFrame source),
@@ -1114,6 +1110,37 @@ export const editorSchema = new Schema({
         // previews stay visually identical.
         const isV2c5 = node.attrs.label !== null || node.attrs.isTextBox === true;
         if (isV2c5) {
+          if (Boolean(node.attrs.renderInPageOverlay) && node.attrs.display === "floating") {
+            const wrapMode = node.attrs.wrapMode as string | null;
+            const heightEmu = node.attrs.heightEmu as number | null;
+            const widthEmu = node.attrs.widthEmu as number | null;
+            const positionH = node.attrs.positionH as { align?: string } | null;
+            const attrs: Record<string, string> = {
+              class: "inline-block h-0 w-0 overflow-hidden align-middle",
+              "data-node-type": "shape-floating-anchor",
+              title: (node.attrs.detail as string) || (node.attrs.label as string) || "Floating shape anchor",
+              "aria-hidden": "true",
+            };
+            if (wrapMode) attrs["data-wrap-mode"] = wrapMode;
+            if (wrapMode === "square" && widthEmu && heightEmu) {
+              const floatSide = positionH?.align === "right" ? "right" : "left";
+              attrs.class = "block overflow-hidden";
+              attrs.style = [
+                `float:${floatSide}`,
+                `width:${Math.max(1, Math.round(widthEmu / EMU_PER_PX))}px`,
+                `height:${Math.max(1, Math.round(heightEmu / EMU_PER_PX))}px`,
+                "margin:0",
+                "padding:0",
+                "opacity:0",
+                "pointer-events:none",
+              ].join(";");
+              attrs["data-overlay-reserves-flow"] = "true";
+            }
+            return [
+              "span",
+              attrs,
+            ];
+          }
           const geometry = node.attrs.geometry as string | null;
           const fill = node.attrs.fill as
             | ShapeFill

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

@@ -2,6 +2,7 @@ import { Fragment, type Mark, type Node as PMNode, type Schema } from "prosemirr
 import { EditorState, NodeSelection, type Plugin, Selection, TextSelection } from "prosemirror-state";
 
 import type {
+  BlockNode,
   EditorSurfaceSnapshot,
   SelectionSnapshot,
   SurfaceBlockSnapshot,
@@ -10,6 +11,27 @@ import type {
   SurfaceTableCellSnapshot,
 } from "../../api/public-types";
 import { shouldRenderAbsoluteFloatingImageInPageOverlay } from "../page-stack/floating-image-overlay-model.ts";
+
+/**
+ * Refactor/11b Slice A — mirror of the Symbol registered by
+ * `src/runtime/surface-projection.ts`.  `Symbol.for` resolves to the
+ * same symbol in any layer, so no cross-layer import is required to
+ * share the channel.  Reads the parallel `blockRefs` array that
+ * surface-projection attaches to the snapshot, feeding the L1 PM Node
+ * identity cache below.
+ */
+const CANONICAL_BLOCK_REFS_SYMBOL = Symbol.for("wre.canonical-block-refs");
+
+function getCanonicalBlockRefs(
+  snapshot: EditorSurfaceSnapshot,
+): readonly (BlockNode | null)[] | null {
+  const refs = (
+    snapshot as unknown as {
+      [CANONICAL_BLOCK_REFS_SYMBOL]?: readonly (BlockNode | null)[];
+    }
+  )[CANONICAL_BLOCK_REFS_SYMBOL];
+  return refs ?? null;
+}
 import { editorSchema } from "./pm-schema";
 import { buildPositionMap, type PositionMap } from "./pm-position-map";
 import { getChartModel } from "../../api/v3/runtime/chart.ts";
@@ -19,6 +41,122 @@ export interface PMStateResult {
   positionMap: PositionMap;
 }
 
+// ---------------------------------------------------------------------------
+// Refactor/11b Slice A — L1 PM Node identity cache
+// ---------------------------------------------------------------------------
+// PM's `ViewDesc.update()` uses `node.eq()` to skip rebuilding subtrees whose
+// content + attrs + marks are unchanged. Our rebuilder historically produced
+// structurally-equal but identity-different Node instances on every commit,
+// defeating that short-circuit and making `view.updateState()` O(doc) instead
+// of O(changed blocks).
+//
+// Fix: when a canonical `BlockNode` reference is unchanged across commits
+// (the canonical document preserves identity for unmodified blocks via
+// structural sharing), reuse the PM Node we built last time — keyed on the
+// canonical ref plus a digest of external inputs that actually affect the
+// emitted attrs (neighbor-driven flags, media preview src, the two
+// unsupported-preview booleans).
+//
+// Scope: paragraphs only in this slice. Tables/SDTs/opaques skip the cache
+// (typically rare or cheap). See slice commit body for deferrals.
+// ---------------------------------------------------------------------------
+
+type BlockCacheBucket = Map<string, PMNode>;
+/** Module-scoped cache. Keyed on canonical BlockNode reference — auto-evicts
+ *  via WeakMap when the canonical doc rebuilds a block. Inner map is capped
+ *  per bucket to bound memory when external keys churn (e.g. markup-mode
+ *  toggles). */
+const pmNodeCache = new WeakMap<BlockNode, BlockCacheBucket>();
+const MAX_ENTRIES_PER_BLOCK = 4;
+
+/** WeakMap<mediaPreviews, stableId> — turns mediaPreviews object identity
+ *  into a stable number for external-key composition. Equal identity →
+ *  equal id. Different identity (even same content) → different id.
+ *
+ *  Empty objects (no enumerable keys) all map to id 0 — they're
+ *  semantically equivalent from the rebuilder's view (no images to wire)
+ *  and treating them as one canonical id avoids false-miss on callers
+ *  that default-construct `{}` each render. */
+const mediaPreviewsIdentityIds = new WeakMap<object, number>();
+let nextMediaPreviewsIdentityId = 1;
+function mediaPreviewsIdentity(obj: object): number {
+  // Fast path: empty object → canonical id 0.
+  let hasAnyKey = false;
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  for (const _k in obj) {
+    hasAnyKey = true;
+    break;
+  }
+  if (!hasAnyKey) return 0;
+  let id = mediaPreviewsIdentityIds.get(obj);
+  if (id === undefined) {
+    id = nextMediaPreviewsIdentityId++;
+    mediaPreviewsIdentityIds.set(obj, id);
+  }
+  return id;
+}
+
+let identityCacheHits = 0;
+let identityCacheMisses = 0;
+
+/** Test-only + perf-probe hook. Reads the accumulated hit/miss counts. */
+export function getPmNodeCacheCounters(): { hits: number; misses: number } {
+  return { hits: identityCacheHits, misses: identityCacheMisses };
+}
+
+/** Test-only: reset the cache + counters. Production never calls this. */
+export function __resetPmNodeCacheForTests(): void {
+  identityCacheHits = 0;
+  identityCacheMisses = 0;
+}
+
+/** External-key digest for a single paragraph's cache lookup. Encodes every
+ *  input to `buildParagraph` that does NOT come from the `BlockNode` itself.
+ *  Neighbor digests are minimal — they only need to reflect fields that
+ *  influence the current paragraph's rendered PM attrs (listContinuation,
+ *  contextualSpacingBefore/After). */
+function paragraphNeighborDigest(
+  p: Extract<SurfaceBlockSnapshot, { kind: "paragraph" }> | null,
+): string {
+  if (!p) return "_";
+  const numInst = p.numbering?.numberingInstanceId ?? "";
+  const numLvl = p.numbering?.level ?? "";
+  const style = p.styleId ?? "";
+  const ctx = p.contextualSpacing ? "1" : "0";
+  return `${numInst}:${numLvl}:${style}:${ctx}`;
+}
+
+function paragraphExternalKey(
+  prev: Extract<SurfaceBlockSnapshot, { kind: "paragraph" }> | null,
+  next: Extract<SurfaceBlockSnapshot, { kind: "paragraph" }> | null,
+  mediaPreviewsId: number,
+  showUnsupportedObjectPreviews: boolean,
+  renderAbsoluteFloatingObjectsInPageOverlay: boolean,
+): string {
+  return `p|${paragraphNeighborDigest(prev)}|${paragraphNeighborDigest(next)}|m${mediaPreviewsId}|${showUnsupportedObjectPreviews ? 1 : 0}|${renderAbsoluteFloatingObjectsInPageOverlay ? 1 : 0}`;
+}
+
+function cacheLookup(blockRef: BlockNode, externalKey: string): PMNode | null {
+  const bucket = pmNodeCache.get(blockRef);
+  if (!bucket) return null;
+  const node = bucket.get(externalKey);
+  return node ?? null;
+}
+
+function cacheStore(blockRef: BlockNode, externalKey: string, node: PMNode): void {
+  let bucket = pmNodeCache.get(blockRef);
+  if (!bucket) {
+    bucket = new Map();
+    pmNodeCache.set(blockRef, bucket);
+  } else if (bucket.size >= MAX_ENTRIES_PER_BLOCK) {
+    // Evict the oldest (insertion-order) entry. JS Maps iterate in insertion
+    // order, so `keys().next().value` is the oldest.
+    const oldestKey = bucket.keys().next().value;
+    if (oldestKey !== undefined) bucket.delete(oldestKey);
+  }
+  bucket.set(externalKey, node);
+}
+
 /**
  * Test-friendly wrapper: build a PM EditorState from a minimal snapshot with no
  * selection or plugins. The snapshot is cast to EditorSurfaceSnapshot so callers
@@ -243,6 +381,7 @@ function buildPMDoc(
     mediaPreviews,
     showUnsupportedObjectPreviews,
     renderAbsoluteFloatingObjectsInPageOverlay,
+    getCanonicalBlockRefs(surface),
   );
 
   // Ensure at least one block (PM requires non-empty doc)
@@ -258,8 +397,10 @@ function buildPMBlocks(
   mediaPreviews: Record<string, MediaPreviewDescriptor>,
   showUnsupportedObjectPreviews: boolean,
   renderAbsoluteFloatingObjectsInPageOverlay: boolean,
+  blockRefs: readonly (BlockNode | null)[] | null = null,
 ): PMNode[] {
   const nodes: PMNode[] = [];
+  const mediaId = mediaPreviewsIdentity(mediaPreviews);
 
   for (let index = 0; index < blocks.length; index += 1) {
     const block = blocks[index];
@@ -269,6 +410,39 @@ function buildPMBlocks(
     const nextParagraph = nextBlock?.kind === "paragraph" ? nextBlock : null;
 
     if (block.kind === "paragraph") {
+      // L1 identity cache — paragraphs only in this slice. Canonical ref
+      // comes from the parallel `blockRefs` array attached by
+      // `surface-projection`. Missing ref (null or no array provided) is
+      // treated as a cache miss: the function is backward-compatible with
+      // callers that don't supply refs (tests, cell-internal recursion).
+      const ref = blockRefs?.[index] ?? null;
+      if (ref !== null) {
+        const extKey = paragraphExternalKey(
+          previousParagraph,
+          nextParagraph,
+          mediaId,
+          showUnsupportedObjectPreviews,
+          renderAbsoluteFloatingObjectsInPageOverlay,
+        );
+        const cached = cacheLookup(ref, extKey);
+        if (cached) {
+          identityCacheHits += 1;
+          nodes.push(cached);
+          continue;
+        }
+        identityCacheMisses += 1;
+        const built = buildParagraph(
+          block,
+          previousParagraph,
+          nextParagraph,
+          mediaPreviews,
+          showUnsupportedObjectPreviews,
+          renderAbsoluteFloatingObjectsInPageOverlay,
+        );
+        cacheStore(ref, extKey, built);
+        nodes.push(built);
+        continue;
+      }
       nodes.push(
         buildParagraph(
           block,
@@ -501,6 +675,7 @@ function buildInlineContent(
           widthEmu: preview?.widthEmu ?? preview?.widthEmu ?? segment.anchor?.extent.widthEmu ?? null,
           heightEmu: preview?.heightEmu ?? segment.anchor?.extent.heightEmu ?? null,
           // Lane 6d N11 — picture effects.
+          lum: segment.pictureEffects?.lum ?? null,
           rotation: segment.pictureEffects?.rotation ?? null,
           flipH: segment.pictureEffects?.flipH ?? false,
           flipV: segment.pictureEffects?.flipV ?? false,
@@ -525,6 +700,10 @@ function buildInlineContent(
       return [buildOpaqueInlineOrComplexAtom(segment, mediaPreviews, showUnsupportedObjectPreviews)];
 
     case "shape":
+      {
+        const renderInPageOverlay =
+          renderAbsoluteFloatingObjectsInPageOverlay &&
+          shouldRenderAbsoluteFloatingImageInPageOverlay(segment.anchor);
       return [
         editorSchema.nodes.shape_atom.create({
           label: segment.label,
@@ -536,10 +715,13 @@ function buildInlineContent(
           txbxText: segment.txbxText ?? null,
           wrapMode: segment.anchor?.wrapMode ?? "none",
           display: segment.anchor?.display ?? "inline",
+          renderInPageOverlay,
           widthEmu: segment.anchor?.extent.widthEmu ?? null,
           heightEmu: segment.anchor?.extent.heightEmu ?? null,
+          positionH: segment.anchor?.positionH ?? null,
         }),
       ];
+      }
 
     case "note_ref": {
       const text = editorSchema.text(
@@ -722,11 +904,34 @@ function buildSdtBlock(
       dropdownItems: block.dropdownItems ?? null,
       comboBoxItems: block.comboBoxItems ?? null,
       showingPlcHdr: block.showingPlcHdr ?? false,
+      containsPageBreak: surfaceBlocksContainPageBreak(block.children),
     },
     Fragment.from(children),
   );
 }
 
+function surfaceBlocksContainPageBreak(blocks: readonly SurfaceBlockSnapshot[]): boolean {
+  for (const block of blocks) {
+    if (
+      block.kind === "paragraph" &&
+      block.segments.some((segment) => segment.kind === "opaque_inline" && segment.label === "Page break")
+    ) {
+      return true;
+    }
+    if (block.kind === "sdt_block" && surfaceBlocksContainPageBreak(block.children)) {
+      return true;
+    }
+    if (block.kind === "table") {
+      for (const row of block.rows) {
+        for (const cell of row.cells) {
+          if (surfaceBlocksContainPageBreak(cell.content)) return true;
+        }
+      }
+    }
+  }
+  return false;
+}
+
 /**
  * Labels surface-projection emits for preserve-only complex fragments
  * (charts, SmartArt, drawing shapes, WordArt, legacy VML).  These have