@beyondwork/docx-react-component 1.0.29 → 1.0.31

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

@@ -0,0 +1,189 @@
+import { NodeSelection, Plugin, PluginKey } from "prosemirror-state";
+import { columnResizing, goToNextCell, isInTable, tableEditing } from "prosemirror-tables";
+
+import type { SelectionSnapshot } from "../../api/public-types";
+import {
+  createNodeSelectionSnapshot,
+  createSelectionSnapshot,
+} from "../../ui/headless/selection-helpers";
+import { resolveSurfaceShortcut } from "../../ui/runtime-shortcut-dispatch";
+import type { PositionMap } from "./pm-position-map";
+
+export interface CommandBridgeCallbacks {
+  onInsertText: (text: string) => void;
+  onDeleteBackward: () => void;
+  onDeleteForward: () => void;
+  onSplitParagraph: () => void;
+  onInsertHardBreak: () => void;
+  onInsertTab: () => void;
+  onOutdentTab?: () => void;
+  onUndo: () => void;
+  onRedo: () => void;
+  onBlockedInput?: (command: "paste" | "drop", message: string) => void;
+  onSelectionChange: (selection: SelectionSnapshot) => void;
+  getPositionMap: () => PositionMap | null;
+  isSelectionSyncSuppressed?: () => boolean;
+}
+
+const bridgeKey = new PluginKey("command-bridge");
+
+/**
+ * Creates ProseMirror plugins that intercept user input and dispatch
+ * runtime commands instead of letting PM mutate its own state.
+ *
+ * All doc-changing transactions are blocked. Only the explicit input
+ * hooks below are allowed to trigger runtime commands.
+ */
+export function createCommandBridgePlugins(
+  callbacks: CommandBridgeCallbacks,
+): Plugin[] {
+  let isComposing = false;
+
+  // Transaction filter: block ALL doc-changing transactions.
+  // The runtime is the sole authority for document mutations.
+  const filterPlugin = new Plugin({
+    key: bridgeKey,
+    filterTransaction(tr) {
+      // Allow selection-only and metadata-only transactions
+      if (!tr.docChanged) return true;
+      // Block doc changes — runtime handles mutations via callbacks
+      return false;
+    },
+  });
+
+  // Selection sync: when PM selection changes, notify the runtime.
+  const selectionPlugin = new Plugin({
+    view() {
+      return {
+        update(view, prevState) {
+          if (callbacks.isSelectionSyncSuppressed?.()) {
+            return;
+          }
+          if (isComposing) {
+            return;
+          }
+          if (!view.state.selection.eq(prevState.selection)) {
+            const posMap = callbacks.getPositionMap();
+            if (!posMap) return;
+
+            if (view.state.selection instanceof NodeSelection) {
+              callbacks.onSelectionChange(
+                createNodeSelectionSnapshot(posMap.pmToRuntime(view.state.selection.from), 1),
+              );
+              return;
+            }
+
+            const { anchor, head } = view.state.selection;
+            const runtimeAnchor = posMap.pmToRuntime(anchor);
+            const runtimeHead = posMap.pmToRuntime(head);
+            callbacks.onSelectionChange(
+              createSelectionSnapshot(runtimeAnchor, runtimeHead),
+            );
+          }
+        },
+      };
+    },
+  });
+
+  // Text input hook: intercept typed characters.
+  const inputPlugin = new Plugin({
+    props: {
+      handleDOMEvents: {
+        blur() {
+          isComposing = false;
+          return false;
+        },
+        compositionstart() {
+          isComposing = true;
+          return false;
+        },
+        compositionend() {
+          isComposing = false;
+          return false;
+        },
+      },
+      handleTextInput(_view, _from, _to, text) {
+        if (isComposing) {
+          return true;
+        }
+        callbacks.onInsertText(text);
+        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
+      },
+
+      // Block drop
+      handleDrop() {
+        callbacks.onBlockedInput?.("drop", "Drag and drop is not supported in the mounted editor.");
+        return true; // Block
+      },
+    },
+  });
+
+  // Keydown bridge: normalize mounted editor keys through the shared shortcut
+  // dispatcher so the PM layer and shell layer follow the same routing model.
+  const keydownPlugin = new Plugin({
+    props: {
+      handleKeyDown(view, event) {
+        if (isComposing) {
+          return false;
+        }
+
+        const resolution = resolveSurfaceShortcut(
+          {
+            key: event.key,
+            ctrlKey: event.ctrlKey,
+            metaKey: event.metaKey,
+            altKey: event.altKey,
+            shiftKey: event.shiftKey,
+          },
+          { inTable: isInTable(view.state) },
+        );
+
+        switch (resolution.kind) {
+          case "none":
+            return false;
+          case "delete-backward":
+            callbacks.onDeleteBackward();
+            return true;
+          case "delete-forward":
+            callbacks.onDeleteForward();
+            return true;
+          case "split-paragraph":
+            callbacks.onSplitParagraph();
+            return true;
+          case "insert-hard-break":
+            callbacks.onInsertHardBreak();
+            return true;
+          case "insert-tab":
+            callbacks.onInsertTab();
+            return true;
+          case "outdent-tab":
+            callbacks.onOutdentTab?.();
+            return true;
+          case "navigate-table-cell":
+            return goToNextCell(resolution.direction)(view.state, view.dispatch, view);
+          case "history":
+            if (resolution.history === "undo") {
+              callbacks.onUndo();
+            } else {
+              callbacks.onRedo();
+            }
+            return true;
+        }
+      },
+    },
+  });
+
+  // Table editing: provides Tab/Shift-Tab navigation between cells and
+  // selection handles. Doc-changing table transactions (new rows, etc.) are
+  // filtered by the runtime filter above; navigation-only steps pass through.
+  const tablePlugin = tableEditing();
+  const columnResizingPlugin = columnResizing();
+
+  return [filterPlugin, selectionPlugin, inputPlugin, keydownPlugin, tablePlugin, columnResizingPlugin];
+}

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

@@ -0,0 +1,31 @@
+import { Plugin } from "prosemirror-state";
+
+export interface ContextualInteractionCallbacks {
+  onCommentActivated?: (commentId: string) => void;
+  onRevisionActivated?: (revisionId: string) => void;
+}
+
+export function createContextualInteractionPlugin(
+  callbacks: ContextualInteractionCallbacks,
+): Plugin {
+  return new Plugin({
+    props: {
+      handleClick(_view, _pos, event) {
+        const target = event.target as HTMLElement | null;
+        const commentId = target?.closest?.("[data-comment-id]")?.getAttribute("data-comment-id");
+        if (commentId) {
+          callbacks.onCommentActivated?.(commentId);
+          return true;
+        }
+
+        const revisionId = target?.closest?.("[data-revision-id]")?.getAttribute("data-revision-id");
+        if (revisionId) {
+          callbacks.onRevisionActivated?.(revisionId);
+          return true;
+        }
+
+        return false;
+      },
+    },
+  });
+}

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

@@ -0,0 +1,411 @@
+import { Decoration, DecorationSet } from "prosemirror-view";
+
+import type { CommentDecorationModel } from "../../ui/headless/comment-decoration-model";
+import { getCommentHighlightClass, type MarkupDisplay } from "../../ui/headless/comment-decoration-model";
+import type { RevisionDecorationModel } from "../../ui/headless/revision-decoration-model";
+import { getRevisionHighlightClass } from "../../ui/headless/revision-decoration-model";
+import type {
+  EditorAnchorProjection,
+  EditorStoryTarget,
+  WorkflowBlockedCommandReason,
+  WorkflowCandidateRange,
+  WorkflowMetadataMarkup,
+  WorkflowScope,
+} from "../../api/public-types";
+import { MAIN_STORY_TARGET, storyTargetsEqual } from "../../core/selection/mapping.ts";
+import type { PositionMap } from "./pm-position-map";
+import type { Node as PMNode } from "prosemirror-model";
+
+type RailDecorationSpec = {
+  railKind: "scope" | "candidate" | "blocked";
+  className: string;
+  attrs: Record<string, string>;
+};
+
+function isSelectionZoneScope(scope: WorkflowScope): boolean {
+  return (
+    scope.scopeId.startsWith("scope-lab-") ||
+    scope.scopeId.startsWith("metadata-lab-") ||
+    scope.workItemId?.startsWith("scope-lab-") === true ||
+    scope.workItemId?.startsWith("metadata-lab-") === true ||
+    scope.label?.toLowerCase().includes("scope lab") === true ||
+    scope.label?.toLowerCase().includes("metadata lab") === true
+  );
+}
+
+function getWorkflowInlineClass(
+  scope: WorkflowScope,
+  isActiveWorkItem: boolean,
+  isSelectionZone: boolean,
+): string {
+  const base =
+    scope.mode === "edit"
+      ? "wre-workflow-inline wre-workflow-inline-edit"
+      : scope.mode === "suggest"
+        ? "wre-workflow-inline wre-workflow-inline-suggest"
+        : scope.mode === "comment"
+          ? "wre-workflow-inline wre-workflow-inline-comment"
+          : "wre-workflow-inline wre-workflow-inline-view";
+  const withZone = isSelectionZone ? `${base} wre-workflow-inline-zone` : base;
+  return isActiveWorkItem ? `${withZone} wre-workflow-inline-active` : withZone;
+}
+
+function getWorkflowRailClass(
+  scope: WorkflowScope,
+  isActiveWorkItem: boolean,
+  isSelectionZone: boolean,
+): string {
+  const base =
+    scope.mode === "edit"
+      ? "wre-workflow-rail wre-workflow-rail-edit"
+      : scope.mode === "suggest"
+        ? "wre-workflow-rail wre-workflow-rail-suggest"
+        : scope.mode === "comment"
+          ? "wre-workflow-rail wre-workflow-rail-comment"
+          : "wre-workflow-rail wre-workflow-rail-view";
+  const withZone = isSelectionZone ? `${base} wre-workflow-rail-selection-zone` : base;
+  return isActiveWorkItem ? `${withZone} wre-workflow-rail-active` : withZone;
+}
+
+function getWorkflowCandidateInlineClass(): string {
+  return "wre-workflow-inline wre-workflow-inline-candidate";
+}
+
+function getWorkflowCandidateRailClass(): string {
+  return "wre-workflow-rail wre-workflow-rail-candidate";
+}
+
+function getWorkflowMetadataInlineClass(): string {
+  return "wre-workflow-inline wre-workflow-inline-metadata";
+}
+
+function getWorkflowBlockedInlineClass(reason: WorkflowBlockedCommandReason): string {
+  if (reason.code === "workflow_blocked_import") {
+    return "wre-workflow-inline wre-workflow-inline-blocked-import";
+  }
+  return "wre-workflow-inline wre-workflow-inline-preserve-only";
+}
+
+function getWorkflowBlockedRailClass(reason: WorkflowBlockedCommandReason): string {
+  if (reason.code === "workflow_blocked_import") {
+    return "wre-workflow-rail wre-workflow-rail-blocked-import";
+  }
+  return "wre-workflow-rail wre-workflow-rail-preserve-only";
+}
+
+function hasBlockChildren(node: PMNode): boolean {
+  for (let index = 0; index < node.childCount; index += 1) {
+    if (node.child(index).isBlock) {
+      return true;
+    }
+  }
+  return false;
+}
+
+function collectRailRanges(doc: PMNode, from: number, to: number): Array<{ from: number; to: number }> {
+  const effectiveTo = Math.max(to, from + 1);
+  const ranges = new Map<string, { from: number; to: number }>();
+  let fallbackFrom: number | null = null;
+  let fallbackTo: number | null = null;
+  let fallbackSize: number | null = null;
+
+  doc.descendants((node, pos) => {
+    if (!node.isBlock || node.type.name === "doc") {
+      return true;
+    }
+
+    const nodeFrom = pos;
+    const nodeTo = pos + node.nodeSize;
+    if (nodeTo <= from || nodeFrom >= effectiveTo) {
+      return true;
+    }
+
+    if (!hasBlockChildren(node)) {
+      ranges.set(`${nodeFrom}:${nodeTo}`, { from: nodeFrom, to: nodeTo });
+      return true;
+    }
+
+    if (nodeFrom <= from && nodeTo >= effectiveTo) {
+      const size = nodeTo - nodeFrom;
+      if (fallbackSize === null || size < fallbackSize) {
+        fallbackFrom = nodeFrom;
+        fallbackTo = nodeTo;
+        fallbackSize = size;
+      }
+    }
+
+    return true;
+  });
+
+  if (ranges.size > 0) {
+    return [...ranges.values()];
+  }
+
+  if (fallbackFrom !== null && fallbackTo !== null) {
+    return [{ from: fallbackFrom, to: fallbackTo }];
+  }
+
+  return [];
+}
+
+function buildAnchorPmRange(
+  anchor: EditorAnchorProjection,
+  positionMap: PositionMap,
+): { from: number; to: number; allowInline: boolean } | null {
+  if (anchor.kind === "detached") {
+    return null;
+  }
+
+  if (anchor.kind === "range") {
+    return {
+      from: positionMap.runtimeToPm(anchor.from),
+      to: positionMap.runtimeToPm(anchor.to),
+      allowInline: true,
+    };
+  }
+
+  const pmAt = positionMap.runtimeToPm(anchor.at);
+  return {
+    from: pmAt,
+    to: pmAt + 1,
+    allowInline: false,
+  };
+}
+
+function pushRailDecorations(
+  decorations: Decoration[],
+  doc: PMNode,
+  from: number,
+  to: number,
+  spec: RailDecorationSpec,
+  rangeCache: Map<string, Array<{ from: number; to: number }>>,
+): void {
+  const cacheKey = `${from}:${to}`;
+  const ranges = rangeCache.get(cacheKey) ?? collectRailRanges(doc, from, to);
+  if (!rangeCache.has(cacheKey)) {
+    rangeCache.set(cacheKey, ranges);
+  }
+  for (const range of ranges) {
+    decorations.push(
+      Decoration.node(range.from, range.to, {
+        class: spec.className,
+        "data-workflow-rail": spec.railKind,
+        ...spec.attrs,
+      }),
+    );
+  }
+}
+
+/**
+ * Build ProseMirror DecorationSet from runtime comment and revision models.
+ *
+ * Uses the existing headless decoration models to compute Tailwind class
+ * strings, then converts them to PM inline decorations at the correct
+ * PM positions via the PositionMap.
+ */
+export function buildDecorations(
+  doc: PMNode,
+  positionMap: PositionMap,
+  commentModel: CommentDecorationModel | undefined,
+  revisionModel: RevisionDecorationModel | undefined,
+  markupDisplay: MarkupDisplay,
+  showTrackedChanges = true,
+  workflowScopes?: readonly WorkflowScope[],
+  activeStory: EditorStoryTarget = MAIN_STORY_TARGET,
+  workflowCandidates?: readonly WorkflowCandidateRange[],
+  workflowBlockedReasons?: readonly WorkflowBlockedCommandReason[],
+  activeWorkflowWorkItemId?: string | null,
+  activeWorkflowScopeIds?: readonly string[],
+  workflowMetadata?: readonly WorkflowMetadataMarkup[],
+): DecorationSet {
+  const decorations: Decoration[] = [];
+  const railRangeCache = new Map<string, Array<{ from: number; to: number }>>();
+  const activeScopeIds = new Set(activeWorkflowScopeIds ?? []);
+
+  // Walk comment threads and create inline decorations
+  if (commentModel) {
+    for (const thread of commentModel.threads) {
+      const cls = getCommentHighlightClass(
+        commentModel,
+        thread.from,
+        thread.to,
+        markupDisplay,
+      );
+      if (!cls) continue;
+
+      const pmFrom = positionMap.runtimeToPm(thread.from);
+      const pmTo = positionMap.runtimeToPm(thread.to);
+      if (pmFrom < pmTo) {
+        decorations.push(
+          Decoration.inline(pmFrom, pmTo, {
+            class: cls,
+            "data-comment-id": thread.commentId,
+          }),
+        );
+      }
+    }
+  }
+
+  // Walk revision entries and create inline decorations.
+  // Deletion hiding in clean mode ALWAYS applies, even when showTrackedChanges is off.
+  // Visual styling (underlines, colors) only applies when showTrackedChanges is on.
+  if (revisionModel) {
+    for (const rev of revisionModel.revisions) {
+      // Always hide deletions in clean mode (final-text semantics).
+      // This is the critical behavior: "hide tracked changes" must show
+      // the document as if accepted, not show deleted text as kept text.
+      if (markupDisplay === "clean" && rev.kind === "deletion") {
+        const pmFrom = positionMap.runtimeToPm(rev.from);
+        const pmTo = positionMap.runtimeToPm(rev.to);
+        if (pmFrom < pmTo) {
+          decorations.push(
+            Decoration.inline(pmFrom, pmTo, {
+              class: "hidden",
+              "data-revision-id": rev.revisionId,
+            }),
+          );
+        }
+        continue;
+      }
+
+      // Skip visual styling when tracked changes display is off
+      if (!showTrackedChanges) continue;
+
+      const cls = getRevisionHighlightClass(
+        revisionModel,
+        rev.from,
+        rev.to,
+        markupDisplay,
+      );
+      if (!cls) continue;
+
+      const pmFrom = positionMap.runtimeToPm(rev.from);
+      const pmTo = positionMap.runtimeToPm(rev.to);
+      if (pmFrom < pmTo) {
+        decorations.push(
+          Decoration.inline(pmFrom, pmTo, {
+            class: cls,
+            "data-revision-id": rev.revisionId,
+          }),
+        );
+      }
+    }
+  }
+
+  if (workflowScopes) {
+    for (const scope of workflowScopes) {
+      const scopeStoryTarget = scope.storyTarget ?? MAIN_STORY_TARGET;
+      if (!storyTargetsEqual(scopeStoryTarget, activeStory)) continue;
+      const pmRange = buildAnchorPmRange(scope.anchor, positionMap);
+      if (!pmRange) continue;
+      const isSelectionZone = isSelectionZoneScope(scope);
+      const isActiveWorkItem =
+        Boolean(activeWorkflowWorkItemId) &&
+        (
+          scope.workItemId === activeWorkflowWorkItemId ||
+          activeScopeIds.has(scope.scopeId)
+        );
+
+      if (pmRange.allowInline && pmRange.from < pmRange.to) {
+        decorations.push(
+          Decoration.inline(pmRange.from, pmRange.to, {
+            class: getWorkflowInlineClass(scope, isActiveWorkItem, isSelectionZone),
+            "data-workflow-scope-id": scope.scopeId,
+            "data-workflow-scope-mode": scope.mode,
+            "data-workflow-active": isActiveWorkItem ? "true" : "false",
+            ...(isSelectionZone ? { "data-workflow-zone": "selection" } : {}),
+          }),
+        );
+      }
+
+      pushRailDecorations(decorations, doc, pmRange.from, pmRange.to, {
+        railKind: "scope",
+        className: getWorkflowRailClass(scope, isActiveWorkItem, isSelectionZone),
+        attrs: {
+          "data-workflow-scope-id": scope.scopeId,
+          "data-workflow-scope-mode": scope.mode,
+          "data-workflow-active": isActiveWorkItem ? "true" : "false",
+          ...(isSelectionZone ? { "data-workflow-zone": "selection" } : {}),
+        },
+      }, railRangeCache);
+    }
+  }
+
+  if (workflowMetadata) {
+    for (const metadata of workflowMetadata) {
+      const metadataStoryTarget = metadata.storyTarget ?? MAIN_STORY_TARGET;
+      if (!storyTargetsEqual(metadataStoryTarget, activeStory)) continue;
+      const pmRange = buildAnchorPmRange(metadata.anchor, positionMap);
+      if (!pmRange || !pmRange.allowInline || pmRange.from >= pmRange.to) continue;
+
+      decorations.push(
+        Decoration.inline(pmRange.from, pmRange.to, {
+          class: getWorkflowMetadataInlineClass(),
+          ...(metadata.color ? { style: `--wre-workflow-metadata-color: ${metadata.color};` } : {}),
+          "data-workflow-entry-id": metadata.entryId,
+          "data-workflow-metadata-id": metadata.metadataId,
+        }),
+      );
+    }
+  }
+
+  if (workflowCandidates) {
+    for (const candidate of workflowCandidates) {
+      const candidateStoryTarget = candidate.storyTarget ?? MAIN_STORY_TARGET;
+      if (!storyTargetsEqual(candidateStoryTarget, activeStory)) continue;
+      const pmRange = buildAnchorPmRange(candidate.anchor, positionMap);
+      if (!pmRange) continue;
+
+      if (pmRange.allowInline && pmRange.from < pmRange.to) {
+        decorations.push(
+          Decoration.inline(pmRange.from, pmRange.to, {
+            class: getWorkflowCandidateInlineClass(),
+            "data-workflow-candidate-id": candidate.candidateId,
+          }),
+        );
+      }
+
+      pushRailDecorations(decorations, doc, pmRange.from, pmRange.to, {
+        railKind: "candidate",
+        className: getWorkflowCandidateRailClass(),
+        attrs: {
+          "data-workflow-candidate-id": candidate.candidateId,
+        },
+      }, railRangeCache);
+    }
+  }
+
+  if (workflowBlockedReasons) {
+    for (const reason of workflowBlockedReasons) {
+      if (
+        reason.code !== "workflow_preserve_only" &&
+        reason.code !== "workflow_blocked_import"
+      ) {
+        continue;
+      }
+      const reasonStoryTarget = reason.storyTarget ?? MAIN_STORY_TARGET;
+      if (!storyTargetsEqual(reasonStoryTarget, activeStory) || !reason.anchor) continue;
+      const pmRange = buildAnchorPmRange(reason.anchor, positionMap);
+      if (!pmRange) continue;
+
+      if (pmRange.allowInline && pmRange.from < pmRange.to) {
+        decorations.push(
+          Decoration.inline(pmRange.from, pmRange.to, {
+            class: getWorkflowBlockedInlineClass(reason),
+            "data-workflow-blocked-code": reason.code,
+          }),
+        );
+      }
+
+      pushRailDecorations(decorations, doc, pmRange.from, pmRange.to, {
+        railKind: "blocked",
+        className: getWorkflowBlockedRailClass(reason),
+        attrs: {
+          "data-workflow-blocked-code": reason.code,
+        },
+      }, railRangeCache);
+    }
+  }
+
+  return DecorationSet.create(doc, decorations);
+}