@beyondwork/docx-react-component 1.0.56 → 1.0.57

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();

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

@@ -5,6 +5,17 @@ import {
   tableCellNodeSpec,
   tableHeaderCellNodeSpec,
 } from "../../runtime/table-schema.ts";
+import {
+  isSupportedShapeGeometry,
+  renderShapeSvg,
+  type ShapeFill,
+  type ShapeLine,
+} from "./shape-renderer.ts";
+import {
+  EMU_PER_PX,
+  ROTATION_UNITS_PER_DEGREE,
+  SRCRECT_UNITS_PER_PERCENT,
+} from "../../runtime/units.ts";
 
 const HEX_COLOR_RE = /^[0-9A-Fa-f]{3,8}$/;
 const SAFE_FONT_RE = /^[A-Za-z0-9 ,\-'"]+$/;
@@ -442,6 +453,18 @@ export const editorSchema = new Schema({
         src: { default: null },
         widthEmu: { default: null },
         heightEmu: { default: null },
+        // Lane 6d N11 — picture effects from `SurfacePictureEffects`.
+        // Defaults are no-effect (null/false) so legacy callers stay
+        // visually identical.  OOXML units: rotation = 60000ths of a
+        // degree; srcRect = 1/1000 of a percent.
+        rotation: { default: null },
+        flipH: { default: false },
+        flipV: { default: false },
+        srcRect: { default: null },
+        // Lane 6d N9 — float-wrap fields surfaced from `SurfaceDrawingAnchor`.
+        wrapMode: { default: null },
+        distMargins: { default: null },
+        positionH: { default: null },
       },
       toDOM(node) {
         const isMissing = node.attrs.state === "missing";
@@ -450,22 +473,72 @@ export const editorSchema = new Schema({
         const widthEmu = node.attrs.widthEmu as number | null;
         const heightEmu = node.attrs.heightEmu as number | null;
         if (!isMissing && src) {
-          const widthPx = widthEmu ? Math.max(24, Math.round(widthEmu / 9525)) : undefined;
-          const heightPx = heightEmu ? Math.max(24, Math.round(heightEmu / 9525)) : undefined;
+          const widthPx = widthEmu ? Math.max(24, Math.round(widthEmu / EMU_PER_PX)) : undefined;
+          const heightPx = heightEmu ? Math.max(24, Math.round(heightEmu / EMU_PER_PX)) : undefined;
+          // N11 picture effects → CSS transform + clip-path.
+          const rotation = node.attrs.rotation as number | null;
+          const flipH = Boolean(node.attrs.flipH);
+          const flipV = Boolean(node.attrs.flipV);
+          const srcRect = node.attrs.srcRect as
+            | { top: number; bottom: number; left: number; right: number }
+            | null;
+          const transformParts: string[] = [];
+          if (rotation && rotation !== 0) {
+            transformParts.push(`rotate(${(rotation / ROTATION_UNITS_PER_DEGREE).toFixed(3)}deg)`);
+          }
+          if (flipH) transformParts.push("scaleX(-1)");
+          if (flipV) transformParts.push("scaleY(-1)");
+          // OOXML srcRect uses 1/1000 of a percent (e.g. 5000 = 5%).
+          // CSS clip-path inset() uses literal percent.
+          const clipParts: string[] = [];
+          if (srcRect) {
+            clipParts.push(
+              `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)}%)`,
+            );
+          }
+          // 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;
+          const distMargins = node.attrs.distMargins as
+            | { top?: number; bottom?: number; left?: number; right?: number }
+            | null;
+          const wrapperStyleParts: string[] = [];
+          if (isFloating && wrapMode === "square") {
+            const floatSide = positionH?.align === "right" ? "right" : "left";
+            wrapperStyleParts.push(
+              `float:${floatSide}`,
+              "shape-outside:margin-box",
+            );
+          } else if (isFloating && wrapMode === "topAndBottom") {
+            wrapperStyleParts.push("clear:both", "display:block");
+          }
+          // distMargins from EMU → px on the wrapper.
+          if (isFloating && distMargins) {
+            const m = (v?: number) => (v ? Math.round(v / EMU_PER_PX) : 0);
+            wrapperStyleParts.push(
+              `margin:${m(distMargins.top)}px ${m(distMargins.right)}px ${m(distMargins.bottom)}px ${m(distMargins.left)}px`,
+            );
+          }
           const style = [
             "display:inline-block",
             "vertical-align:middle",
-            "margin:0 4px",
+            wrapperStyleParts.length === 0 ? "margin:0 4px" : "",
             widthPx ? `width:${widthPx}px` : "",
             heightPx ? `height:${heightPx}px` : "",
+            transformParts.length > 0 ? `transform:${transformParts.join(" ")}` : "",
+            clipParts.length > 0 ? `clip-path:${clipParts[0]}` : "",
           ].filter(Boolean).join(";");
+          const wrapperStyle = wrapperStyleParts.join(";");
+          const wrapperAttrs: Record<string, string> = {
+            class: "inline-flex items-center rounded",
+            "data-node-type": "image",
+            title: (node.attrs.detail as string) ?? (node.attrs.altText as string) ?? "Image",
+          };
+          if (wrapMode) wrapperAttrs["data-wrap-mode"] = wrapMode;
+          if (wrapperStyle) wrapperAttrs.style = wrapperStyle;
           return [
             "span",
-            {
-              class: "inline-flex items-center rounded",
-              "data-node-type": "image",
-              title: (node.attrs.detail as string) ?? (node.attrs.altText as string) ?? "Image",
-            },
+            wrapperAttrs,
             [
               "img",
               {
@@ -774,19 +847,123 @@ export const editorSchema = new Schema({
         text: { default: null },
         geometry: { default: null },
         detail: { default: null },
+        // V2c.5 additions — populated when the segment originates from a
+        // canonical `DrawingFrameNode` with `content.type === "shape"`.
+        // Legacy debug-mode opaque-preview consumers leave these at their
+        // defaults so the original toDOM output is unchanged.
+        label: { default: null },
+        fill: { default: null },
+        line: { default: null },
+        isTextBox: { default: false },
+        txbxText: { default: null },
+        wrapMode: { default: "none" },
+        display: { default: "inline" },
+        widthEmu: { default: null },
+        heightEmu: { default: null },
       },
       toDOM(node) {
+        // V2c.5: when the rich attrs are present (DrawingFrame source),
+        // render either an SVG (N10 supported geometries) or a chip
+        // fallback with shape-aware data attributes.  Otherwise fall back
+        // to the legacy opaque-preview chip so existing harness debug
+        // previews stay visually identical.
+        const isV2c5 = node.attrs.label !== null || node.attrs.isTextBox === true;
+        if (isV2c5) {
+          const geometry = node.attrs.geometry as string | null;
+          const fill = node.attrs.fill as
+            | ShapeFill
+            | {
+                kind: "gradient";
+                stops: Array<{ pos: number; color: string; colorType: "srgbClr" | "schemeClr" }>;
+                direction:
+                  | { kind: "linear"; angle: number; scaled?: boolean }
+                  | { kind: "path"; path: "circle" | "rect" | "shape" };
+                rotWithShape?: boolean;
+              }
+            | {
+                kind: "pattern";
+                preset: string;
+                fg?: { color: string; colorType: "srgbClr" | "schemeClr" };
+                bg?: { color: string; colorType: "srgbClr" | "schemeClr" };
+              }
+            | null;
+          const widthEmu = node.attrs.widthEmu as number | null;
+          const heightEmu = node.attrs.heightEmu as number | null;
+          const widthPx = widthEmu ? Math.max(8, Math.round(widthEmu / EMU_PER_PX)) : null;
+          const heightPx = heightEmu ? Math.max(8, Math.round(heightEmu / EMU_PER_PX)) : null;
+          const svgFill =
+            fill === undefined || fill === null
+              ? undefined
+              : fill.kind === "solid" || fill.kind === "none"
+                ? fill
+                : undefined;
+          // N10 — try SVG render path for supported geometries with extent.
+          if (
+            geometry &&
+            isSupportedShapeGeometry(geometry) &&
+            widthPx &&
+            heightPx &&
+            svgFill !== undefined
+          ) {
+            const svgSpec = renderShapeSvg(
+              {
+                geometry,
+                fill: svgFill,
+                line: node.attrs.line as ShapeLine | undefined,
+              },
+              widthPx,
+              heightPx,
+            );
+            if (svgSpec) {
+              return [
+                "span",
+                {
+                  class: "inline-block align-middle mx-0.5",
+                  style: `display:inline-block;width:${widthPx}px;height:${heightPx}px;vertical-align:middle`,
+                  "data-node-type": "shape",
+                  "data-shape-geometry": geometry,
+                  "data-shape-wrap": (node.attrs.wrapMode as string) ?? "none",
+                  contenteditable: "false",
+                  title: (node.attrs.detail as string) || (node.attrs.label as string) || "Shape",
+                },
+                svgSpec as unknown as readonly [string, Record<string, string>],
+              ];
+            }
+          }
+          // Chip fallback for unsupported geometry / missing extent.
+          const isTextBox = Boolean(node.attrs.isTextBox);
+          const txbxText = node.attrs.txbxText as string | null;
+          const display =
+            isTextBox && txbxText
+              ? `\u25A1 ${txbxText}`
+              : isTextBox
+                ? "\u25A1 Text box"
+                : "\u25C7 Shape";
+          return [
+            "span",
+            {
+              class:
+                "inline-flex items-center gap-1 mx-0.5 px-1.5 py-0.5 rounded text-xs border-none text-secondary bg-surface",
+              "data-node-type": "shape",
+              "data-shape-geometry": (node.attrs.geometry as string) ?? "",
+              "data-shape-wrap": (node.attrs.wrapMode as string) ?? "none",
+              contenteditable: "false",
+              title: (node.attrs.detail as string) || (node.attrs.label as string) || "Shape",
+            },
+            display,
+          ];
+        }
         const text = node.attrs.text as string | null;
-        const label = text ? `Shape: ${text}` : "Shape";
+        const legacyLabel = text ? `Shape: ${text}` : "Shape";
         return [
           "span",
           {
             class: "inline-flex items-center gap-1 mx-0.5 rounded border border-success/25 bg-success-soft px-1.5 py-0.5 text-xs text-success",
             "data-node-type": "shape_atom",
             contenteditable: "false",
-            title: (node.attrs.detail as string) ?? label,
+            title: (node.attrs.detail as string) ?? legacyLabel,
           },
-          "\u25A1 " + label,
+          "\u25A1 " + legacyLabel,
         ];
       },
     },

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

@@ -453,8 +453,17 @@ function buildInlineContent(
           display: segment.display ?? "inline",
           detail: segment.detail ?? null,
           src: preview?.src ?? null,
-          widthEmu: preview?.widthEmu ?? null,
-          heightEmu: preview?.heightEmu ?? null,
+          widthEmu: preview?.widthEmu ?? preview?.widthEmu ?? segment.anchor?.extent.widthEmu ?? null,
+          heightEmu: preview?.heightEmu ?? segment.anchor?.extent.heightEmu ?? null,
+          // Lane 6d N11 — picture effects.
+          rotation: segment.pictureEffects?.rotation ?? null,
+          flipH: segment.pictureEffects?.flipH ?? false,
+          flipV: segment.pictureEffects?.flipV ?? false,
+          srcRect: segment.pictureEffects?.srcRect ?? null,
+          // Lane 6d N9 — float-wrap.
+          wrapMode: segment.anchor?.wrapMode ?? null,
+          distMargins: segment.anchor?.distMargins ?? null,
+          positionH: segment.anchor?.positionH ?? null,
         }),
       ];
       }
@@ -462,6 +471,23 @@ function buildInlineContent(
     case "opaque_inline":
       return [buildOpaqueInlineOrComplexAtom(segment, mediaPreviews, showUnsupportedObjectPreviews)];
 
+    case "shape":
+      return [
+        editorSchema.nodes.shape_atom.create({
+          label: segment.label,
+          detail: segment.detail,
+          geometry: segment.geometry ?? null,
+          fill: segment.fill ?? null,
+          line: segment.line ?? null,
+          isTextBox: segment.isTextBox ?? false,
+          txbxText: segment.txbxText ?? null,
+          wrapMode: segment.anchor?.wrapMode ?? "none",
+          display: segment.anchor?.display ?? "inline",
+          widthEmu: segment.anchor?.extent.widthEmu ?? null,
+          heightEmu: segment.anchor?.extent.heightEmu ?? null,
+        }),
+      ];
+
     case "note_ref": {
       const text = editorSchema.text(
         segment.label,