@tiptap/y-tiptap 3.0.4 → 3.0.6

package/dist/y-tiptap.js

@@ -1,7 +1,7 @@
 import * as Y from 'yjs';
 import { Item, ContentType, Text, XmlElement, UndoManager } from 'yjs';
 import { DecorationSet, Decoration } from 'prosemirror-view';
-import { PluginKey, Plugin, TextSelection, AllSelection, NodeSelection } from 'prosemirror-state';
+import { PluginKey, Plugin, TextSelection, AllSelection, NodeSelection, Selection } from 'prosemirror-state';
 import 'y-protocols/awareness';
 import { createMutex } from 'lib0/mutex';
 import * as PModel from 'prosemirror-model';
@@ -18,6 +18,7 @@ import * as eventloop from 'lib0/eventloop';
 import * as map from 'lib0/map';
 import * as sha256 from 'lib0/hash/sha256';
 import * as buf from 'lib0/buffer';
+import { ReplaceStep } from 'prosemirror-transform';
 
 /**
  * The unique prosemirror plugin key for syncPlugin
@@ -284,8 +285,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 AllSelection(tr.doc));
@@ -296,8 +298,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,
@@ -310,6 +316,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(TextSelection.between(tr.doc.resolve(anchor), tr.doc.resolve(head)));
       }
@@ -334,23 +380,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 = Selection.fromJSON(tr.doc, {
+      type: 'nodeRange',
+      anchor: clampedAnchor,
+      head: clampedHead,
+      depth
+    });
+    if (!selection.ranges.length) {
+      return TextSelection.near(tr.doc.resolve(clampedAnchor))
+    }
+    return selection
+  } catch (e) {
+    return 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.
@@ -673,6 +763,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),
@@ -680,13 +773,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.Slice(PModel.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.UndoManager });
       if (
         this.beforeTransactionSelection !== null && this._isLocalCursorInView()
@@ -1572,6 +1666,26 @@ const absolutePositionToRelativePosition = (pos, type, mapping) => {
   return Y.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.createAbsolutePositionFromRelativePosition(relPos, y);
+  return decoded !== null &&
+    decoded.type instanceof Y.XmlText &&
+    relPos.item !== null &&
+    absPos <= 1
+};
+
 const createRelativePosition = (type, item) => {
   let typeid = null;
   let tname = null;
@@ -1609,7 +1723,11 @@ const relativePositionToAbsolutePosition = (y, documentType, relPos, mapping) =>
         if (t instanceof Y.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);
@@ -1633,7 +1751,11 @@ const relativePositionToAbsolutePosition = (y, documentType, relPos, mapping) =>
           if (contentType instanceof Y.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;
@@ -1641,7 +1763,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 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
 };
 
 /**
@@ -2060,7 +2308,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 (
@@ -2075,7 +2323,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: {
@@ -2090,15 +2350,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}
            */
@@ -2116,6 +2380,7 @@ const yCursorPlugin = (
             ystate.binding.mapping
           );
           if (
+            opts.force ||
             current.cursor == null ||
             !Y.compareRelativePositions(
               Y.createRelativePositionFromJSON(current.cursor.anchor),
@@ -2144,14 +2409,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);
         }
@@ -2273,5 +2547,5 @@ const yUndoPlugin = ({ protectedNodes = defaultProtectedNodes, trackedOrigins =
   }
 });
 
-export { ProsemirrorBinding, absolutePositionToRelativePosition, createDecorations, defaultAwarenessStateFilter, defaultCursorBuilder, defaultDeleteFilter, defaultProtectedNodes, defaultSelectionBuilder, getRelativeSelection, initProseMirrorDoc, isVisible, prosemirrorJSONToYDoc, prosemirrorJSONToYXmlFragment, prosemirrorToYDoc, prosemirrorToYXmlFragment, redo, relativePositionToAbsolutePosition, setMeta, undo, updateYFragment, yCursorPlugin, yCursorPluginKey, yDocToProsemirror, yDocToProsemirrorJSON, ySyncPlugin, ySyncPluginKey, yUndoPlugin, yUndoPluginKey, yXmlFragmentToProseMirrorFragment, yXmlFragmentToProseMirrorRootNode, yXmlFragmentToProsemirror, yXmlFragmentToProsemirrorJSON };
+export { ProsemirrorBinding, absolutePositionToRelativePosition, createDecorations, defaultAwarenessStateFilter, defaultCursorBuilder, defaultDeleteFilter, defaultProtectedNodes, defaultSelectionBuilder, findAbsolutePositionAfterStructuralChange, getRelativeSelection, initProseMirrorDoc, isMisresolvedAfterStructuralChange, isMisresolvedTextPosition, isStructuralTransaction, isVisible, prosemirrorJSONToYDoc, prosemirrorJSONToYXmlFragment, prosemirrorToYDoc, prosemirrorToYXmlFragment, redo, relativePositionToAbsolutePosition, setMeta, undo, updateYFragment, yCursorPlugin, yCursorPluginKey, yDocToProsemirror, yDocToProsemirrorJSON, ySyncPlugin, ySyncPluginKey, yUndoPlugin, yUndoPluginKey, yXmlFragmentToProseMirrorFragment, yXmlFragmentToProseMirrorRootNode, yXmlFragmentToProsemirror, yXmlFragmentToProsemirrorJSON };
 //# sourceMappingURL=y-tiptap.js.map