@tiptap/y-tiptap 3.0.4 → 3.0.6

package/dist/src/lib.d.ts

@@ -96,7 +96,11 @@ export function yDocToProsemirrorJSON(ydoc: Y.Doc, xmlFragment?: string): Record
 export function yXmlFragmentToProsemirrorJSON(xmlFragment: Y.XmlFragment): Record<string, any>;
 export function setMeta(view: any, key: any, value: any): void;
 export function absolutePositionToRelativePosition(pos: number, type: Y.XmlFragment, mapping: ProsemirrorMapping): any;
+export function isMisresolvedTextPosition(y: Y.Doc, relPos: Y.RelativePosition, absPos: number | null): boolean;
 export function relativePositionToAbsolutePosition(y: Y.Doc, documentType: Y.XmlFragment, relPos: any, mapping: ProsemirrorMapping): null | number;
+export function findAbsolutePositionAfterStructuralChange(oldDoc: import('prosemirror-model').Node, newDoc: import('prosemirror-model').Node, absPos: number): number | null;
+export function isStructuralTransaction(tr: import('prosemirror-state').Transaction, oldDoc: import('prosemirror-model').Node): boolean;
+export function isMisresolvedAfterStructuralChange(oldDoc: import('prosemirror-model').Node, newDoc: import('prosemirror-model').Node, oldAbs: number, resolvedAbs: number | null): boolean;
 export function yXmlFragmentToProseMirrorFragment(yXmlFragment: Y.XmlFragment, schema: Schema): Fragment;
 export function yXmlFragmentToProseMirrorRootNode(yXmlFragment: Y.XmlFragment, schema: Schema): Node;
 export function initProseMirrorDoc(yXmlFragment: Y.XmlFragment, schema: Schema): {

package/dist/src/plugins/sync-plugin.d.ts

@@ -6,8 +6,11 @@ export function isVisible(item: Y.Item, snapshot?: Y.Snapshot): boolean;
 export function ySyncPlugin(yXmlFragment: Y.XmlFragment, { colors, colorMapping, permanentUserData, onFirstRender, mapping }?: YSyncOpts): any;
 export function getRelativeSelection(pmbinding: ProsemirrorBinding, state: import('prosemirror-state').EditorState): {
     type: any;
+    depth: any;
     anchor: any;
     head: any;
+    absAnchor: number;
+    absHead: number;
 };
 /**
  * Binding for prosemirror.
@@ -44,8 +47,11 @@ export class ProsemirrorBinding {
      */
     beforeTransactionSelection: {
         type: any;
+        depth: any;
         anchor: any;
         head: any;
+        absAnchor: number;
+        absHead: number;
     };
     beforeAllTransactions: () => void;
     afterAllTransactions: () => void;

package/dist/src/y-tiptap.d.ts

@@ -2,4 +2,4 @@ export * from "./plugins/cursor-plugin.js";
 export * from "./plugins/undo-plugin.js";
 export * from "./plugins/keys.js";
 export { ySyncPlugin, isVisible, getRelativeSelection, ProsemirrorBinding, updateYFragment } from "./plugins/sync-plugin.js";
-export { absolutePositionToRelativePosition, relativePositionToAbsolutePosition, setMeta, prosemirrorJSONToYDoc, yDocToProsemirrorJSON, yDocToProsemirror, prosemirrorToYDoc, prosemirrorJSONToYXmlFragment, yXmlFragmentToProsemirrorJSON, yXmlFragmentToProsemirror, prosemirrorToYXmlFragment, yXmlFragmentToProseMirrorRootNode, yXmlFragmentToProseMirrorFragment, initProseMirrorDoc } from "./lib.js";
+export { absolutePositionToRelativePosition, relativePositionToAbsolutePosition, setMeta, findAbsolutePositionAfterStructuralChange, isMisresolvedTextPosition, isMisresolvedAfterStructuralChange, isStructuralTransaction, prosemirrorJSONToYDoc, yDocToProsemirrorJSON, yDocToProsemirror, prosemirrorToYDoc, prosemirrorJSONToYXmlFragment, yXmlFragmentToProsemirrorJSON, yXmlFragmentToProsemirror, prosemirrorToYXmlFragment, yXmlFragmentToProseMirrorRootNode, yXmlFragmentToProseMirrorFragment, initProseMirrorDoc } from "./lib.js";

package/dist/y-tiptap.cjs

@@ -20,6 +20,7 @@ var eventloop = require('lib0/eventloop');
 var map = require('lib0/map');
 var sha256 = require('lib0/hash/sha256');
 var buf = require('lib0/buffer');
+var prosemirrorTransform = require('prosemirror-transform');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -318,8 +319,9 @@ const ySyncPlugin = (yXmlFragment, {
  * @param {import('prosemirror-state').Transaction} tr
  * @param {ReturnType<typeof getRelativeSelection>} relSel
  * @param {ProsemirrorBinding} binding
+ * @param {import('prosemirror-model').Node} [oldDoc]
  */
-const restoreRelativeSelection = (tr, relSel, binding) => {
+const restoreRelativeSelection = (tr, relSel, binding, oldDoc) => {
   if (relSel !== null && relSel.anchor !== null && relSel.head !== null) {
     if (relSel.type === 'all') {
       tr.setSelection(new prosemirrorState.AllSelection(tr.doc));
@@ -330,8 +332,12 @@ const restoreRelativeSelection = (tr, relSel, binding) => {
         relSel.anchor,
         binding.mapping
       );
-      tr.setSelection(createSafeNodeSelection(tr, anchor));
-    } else {
+      // anchor is null when the referenced node was deleted or moved out of
+      // binding.type by a remote update; resolving null would throw.
+      if (anchor !== null) {
+        tr.setSelection(createSafeNodeSelection(tr, anchor));
+      }
+    } else if (relSel.type === 'nodeRange') {
       const anchor = relativePositionToAbsolutePosition(
         binding.doc,
         binding.type,
@@ -344,6 +350,46 @@ const restoreRelativeSelection = (tr, relSel, binding) => {
         relSel.head,
         binding.mapping
       );
+      const selection = createSafeNodeRangeSelection(tr, anchor, head, relSel.depth);
+      if (selection !== null) {
+        tr.setSelection(selection);
+      }
+    } else {
+      let anchor = relativePositionToAbsolutePosition(
+        binding.doc,
+        binding.type,
+        relSel.anchor,
+        binding.mapping
+      );
+      let head = relativePositionToAbsolutePosition(
+        binding.doc,
+        binding.type,
+        relSel.head,
+        binding.mapping
+      );
+      const needsContentFallback = oldDoc != null &&
+        relSel.absAnchor != null &&
+        relSel.absHead != null &&
+        (
+          anchor === null ||
+          head === null ||
+          (relSel.absAnchor > 1 && anchor !== null && anchor <= 1) ||
+          (relSel.absHead > 1 && head !== null && head <= 1) ||
+          isMisresolvedAfterStructuralChange(oldDoc, tr.doc, relSel.absAnchor, anchor) ||
+          isMisresolvedAfterStructuralChange(oldDoc, tr.doc, relSel.absHead, head)
+        );
+      if (needsContentFallback) {
+        anchor = findAbsolutePositionAfterStructuralChange(
+          oldDoc,
+          tr.doc,
+          relSel.absAnchor
+        );
+        head = findAbsolutePositionAfterStructuralChange(
+          oldDoc,
+          tr.doc,
+          relSel.absHead
+        );
+      }
       if (anchor !== null && head !== null) {
         tr.setSelection(prosemirrorState.TextSelection.between(tr.doc.resolve(anchor), tr.doc.resolve(head)));
       }
@@ -368,23 +414,67 @@ const createSafeNodeSelection = (tr, pos) => {
   }
 };
 
+/**
+ * Safely reconstructs a NodeRangeSelection from resolved absolute positions.
+ *
+ * @param {import('prosemirror-state').Transaction} tr - The transaction whose document provides resolved positions.
+ * @param {number|null} anchor - Absolute document position marking the start (boundary) of the node range.
+ *        Use `relativePositionToAbsolutePosition` before calling this function.
+ * @param {number|null} head - Absolute document position marking the end (boundary) of the node range.
+ *        Use `relativePositionToAbsolutePosition` before calling this function.
+ * @param {number|undefined} depth - The nesting depth at which the range operates (e.g. 0 for
+ *        top-level blocks, 1 for blocks nested inside a wrapper). Passed through to
+ *        `Selection.fromJSON`; ignored by `@tiptap/extension-node-range` < v2.29 but
+ *        properly stored starting from that version.
+ * @returns {import('prosemirror-state').Selection|null} Reconstructed selection, or null if
+ *          anchor/head could not be resolved.
+ */
+const createSafeNodeRangeSelection = (tr, anchor, head, depth) => {
+  if (anchor === null || head === null) {
+    return null
+  }
+  const clampedAnchor = Math.min(Math.max(anchor, 0), tr.doc.content.size);
+  const clampedHead = Math.min(Math.max(head, 0), tr.doc.content.size);
+  try {
+    const selection = prosemirrorState.Selection.fromJSON(tr.doc, {
+      type: 'nodeRange',
+      anchor: clampedAnchor,
+      head: clampedHead,
+      depth
+    });
+    if (!selection.ranges.length) {
+      return prosemirrorState.TextSelection.near(tr.doc.resolve(clampedAnchor))
+    }
+    return selection
+  } catch (e) {
+    return prosemirrorState.TextSelection.near(tr.doc.resolve(clampedAnchor))
+  }
+};
+
 /**
  * @param {ProsemirrorBinding} pmbinding
  * @param {import('prosemirror-state').EditorState} state
  */
-const getRelativeSelection = (pmbinding, state) => ({
-  type: /** @type {any} */ (state.selection).jsonID,
-  anchor: absolutePositionToRelativePosition(
-    state.selection.anchor,
-    pmbinding.type,
-    pmbinding.mapping
-  ),
-  head: absolutePositionToRelativePosition(
-    state.selection.head,
-    pmbinding.type,
-    pmbinding.mapping
-  )
-});
+const getRelativeSelection = (pmbinding, state) => {
+  const type = /** @type {any} */ (state.selection).jsonID;
+  return {
+    type,
+    // `depth` is only meaningful for NodeRangeSelection; undefined for every other type.
+    depth: type === 'nodeRange' ? /** @type {any} */ (state.selection).depth : undefined,
+    anchor: absolutePositionToRelativePosition(
+      state.selection.anchor,
+      pmbinding.type,
+      pmbinding.mapping
+    ),
+    head: absolutePositionToRelativePosition(
+      state.selection.head,
+      pmbinding.type,
+      pmbinding.mapping
+    ),
+    absAnchor: state.selection.anchor,
+    absHead: state.selection.head
+  }
+};
 
 /**
  * Binding for prosemirror.
@@ -707,6 +797,9 @@ class ProsemirrorBinding {
       );
       transaction.changed.forEach(delType);
       transaction.changedParentTypes.forEach(delType);
+      // Rebuild the full Y↔PM mapping so relative cursor positions resolve against
+      // current node sizes after structural changes (e.g. drag-and-drop block moves).
+      this.mapping.clear();
       const fragmentContent = this.type.toArray().map((t) =>
         createNodeIfNotExists(
           /** @type {Y.XmlElement | Y.XmlHook} */ (t),
@@ -714,13 +807,14 @@ class ProsemirrorBinding {
           this
         )
       ).filter((n) => n !== null);
+      const oldDoc = this.prosemirrorView.state.doc;
       // @ts-ignore
       let tr = this._tr.replace(
         0,
         this.prosemirrorView.state.doc.content.size,
         new PModel__namespace.Slice(PModel__namespace.Fragment.from(fragmentContent), 0, 0)
       );
-      restoreRelativeSelection(tr, this.beforeTransactionSelection, this);
+      restoreRelativeSelection(tr, this.beforeTransactionSelection, this, oldDoc);
       tr = tr.setMeta(ySyncPluginKey, { isChangeOrigin: true, isUndoRedoOperation: transaction.origin instanceof Y__namespace.UndoManager });
       if (
         this.beforeTransactionSelection !== null && this._isLocalCursorInView()
@@ -1606,6 +1700,26 @@ const absolutePositionToRelativePosition = (pos, type, mapping) => {
   return Y__namespace.createRelativePositionFromTypeIndex(type, type._length, -1)
 };
 
+/**
+ * Item-id based relative positions can misresolve to the document start after
+ * block reorder during collaborative drag-and-drop.
+ *
+ * @param {Y.Doc} y
+ * @param {Y.RelativePosition} relPos
+ * @param {number|null} absPos
+ * @return {boolean}
+ */
+const isMisresolvedTextPosition = (y, relPos, absPos) => {
+  if (absPos === null) {
+    return false
+  }
+  const decoded = Y__namespace.createAbsolutePositionFromRelativePosition(relPos, y);
+  return decoded !== null &&
+    decoded.type instanceof Y__namespace.XmlText &&
+    relPos.item !== null &&
+    absPos <= 1
+};
+
 const createRelativePosition = (type, item) => {
   let typeid = null;
   let tname = null;
@@ -1643,7 +1757,11 @@ const relativePositionToAbsolutePosition = (y, documentType, relPos, mapping) =>
         if (t instanceof Y__namespace.XmlText) {
           pos += t._length;
         } else {
-          pos += /** @type {any} */ (mapping.get(t)).nodeSize;
+          const mapped = mapping.get(t);
+          if (mapped == null) {
+            return null
+          }
+          pos += /** @type {any} */ (mapped).nodeSize;
         }
       }
       n = /** @type {Y.Item} */ (n.right);
@@ -1667,7 +1785,11 @@ const relativePositionToAbsolutePosition = (y, documentType, relPos, mapping) =>
           if (contentType instanceof Y__namespace.XmlText) {
             pos += contentType._length;
           } else {
-            pos += /** @type {any} */ (mapping.get(contentType)).nodeSize;
+            const mapped = mapping.get(contentType);
+            if (mapped == null) {
+              return null
+            }
+            pos += /** @type {any} */ (mapped).nodeSize;
           }
         }
         n = n.right;
@@ -1675,7 +1797,133 @@ const relativePositionToAbsolutePosition = (y, documentType, relPos, mapping) =>
     }
     type = /** @type {Y.AbstractType} */ (parent);
   }
-  return pos - 1 // we don't count the most outer tag, because it is a fragment
+  const absPos = pos - 1; // we don't count the most outer tag, because it is a fragment
+  if (isMisresolvedTextPosition(y, relPos, absPos)) {
+    return null
+  }
+  return absPos
+};
+
+/**
+ * @param {import('prosemirror-model').Node} oldDoc
+ * @param {import('prosemirror-model').Node} newDoc
+ * @param {number} absPos
+ * @return {number|null}
+ */
+const findAbsolutePositionAfterStructuralChange = (oldDoc, newDoc, absPos) => {
+  let pos = 0;
+  let targetIdx = 0;
+  for (; targetIdx < oldDoc.childCount; targetIdx++) {
+    const child = oldDoc.child(targetIdx);
+    if (pos + child.nodeSize > absPos) {
+      break
+    }
+    pos += child.nodeSize;
+  }
+  if (targetIdx >= oldDoc.childCount) {
+    return null
+  }
+  const targetChild = oldDoc.child(targetIdx);
+  const offsetInChild = absPos - pos;
+
+  let occurrence = 0;
+  for (let i = 0; i <= targetIdx; i++) {
+    const child = oldDoc.child(i);
+    if (child.type === targetChild.type && child.textContent === targetChild.textContent) {
+      occurrence++;
+    }
+  }
+
+  let matchCount = 0;
+  let newPos = 0;
+  for (let i = 0; i < newDoc.childCount; i++) {
+    const child = newDoc.child(i);
+    if (child.type === targetChild.type && child.textContent === targetChild.textContent) {
+      matchCount++;
+      if (matchCount === occurrence) {
+        const remapped = newPos + offsetInChild;
+        const contentStart = newPos + 1;
+        const contentEnd = newPos + child.nodeSize - 1;
+        return Math.max(contentStart, Math.min(remapped, contentEnd))
+      }
+    }
+    newPos += child.nodeSize;
+  }
+  return null
+};
+
+/**
+ * Returns true when a transaction changes block structure rather than only
+ * editing inline content inside existing blocks.
+ *
+ * @param {import('prosemirror-state').Transaction} tr
+ * @param {import('prosemirror-model').Node} oldDoc
+ * @return {boolean}
+ */
+const isStructuralTransaction = (tr, oldDoc) => {
+  if (!tr.docChanged) {
+    return false
+  }
+  if (tr.doc.childCount !== oldDoc.childCount) {
+    return true
+  }
+  for (const step of tr.steps) {
+    if (step instanceof prosemirrorTransform.ReplaceStep) {
+      if (step.from === 0 && step.to === oldDoc.content.size) {
+        return true
+      }
+      if (step.slice.content.size > 0) {
+        let hasBlock = false;
+        step.slice.content.forEach((node) => {
+          if (node.isBlock) {
+            hasBlock = true;
+          }
+        });
+        if (hasBlock) {
+          return true
+        }
+      } else if (step.to > step.from) {
+        const $from = oldDoc.resolve(step.from);
+        const $to = oldDoc.resolve(step.to);
+        if ($from.depth === 0 && $to.depth === 0 && $from.index() !== $to.index()) {
+          return true
+        }
+      }
+    }
+  }
+  return false
+};
+
+/**
+ * Detect stale relative positions after structural changes that resolve to the
+ * wrong text block or to the start of the correct block.
+ *
+ * @param {import('prosemirror-model').Node} oldDoc
+ * @param {import('prosemirror-model').Node} newDoc
+ * @param {number} oldAbs
+ * @param {number|null} resolvedAbs
+ * @return {boolean}
+ */
+const isMisresolvedAfterStructuralChange = (oldDoc, newDoc, oldAbs, resolvedAbs) => {
+  if (resolvedAbs === null) {
+    return false
+  }
+  const $old = oldDoc.resolve(oldAbs);
+  const $new = newDoc.resolve(resolvedAbs);
+  if (!$old.parent.isTextblock || !$new.parent.isTextblock) {
+    return false
+  }
+  if ($old.parent.textContent !== $new.parent.textContent) {
+    return true
+  }
+  if ($old.parentOffset !== 0 && $new.parentOffset === 0) {
+    return true
+  }
+  if ($old.parentOffset === 0 && $new.parentOffset === 0) {
+    const expected = findAbsolutePositionAfterStructuralChange(oldDoc, newDoc, oldAbs);
+    return expected !== null && expected !== resolvedAbs
+  }
+  return false
 };
 
 /**
@@ -2094,7 +2342,7 @@ const yCursorPlugin = (
           selectionBuilder
         )
       },
-      apply (tr, prevState, _oldState, newState) {
+      apply (tr, prevState, oldState, newState) {
         const ystate = ySyncPluginKey.getState(newState);
         const yCursorState = tr.getMeta(yCursorPluginKey);
         if (
@@ -2109,7 +2357,19 @@ const yCursorPlugin = (
             selectionBuilder
           )
         }
-        return prevState.map(tr.mapping, tr.doc)
+        if (tr.docChanged) {
+          if (isStructuralTransaction(tr, oldState.doc)) {
+            return createDecorations(
+              newState,
+              awareness,
+              awarenessStateFilter,
+              cursorBuilder,
+              selectionBuilder
+            )
+          }
+          return prevState.map(tr.mapping, tr.doc)
+        }
+        return prevState
       }
     },
     props: {
@@ -2124,15 +2384,19 @@ const yCursorPlugin = (
           setMeta(view, yCursorPluginKey, { awarenessUpdated: true });
         }
       };
-      const updateCursorInfo = () => {
-        const ystate = ySyncPluginKey.getState(view.state);
+      /**
+       * @param {import('prosemirror-view').EditorView} editorView
+       * @param {{ force?: boolean }} [opts]
+       */
+      const updateCursorInfo = (editorView, opts = {}) => {
+        const ystate = ySyncPluginKey.getState(editorView.state);
         // `ystate` is undefined during sync-plugin init and Y.Doc transitions;
         // reading from it here would throw and break cursor tracking for the view.
         if (!ystate || !ystate.binding) return
         // @note We make implicit checks when checking for the cursor property
         const current = awareness.getLocalState() || {};
-        if (view.hasFocus()) {
-          const selection = getSelection(view.state);
+        if (editorView.hasFocus()) {
+          const selection = getSelection(editorView.state);
           /**
            * @type {Y.RelativePosition}
            */
@@ -2150,6 +2414,7 @@ const yCursorPlugin = (
             ystate.binding.mapping
           );
           if (
+            opts.force ||
             current.cursor == null ||
             !Y__namespace.compareRelativePositions(
               Y__namespace.createRelativePositionFromJSON(current.cursor.anchor),
@@ -2178,14 +2443,23 @@ const yCursorPlugin = (
           awareness.setLocalStateField(cursorStateField, null);
         }
       };
+      const onFocusChange = () => updateCursorInfo(view);
       awareness.on('change', awarenessListener);
-      view.dom.addEventListener('focusin', updateCursorInfo);
-      view.dom.addEventListener('focusout', updateCursorInfo);
+      view.dom.addEventListener('focusin', onFocusChange);
+      view.dom.addEventListener('focusout', onFocusChange);
       return {
-        update: updateCursorInfo,
+        update: (editorView, prevState) => {
+          const ystate = ySyncPluginKey.getState(editorView.state);
+          const forceAwarenessUpdate = !!(
+            ystate?.isChangeOrigin &&
+            prevState?.doc &&
+            !prevState.doc.eq(editorView.state.doc)
+          );
+          updateCursorInfo(editorView, { force: forceAwarenessUpdate });
+        },
         destroy: () => {
-          view.dom.removeEventListener('focusin', updateCursorInfo);
-          view.dom.removeEventListener('focusout', updateCursorInfo);
+          view.dom.removeEventListener('focusin', onFocusChange);
+          view.dom.removeEventListener('focusout', onFocusChange);
           awareness.off('change', awarenessListener);
           awareness.setLocalStateField(cursorStateField, null);
         }
@@ -2315,8 +2589,12 @@ exports.defaultCursorBuilder = defaultCursorBuilder;
 exports.defaultDeleteFilter = defaultDeleteFilter;
 exports.defaultProtectedNodes = defaultProtectedNodes;
 exports.defaultSelectionBuilder = defaultSelectionBuilder;
+exports.findAbsolutePositionAfterStructuralChange = findAbsolutePositionAfterStructuralChange;
 exports.getRelativeSelection = getRelativeSelection;
 exports.initProseMirrorDoc = initProseMirrorDoc;
+exports.isMisresolvedAfterStructuralChange = isMisresolvedAfterStructuralChange;
+exports.isMisresolvedTextPosition = isMisresolvedTextPosition;
+exports.isStructuralTransaction = isStructuralTransaction;
 exports.isVisible = isVisible;
 exports.prosemirrorJSONToYDoc = prosemirrorJSONToYDoc;
 exports.prosemirrorJSONToYXmlFragment = prosemirrorJSONToYXmlFragment;