@tiptap/y-tiptap 3.0.5 → 3.0.6

package/dist/y-tiptap.js

@@ -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));
@@ -319,18 +321,41 @@ const restoreRelativeSelection = (tr, relSel, binding) => {
         tr.setSelection(selection);
       }
     } else {
-      const anchor = relativePositionToAbsolutePosition(
+      let anchor = relativePositionToAbsolutePosition(
         binding.doc,
         binding.type,
         relSel.anchor,
         binding.mapping
       );
-      const head = relativePositionToAbsolutePosition(
+      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)));
       }
@@ -411,7 +436,9 @@ const getRelativeSelection = (pmbinding, state) => {
       state.selection.head,
       pmbinding.type,
       pmbinding.mapping
-    )
+    ),
+    absAnchor: state.selection.anchor,
+    absHead: state.selection.head
   }
 };
 
@@ -736,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),
@@ -743,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()
@@ -1635,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;
@@ -1712,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
 };
 
 /**
@@ -2131,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 (
@@ -2146,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: {
@@ -2161,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}
            */
@@ -2187,6 +2380,7 @@ const yCursorPlugin = (
             ystate.binding.mapping
           );
           if (
+            opts.force ||
             current.cursor == null ||
             !Y.compareRelativePositions(
               Y.createRelativePositionFromJSON(current.cursor.anchor),
@@ -2215,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);
         }
@@ -2344,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