@tiptap/y-tiptap 1.0.0 → 1.1.0

package/dist/y-tiptap.js

@@ -1,21 +1,24 @@
 import * as Y from 'yjs';
 import { Item, ContentType, Text, XmlElement, UndoManager } from 'yjs';
-import { DecorationSet, Decoration } from '@tiptap/pm/view';
-import { PluginKey, Plugin, TextSelection } from '@tiptap/pm/state';
+import { DecorationSet, Decoration } from 'prosemirror-view';
+import { Plugin, TextSelection, AllSelection, NodeSelection } from 'prosemirror-state';
 import 'y-protocols/awareness';
 import { createMutex } from 'lib0/mutex';
-import * as PModel from '@tiptap/pm/model';
-import { Fragment, Node } from '@tiptap/pm/model';
+import * as PModel from 'prosemirror-model';
+import { Fragment, Node } from 'prosemirror-model';
 import * as math from 'lib0/math';
+import * as object from 'lib0/object';
 import * as set from 'lib0/set';
 import { simpleDiff } from 'lib0/diff';
 import * as error from 'lib0/error';
+import { PluginKey, Plugin as Plugin$1 } from '@tiptap/pm/state';
 import * as random from 'lib0/random';
 import * as environment from 'lib0/environment';
 import * as dom from 'lib0/dom';
 import * as eventloop from 'lib0/eventloop';
-import * as f from 'lib0/function';
 import * as map from 'lib0/map';
+import * as sha256 from 'lib0/hash/sha256';
+import * as buf from 'lib0/buffer';
 
 /**
  * The unique prosemirror plugin key for syncPlugin
@@ -38,11 +41,41 @@ const yUndoPluginKey = new PluginKey('y-undo');
  */
 const yCursorPluginKey = new PluginKey('yjs-cursor');
 
+/**
+ * Custom function to transform sha256 hash to N byte
+ *
+ * @param {Uint8Array} digest
+ */
+const _convolute = digest => {
+  const N = 6;
+  for (let i = N; i < digest.length; i++) {
+    digest[i % N] = digest[i % N] ^ digest[i];
+  }
+  return digest.slice(0, N)
+};
+
+/**
+ * @param {any} json
+ */
+const hashOfJSON = (json) => buf.toBase64(_convolute(sha256.digest(buf.encodeAny(json))));
+
 /**
  * @module bindings/prosemirror
  */
 
-const MarkPrefix = '_mark_';
+/**
+ * @typedef {Object} BindingMetadata
+ * @property {ProsemirrorMapping} BindingMetadata.mapping
+ * @property {Map<import('prosemirror-model').MarkType, boolean>} BindingMetadata.isOMark - is overlapping mark
+ */
+
+/**
+ * @return BindingMetadata
+ */
+const createEmptyMeta = () => ({
+  mapping: new Map(),
+  isOMark: new Map()
+});
 
 /**
  * @param {Y.Item} item
@@ -249,31 +282,48 @@ const ySyncPlugin = (yXmlFragment, {
 };
 
 /**
- * @param {any} tr
- * @param {any} relSel
+ * @param {import('prosemirror-state').Transaction} tr
+ * @param {ReturnType<typeof getRelativeSelection>} relSel
  * @param {ProsemirrorBinding} binding
  */
 const restoreRelativeSelection = (tr, relSel, binding) => {
   if (relSel !== null && relSel.anchor !== null && relSel.head !== null) {
-    const anchor = relativePositionToAbsolutePosition(
-      binding.doc,
-      binding.type,
-      relSel.anchor,
-      binding.mapping
-    );
-    const head = relativePositionToAbsolutePosition(
-      binding.doc,
-      binding.type,
-      relSel.head,
-      binding.mapping
-    );
-    if (anchor !== null && head !== null) {
-      tr = tr.setSelection(TextSelection.create(tr.doc, anchor, head));
+    if (relSel.type === 'all') {
+      tr.setSelection(new AllSelection(tr.doc));
+    } else if (relSel.type === 'node') {
+      const anchor = relativePositionToAbsolutePosition(
+        binding.doc,
+        binding.type,
+        relSel.anchor,
+        binding.mapping
+      );
+      tr.setSelection(NodeSelection.create(tr.doc, anchor));
+    } else {
+      const anchor = relativePositionToAbsolutePosition(
+        binding.doc,
+        binding.type,
+        relSel.anchor,
+        binding.mapping
+      );
+      const head = relativePositionToAbsolutePosition(
+        binding.doc,
+        binding.type,
+        relSel.head,
+        binding.mapping
+      );
+      if (anchor !== null && head !== null) {
+        tr.setSelection(TextSelection.between(tr.doc.resolve(anchor), tr.doc.resolve(head)));
+      }
     }
   }
 };
 
+/**
+ * @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,
@@ -305,6 +355,12 @@ class ProsemirrorBinding {
     this.prosemirrorView = null;
     this.mux = createMutex();
     this.mapping = mapping;
+    /**
+     * Is overlapping mark - i.e. mark does not exclude itself.
+     *
+     * @type {Map<import('prosemirror-model').MarkType, boolean>}
+     */
+    this.isOMark = new Map();
     this._observeFunction = this._typeChanged.bind(this);
     /**
      * @type {Y.Doc}
@@ -399,7 +455,7 @@ class ProsemirrorBinding {
         createNodeFromYElement(
           /** @type {Y.XmlElement} */ (t),
           this.prosemirrorView.state.schema,
-          this.mapping
+          this
         )
       ).filter((n) => n !== null);
       // @ts-ignore
@@ -424,7 +480,7 @@ class ProsemirrorBinding {
         createNodeFromYElement(
           /** @type {Y.XmlElement} */ (t),
           this.prosemirrorView.state.schema,
-          this.mapping
+          this
         )
       ).filter((n) => n !== null);
       // @ts-ignore
@@ -461,6 +517,7 @@ class ProsemirrorBinding {
      * @type {Y.Doc}
      */
     let historyDoc = this.doc;
+    let historyType = this.type;
     if (!snapshot) {
       snapshot = Y.snapshot(this.doc);
     }
@@ -474,6 +531,29 @@ class ProsemirrorBinding {
       prevSnapshot = Y.snapshot(historyDoc);
       Y.applyUpdateV2(historyDoc, snapshot);
       snapshot = Y.snapshot(historyDoc);
+      if (historyType._item === null) {
+        /**
+         * If is a root type, we need to find the root key in the initial document
+         * and use it to get the history type.
+         */
+        const rootKey = Array.from(this.doc.share.keys()).find(
+          (key) => this.doc.share.get(key) === this.type
+        );
+        historyType = historyDoc.getXmlFragment(rootKey);
+      } else {
+        /**
+         * If it is a sub type, we use the item id to find the history type.
+         */
+        const historyStructs =
+          historyDoc.store.clients.get(historyType._item.id.client) ?? [];
+        const itemIndex = Y.findIndexSS(
+          historyStructs,
+          historyType._item.id.clock
+        );
+        const item = /** @type {Y.Item} */ (historyStructs[itemIndex]);
+        const content = /** @type {Y.ContentType} */ (item.content);
+        historyType = /** @type {Y.XmlFragment} */ (content.type);
+      }
     }
     // clear mapping because we are going to rerender
     this.mapping.clear();
@@ -481,6 +561,9 @@ class ProsemirrorBinding {
       historyDoc.transact((transaction) => {
         // before rendering, we are going to sanitize ops and split deleted ops
         // if they were deleted by seperate users.
+        /**
+         * @type {Y.PermanentUserData}
+         */
         const pud = pluginState.permanentUserData;
         if (pud) {
           pud.dss.forEach((ds) => {
@@ -507,7 +590,7 @@ class ProsemirrorBinding {
         };
         // Create document fragment and render
         const fragmentContent = Y.typeListToArraySnapshot(
-          this.type,
+          historyType,
           new Y.Snapshot(prevSnapshot.ds, snapshot.sv)
         ).map((t) => {
           if (
@@ -517,7 +600,7 @@ class ProsemirrorBinding {
             return createNodeFromYElement(
               t,
               this.prosemirrorView.state.schema,
-              new Map(),
+              { mapping: new Map(), isOMark: new Map() },
               snapshot,
               prevSnapshot,
               computeYChange
@@ -578,7 +661,7 @@ class ProsemirrorBinding {
         createNodeIfNotExists(
           /** @type {Y.XmlElement | Y.XmlHook} */ (t),
           this.prosemirrorView.state.schema,
-          this.mapping
+          this
         )
       ).filter((n) => n !== null);
       // @ts-ignore
@@ -598,9 +681,12 @@ class ProsemirrorBinding {
     });
   }
 
+  /**
+   * @param {import('prosemirror-model').Node} doc
+   */
   _prosemirrorChanged (doc) {
     this.doc.transact(() => {
-      updateYFragment(this.doc, this.type, doc, this.mapping);
+      updateYFragment(this.doc, this.type, doc, this);
       this.beforeTransactionSelection = getRelativeSelection(
         this,
         this.prosemirrorView.state
@@ -633,7 +719,7 @@ class ProsemirrorBinding {
  * @private
  * @param {Y.XmlElement | Y.XmlHook} el
  * @param {PModel.Schema} schema
- * @param {ProsemirrorMapping} mapping
+ * @param {BindingMetadata} meta
  * @param {Y.Snapshot} [snapshot]
  * @param {Y.Snapshot} [prevSnapshot]
  * @param {function('removed' | 'added', Y.ID):any} [computeYChange]
@@ -642,18 +728,18 @@ class ProsemirrorBinding {
 const createNodeIfNotExists = (
   el,
   schema,
-  mapping,
+  meta,
   snapshot,
   prevSnapshot,
   computeYChange
 ) => {
-  const node = /** @type {PModel.Node} */ (mapping.get(el));
+  const node = /** @type {PModel.Node} */ (meta.mapping.get(el));
   if (node === undefined) {
     if (el instanceof Y.XmlElement) {
       return createNodeFromYElement(
         el,
         schema,
-        mapping,
+        meta,
         snapshot,
         prevSnapshot,
         computeYChange
@@ -669,7 +755,7 @@ const createNodeIfNotExists = (
  * @private
  * @param {Y.XmlElement} el
  * @param {any} schema
- * @param {ProsemirrorMapping} mapping
+ * @param {BindingMetadata} meta
  * @param {Y.Snapshot} [snapshot]
  * @param {Y.Snapshot} [prevSnapshot]
  * @param {function('removed' | 'added', Y.ID):any} [computeYChange]
@@ -678,18 +764,21 @@ const createNodeIfNotExists = (
 const createNodeFromYElement = (
   el,
   schema,
-  mapping,
+  meta,
   snapshot,
   prevSnapshot,
   computeYChange
 ) => {
   const children = [];
+  /**
+   * @param {Y.XmlElement | Y.XmlText} type
+   */
   const createChildren = (type) => {
-    if (type.constructor === Y.XmlElement) {
+    if (type instanceof Y.XmlElement) {
       const n = createNodeIfNotExists(
         type,
         schema,
-        mapping,
+        meta,
         snapshot,
         prevSnapshot,
         computeYChange
@@ -701,7 +790,7 @@ const createNodeFromYElement = (
       // If the next ytext exists and was created by us, move the content to the current ytext.
       // This is a fix for #160 -- duplication of characters when two Y.Text exist next to each
       // other.
-      const nextytext = type._item.right?.content.type;
+      const nextytext = /** @type {Y.ContentType} */ (type._item.right?.content)?.type;
       if (nextytext instanceof Y.Text && !nextytext._item.deleted && nextytext._item.id.client === nextytext.doc.clientID) {
         type.applyDelta([
           { retain: type.length },
@@ -715,7 +804,7 @@ const createNodeFromYElement = (
       const ns = createTextNodesFromYText(
         type,
         schema,
-        mapping,
+        meta,
         snapshot,
         prevSnapshot,
         computeYChange
@@ -748,32 +837,15 @@ const createNodeFromYElement = (
           : { type: 'added' };
       }
     }
-    const nodeAttrs = {};
-    const nodeMarks = [];
-
-    for (const key in attrs) {
-      if (key.startsWith(MarkPrefix)) {
-        const markName = key.replace(MarkPrefix, '');
-        const markValue = attrs[key];
-        if (isObject(markValue)) {
-          nodeMarks.push(schema.mark(markName, /** @type {Object} */ (markValue).attrs));
-        } else if (Array.isArray(markValue)) {
-          nodeMarks.push(...markValue.map(attrs => schema.mark(markName, attrs)));
-        }
-      } else {
-        nodeAttrs[key] = attrs[key];
-      }
-    }
-
-    const node = schema.node(el.nodeName, nodeAttrs, children, nodeMarks);
-    mapping.set(el, node);
+    const node = schema.node(el.nodeName, attrs, children);
+    meta.mapping.set(el, node);
     return node
   } catch (e) {
     // an error occured while creating the node. This is probably a result of a concurrent action.
     /** @type {Y.Doc} */ (el.doc).transact((transaction) => {
       /** @type {Y.Item} */ (el._item).delete(transaction);
     }, ySyncPluginKey);
-    mapping.delete(el);
+    meta.mapping.delete(el);
     return null
   }
 };
@@ -781,8 +853,8 @@ const createNodeFromYElement = (
 /**
  * @private
  * @param {Y.XmlText} text
- * @param {any} schema
- * @param {ProsemirrorMapping} _mapping
+ * @param {import('prosemirror-model').Schema} schema
+ * @param {BindingMetadata} _meta
  * @param {Y.Snapshot} [snapshot]
  * @param {Y.Snapshot} [prevSnapshot]
  * @param {function('removed' | 'added', Y.ID):any} [computeYChange]
@@ -791,7 +863,7 @@ const createNodeFromYElement = (
 const createTextNodesFromYText = (
   text,
   schema,
-  _mapping,
+  _meta,
   snapshot,
   prevSnapshot,
   computeYChange
@@ -801,19 +873,7 @@ const createTextNodesFromYText = (
   try {
     for (let i = 0; i < deltas.length; i++) {
       const delta = deltas[i];
-      const marks = [];
-      for (const markName in delta.attributes) {
-        if (Array.isArray(delta.attributes[markName])) {
-          // multiple marks of same type
-          delta.attributes[markName].forEach(attrs => {
-            marks.push(schema.mark(markName, attrs));
-          });
-        } else {
-          // single mark
-          marks.push(schema.mark(markName, delta.attributes[markName]));
-        }
-      }
-      nodes.push(schema.text(delta.insert, marks));
+      nodes.push(schema.text(delta.insert, attributesToMarks(delta.attributes, schema)));
     }
   } catch (e) {
     // an error occured while creating the node. This is probably a result of a concurrent action.
@@ -829,67 +889,70 @@ const createTextNodesFromYText = (
 /**
  * @private
  * @param {Array<any>} nodes prosemirror node
- * @param {ProsemirrorMapping} mapping
+ * @param {BindingMetadata} meta
  * @return {Y.XmlText}
  */
-const createTypeFromTextNodes = (nodes, mapping) => {
+const createTypeFromTextNodes = (nodes, meta) => {
   const type = new Y.XmlText();
   const delta = nodes.map((node) => ({
     // @ts-ignore
     insert: node.text,
-    attributes: marksToAttributes(node.marks)
+    attributes: marksToAttributes(node.marks, meta)
   }));
   type.applyDelta(delta);
-  mapping.set(type, nodes);
+  meta.mapping.set(type, nodes);
   return type
 };
 
 /**
  * @private
  * @param {any} node prosemirror node
- * @param {ProsemirrorMapping} mapping
+ * @param {BindingMetadata} meta
  * @return {Y.XmlElement}
  */
-const createTypeFromElementNode = (node, mapping) => {
+const createTypeFromElementNode = (node, meta) => {
   const type = new Y.XmlElement(node.type.name);
-  const nodeMarksAttr = nodeMarksToAttributes(node.marks);
   for (const key in node.attrs) {
     const val = node.attrs[key];
     if (val !== null && key !== 'ychange') {
       type.setAttribute(key, val);
     }
   }
-  for (const key in nodeMarksAttr) {
-    type.setAttribute(key, nodeMarksAttr[key]);
-  }
   type.insert(
     0,
     normalizePNodeContent(node).map((n) =>
-      createTypeFromTextOrElementNode(n, mapping)
+      createTypeFromTextOrElementNode(n, meta)
     )
   );
-  mapping.set(type, node);
+  meta.mapping.set(type, node);
   return type
 };
 
 /**
  * @private
  * @param {PModel.Node|Array<PModel.Node>} node prosemirror text node
- * @param {ProsemirrorMapping} mapping
+ * @param {BindingMetadata} meta
  * @return {Y.XmlElement|Y.XmlText}
  */
-const createTypeFromTextOrElementNode = (node, mapping) =>
+const createTypeFromTextOrElementNode = (node, meta) =>
   node instanceof Array
-    ? createTypeFromTextNodes(node, mapping)
-    : createTypeFromElementNode(node, mapping);
+    ? createTypeFromTextNodes(node, meta)
+    : createTypeFromElementNode(node, meta);
 
+/**
+ * @param {any} val
+ */
 const isObject = (val) => typeof val === 'object' && val !== null;
 
+/**
+ * @param {any} pattrs
+ * @param {any} yattrs
+ */
 const equalAttrs = (pattrs, yattrs) => {
   const keys = Object.keys(pattrs).filter((key) => pattrs[key] !== null);
   let eq =
     keys.length ===
-    Object.keys(yattrs).filter((key) => yattrs[key] !== null && !key.startsWith(MarkPrefix)).length;
+      Object.keys(yattrs).filter((key) => yattrs[key] !== null).length;
   for (let i = 0; i < keys.length && eq; i++) {
     const key = keys[i];
     const l = pattrs[key];
@@ -900,20 +963,6 @@ const equalAttrs = (pattrs, yattrs) => {
   return eq
 };
 
-const equalMarks = (pmarks, yattrs) => {
-  const keys = Object.keys(yattrs).filter((key) => key.startsWith(MarkPrefix));
-  let eq =
-    keys.length === pmarks.length;
-  const pMarkAttr = nodeMarksToAttributes(pmarks);
-  for (let i = 0; i < keys.length && eq; i++) {
-    const key = keys[i];
-    const l = pMarkAttr[key];
-    const r = yattrs[key];
-    eq = key === 'ychange' || f.equalityDeep(l, r);
-  }
-  return eq
-};
-
 /**
  * @typedef {Array<Array<PModel.Node>|PModel.Node>} NormalizedPNodeContent
  */
@@ -948,17 +997,14 @@ const normalizePNodeContent = (pnode) => {
 const equalYTextPText = (ytext, ptexts) => {
   const delta = ytext.toDelta();
   return delta.length === ptexts.length &&
-    delta.every((d, i) =>
+    delta.every(/** @type {(d:any,i:number) => boolean} */ (d, i) =>
       d.insert === /** @type {any} */ (ptexts[i]).text &&
-      Object.keys(d.attributes || {}).reduce((sum, val) => sum + (Array.isArray(val) ? val.length : 1), 0) === ptexts[i].marks.length &&
-      ptexts[i].marks.every((mark) => {
-        const yattrs = d.attributes || {};
-        if (Array.isArray(yattrs)) {
-          return yattrs.some((yattr) => equalAttrs(mark.attrs, yattr))
-        }
-        return equalAttrs(mark.attrs, yattrs)
-      }
-      )
+      object.keys(d.attributes || {}).length === ptexts[i].marks.length &&
+      object.every(d.attributes, (attr, yattrname) => {
+        const markname = yattr2markname(yattrname);
+        const pmarks = ptexts[i].marks;
+        return equalAttrs(attr, pmarks.find(/** @param {any} mark */ mark => mark.type.name === markname)?.attrs)
+      })
     )
 };
 
@@ -973,8 +1019,7 @@ const equalYTypePNode = (ytype, pnode) => {
   ) {
     const normalizedContent = normalizePNodeContent(pnode);
     return ytype._length === normalizedContent.length &&
-      equalAttrs(pnode.attrs, ytype.getAttributes()) &&
-      equalMarks(pnode.marks, ytype.getAttributes()) &&
+      equalAttrs(ytype.getAttributes(), pnode.attrs) &&
       ytype.toArray().every((ychild, i) =>
         equalYTypePNode(ychild, normalizedContent[i])
       )
@@ -997,10 +1042,10 @@ const mappedIdentity = (mapped, pcontent) =>
 /**
  * @param {Y.XmlElement} ytype
  * @param {PModel.Node} pnode
- * @param {ProsemirrorMapping} mapping
+ * @param {BindingMetadata} meta
  * @return {{ foundMappedChild: boolean, equalityFactor: number }}
  */
-const computeChildEqualityFactor = (ytype, pnode, mapping) => {
+const computeChildEqualityFactor = (ytype, pnode, meta) => {
   const yChildren = ytype.toArray();
   const pChildren = normalizePNodeContent(pnode);
   const pChildCnt = pChildren.length;
@@ -1012,7 +1057,7 @@ const computeChildEqualityFactor = (ytype, pnode, mapping) => {
   for (; left < minCnt; left++) {
     const leftY = yChildren[left];
     const leftP = pChildren[left];
-    if (mappedIdentity(mapping.get(leftY), leftP)) {
+    if (mappedIdentity(meta.mapping.get(leftY), leftP)) {
       foundMappedChild = true; // definite (good) match!
     } else if (!equalYTypePNode(leftY, leftP)) {
       break
@@ -1021,7 +1066,7 @@ const computeChildEqualityFactor = (ytype, pnode, mapping) => {
   for (; left + right < minCnt; right++) {
     const rightY = yChildren[yChildCnt - right - 1];
     const rightP = pChildren[pChildCnt - right - 1];
-    if (mappedIdentity(mapping.get(rightY), rightP)) {
+    if (mappedIdentity(meta.mapping.get(rightY), rightP)) {
       foundMappedChild = true;
     } else if (!equalYTypePNode(rightY, rightP)) {
       break
@@ -1033,6 +1078,9 @@ const computeChildEqualityFactor = (ytype, pnode, mapping) => {
   }
 };
 
+/**
+ * @param {Y.Text} ytext
+ */
 const ytextTrans = (ytext) => {
   let str = '';
   /**
@@ -1061,14 +1109,14 @@ const ytextTrans = (ytext) => {
  *
  * @param {Y.Text} ytext
  * @param {Array<any>} ptexts
- * @param {ProsemirrorMapping} mapping
+ * @param {BindingMetadata} meta
  */
-const updateYText = (ytext, ptexts, mapping) => {
-  mapping.set(ytext, ptexts);
+const updateYText = (ytext, ptexts, meta) => {
+  meta.mapping.set(ytext, ptexts);
   const { nAttrs, str } = ytextTrans(ytext);
   const content = ptexts.map((p) => ({
     insert: /** @type {any} */ (p).text,
-    attributes: Object.assign({}, nAttrs, marksToAttributes(p.marks))
+    attributes: Object.assign({}, nAttrs, marksToAttributes(p.marks, meta))
   }));
   const { insert, remove, index } = simpleDiff(
     str,
@@ -1081,30 +1129,40 @@ const updateYText = (ytext, ptexts, mapping) => {
   );
 };
 
-const marksToAttributes = (marks) => {
-  const pattrs = {};
-  marks.forEach((mark) => {
-    if (mark.type.name !== 'ychange') {
-      if (pattrs[mark.type.name] && Array.isArray(pattrs[mark.type.name])) {
-        // already has multiple marks of same type
-        pattrs[mark.type.name].push(mark.attrs);
-      } else if (pattrs[mark.type.name]) {
-        // already has mark of same type, change to array
-        pattrs[mark.type.name] = [pattrs[mark.type.name], mark.attrs];
-      } else {
-        // first mark of this type
-        pattrs[mark.type.name] = mark.attrs;
-      }
-    }
-  });
-  return pattrs
+const hashedMarkNameRegex = /(.*)(--[a-zA-Z0-9+/=]{8})$/;
+/**
+ * @param {string} attrName
+ */
+const yattr2markname = attrName => hashedMarkNameRegex.exec(attrName)?.[1] ?? attrName;
+
+/**
+ * @todo move this to markstoattributes
+ *
+ * @param {Object<string, any>} attrs
+ * @param {import('prosemirror-model').Schema} schema
+ */
+const attributesToMarks = (attrs, schema) => {
+  /**
+   * @type {Array<import('prosemirror-model').Mark>}
+   */
+  const marks = [];
+  for (const markName in attrs) {
+    // remove hashes if necessary
+    marks.push(schema.mark(yattr2markname(markName), attrs[markName]));
+  }
+  return marks
 };
 
-const nodeMarksToAttributes = (marks) => {
+/**
+ * @param {Array<import('prosemirror-model').Mark>} marks
+ * @param {BindingMetadata} meta
+ */
+const marksToAttributes = (marks, meta) => {
   const pattrs = {};
   marks.forEach((mark) => {
     if (mark.type.name !== 'ychange') {
-      pattrs[`${MarkPrefix}${mark.type.name}`] = mark.toJSON();
+      const isOverlapping = map.setIfUndefined(meta.isOMark, mark.type, () => !mark.type.excludes(mark.type));
+      pattrs[isOverlapping ? `${mark.type.name}--${hashOfJSON(mark.toJSON())}` : mark.type.name] = mark.attrs;
     }
   });
   return pattrs
@@ -1113,7 +1171,7 @@ const nodeMarksToAttributes = (marks) => {
 /**
  * Update a yDom node by syncing the current content of the prosemirror node.
  *
- * This is a y-tiptap internal feature that you can use at your own risk.
+ * This is a y-prosemirror internal feature that you can use at your own risk.
  *
  * @private
  * @unstable
@@ -1121,27 +1179,24 @@ const nodeMarksToAttributes = (marks) => {
  * @param {{transact: Function}} y
  * @param {Y.XmlFragment} yDomFragment
  * @param {any} pNode
- * @param {ProsemirrorMapping} mapping
+ * @param {BindingMetadata} meta
  */
-const updateYFragment = (y, yDomFragment, pNode, mapping) => {
+const updateYFragment = (y, yDomFragment, pNode, meta) => {
   if (
     yDomFragment instanceof Y.XmlElement &&
     yDomFragment.nodeName !== pNode.type.name
   ) {
     throw new Error('node name mismatch!')
   }
-  mapping.set(yDomFragment, pNode);
+  meta.mapping.set(yDomFragment, pNode);
   // update attributes
   if (yDomFragment instanceof Y.XmlElement) {
     const yDomAttrs = yDomFragment.getAttributes();
     const pAttrs = pNode.attrs;
-    const pNodeMarksAttr = nodeMarksToAttributes(pNode.marks);
-    const attrs = { ...pAttrs, ...pNodeMarksAttr };
-
-    for (const key in attrs) {
-      if (attrs[key] !== null) {
-        if (yDomAttrs[key] !== attrs[key] && key !== 'ychange') {
-          yDomFragment.setAttribute(key, attrs[key]);
+    for (const key in pAttrs) {
+      if (pAttrs[key] !== null) {
+        if (yDomAttrs[key] !== pAttrs[key] && key !== 'ychange') {
+          yDomFragment.setAttribute(key, pAttrs[key]);
         }
       } else {
         yDomFragment.removeAttribute(key);
@@ -1149,7 +1204,7 @@ const updateYFragment = (y, yDomFragment, pNode, mapping) => {
     }
     // remove all keys that are no longer in pAttrs
     for (const key in yDomAttrs) {
-      if (attrs[key] === undefined) {
+      if (pAttrs[key] === undefined) {
         yDomFragment.removeAttribute(key);
       }
     }
@@ -1166,10 +1221,10 @@ const updateYFragment = (y, yDomFragment, pNode, mapping) => {
   for (; left < minCnt; left++) {
     const leftY = yChildren[left];
     const leftP = pChildren[left];
-    if (!mappedIdentity(mapping.get(leftY), leftP)) {
+    if (!mappedIdentity(meta.mapping.get(leftY), leftP)) {
       if (equalYTypePNode(leftY, leftP)) {
         // update mapping
-        mapping.set(leftY, leftP);
+        meta.mapping.set(leftY, leftP);
       } else {
         break
       }
@@ -1179,10 +1234,10 @@ const updateYFragment = (y, yDomFragment, pNode, mapping) => {
   for (; right + left + 1 < minCnt; right++) {
     const rightY = yChildren[yChildCnt - right - 1];
     const rightP = pChildren[pChildCnt - right - 1];
-    if (!mappedIdentity(mapping.get(rightY), rightP)) {
+    if (!mappedIdentity(meta.mapping.get(rightY), rightP)) {
       if (equalYTypePNode(rightY, rightP)) {
         // update mapping
-        mapping.set(rightY, rightP);
+        meta.mapping.set(rightY, rightP);
       } else {
         break
       }
@@ -1197,7 +1252,7 @@ const updateYFragment = (y, yDomFragment, pNode, mapping) => {
       const rightP = pChildren[pChildCnt - right - 1];
       if (leftY instanceof Y.XmlText && leftP instanceof Array) {
         if (!equalYTextPText(leftY, leftP)) {
-          updateYText(leftY, leftP, mapping);
+          updateYText(leftY, leftP, meta);
         }
         left += 1;
       } else {
@@ -1210,12 +1265,12 @@ const updateYFragment = (y, yDomFragment, pNode, mapping) => {
           const equalityLeft = computeChildEqualityFactor(
             /** @type {Y.XmlElement} */ (leftY),
             /** @type {PModel.Node} */ (leftP),
-            mapping
+            meta
           );
           const equalityRight = computeChildEqualityFactor(
             /** @type {Y.XmlElement} */ (rightY),
             /** @type {PModel.Node} */ (rightP),
-            mapping
+            meta
           );
           if (
             equalityLeft.foundMappedChild && !equalityRight.foundMappedChild
@@ -1238,7 +1293,7 @@ const updateYFragment = (y, yDomFragment, pNode, mapping) => {
             y,
             /** @type {Y.XmlFragment} */ (leftY),
             /** @type {PModel.Node} */ (leftP),
-            mapping
+            meta
           );
           left += 1;
         } else if (updateRight) {
@@ -1246,14 +1301,14 @@ const updateYFragment = (y, yDomFragment, pNode, mapping) => {
             y,
             /** @type {Y.XmlFragment} */ (rightY),
             /** @type {PModel.Node} */ (rightP),
-            mapping
+            meta
           );
           right += 1;
         } else {
-          mapping.delete(yDomFragment.get(left));
+          meta.mapping.delete(yDomFragment.get(left));
           yDomFragment.delete(left, 1);
           yDomFragment.insert(left, [
-            createTypeFromTextOrElementNode(leftP, mapping)
+            createTypeFromTextOrElementNode(leftP, meta)
           ]);
           left += 1;
         }
@@ -1263,18 +1318,18 @@ const updateYFragment = (y, yDomFragment, pNode, mapping) => {
     if (
       yChildCnt === 1 && pChildCnt === 0 && yChildren[0] instanceof Y.XmlText
     ) {
-      mapping.delete(yChildren[0]);
-      // Edge case handling https://github.com/yjs/y-tiptap/issues/108
+      meta.mapping.delete(yChildren[0]);
+      // Edge case handling https://github.com/yjs/y-prosemirror/issues/108
       // Only delete the content of the Y.Text to retain remote changes on the same Y.Text object
       yChildren[0].delete(0, yChildren[0].length);
     } else if (yDelLen > 0) {
-      yDomFragment.slice(left, left + yDelLen).forEach(type => mapping.delete(type));
+      yDomFragment.slice(left, left + yDelLen).forEach(type => meta.mapping.delete(type));
       yDomFragment.delete(left, yDelLen);
     }
     if (left + right < pChildCnt) {
       const ins = [];
       for (let i = left; i < pChildCnt - right; i++) {
-        ins.push(createTypeFromTextOrElementNode(pChildren[i], mapping));
+        ins.push(createTypeFromTextOrElementNode(pChildren[i], meta));
       }
       yDomFragment.insert(left, ins);
     }
@@ -1484,7 +1539,7 @@ const yXmlFragmentToProseMirrorFragment = (yXmlFragment, schema) => {
     createNodeFromYElement(
       /** @type {Y.XmlElement} */ (t),
       schema,
-      new Map()
+      createEmptyMeta()
     )
   ).filter((n) => n !== null);
   return Fragment.fromArray(fragmentContent)
@@ -1505,21 +1560,20 @@ const yXmlFragmentToProseMirrorRootNode = (yXmlFragment, schema) =>
  *
  * @param {Y.XmlFragment} yXmlFragment
  * @param {Schema} schema
+ *
+ * @todo deprecate mapping property
  */
 const initProseMirrorDoc = (yXmlFragment, schema) => {
-  /**
-   * @type {ProsemirrorMapping}
-   */
-  const mapping = new Map();
+  const meta = createEmptyMeta();
   const fragmentContent = yXmlFragment.toArray().map((t) =>
     createNodeFromYElement(
       /** @type {Y.XmlElement} */ (t),
       schema,
-      mapping
+      meta
     )
   ).filter((n) => n !== null);
   const doc = schema.topNodeType.create(null, Fragment.fromArray(fragmentContent));
-  return { doc, mapping }
+  return { doc, meta, mapping: meta.mapping }
 };
 
 /**
@@ -1562,7 +1616,7 @@ function prosemirrorToYDoc (doc, xmlFragment = 'prosemirror') {
 function prosemirrorToYXmlFragment (doc, xmlFragment) {
   const type = xmlFragment || new Y.XmlFragment();
   const ydoc = type.doc ? type.doc : { transact: (transaction) => transaction(undefined) };
-  updateYFragment(ydoc, type, doc, new Map());
+  updateYFragment(ydoc, type, doc, { mapping: new Map(), isOMark: new Map() });
   return type
 }
 
@@ -1658,7 +1712,10 @@ function yDocToProsemirrorJSON (
 function yXmlFragmentToProsemirrorJSON (xmlFragment) {
   const items = xmlFragment.toArray();
 
-  function serialize (item) {
+  /**
+   * @param {Y.AbstractType} item
+   */
+  const serialize = item => {
     /**
      * @type {Object} NodeObject
      * @property {string} NodeObject.type
@@ -1668,79 +1725,49 @@ function yXmlFragmentToProsemirrorJSON (xmlFragment) {
     let response;
 
     // TODO: Must be a better way to detect text nodes than this
-    if (!item.nodeName) {
+    if (item instanceof Y.XmlText) {
       const delta = item.toDelta();
-      response = delta.map((d) => {
+      response = delta.map(/** @param {any} d */ (d) => {
         const text = {
           type: 'text',
           text: d.insert
         };
-
         if (d.attributes) {
-          const marks = [];
-
-          Object.keys(d.attributes).forEach((type) => {
-            const attrs = d.attributes[type];
-            if (Array.isArray(attrs)) {
-              // multiple marks of same type
-              attrs.forEach(singleAttrs => {
-                const mark = {
-                  type
-                };
-
-                if (Object.keys(singleAttrs)) {
-                  mark.attrs = singleAttrs;
-                }
-
-                marks.push(mark);
-              });
-            } else {
-              const mark = {
-                type
-              };
-
-              if (Object.keys(attrs)) {
-                mark.attrs = attrs;
-              }
-
-              marks.push(mark);
+          text.marks = Object.keys(d.attributes).map((type_) => {
+            const attrs = d.attributes[type_];
+            const type = yattr2markname(type_);
+            const mark = {
+              type
+            };
+            if (Object.keys(attrs)) {
+              mark.attrs = attrs;
             }
+            return mark
           });
-
-          text.marks = marks;
         }
         return text
       });
-    } else {
+    } else if (item instanceof Y.XmlElement) {
       response = {
         type: item.nodeName
       };
 
       const attrs = item.getAttributes();
-
-      // Add all non-mark attributes to the element
-      for (const key of Object.keys(attrs).filter((key) => !key.startsWith(MarkPrefix))) {
-        if (!response.attrs) response.attrs = {};
-        response.attrs[key] = attrs[key];
-      }
-
-      // Check whether the attrs contains marks, if so, add them to the response
-      if (Object.keys(attrs).some((key) => key.startsWith(MarkPrefix))) {
-        response.marks = Object.keys(attrs)
-          .filter((key) => key.startsWith(MarkPrefix))
-          .map((key) => {
-            return attrs[key]
-          });
+      if (Object.keys(attrs).length) {
+        response.attrs = attrs;
       }
 
       const children = item.toArray();
       if (children.length) {
         response.content = children.map(serialize).flat();
       }
+    } else {
+      // expected either Y.XmlElement or Y.XmlText
+      error.unexpectedCase();
     }
 
     return response
-  }
+  };
 
   return {
     type: 'doc',
@@ -1783,7 +1810,7 @@ const defaultCursorBuilder = (user) => {
  * Default generator for the selection attributes
  *
  * @param {any} user user data
- * @return {import('@tiptap/pm/view').DecorationAttrs}
+ * @return {import('prosemirror-view').DecorationAttrs}
  */
 const defaultSelectionBuilder = (user) => {
   return {
@@ -1798,8 +1825,8 @@ const rxValidColor = /^#[0-9a-fA-F]{6}$/;
  * @param {any} state
  * @param {Awareness} awareness
  * @param {function(number, number, any):boolean} awarenessFilter
- * @param {function({ name: string, color: string }):Element} createCursor
- * @param {function({ name: string, color: string }):import('@tiptap/pm/view').DecorationAttrs} createSelection
+ * @param {(user: { name: string, color: string }, clientId: number) => Element} createCursor
+ * @param {(user: { name: string, color: string }, clientId: number) => import('prosemirror-view').DecorationAttrs} createSelection
  * @return {any} DecorationSet
  */
 const createDecorations = (
@@ -1829,7 +1856,7 @@ const createDecorations = (
       if (user.color == null) {
         user.color = '#ffa500';
       } else if (!rxValidColor.test(user.color)) {
-        // We only support 6-digit RGB colors in y-tiptap
+        // We only support 6-digit RGB colors in y-prosemirror
         console.warn('A user uses an unsupported color format', user);
       }
       if (user.name == null) {
@@ -1852,7 +1879,7 @@ const createDecorations = (
         anchor = math.min(anchor, maxsize);
         head = math.min(head, maxsize);
         decorations.push(
-          Decoration.widget(head, () => createCursor(user), {
+          Decoration.widget(head, () => createCursor(user, clientId), {
             key: clientId + '',
             side: 10
           })
@@ -1860,7 +1887,7 @@ const createDecorations = (
         const from = math.min(anchor, head);
         const to = math.max(anchor, head);
         decorations.push(
-          Decoration.inline(from, to, createSelection(user), {
+          Decoration.inline(from, to, createSelection(user, clientId), {
             inclusiveEnd: true,
             inclusiveStart: false
           })
@@ -1879,8 +1906,8 @@ const createDecorations = (
  * @param {Awareness} awareness
  * @param {object} opts
  * @param {function(any, any, any):boolean} [opts.awarenessStateFilter]
- * @param {function(any):HTMLElement} [opts.cursorBuilder]
- * @param {function(any):import('@tiptap/pm/view').DecorationAttrs} [opts.selectionBuilder]
+ * @param {(user: any, clientId: number) => HTMLElement} [opts.cursorBuilder]
+ * @param {(user: any, clientId: number) => import('prosemirror-view').DecorationAttrs} [opts.selectionBuilder]
  * @param {function(any):any} [opts.getSelection]
  * @param {string} [cursorStateField] By default all editor bindings use the awareness 'cursor' field to propagate cursor information.
  * @return {any}
@@ -2027,7 +2054,7 @@ const defaultDeleteFilter = (item, protectedNodes) => !(item instanceof Item) ||
   (item.content.type instanceof XmlElement && protectedNodes.has(item.content.type.nodeName))) ||
 item.content.type._length === 0;
 
-const yUndoPlugin = ({ protectedNodes = defaultProtectedNodes, trackedOrigins = [], undoManager = null } = {}) => new Plugin({
+const yUndoPlugin = ({ protectedNodes = defaultProtectedNodes, trackedOrigins = [], undoManager = null } = {}) => new Plugin$1({
   key: yUndoPluginKey,
   state: {
     init: (initargs, state) => {