@tiptap/y-tiptap 3.0.5 → 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

@@ -9,6 +9,8 @@ export function getRelativeSelection(pmbinding: ProsemirrorBinding, state: impor
     depth: any;
     anchor: any;
     head: any;
+    absAnchor: number;
+    absHead: number;
 };
 /**
  * Binding for prosemirror.
@@ -48,6 +50,8 @@ export class ProsemirrorBinding {
         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));
@@ -353,18 +355,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(prosemirrorState.TextSelection.between(tr.doc.resolve(anchor), tr.doc.resolve(head)));
       }
@@ -445,7 +470,9 @@ const getRelativeSelection = (pmbinding, state) => {
       state.selection.head,
       pmbinding.type,
       pmbinding.mapping
-    )
+    ),
+    absAnchor: state.selection.anchor,
+    absHead: state.selection.head
   }
 };
 
@@ -770,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),
@@ -777,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()
@@ -1669,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;
@@ -1746,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
 };
 
 /**
@@ -2165,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 (
@@ -2180,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: {
@@ -2195,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}
            */
@@ -2221,6 +2414,7 @@ const yCursorPlugin = (
             ystate.binding.mapping
           );
           if (
+            opts.force ||
             current.cursor == null ||
             !Y__namespace.compareRelativePositions(
               Y__namespace.createRelativePositionFromJSON(current.cursor.anchor),
@@ -2249,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);
         }
@@ -2386,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;