@beyondwork/docx-react-component 1.0.1 → 1.0.3

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

@@ -0,0 +1,139 @@
+import { 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 { createSelectionSnapshot } from "../../ui/headless/selection-helpers";
+import type { PositionMap } from "./pm-position-map";
+
+export interface CommandBridgeCallbacks {
+  onInsertText: (text: string) => void;
+  onDeleteBackward: () => void;
+  onDeleteForward: () => void;
+  onSplitParagraph: () => void;
+  onInsertHardBreak: () => void;
+  onInsertTab: () => void;
+  onUndo: () => void;
+  onRedo: () => void;
+  onSelectionChange: (selection: SelectionSnapshot) => void;
+  getPositionMap: () => PositionMap | null;
+}
+
+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[] {
+  // 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 (!view.state.selection.eq(prevState.selection)) {
+            const posMap = callbacks.getPositionMap();
+            if (!posMap) return;
+
+            const { from, to } = view.state.selection;
+            const runtimeAnchor = posMap.pmToRuntime(from);
+            const runtimeHead = posMap.pmToRuntime(to);
+            callbacks.onSelectionChange(
+              createSelectionSnapshot(runtimeAnchor, runtimeHead),
+            );
+          }
+        },
+      };
+    },
+  });
+
+  // Text input hook: intercept typed characters.
+  const inputPlugin = new Plugin({
+    props: {
+      handleTextInput(_view, _from, _to, text) {
+        callbacks.onInsertText(text);
+        return true; // Block PM from processing
+      },
+
+      // Block paste (rich paste is not safe, plain paste via text.insert is TODO)
+      handlePaste() {
+        return true; // Block
+      },
+
+      // Block drop
+      handleDrop() {
+        return true; // Block
+      },
+    },
+  });
+
+  // Keymap: intercept editing keys and dispatch runtime commands.
+  const keymapPlugin = keymap({
+    Backspace: () => {
+      callbacks.onDeleteBackward();
+      return true;
+    },
+    Delete: () => {
+      callbacks.onDeleteForward();
+      return true;
+    },
+    Enter: () => {
+      callbacks.onSplitParagraph();
+      return true;
+    },
+    "Shift-Enter": () => {
+      callbacks.onInsertHardBreak();
+      return true;
+    },
+    Tab: (state, dispatch, view) => {
+      if (isInTable(state)) {
+        return goToNextCell(1)(state, dispatch, view);
+      }
+      callbacks.onInsertTab();
+      return true;
+    },
+    "Shift-Tab": (state, dispatch, view) => {
+      if (isInTable(state)) {
+        return goToNextCell(-1)(state, dispatch, view);
+      }
+      return false;
+    },
+    "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-decorations.ts

@@ -0,0 +1,98 @@
+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 { PositionMap } from "./pm-position-map";
+import type { Node as PMNode } from "prosemirror-model";
+
+/**
+ * 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,
+): DecorationSet {
+  const decorations: Decoration[] = [];
+
+  // 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,
+          }),
+        );
+      }
+    }
+  }
+
+  return DecorationSet.create(doc, decorations);
+}

package/src/ui-tailwind/editor-surface/pm-position-map.ts

@@ -0,0 +1,123 @@
+import type { EditorSurfaceSnapshot, SurfaceBlockSnapshot } from "../../api/public-types";
+
+export interface PositionMap {
+  runtimeToPm(runtimePos: number): number;
+  pmToRuntime(pmPos: number): number;
+  pmDocSize: number;
+  runtimeStorySize: number;
+}
+
+interface MapEntry {
+  runtimeStart: number;
+  pmStart: number;
+  runtimeEnd: number;
+  pmEnd: number;
+}
+
+export function buildPositionMap(surface: EditorSurfaceSnapshot): PositionMap {
+  const entries: MapEntry[] = [];
+  const pmDocSize = walkBlocks(surface.blocks, 1, entries);
+  const runtimeStorySize = surface.storySize;
+
+  return {
+    runtimeToPm(runtimePos: number): number {
+      if (runtimePos <= 0) {
+        return entries[0]?.pmStart ?? 1;
+      }
+      if (runtimePos >= runtimeStorySize) {
+        return pmDocSize - 1;
+      }
+
+      for (const entry of entries) {
+        if (runtimePos >= entry.runtimeStart && runtimePos <= entry.runtimeEnd) {
+          return entry.pmStart + (runtimePos - entry.runtimeStart);
+        }
+        if (runtimePos < entry.runtimeStart) {
+          return entry.pmStart;
+        }
+      }
+
+      return entries[entries.length - 1]?.pmEnd ?? 1;
+    },
+
+    pmToRuntime(pmPos: number): number {
+      if (pmPos <= 1) {
+        return 0;
+      }
+      if (pmPos >= pmDocSize - 1) {
+        return runtimeStorySize;
+      }
+
+      for (const entry of entries) {
+        if (pmPos >= entry.pmStart && pmPos <= entry.pmEnd) {
+          return entry.runtimeStart + (pmPos - entry.pmStart);
+        }
+        if (pmPos < entry.pmStart) {
+          return entry.runtimeStart;
+        }
+      }
+
+      return runtimeStorySize;
+    },
+
+    pmDocSize,
+    runtimeStorySize,
+  };
+}
+
+function walkBlocks(
+  blocks: SurfaceBlockSnapshot[],
+  pmCursor: number,
+  entries: MapEntry[],
+): number {
+  let nextPmCursor = pmCursor;
+
+  for (const block of blocks) {
+    switch (block.kind) {
+      case "paragraph": {
+        const pmContentStart = nextPmCursor + 1;
+        const runtimeLength = block.to - block.from;
+        entries.push({
+          runtimeStart: block.from,
+          pmStart: pmContentStart,
+          runtimeEnd: block.to,
+          pmEnd: pmContentStart + runtimeLength,
+        });
+        nextPmCursor += runtimeLength + 2;
+        break;
+      }
+      case "opaque_block": {
+        entries.push({
+          runtimeStart: block.from,
+          pmStart: nextPmCursor,
+          runtimeEnd: block.to,
+          pmEnd: nextPmCursor + 1,
+        });
+        nextPmCursor += 1;
+        break;
+      }
+      case "sdt_block": {
+        nextPmCursor += 1;
+        nextPmCursor = walkBlocks(block.children, nextPmCursor, entries);
+        nextPmCursor += 1;
+        break;
+      }
+      case "table": {
+        nextPmCursor += 1;
+        for (const row of block.rows) {
+          nextPmCursor += 1;
+          for (const cell of row.cells) {
+            nextPmCursor += 1;
+            nextPmCursor = walkBlocks(cell.content, nextPmCursor, entries);
+            nextPmCursor += 1;
+          }
+          nextPmCursor += 1;
+        }
+        nextPmCursor += 1;
+        break;
+      }
+    }
+  }
+
+  return nextPmCursor;
+}