@beyondwork/docx-react-component 1.0.27 → 1.0.29

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

@@ -1,178 +0,0 @@
-import { NodeSelection, Plugin, PluginKey } from "prosemirror-state";
-import { keymap } from "prosemirror-keymap";
-import { columnResizing, goToNextCell, isInTable, tableEditing } from "prosemirror-tables";
-
-import type { SelectionSnapshot } from "../../api/public-types";
-import {
-  createNodeSelectionSnapshot,
-  createSelectionSnapshot,
-} from "../../ui/headless/selection-helpers";
-import type { PositionMap } from "./pm-position-map";
-
-export interface SelectionSyncCallbacks {
-  onSelectionChange: (selection: SelectionSnapshot) => void;
-  getPositionMap: () => PositionMap | null;
-  isSelectionSyncSuppressed?: () => boolean;
-}
-
-export interface CommandBridgeCallbacks extends SelectionSyncCallbacks {
-  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;
-}
-
-const bridgeKey = new PluginKey("command-bridge");
-
-export function createSelectionSyncPlugin(
-  callbacks: SelectionSyncCallbacks,
-): Plugin {
-  return new Plugin({
-    view() {
-      return {
-        update(view, prevState) {
-          if (callbacks.isSelectionSyncSuppressed?.()) {
-            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;
-            callbacks.onSelectionChange(
-              createSelectionSnapshot(posMap.pmToRuntime(anchor), posMap.pmToRuntime(head)),
-            );
-          }
-        },
-      };
-    },
-  });
-}
-
-export function createCommandBridgePlugins(
-  callbacks: CommandBridgeCallbacks,
-): Plugin[] {
-  let isComposing = false;
-
-  const filterPlugin = new Plugin({
-    key: bridgeKey,
-    filterTransaction(tr) {
-      if (!tr.docChanged) return true;
-      return false;
-    },
-  });
-
-  const selectionPlugin = createSelectionSyncPlugin(callbacks);
-
-  // 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
-      },
-    },
-  });
-
-  // Keymap: intercept editing keys and dispatch runtime commands.
-  const keymapPlugin = keymap({
-    Backspace: () => {
-      if (isComposing) return false;
-      callbacks.onDeleteBackward();
-      return true;
-    },
-    Delete: () => {
-      if (isComposing) return false;
-      callbacks.onDeleteForward();
-      return true;
-    },
-    Enter: () => {
-      if (isComposing) return false;
-      callbacks.onSplitParagraph();
-      return true;
-    },
-    "Shift-Enter": () => {
-      if (isComposing) return false;
-      callbacks.onInsertHardBreak();
-      return true;
-    },
-    Tab: (state, dispatch, view) => {
-      if (isComposing) return false;
-      if (isInTable(state)) {
-        return goToNextCell(1)(state, dispatch, view);
-      }
-      callbacks.onInsertTab();
-      return true;
-    },
-    "Shift-Tab": (state, dispatch, view) => {
-      if (isComposing) return false;
-      if (isInTable(state)) {
-        return goToNextCell(-1)(state, dispatch, view);
-      }
-      callbacks.onOutdentTab?.();
-      return true;
-    },
-    "Mod-z": () => {
-      callbacks.onUndo();
-      return true;
-    },
-    "Mod-y": () => {
-      callbacks.onRedo();
-      return true;
-    },
-    "Shift-Mod-z": () => {
-      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, keymapPlugin, tablePlugin, columnResizingPlugin];
-}

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

@@ -1,31 +0,0 @@
-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

@@ -1,427 +0,0 @@
-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,
-  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 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[],
-  suggestionsEnabled = false,
-): DecorationSet {
-  const decorations: Decoration[] = [];
-  const railRangeCache = new Map<string, Array<{ from: number; to: number }>>();
-  const activeScopeIds = new Set(activeWorkflowScopeIds ?? []);
-  // In suggestions mode, tracked changes are always shown regardless of the toggle.
-  const effectiveShowTracked = suggestionsEnabled ? true : showTrackedChanges;
-
-  // 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" && !suggestionsEnabled) {
-        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 (!effectiveShowTracked) continue;
-
-      const pmFrom = positionMap.runtimeToPm(rev.from);
-      const pmTo = positionMap.runtimeToPm(rev.to);
-      if (pmFrom >= pmTo) continue;
-
-      if (suggestionsEnabled) {
-        if (rev.kind === "insertion") {
-          decorations.push(
-            Decoration.inline(pmFrom, pmTo, {
-              class: "text-insert",
-              "data-revision-id": rev.revisionId,
-            }),
-          );
-          decorations.push(
-            Decoration.widget(pmFrom, () => {
-              const el = document.createElement("span");
-              el.textContent = "[";
-              el.className = "text-insert";
-              el.setAttribute("contenteditable", "false");
-              return el;
-            }, { side: -1, key: `${rev.revisionId}-open` }),
-          );
-          decorations.push(
-            Decoration.widget(pmTo, () => {
-              const el = document.createElement("span");
-              el.textContent = "]";
-              el.className = "text-insert";
-              el.setAttribute("contenteditable", "false");
-              return el;
-            }, { side: 1, key: `${rev.revisionId}-close` }),
-          );
-        } else if (rev.kind === "deletion") {
-          decorations.push(
-            Decoration.inline(pmFrom, pmTo, {
-              class: "text-danger line-through decoration-danger/80 decoration-1",
-              "data-revision-id": rev.revisionId,
-            }),
-          );
-        }
-        continue;
-      }
-
-      const cls = getRevisionHighlightClass(
-        revisionModel,
-        rev.from,
-        rev.to,
-        markupDisplay,
-      );
-      if (!cls) continue;
-
-      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 (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);
-}