@beyondwork/docx-react-component 1.0.0 → 1.0.1

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

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

@@ -1,98 +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 { 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

@@ -1,123 +0,0 @@
-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;
-}