@beyondwork/docx-react-component 1.0.42 → 1.0.45

package/src/ui-tailwind/chrome/collab-top-nav-container.tsx

@@ -0,0 +1,281 @@
+import * as React from "react";
+
+import type { CollabSession } from "../../runtime/collab-session.ts";
+import type {
+  CommentAudience,
+} from "../../api/comment-presentation-types.ts";
+import type { WordReviewEditorChromeOptions } from "../../api/public-types.ts";
+import type { TransportStatus } from "../../api/awareness-identity-types.ts";
+import { CollabPresenceStrip } from "./collab-presence-strip.tsx";
+import { CollabRoleChip } from "./collab-role-chip.tsx";
+import { CollabAudienceChip } from "./collab-audience-chip.tsx";
+import { CollabTamperBanner } from "./collab-tamper-banner.tsx";
+import { CollabNegotiationActionBar } from "./collab-negotiation-action-bar.tsx";
+import { CollabSendToSupplierButton } from "./collab-send-to-supplier-button.tsx";
+import {
+  CollabSendToSupplierModal,
+  type CollabSendToSupplierSubmitArgs,
+} from "./collab-send-to-supplier-modal.tsx";
+
+export type CollabSubSurfaceVisibility = Pick<
+  WordReviewEditorChromeOptions,
+  | "showCollabTopNav"
+  | "showCollabPresenceStrip"
+  | "showCollabRoleChip"
+  | "showCollabAudienceChip"
+  | "showCollabTamperBanner"
+  | "showCollabNegotiationActionBar"
+  | "showCollabSendToSupplier"
+>;
+
+export interface CollabTopNavContainerProps {
+  /** Wired collab session. When `undefined` / detached, the container renders nothing. */
+  session: CollabSession | undefined;
+  /** The currently-focused comment id (if any). Host supplies this from its own selection signal. */
+  activeCommentId?: string;
+  /**
+   * Fresh identity metadata about the local user. The session falls
+   * back to `author` if no awareness is wired, which matches the
+   * `CollabPosture` contract. This prop is passed through so tests /
+   * hosts can override the actor id used by the action bar without
+   * also mutating awareness.
+   */
+  actorId: string;
+  /** Current transport status signal (from the host's provider). */
+  transportStatus?: TransportStatus;
+  /** Visibility toggles from the chrome preset options. */
+  visibility?: CollabSubSurfaceVisibility;
+  /**
+   * Minimum send-to-supplier args a host wants to commit to before the
+   * confirmation modal even appears. The modal collects the rest.
+   */
+  sendBaseline?: {
+    originDocumentId: string;
+    originPayloadId: string;
+    originContentHash: string;
+    payloadXml: string;
+  };
+  /**
+   * Optional override for the activeStory filter passed into
+   * `getPresenceSnapshot({ activeStoryFilter })`.
+   */
+  activeStoryFilter?: string;
+  className?: string;
+}
+
+const DEFAULT_VISIBILITY: Required<CollabSubSurfaceVisibility> = {
+  showCollabTopNav: true,
+  showCollabPresenceStrip: true,
+  showCollabRoleChip: true,
+  showCollabAudienceChip: true,
+  showCollabTamperBanner: true,
+  showCollabNegotiationActionBar: true,
+  showCollabSendToSupplier: true,
+};
+
+/**
+ * P9g — chrome-toolbar container. Subscribes to the `CollabSession`
+ * event stream and renders the six P9a–f components from live
+ * snapshots. Pure React, no Yjs / awareness coupling — the session
+ * abstracts those away.
+ *
+ * The container intentionally renders `null` when no session is wired
+ * so the chrome toolbar can mount it unconditionally while the host
+ * decides whether to supply a session.
+ *
+ * Individual sub-surfaces can be opted out via `visibility`; the
+ * defaults mirror the `"collab"` chrome preset so hosts that
+ * instantiate directly get the full top nav.
+ */
+export function CollabTopNavContainer({
+  session,
+  activeCommentId,
+  actorId,
+  transportStatus,
+  visibility,
+  sendBaseline,
+  activeStoryFilter,
+  className,
+}: CollabTopNavContainerProps): React.ReactElement | null {
+  const effective: Required<CollabSubSurfaceVisibility> = {
+    ...DEFAULT_VISIBILITY,
+    ...normalizeVisibility(visibility),
+  };
+
+  const [tick, setTick] = React.useState(0);
+  const [sendModalOpen, setSendModalOpen] = React.useState(false);
+
+  React.useEffect(() => {
+    if (!session) return undefined;
+    const off = session.subscribe((event) => {
+      // Any event from the bridge OR the tamper gate triggers a
+      // re-read. The container is cheap to re-render; the underlying
+      // snapshots are already deep-cloned by the stores.
+      //
+      // We deliberately ignore the event type — the container is
+      // declarative about what it renders, so a single bump is enough.
+      void event;
+      setTick((n) => n + 1);
+    });
+    return off;
+  }, [session]);
+
+  if (!session || !effective.showCollabTopNav) return null;
+
+  const presence = session.getPresenceSnapshot({
+    ...(transportStatus ? { transportStatus } : {}),
+    ...(activeStoryFilter !== undefined ? { activeStoryFilter } : {}),
+  });
+  const posture = session.getCollabPosture({
+    ...(transportStatus ? { transportStatus } : {}),
+  });
+  const integrity = session.getMetadataIntegrity();
+  const presentation = session.getCommentPresentationSnapshot();
+  const negotiation = session.getCommentNegotiationSnapshot();
+
+  const activePresentation = activeCommentId
+    ? presentation.entries.find((e) => e.commentId === activeCommentId)
+    : undefined;
+  const activeNegotiation = activeCommentId
+    ? negotiation.entries.find((e) => e.commentId === activeCommentId)
+    : undefined;
+
+  const internalCount = presentation.entries.filter(
+    (e) => e.audience === "internal",
+  ).length;
+  const shareableCount = presentation.entries.filter(
+    (e) => e.audience !== "internal",
+  ).length;
+
+  const canEditAudience = posture.role !== "observer" && activePresentation !== undefined;
+  const tampered = integrity === "tampered";
+
+  const rootClass = [
+    "tw-collab-top-nav",
+    `tw-collab-top-nav--${posture.role}`,
+    tampered ? "tw-collab-top-nav--tampered" : null,
+    className ?? null,
+  ]
+    .filter((v): v is string => v !== null)
+    .join(" ");
+
+  const handleAudienceCycle = (next: CommentAudience): void => {
+    if (!activeCommentId) return;
+    void session.dispatchCommentPresentation({
+      type: "set-audience",
+      commentId: activeCommentId,
+      audience: next,
+    });
+  };
+
+  const handleNegotiationDispatch = (
+    action: Parameters<CollabSession["dispatchCommentNegotiation"]>[0],
+  ): void => {
+    session.dispatchCommentNegotiation(action, {
+      role: posture.role,
+      now: new Date().toISOString(),
+    });
+  };
+
+  const handleSendSubmit = async (
+    args: CollabSendToSupplierSubmitArgs,
+  ): Promise<void> => {
+    if (!sendBaseline) {
+      setSendModalOpen(false);
+      return;
+    }
+    await session.sendToExternal({
+      payloadXml: sendBaseline.payloadXml,
+      originDocumentId: sendBaseline.originDocumentId,
+      originPayloadId: sendBaseline.originPayloadId,
+      originContentHash: sendBaseline.originContentHash,
+      recipient: args.recipient,
+      sentBy: actorId,
+      archiveRef: args.archiveRef,
+    });
+    setSendModalOpen(false);
+  };
+
+  return (
+    <div
+      className={rootClass}
+      data-testid="collab-top-nav-container"
+      data-tick={tick.toString()}
+      data-role={posture.role}
+      data-integrity={integrity}
+    >
+      {effective.showCollabTamperBanner ? (
+        <CollabTamperBanner
+          integrity={integrity}
+          onAcknowledge={() => session.acknowledgeMetadataTampering()}
+        />
+      ) : null}
+
+      <div className="tw-collab-top-nav__row">
+        {effective.showCollabPresenceStrip ? (
+          <CollabPresenceStrip
+            presence={presence}
+            localRole={posture.role}
+          />
+        ) : null}
+
+        {effective.showCollabRoleChip ? (
+          <CollabRoleChip
+            posture={posture}
+            {...(transportStatus ? { transportStatus } : {})}
+          />
+        ) : null}
+
+        {effective.showCollabAudienceChip ? (
+          <CollabAudienceChip
+            audience={activePresentation?.audience}
+            canEdit={canEditAudience}
+            onCycle={handleAudienceCycle}
+          />
+        ) : null}
+
+        {effective.showCollabNegotiationActionBar ? (
+          <CollabNegotiationActionBar
+            entry={activeNegotiation}
+            actorId={actorId}
+            role={posture.role}
+            onDispatch={handleNegotiationDispatch}
+            disabled={tampered}
+          />
+        ) : null}
+
+        {effective.showCollabSendToSupplier ? (
+          <CollabSendToSupplierButton
+            role={posture.role}
+            integrity={integrity}
+            shareableCount={shareableCount}
+            internalCount={internalCount}
+            onOpenModal={() => setSendModalOpen(true)}
+          />
+        ) : null}
+      </div>
+
+      {effective.showCollabSendToSupplier ? (
+        <CollabSendToSupplierModal
+          open={sendModalOpen}
+          shareableCount={shareableCount}
+          internalCount={internalCount}
+          onClose={() => setSendModalOpen(false)}
+          onSubmit={handleSendSubmit}
+        />
+      ) : null}
+    </div>
+  );
+}
+
+function normalizeVisibility(
+  visibility: CollabSubSurfaceVisibility | undefined,
+): Partial<Required<CollabSubSurfaceVisibility>> {
+  if (!visibility) return {};
+  const out: Partial<Required<CollabSubSurfaceVisibility>> = {};
+  for (const key of Object.keys(DEFAULT_VISIBILITY) as (keyof CollabSubSurfaceVisibility)[]) {
+    const v = visibility[key];
+    if (typeof v === "boolean") out[key] = v;
+  }
+  return out;
+}

package/src/ui-tailwind/chrome-overlay/tw-chrome-overlay.tsx

@@ -17,6 +17,7 @@ import type { OverlayCoordinateSpace } from "./chrome-overlay-projector";
 import type { ScopeRailSegment } from "../../runtime/layout";
 import type {
   EditorRole,
+  EditorStoryTarget,
   ScopeIssueAction,
   TableStructureContextSnapshot,
   WordReviewEditorLayoutFacet,
@@ -25,6 +26,7 @@ import type {
 import { TwScopeRailLayer } from "./tw-scope-rail-layer";
 import { TwScopeCardLayer } from "./tw-scope-card-layer";
 import { TwPageStackOverlayLayer } from "./tw-page-stack-overlay-layer";
+import { TwPageStackChromeLayer, type PmPortalView } from "../page-stack/tw-page-stack-chrome-layer";
 import { TwTableGripLayer } from "../chrome/tw-table-grip-layer";
 
 export interface TwChromeOverlayProps {
@@ -119,6 +121,37 @@ export interface TwChromeOverlayProps {
    * full workspace re-render.
    */
   renderFrameRevision?: number;
+
+  // Page-stack chrome layer (P8.8) --------------------------------------
+  /**
+   * Current active story target — the page-stack chrome layer uses this
+   * to decide which per-page band (if any) should render in active-slot
+   * mode.  When omitted the chrome layer treats `{ kind: "main" }` as
+   * the active story, so no band is promoted.
+   */
+  activeStory?: EditorStoryTarget;
+  /**
+   * Fired when the user clicks a per-page header / footer band to
+   * promote it into the active editing surface.  Task 10 will route PM
+   * into the matching band via React portals; today the handler is a
+   * pass-through to `runtime.openStory`.
+   */
+  onOpenStory?: (target: EditorStoryTarget) => void;
+  /**
+   * P8.11 — PM surface DOM element (`.ProseMirror` div).  The chrome
+   * layer's portal mechanism reparents this element across the per-page
+   * band portal slots as `activeStory` changes.  When omitted the
+   * reparent step is skipped; the chrome layer still renders read-only
+   * bands but the active-slot promotion is inert.
+   */
+  pmSurfaceElement?: HTMLElement | null;
+  /**
+   * P8.11 — optional PM view handle with `hasFocus()` + `focus()`.  When
+   * supplied, the chrome layer re-focuses PM after a portal swap so
+   * mid-edit band clicks don't silently drop the caret.  Omitting the
+   * handle leaves focus-restore as a no-op — DOM reparent still runs.
+   */
+  pmView?: PmPortalView | null;
 }
 
 /**
@@ -151,6 +184,10 @@ export const TwChromeOverlay: React.FC<TwChromeOverlayProps> = ({
   onSetRowHeight,
   pageStackScrollRoot,
   renderFrameRevision,
+  activeStory,
+  onOpenStory,
+  pmSurfaceElement,
+  pmView,
 }) => {
   return (
     <div
@@ -165,6 +202,17 @@ export const TwChromeOverlay: React.FC<TwChromeOverlayProps> = ({
           renderFrameRevision={renderFrameRevision ?? 0}
         />
       ) : null}
+      {pageStackScrollRoot !== undefined ? (
+        <TwPageStackChromeLayer
+          facet={facet}
+          scrollRoot={pageStackScrollRoot}
+          renderFrameRevision={renderFrameRevision ?? 0}
+          activeStory={activeStory ?? { kind: "main" }}
+          onOpenStory={onOpenStory}
+          pmSurfaceElement={pmSurfaceElement}
+          pmView={pmView}
+        />
+      ) : null}
       <TwScopeRailLayer
         facet={facet}
         space={space}

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;
       },
     },
   });