@beyondwork/docx-react-component 1.0.56 → 1.0.58

package/src/ui-tailwind/editor-surface/float-wrap-resolver.ts

@@ -0,0 +1,119 @@
+/**
+ * Lane 6d — Slice N9 (P7.1 + P7.3): pure float-wrap resolver.
+ *
+ * Maps `SurfaceDrawingAnchor` (the V2c.4-projected DrawingFrame anchor) to
+ * a CSS-style descriptor that the `image_atom` / `shape_atom` toDOM can
+ * stamp onto the wrapper span.  Pure — no DOM access, no React, no schema
+ * dependency.
+ *
+ * v1 coverage (per the lane-6d MVP plan):
+ *   - `square`        → CSS float + `shape-outside: margin-box`
+ *   - `topAndBottom`  → block-level `clear: both`
+ *   - `none` + `behindDoc` → absolute-positioned, `z-index: -1` (behind text)
+ *   - `tight` / `through` → fall back to `square` and emit a one-shot
+ *     warn so telemetry can flag uncovered shapes.  v2 will consume
+ *     `wrapPolygon` data once Lane 3b V2c.x extends `AnchorGeometry`.
+ *
+ * EMU constant: 9525 EMU = 1 px at 96 dpi (OOXML standard).
+ */
+
+import type { SurfaceDrawingAnchor } from "../../api/public-types";
+import { EMU_PER_PX } from "../../runtime/units";
+
+export interface FloatWrapStyle {
+  /** CSS `float` value when the anchor wraps inline text. */
+  float?: "left" | "right";
+  /** CSS `shape-outside` for `square` wrap so adjacent text honors the
+   * picture's margin box. */
+  shapeOutside?: string;
+  /** CSS `clear` — set on `topAndBottom` so the picture renders on its
+   * own line. */
+  clear?: "both";
+  /** Block-level signal for `topAndBottom` so the wrapper switches from
+   * inline-block to block. */
+  display?: "block";
+  /** Absolute positioning — used for `behindDoc` shapes that sit beneath
+   * content. */
+  positionAbsolute?: { topPx: number; leftPx: number; zIndex: number };
+  /** When the resolver fell back to a default for an unsupported wrap
+   * mode, this carries the original mode for telemetry. */
+  fallbackFromMode?: "tight" | "through";
+}
+
+const warnedFallbacks = new Set<string>();
+
+/**
+ * Emit a one-shot console warning per wrap mode so noisy CCEP corpora
+ * don't flood the console but coverage gaps still surface.  Skips SSR
+ * (no `window`) so server-render passes don't spam logs.
+ */
+function warnFallbackOnce(mode: "tight" | "through"): void {
+  if (warnedFallbacks.has(mode)) return;
+  warnedFallbacks.add(mode);
+  if (typeof window === "undefined") return;
+  // Quiet by default — only fires once per mode per session.
+  console.warn(
+    `[lane-6d/N9] wrapMode="${mode}" rendered as "square" v1 fallback (polygon clipping pending Lane 3b V2c.x).`,
+  );
+}
+
+/**
+ * Reset the fallback warn dedup map.  Test-only helper — production code
+ * never calls this.
+ */
+export function _resetFloatWrapWarnings(): void {
+  warnedFallbacks.clear();
+}
+
+/**
+ * Pure resolver: anchor → CSS-style descriptor.  Returns `null` when
+ * the anchor is inline (no float treatment needed) or has no wrapMode.
+ */
+export function resolveFloatStyle(
+  anchor: SurfaceDrawingAnchor | undefined,
+): FloatWrapStyle | null {
+  if (!anchor) return null;
+  if (anchor.display !== "floating") return null;
+
+  switch (anchor.wrapMode) {
+    case "square": {
+      const float = anchor.positionH?.align === "right" ? "right" : "left";
+      return { float, shapeOutside: "margin-box" };
+    }
+    case "topAndBottom":
+      return { clear: "both", display: "block" };
+    case "tight":
+      warnFallbackOnce("tight");
+      return {
+        float: anchor.positionH?.align === "right" ? "right" : "left",
+        shapeOutside: "margin-box",
+        fallbackFromMode: "tight",
+      };
+    case "through":
+      warnFallbackOnce("through");
+      return {
+        float: anchor.positionH?.align === "right" ? "right" : "left",
+        shapeOutside: "margin-box",
+        fallbackFromMode: "through",
+      };
+    case "none": {
+      // `none` + behindDoc → absolute positioned underneath the text.
+      // `none` + !behindDoc → above text (in front).  Either way we use
+      // absolute positioning when offsets are present.
+      if (
+        anchor.positionH?.offset !== undefined ||
+        anchor.positionV?.offset !== undefined
+      ) {
+        return {
+          positionAbsolute: {
+            topPx: Math.round((anchor.positionV?.offset ?? 0) / EMU_PER_PX),
+            leftPx: Math.round((anchor.positionH?.offset ?? 0) / EMU_PER_PX),
+            zIndex: anchor.behindDoc ? -1 : 1,
+          },
+        };
+      }
+      // `none` with no offsets is rare — treat as inline-overlap.
+      return null;
+    }
+  }
+}

package/src/ui-tailwind/editor-surface/pm-command-bridge.ts

@@ -1,5 +1,6 @@
 import { NodeSelection, Plugin, PluginKey } from "prosemirror-state";
-import { columnResizing, goToNextCell, isInTable, tableEditing } from "prosemirror-tables";
+import { columnResizing, goToNextCell, isInTable, selectedRect, tableEditing, TableMap } from "prosemirror-tables";
+import type { EditorState } from "prosemirror-state";
 
 import type { SelectionSnapshot } from "../../api/public-types";
 import {
@@ -12,6 +13,7 @@ import {
   type PastePlainSegment,
 } from "./paste-plain-text";
 import { parseCanonicalFragmentFromWordML } from "../../io/paste/word-clipboard";
+import { parseCanonicalFragmentFromHtml } from "../../io/paste/html-clipboard";
 import type { PositionMap } from "./pm-position-map";
 
 /**
@@ -34,6 +36,71 @@ function readWordMLPayload(clipboard: DataTransfer): string | null {
   return null;
 }
 
+/**
+ * I2 Tier B Slice 5 follow-up — MIME types for image paste. `DataTransfer.items`
+ * exposes binary payloads (unlike `getData` which is string-only), so we
+ * iterate items looking for an image-typed entry.
+ */
+const IMAGE_MIMES = new Set(["image/png", "image/jpeg", "image/gif", "image/webp"]);
+
+/**
+ * Synchronous check for whether the clipboard holds at least one image item.
+ * Used to decide whether to `return true` from `handlePaste` (blocking PM's
+ * default) before the async `readImagePayload` resolves. Side-effect free.
+ */
+function hasImageItem(clipboard: DataTransfer): boolean {
+  const items = clipboard.items;
+  if (!items || items.length === 0) return false;
+  for (let i = 0; i < items.length; i += 1) {
+    const item = items[i];
+    if (item.kind === "file" && IMAGE_MIMES.has(item.type)) return true;
+  }
+  return false;
+}
+
+async function readImagePayload(
+  clipboard: DataTransfer,
+): Promise<{ data: Uint8Array; mimeType: string } | null> {
+  const items = clipboard.items;
+  if (!items || items.length === 0) return null;
+  for (let i = 0; i < items.length; i += 1) {
+    const item = items[i];
+    if (item.kind !== "file") continue;
+    if (!IMAGE_MIMES.has(item.type)) continue;
+    const file = item.getAsFile();
+    if (!file) continue;
+    const buffer = await file.arrayBuffer();
+    return { data: new Uint8Array(buffer), mimeType: item.type };
+  }
+  return null;
+}
+
+/**
+ * I3 widening tail — detect whether the PM selection is inside the last cell
+ * of the last row of its containing table. Used to gate Tab-at-last-cell
+ * implicit row-insert. Returns false if not in a table, if the cell resolution
+ * fails, or if the selection is anywhere other than the bottom-right cell.
+ *
+ * Uses `TableMap` + `selectedRect` from prosemirror-tables — the same
+ * primitives the table command surface consumes — so the computation matches
+ * what the runtime sees when it dispatches `addRowAfter`.
+ */
+function isAtLastCellOfTable(state: EditorState): boolean {
+  if (!isInTable(state)) return false;
+  try {
+    const rect = selectedRect(state);
+    const { map } = rect;
+    // `rect.bottom` / `rect.right` are one past the selection's bottom-right
+    // cell coordinates; a "tail cell" means the selection is in the last
+    // row AND the last column of the table.
+    return rect.bottom === map.height && rect.right === map.width;
+  } catch {
+    // selectedRect throws if there's no cell at the selection (rare edge
+    // case). Treat as "not at tail" — safest fallback.
+    return false;
+  }
+}
+
 /**
  * Callback subset used by paste / drop dispatch. Exported so tests can
  * record dispatch order without constructing the full
@@ -98,6 +165,13 @@ export interface CommandBridgeCallbacks extends SelectionSyncCallbacks {
   onInsertHardBreak: () => void;
   onInsertTab: () => void;
   onOutdentTab?: () => void;
+  /**
+   * I3 widening tail — optional. Fires on Tab at the last cell of the last
+   * row of a table (Word-matching row-insert behavior). Host should dispatch
+   * `addRowAfter` via the runtime so track-changes + collab replay stay
+   * consistent. When omitted, Tab at table tail is a no-op.
+   */
+  onTableInsertRowBelow?: () => void;
   onListIndent?: () => void;
   onListOutdent?: () => void;
   onUndo: () => void;
@@ -124,7 +198,37 @@ export interface CommandBridgeCallbacks extends SelectionSyncCallbacks {
    */
   onPasteFragment?: (meta: {
     fragment: import("../../api/public-types.ts").CanonicalDocumentFragment;
-    source: "wordml";
+    source: "wordml" | "html";
+  }) => void;
+  /**
+   * I2 Tier B Slice 5 follow-up — optional. Fires when the paste / drop
+   * payload carries an image MIME type (`image/png`, `image/jpeg`,
+   * `image/gif`, `image/webp`). The host wires this to
+   * `WordReviewEditorRef.insertImage({ data, mimeType })`. Without this
+   * callback, image payloads fall through to `onBlockedInput` so the host
+   * can show its own "image paste not supported" toast.
+   */
+  onPasteImage?: (meta: {
+    data: Uint8Array;
+    mimeType: string;
+    source: "paste" | "drop";
+  }) => void;
+  /**
+   * I2 Tier B Slice 5 — optional. Fires when a DataTransfer drop carries a
+   * WordprocessingML fragment payload. `effect` reflects the standard
+   * move-vs-copy convention: Ctrl (or Cmd on macOS) held → "copy" (source
+   * untouched), otherwise "move".
+   *
+   * `sourceRange` is populated (v5 follow-up) when the drag originated from
+   * within this editor — it gives the host enough information to delete the
+   * source range AFTER it has inserted the fragment at the drop point,
+   * completing the drag-to-move round trip. When `undefined`, the drag came
+   * from outside the editor (another app) and the OS owns source deletion.
+   */
+  onDropFragment?: (meta: {
+    fragment: import("../../api/public-types.ts").CanonicalDocumentFragment;
+    effect: "move" | "copy";
+    sourceRange?: { from: number; to: number };
   }) => void;
   /**
    * Optional. Fires on `compositionstart` (true) and `compositionend`
@@ -187,6 +291,12 @@ export function createCommandBridgePlugins(
   options?: CommandBridgePluginOptions,
 ): Plugin[] {
   let isComposing = false;
+  // v5 Slice 5 follow-up: same-editor drag tracking. Captured on `dragstart`
+  // (if the selection is non-empty at drag time), consumed on `drop` when
+  // `effect === "move"`, cleared on `dragend`. `null` outside of active
+  // drag cycles OR for external drags (payloads originating from another
+  // application, where the OS handles source removal).
+  let dragSourceRange: { from: number; to: number } | null = null;
 
   const filterPlugin = callbacks.gate ?? new Plugin({
     key: bridgeKey,
@@ -219,6 +329,40 @@ export function createCommandBridgePlugins(
           callbacks.onCompositionChange?.(false);
           return false;
         },
+        // v5 Slice 5 follow-up: capture the selection range at drag-start so
+        // drop-handler can delete the source on move-effect drop. Without
+        // this, same-editor drag-to-move is observationally identical to
+        // drag-to-copy — the fragment lands at the drop site but the source
+        // stays, leaving a duplicate.
+        dragstart(view, event) {
+          const dragEvent = event as DragEvent;
+          const sel = view.state.selection;
+          if (!sel || sel.empty) {
+            dragSourceRange = null;
+            return false;
+          }
+          const posMap = callbacks.getPositionMap?.();
+          if (!posMap) {
+            dragSourceRange = null;
+            return false;
+          }
+          const from = posMap.pmToRuntime(sel.from);
+          const to = posMap.pmToRuntime(sel.to);
+          if (from === to) {
+            dragSourceRange = null;
+            return false;
+          }
+          dragSourceRange = { from, to };
+          // Don't preventDefault — let PM/browser handle the visual drag.
+          return false;
+        },
+        dragend() {
+          // Clear the captured range after the drag cycle completes. For
+          // copy-effect drops this runs without having consumed the range;
+          // for move-effect drops the drop-handler already deleted it.
+          dragSourceRange = null;
+          return false;
+        },
       },
       handleTextInput(_view, _from, _to, text) {
         if (isComposing) {
@@ -247,7 +391,32 @@ export function createCommandBridgePlugins(
           return true;
         }
 
-        // Tier B: WordprocessingML
+        // v5 close-out: Image paste — detect image MIME before WordML/HTML.
+        // Real-world copy-image-from-browser / copy-image-from-Word sources
+        // put the image as a binary clipboard item alongside an HTML fallback
+        // that links to the same image; the fallback chain would otherwise
+        // prefer the HTML (lower fidelity). Image check first wins.
+        if (callbacks.onPasteImage) {
+          // readImagePayload is async; fire-and-forget via the Promise chain.
+          // We return true immediately to block PM's default; if the promise
+          // resolves with no image, we've already blocked and the paste
+          // silently drops. Hosts that need strict "image or nothing"
+          // semantics can inspect `clipboardData.items` themselves before
+          // wiring the callback.
+          const imagePromise = readImagePayload(clipboard);
+          void imagePromise.then((img) => {
+            if (img) {
+              callbacks.onPasteImage!({ ...img, source: "paste" });
+            }
+          });
+          // Synchronous fast-path: if items tells us there's an image item
+          // available right now, consume the paste to avoid double-processing.
+          if (hasImageItem(clipboard)) {
+            return true;
+          }
+        }
+
+        // Tier B: WordprocessingML (highest fidelity when available)
         if (callbacks.onPasteFragment) {
           const wordml = readWordMLPayload(clipboard);
           if (wordml) {
@@ -256,8 +425,20 @@ export function createCommandBridgePlugins(
               callbacks.onPasteFragment({ fragment: parsed.fragment, source: "wordml" });
               return true;
             }
-            // Parse failed or empty — fall through to plain-text so the paste
-            // still does something (defensive against malformed clipboard payloads).
+            // Parse failed or empty — fall through to HTML / plain-text so the
+            // paste still does something (defensive against malformed payloads).
+          }
+        }
+
+        // Tier B: HTML (Google Docs, Word web, Outlook-lite)
+        if (callbacks.onPasteFragment) {
+          const htmlPayload = clipboard.getData("text/html");
+          if (htmlPayload && htmlPayload.trim().length > 0) {
+            const parsed = parseCanonicalFragmentFromHtml(htmlPayload);
+            if (parsed.ok && parsed.fragment.blocks.length > 0) {
+              callbacks.onPasteFragment({ fragment: parsed.fragment, source: "html" });
+              return true;
+            }
           }
         }
 
@@ -280,15 +461,51 @@ export function createCommandBridgePlugins(
         return true;
       },
 
-      // Plain-text drop: symmetric path — extract text/plain from the
-      // DataTransfer and dispatch through the same callbacks paste uses.
+      // Drop handler — I2 Tier B Slice 5 adds fragment-drop + Ctrl-modifier
+      // (move vs. copy) semantics on top of the existing Tier A plain-text path.
+      //
+      // Preference order:
+      //   1. WordML fragment payload → dispatch via onDropFragment (fragment
+      //      route, mirrors handlePaste → onPasteFragment). Ctrl flips
+      //      move→copy semantics; the runtime decides source-deletion.
+      //   2. Plain text → dispatch through onInsertText + friends (Tier A).
+      //   3. Empty / non-text payload → onBlockedInput.
       handleDrop(_view, event) {
         if (isComposing) return true;
-        const dt = (event as DragEvent).dataTransfer;
+        const dragEvent = event as DragEvent;
+        const dt = dragEvent.dataTransfer;
         if (!dt) {
           callbacks.onBlockedInput?.("drop", "Drop data was not available.");
           return true;
         }
+
+        // Tier B drop: WordprocessingML fragment
+        if (callbacks.onDropFragment) {
+          const wordml = readWordMLPayload(dt);
+          if (wordml) {
+            const parsed = parseCanonicalFragmentFromWordML(wordml);
+            if (parsed.ok && parsed.fragment.blocks.length > 0) {
+              const ctrlModifier = Boolean(dragEvent.ctrlKey || dragEvent.metaKey);
+              const effect = ctrlModifier ? "copy" : "move";
+              // Pass the captured source range only for move-effect drops
+              // originating from the same editor. `dragSourceRange` was set
+              // on `dragstart` if we're inside a same-editor drag cycle.
+              const sourceRange =
+                effect === "move" && dragSourceRange ? dragSourceRange : undefined;
+              callbacks.onDropFragment({
+                fragment: parsed.fragment,
+                effect,
+                ...(sourceRange ? { sourceRange } : {}),
+              });
+              // Clear immediately — the drop consumed the range; `dragend`
+              // is a no-op safety net.
+              dragSourceRange = null;
+              return true;
+            }
+          }
+        }
+
+        // Tier A drop: plain text (existing path)
         const plain = dt.getData("text/plain");
         if (!plain) {
           callbacks.onBlockedInput?.(
@@ -338,7 +555,10 @@ export function createCommandBridgePlugins(
             altKey: event.altKey,
             shiftKey: event.shiftKey,
           },
-          { inTable: isInTable(view.state) },
+          {
+            inTable: isInTable(view.state),
+            isAtTableTail: isAtLastCellOfTable(view.state),
+          },
         );
 
         switch (resolution.kind) {
@@ -364,6 +584,13 @@ export function createCommandBridgePlugins(
             return true;
           case "navigate-table-cell":
             return goToNextCell(resolution.direction)(view.state, view.dispatch, view);
+          case "table-insert-row-below":
+            // I3 widening tail — Tab at the last cell of the last row inserts
+            // a new row below. Host routes the dispatch through the runtime's
+            // `addRowAfter` ref method so track-changes + collab replay stay
+            // consistent with every other row-insert path.
+            callbacks.onTableInsertRowBelow?.();
+            return true;
           case "history":
             if (resolution.history === "undo") {
               callbacks.onUndo();