@beyondwork/docx-react-component 1.0.42 → 1.0.43

package/src/ui-tailwind/editor-surface/paste-plain-text.ts

@@ -0,0 +1,72 @@
+/**
+ * Extract a sequence of callback operations from a plain-text clipboard
+ * payload. Used by the `pm-command-bridge` handlePaste / handleDrop
+ * hooks to turn a pasted string into calls to `onInsertText` /
+ * `onSplitParagraph` / `onInsertHardBreak` — the same runtime-owned
+ * callbacks typing already uses.
+ *
+ * Separator convention:
+ *   - LF (`\n`), CRLF (`\r\n`), CR (`\r`) → paragraph split
+ *     ({ kind: "split" }).
+ *   - U+000B (vertical tab) → hard break ({ kind: "hard_break" }).
+ *     Word's plain-text clipboard represents shift-enter line breaks
+ *     as vertical-tab; preserving them keeps paragraph-internal line
+ *     structure.
+ *   - Tab (U+0009) stays inside the current text segment. The
+ *     runtime's `onInsertText` decides whether it is rendered as a
+ *     tab-stop or swallowed.
+ *
+ * Consecutive separators produce multiple splits in sequence (empty
+ * paragraphs). Leading / trailing separators are emitted verbatim so
+ * the caller can decide whether to coalesce into a trailing blank.
+ *
+ * Pure function: no DOM, no React, no ProseMirror state.
+ *
+ * Source plan: `docs/plans/editor-paste-drop.md` §Phase 1.
+ */
+
+export type PastePlainSegment =
+  | { kind: "text"; value: string }
+  | { kind: "split" }
+  | { kind: "hard_break" };
+
+export function extractPlainTextSegments(input: string): PastePlainSegment[] {
+  if (input.length === 0) return [];
+
+  const segments: PastePlainSegment[] = [];
+  let buffer = "";
+
+  const flush = (): void => {
+    if (buffer.length > 0) {
+      segments.push({ kind: "text", value: buffer });
+      buffer = "";
+    }
+  };
+
+  for (let i = 0; i < input.length; i += 1) {
+    const ch = input[i];
+
+    if (ch === "\r") {
+      flush();
+      segments.push({ kind: "split" });
+      // Collapse CRLF into one split — advance past the LF.
+      if (input[i + 1] === "\n") i += 1;
+      continue;
+    }
+    if (ch === "\n") {
+      flush();
+      segments.push({ kind: "split" });
+      continue;
+    }
+    if (ch === "\u000B") {
+      flush();
+      segments.push({ kind: "hard_break" });
+      continue;
+    }
+
+    buffer += ch;
+  }
+
+  flush();
+  return segments;
+}

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

@@ -7,8 +7,62 @@ import {
   createSelectionSnapshot,
 } from "../../ui/headless/selection-helpers";
 import { resolveSurfaceShortcut } from "../../ui/runtime-shortcut-dispatch";
+import {
+  extractPlainTextSegments,
+  type PastePlainSegment,
+} from "./paste-plain-text";
 import type { PositionMap } from "./pm-position-map";
 
+/**
+ * Callback subset used by paste / drop dispatch. Exported so tests can
+ * record dispatch order without constructing the full
+ * `CommandBridgeCallbacks` surface.
+ */
+export interface PasteDispatchCallbacks {
+  onInsertText: (text: string) => void;
+  onSplitParagraph: () => void;
+  onInsertHardBreak: () => void;
+}
+
+/**
+ * Dispatch an ordered list of plain-text segments to the runtime-owned
+ * callbacks. Empty text segments are skipped. Pure with respect to the
+ * callbacks — no global state, no PM mutation.
+ */
+export function applyPasteSegmentsToCallbacks(
+  segments: readonly PastePlainSegment[],
+  callbacks: PasteDispatchCallbacks,
+): void {
+  for (const seg of segments) {
+    switch (seg.kind) {
+      case "text":
+        if (seg.value.length > 0) callbacks.onInsertText(seg.value);
+        break;
+      case "split":
+        callbacks.onSplitParagraph();
+        break;
+      case "hard_break":
+        callbacks.onInsertHardBreak();
+        break;
+    }
+  }
+}
+
+/**
+ * Sum the character length across every `text` segment. Used by the
+ * paste / drop handlers to populate the `charCount` field of the
+ * public `paste_applied` event.
+ */
+export function totalTextCharCount(
+  segments: readonly PastePlainSegment[],
+): number {
+  let total = 0;
+  for (const seg of segments) {
+    if (seg.kind === "text") total += seg.value.length;
+  }
+  return total;
+}
+
 export interface SelectionSyncCallbacks {
   onSelectionChange: (selection: SelectionSnapshot) => void;
   getPositionMap: () => PositionMap | null;
@@ -28,6 +82,17 @@ export interface CommandBridgeCallbacks extends SelectionSyncCallbacks {
   onUndo: () => void;
   onRedo: () => void;
   onBlockedInput?: (command: "paste" | "drop", message: string) => void;
+  /**
+   * Optional. Fires after a plain-text paste or drop successfully
+   * dispatches through the runtime callbacks. `source` distinguishes
+   * paste from drop. Rich paste (HTML, Office clipboard) still fires
+   * `onBlockedInput`, not this callback.
+   */
+  onPasteApplied?: (meta: {
+    segmentCount: number;
+    charCount: number;
+    source: "paste" | "drop";
+  }) => void;
   /**
    * Optional. Fires on `compositionstart` (true) and `compositionend`
    * (false). The surface forwards this to the predicted lane's session
@@ -130,16 +195,61 @@ export function createCommandBridgePlugins(
         return true; // Block PM from processing
       },
 
-      // Block paste (rich paste is not safe, plain paste via text.insert is TODO)
-      handlePaste() {
-        callbacks.onBlockedInput?.("paste", "Paste is not supported in the mounted editor yet.");
-        return true; // Block
+      // Plain-text paste: extract text/plain from the clipboard and
+      // dispatch through the runtime-owned callbacks that typing uses.
+      // Rich paste (HTML, Office clipboard) stays blocked — hosts that
+      // listen for onBlockedInput still get notified when a non-plain-
+      // text payload arrives. See docs/plans/editor-paste-drop.md.
+      handlePaste(_view, event) {
+        if (isComposing) return true;
+        const clipboard = event.clipboardData;
+        if (!clipboard) {
+          callbacks.onBlockedInput?.("paste", "Clipboard data was not available.");
+          return true;
+        }
+        const plain = clipboard.getData("text/plain");
+        if (!plain) {
+          callbacks.onBlockedInput?.(
+            "paste",
+            "Non-plain-text paste is not supported yet.",
+          );
+          return true;
+        }
+        const segments = extractPlainTextSegments(plain);
+        applyPasteSegmentsToCallbacks(segments, callbacks);
+        callbacks.onPasteApplied?.({
+          segmentCount: segments.length,
+          charCount: totalTextCharCount(segments),
+          source: "paste",
+        });
+        return true;
       },
 
-      // Block drop
-      handleDrop() {
-        callbacks.onBlockedInput?.("drop", "Drag and drop is not supported in the mounted editor.");
-        return true; // Block
+      // Plain-text drop: symmetric path — extract text/plain from the
+      // DataTransfer and dispatch through the same callbacks paste uses.
+      handleDrop(_view, event) {
+        if (isComposing) return true;
+        const dt = (event as DragEvent).dataTransfer;
+        if (!dt) {
+          callbacks.onBlockedInput?.("drop", "Drop data was not available.");
+          return true;
+        }
+        const plain = dt.getData("text/plain");
+        if (!plain) {
+          callbacks.onBlockedInput?.(
+            "drop",
+            "Non-plain-text drop is not supported yet.",
+          );
+          return true;
+        }
+        const segments = extractPlainTextSegments(plain);
+        applyPasteSegmentsToCallbacks(segments, callbacks);
+        callbacks.onPasteApplied?.({
+          segmentCount: segments.length,
+          charCount: totalTextCharCount(segments),
+          source: "drop",
+        });
+        return true;
       },
     },
   });

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

@@ -634,16 +634,51 @@ export const editorSchema = new Schema({
       selectable: false,
       attrs: {
         previewMediaId: { default: null },
+        previewSrc: { default: null },
         detail: { default: null },
       },
       toDOM(node) {
+        const previewSrc = node.attrs.previewSrc as string | null;
+        const detail = (node.attrs.detail as string) ?? "Chart";
+        if (previewSrc) {
+          // Bitmap-backed: render the fallback image Word cached in mc:Fallback.
+          // The corner chip preserves the typed identity so agents and humans
+          // still see "this is a chart" at a glance.
+          return [
+            "span",
+            {
+              class: "relative inline-block align-baseline mx-0.5 max-w-full",
+              "data-node-type": "chart_atom",
+              "data-preview-media-id": (node.attrs.previewMediaId as string) ?? "",
+              contenteditable: "false",
+              title: detail,
+            },
+            [
+              "img",
+              {
+                src: previewSrc,
+                alt: detail,
+                class: "block max-w-full h-auto",
+                draggable: "false",
+              },
+            ],
+            [
+              "span",
+              {
+                class: "absolute top-1 right-1 inline-flex items-center gap-0.5 rounded border border-blue-200 bg-blue-50/90 px-1 py-0.5 text-[10px] text-blue-700",
+                "aria-hidden": "true",
+              },
+              "\uD83D\uDCC8 Chart",
+            ],
+          ];
+        }
         return [
           "span",
           {
             class: "inline-flex items-center gap-1 mx-0.5 px-1.5 py-0.5 rounded text-xs text-blue-700 bg-blue-50 border border-blue-200",
             "data-node-type": "chart_atom",
             contenteditable: "false",
-            title: (node.attrs.detail as string) ?? "Chart",
+            title: detail,
           },
           "\uD83D\uDCC8 Chart",
         ];
@@ -657,16 +692,48 @@ export const editorSchema = new Schema({
       selectable: false,
       attrs: {
         previewMediaId: { default: null },
+        previewSrc: { default: null },
         detail: { default: null },
       },
       toDOM(node) {
+        const previewSrc = node.attrs.previewSrc as string | null;
+        const detail = (node.attrs.detail as string) ?? "SmartArt";
+        if (previewSrc) {
+          return [
+            "span",
+            {
+              class: "relative inline-block align-baseline mx-0.5 max-w-full",
+              "data-node-type": "smartart_atom",
+              "data-preview-media-id": (node.attrs.previewMediaId as string) ?? "",
+              contenteditable: "false",
+              title: detail,
+            },
+            [
+              "img",
+              {
+                src: previewSrc,
+                alt: detail,
+                class: "block max-w-full h-auto",
+                draggable: "false",
+              },
+            ],
+            [
+              "span",
+              {
+                class: "absolute top-1 right-1 inline-flex items-center gap-0.5 rounded border border-purple-200 bg-purple-50/90 px-1 py-0.5 text-[10px] text-purple-700",
+                "aria-hidden": "true",
+              },
+              "\uD83D\uDDFA SmartArt",
+            ],
+          ];
+        }
         return [
           "span",
           {
             class: "inline-flex items-center gap-1 mx-0.5 px-1.5 py-0.5 rounded text-xs text-purple-700 bg-purple-50 border border-purple-200",
             "data-node-type": "smartart_atom",
             contenteditable: "false",
-            title: (node.attrs.detail as string) ?? "SmartArt",
+            title: detail,
           },
           "\uD83D\uDDFA SmartArt",
         ];
@@ -707,17 +774,50 @@ export const editorSchema = new Schema({
       attrs: {
         text: { default: "" },
         geometry: { default: null },
+        previewMediaId: { default: null },
+        previewSrc: { default: null },
         detail: { default: null },
       },
       toDOM(node) {
         const text = node.attrs.text as string;
+        const previewSrc = node.attrs.previewSrc as string | null;
+        const detail = (node.attrs.detail as string) ?? (text ? `WordArt: ${text}` : "WordArt");
+        if (previewSrc) {
+          return [
+            "span",
+            {
+              class: "relative inline-block align-baseline mx-0.5 max-w-full",
+              "data-node-type": "wordart_atom",
+              "data-preview-media-id": (node.attrs.previewMediaId as string) ?? "",
+              contenteditable: "false",
+              title: detail,
+            },
+            [
+              "img",
+              {
+                src: previewSrc,
+                alt: detail,
+                class: "block max-w-full h-auto",
+                draggable: "false",
+              },
+            ],
+            [
+              "span",
+              {
+                class: "absolute top-1 right-1 inline-flex items-center gap-0.5 rounded border border-orange-200 bg-orange-50/90 px-1 py-0.5 text-[10px] text-orange-700",
+                "aria-hidden": "true",
+              },
+              "\u2728 WordArt",
+            ],
+          ];
+        }
         return [
           "span",
           {
             class: "inline-flex items-center gap-1 mx-0.5 px-1.5 py-0.5 rounded text-xs text-orange-700 bg-orange-50 border border-orange-200 font-medium italic",
             "data-node-type": "wordart_atom",
             contenteditable: "false",
-            title: (node.attrs.detail as string) ?? `WordArt: ${text}`,
+            title: detail,
           },
           "\u2728 " + (text || "WordArt"),
         ];
@@ -732,18 +832,51 @@ export const editorSchema = new Schema({
       attrs: {
         text: { default: null },
         shapeType: { default: null },
+        previewMediaId: { default: null },
+        previewSrc: { default: null },
         detail: { default: null },
       },
       toDOM(node) {
         const text = node.attrs.text as string | null;
         const label = text ? `VML: ${text}` : "VML shape";
+        const previewSrc = node.attrs.previewSrc as string | null;
+        const detail = (node.attrs.detail as string) ?? label;
+        if (previewSrc) {
+          return [
+            "span",
+            {
+              class: "relative inline-block align-baseline mx-0.5 max-w-full",
+              "data-node-type": "vml_atom",
+              "data-preview-media-id": (node.attrs.previewMediaId as string) ?? "",
+              contenteditable: "false",
+              title: detail,
+            },
+            [
+              "img",
+              {
+                src: previewSrc,
+                alt: detail,
+                class: "block max-w-full h-auto",
+                draggable: "false",
+              },
+            ],
+            [
+              "span",
+              {
+                class: "absolute top-1 right-1 inline-flex items-center gap-0.5 rounded border border-gray-300 bg-gray-100/90 px-1 py-0.5 text-[10px] text-gray-600",
+                "aria-hidden": "true",
+              },
+              "\u25A6 VML",
+            ],
+          ];
+        }
         return [
           "span",
           {
             class: "inline-flex items-center gap-1 mx-0.5 px-1.5 py-0.5 rounded text-xs text-gray-600 bg-gray-100 border border-gray-300",
             "data-node-type": "vml_atom",
             contenteditable: "false",
-            title: (node.attrs.detail as string) ?? label,
+            title: detail,
           },
           "\u25A6 " + label,
         ];
@@ -759,10 +892,25 @@ export const editorSchema = new Schema({
         warningId: { default: "" },
         label: { default: "Locked" },
         detail: { default: "" },
+        presentation: { default: "callout" },
       },
       toDOM(node) {
         const fragmentId = node.attrs.fragmentId as string;
         const isPreview = fragmentId.startsWith("preview:");
+        const presentation = node.attrs.presentation as string;
+        if (presentation === "quiet-marker") {
+          return [
+            "div",
+            {
+              class: "block h-0 w-0 overflow-hidden",
+              contenteditable: "false",
+              "data-node-type": "opaque_block",
+              "data-block-presentation": "quiet-marker",
+              title: node.attrs.detail as string,
+              "aria-label": node.attrs.label as string,
+            },
+          ];
+        }
         return [
           "div",
           {

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

@@ -268,7 +268,7 @@ function buildPMBlocks(
     } else if (block.kind === "sdt_block") {
       nodes.push(buildSdtBlock(block, mediaPreviews, showUnsupportedObjectPreviews));
     } else {
-      nodes.push(buildOpaqueBlock(block));
+      nodes.push(buildOpaqueBlock(block, showUnsupportedObjectPreviews));
     }
   }
 
@@ -366,7 +366,13 @@ function buildParagraph(
       indentRight: paragraphLayout.indentation?.right ?? null,
       indentFirstLine: paragraphLayout.indentation?.firstLine ?? null,
       indentHanging: paragraphLayout.indentation?.hanging ?? null,
-      numberingMarkerWidth: paragraphLayout.markerLane?.width ?? null,
+      numberingMarkerWidth:
+        paragraphLayout.markerLane?.width ??
+        paragraphLayout.indentation?.hanging ??
+        (paragraphLayout.indentation?.firstLine !== undefined &&
+        paragraphLayout.indentation.firstLine < 0
+          ? Math.abs(paragraphLayout.indentation.firstLine)
+          : null),
       numberingMarkerJustification: paragraphLayout.markerJustification ?? null,
       numberingMarkerRunProperties: block.resolvedNumbering?.markerRunProperties ?? null,
       shadingFill: block.shading?.fill ?? cascade?.shading?.fill ?? null,
@@ -453,7 +459,7 @@ function buildInlineContent(
       }
 
     case "opaque_inline":
-      return [buildOpaqueInlineOrComplexAtom(segment, showUnsupportedObjectPreviews)];
+      return [buildOpaqueInlineOrComplexAtom(segment, mediaPreviews, showUnsupportedObjectPreviews)];
 
     case "note_ref": {
       const text = editorSchema.text(
@@ -602,6 +608,7 @@ const UNSUPPORTED_COMPLEX_PREVIEW_LABELS = new Set<string>([
  */
 function buildOpaqueInlineOrComplexAtom(
   segment: Extract<import("../../api/public-types").SurfaceInlineSegment, { kind: "opaque_inline" }>,
+  mediaPreviews: Record<string, MediaPreviewDescriptor>,
   showUnsupportedObjectPreviews: boolean,
 ): PMNode {
   const label = segment.label;
@@ -618,11 +625,30 @@ function buildOpaqueInlineOrComplexAtom(
     });
   }
 
-  if (showUnsupportedObjectPreviews && label === "Embedded chart") {
-    return editorSchema.nodes.chart_atom.create({ detail });
+  // Bitmap-backed complex objects always upgrade to the typed atom so the
+  // reviewer sees Word's own cached rendering regardless of the debug-preview
+  // flag.  The flag still gates the badge-only path for shape/wordart/vml
+  // families (below) which are decoration-weight.  Chart and SmartArt are
+  // *always* rendered as typed atoms regardless of flag — a silent quiet
+  // marker over a chart leaves the reviewer with no signal that data is
+  // missing, which is worse than the small cost of an always-visible chip.
+  const previewSrc = segment.previewMediaId
+    ? mediaPreviews[segment.previewMediaId]?.src ?? null
+    : null;
+
+  if (label === "Embedded chart") {
+    return editorSchema.nodes.chart_atom.create({
+      previewMediaId: segment.previewMediaId ?? null,
+      previewSrc,
+      detail,
+    });
   }
-  if (showUnsupportedObjectPreviews && label === "SmartArt diagram") {
-    return editorSchema.nodes.smartart_atom.create({ detail });
+  if (label === "SmartArt diagram") {
+    return editorSchema.nodes.smartart_atom.create({
+      previewMediaId: segment.previewMediaId ?? null,
+      previewSrc,
+      detail,
+    });
   }
   if (showUnsupportedObjectPreviews && (label === "Drawing shape" || label === "Text box")) {
     const textMatch = /(?:Text content|Content): "([^"]+)"/.exec(detail);
@@ -672,12 +698,14 @@ function buildOpaqueInlineOrComplexAtom(
 
 function buildOpaqueBlock(
   block: Extract<SurfaceBlockSnapshot, { kind: "opaque_block" }>,
+  showUnsupportedObjectPreviews: boolean,
 ): PMNode {
   return editorSchema.nodes.opaque_block.create({
     fragmentId: block.fragmentId,
     warningId: block.warningId,
     label: block.label,
     detail: block.detail,
+    presentation: showUnsupportedObjectPreviews ? "callout" : "quiet-marker",
   });
 }