@tiptap/y-tiptap 1.0.0 → 1.1.0

package/dist/y-tiptap.cjs

@@ -3,21 +3,24 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var Y = require('yjs');
-var view = require('@tiptap/pm/view');
-var state = require('@tiptap/pm/state');
+var prosemirrorView = require('prosemirror-view');
+var prosemirrorState = require('prosemirror-state');
 require('y-protocols/awareness');
 var mutex = require('lib0/mutex');
-var PModel = require('@tiptap/pm/model');
+var PModel = require('prosemirror-model');
 var math = require('lib0/math');
+var object = require('lib0/object');
 var set = require('lib0/set');
 var diff = require('lib0/diff');
 var error = require('lib0/error');
+var state = require('@tiptap/pm/state');
 var random = require('lib0/random');
 var environment = require('lib0/environment');
 var dom = require('lib0/dom');
 var eventloop = require('lib0/eventloop');
-var f = require('lib0/function');
 var map = require('lib0/map');
+var sha256 = require('lib0/hash/sha256');
+var buf = require('lib0/buffer');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -40,14 +43,16 @@ function _interopNamespace(e) {
 var Y__namespace = /*#__PURE__*/_interopNamespace(Y);
 var PModel__namespace = /*#__PURE__*/_interopNamespace(PModel);
 var math__namespace = /*#__PURE__*/_interopNamespace(math);
+var object__namespace = /*#__PURE__*/_interopNamespace(object);
 var set__namespace = /*#__PURE__*/_interopNamespace(set);
 var error__namespace = /*#__PURE__*/_interopNamespace(error);
 var random__namespace = /*#__PURE__*/_interopNamespace(random);
 var environment__namespace = /*#__PURE__*/_interopNamespace(environment);
 var dom__namespace = /*#__PURE__*/_interopNamespace(dom);
 var eventloop__namespace = /*#__PURE__*/_interopNamespace(eventloop);
-var f__namespace = /*#__PURE__*/_interopNamespace(f);
 var map__namespace = /*#__PURE__*/_interopNamespace(map);
+var sha256__namespace = /*#__PURE__*/_interopNamespace(sha256);
+var buf__namespace = /*#__PURE__*/_interopNamespace(buf);
 
 /**
  * The unique prosemirror plugin key for syncPlugin
@@ -70,11 +75,41 @@ const yUndoPluginKey = new state.PluginKey('y-undo');
  */
 const yCursorPluginKey = new state.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__namespace.toBase64(_convolute(sha256__namespace.digest(buf__namespace.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
@@ -148,7 +183,7 @@ const ySyncPlugin = (yXmlFragment, {
 } = {}) => {
   let initialContentChanged = false;
   const binding = new ProsemirrorBinding(yXmlFragment, mapping);
-  const plugin = new state.Plugin({
+  const plugin = new prosemirrorState.Plugin({
     props: {
       editable: (state) => {
         const syncState = ySyncPluginKey.getState(state);
@@ -281,31 +316,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(state.TextSelection.create(tr.doc, anchor, head));
+    if (relSel.type === 'all') {
+      tr.setSelection(new prosemirrorState.AllSelection(tr.doc));
+    } else if (relSel.type === 'node') {
+      const anchor = relativePositionToAbsolutePosition(
+        binding.doc,
+        binding.type,
+        relSel.anchor,
+        binding.mapping
+      );
+      tr.setSelection(prosemirrorState.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(prosemirrorState.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,
@@ -337,6 +389,12 @@ class ProsemirrorBinding {
     this.prosemirrorView = null;
     this.mux = mutex.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}
@@ -431,7 +489,7 @@ class ProsemirrorBinding {
         createNodeFromYElement(
           /** @type {Y.XmlElement} */ (t),
           this.prosemirrorView.state.schema,
-          this.mapping
+          this
         )
       ).filter((n) => n !== null);
       // @ts-ignore
@@ -456,7 +514,7 @@ class ProsemirrorBinding {
         createNodeFromYElement(
           /** @type {Y.XmlElement} */ (t),
           this.prosemirrorView.state.schema,
-          this.mapping
+          this
         )
       ).filter((n) => n !== null);
       // @ts-ignore
@@ -474,7 +532,7 @@ class ProsemirrorBinding {
         const clampedAnchor = math__namespace.min(math__namespace.max(sel.anchor, 0), tr.doc.content.size);
         const clampedHead = math__namespace.min(math__namespace.max(sel.head, 0), tr.doc.content.size);
 
-        tr.setSelection(state.TextSelection.create(tr.doc, clampedAnchor, clampedHead));
+        tr.setSelection(prosemirrorState.TextSelection.create(tr.doc, clampedAnchor, clampedHead));
       }
       this.prosemirrorView.dispatch(
         tr.setMeta(ySyncPluginKey, { isChangeOrigin: true, binding: this })
@@ -493,6 +551,7 @@ class ProsemirrorBinding {
      * @type {Y.Doc}
      */
     let historyDoc = this.doc;
+    let historyType = this.type;
     if (!snapshot) {
       snapshot = Y__namespace.snapshot(this.doc);
     }
@@ -506,6 +565,29 @@ class ProsemirrorBinding {
       prevSnapshot = Y__namespace.snapshot(historyDoc);
       Y__namespace.applyUpdateV2(historyDoc, snapshot);
       snapshot = Y__namespace.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__namespace.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();
@@ -513,6 +595,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) => {
@@ -539,7 +624,7 @@ class ProsemirrorBinding {
         };
         // Create document fragment and render
         const fragmentContent = Y__namespace.typeListToArraySnapshot(
-          this.type,
+          historyType,
           new Y__namespace.Snapshot(prevSnapshot.ds, snapshot.sv)
         ).map((t) => {
           if (
@@ -549,7 +634,7 @@ class ProsemirrorBinding {
             return createNodeFromYElement(
               t,
               this.prosemirrorView.state.schema,
-              new Map(),
+              { mapping: new Map(), isOMark: new Map() },
               snapshot,
               prevSnapshot,
               computeYChange
@@ -610,7 +695,7 @@ class ProsemirrorBinding {
         createNodeIfNotExists(
           /** @type {Y.XmlElement | Y.XmlHook} */ (t),
           this.prosemirrorView.state.schema,
-          this.mapping
+          this
         )
       ).filter((n) => n !== null);
       // @ts-ignore
@@ -630,9 +715,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
@@ -665,7 +753,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]
@@ -674,18 +762,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__namespace.XmlElement) {
       return createNodeFromYElement(
         el,
         schema,
-        mapping,
+        meta,
         snapshot,
         prevSnapshot,
         computeYChange
@@ -701,7 +789,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]
@@ -710,18 +798,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__namespace.XmlElement) {
+    if (type instanceof Y__namespace.XmlElement) {
       const n = createNodeIfNotExists(
         type,
         schema,
-        mapping,
+        meta,
         snapshot,
         prevSnapshot,
         computeYChange
@@ -733,7 +824,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__namespace.Text && !nextytext._item.deleted && nextytext._item.id.client === nextytext.doc.clientID) {
         type.applyDelta([
           { retain: type.length },
@@ -747,7 +838,7 @@ const createNodeFromYElement = (
       const ns = createTextNodesFromYText(
         type,
         schema,
-        mapping,
+        meta,
         snapshot,
         prevSnapshot,
         computeYChange
@@ -780,32 +871,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
   }
 };
@@ -813,8 +887,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]
@@ -823,7 +897,7 @@ const createNodeFromYElement = (
 const createTextNodesFromYText = (
   text,
   schema,
-  _mapping,
+  _meta,
   snapshot,
   prevSnapshot,
   computeYChange
@@ -833,19 +907,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.
@@ -861,67 +923,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__namespace.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__namespace.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];
@@ -932,20 +997,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__namespace.equalityDeep(l, r);
-  }
-  return eq
-};
-
 /**
  * @typedef {Array<Array<PModel.Node>|PModel.Node>} NormalizedPNodeContent
  */
@@ -980,17 +1031,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__namespace.keys(d.attributes || {}).length === ptexts[i].marks.length &&
+      object__namespace.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)
+      })
     )
 };
 
@@ -1005,8 +1053,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])
       )
@@ -1029,10 +1076,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;
@@ -1044,7 +1091,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
@@ -1053,7 +1100,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
@@ -1065,6 +1112,9 @@ const computeChildEqualityFactor = (ytype, pnode, mapping) => {
   }
 };
 
+/**
+ * @param {Y.Text} ytext
+ */
 const ytextTrans = (ytext) => {
   let str = '';
   /**
@@ -1093,14 +1143,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 } = diff.simpleDiff(
     str,
@@ -1113,30 +1163,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__namespace.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
@@ -1145,7 +1205,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
@@ -1153,27 +1213,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__namespace.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__namespace.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);
@@ -1181,7 +1238,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);
       }
     }
@@ -1198,10 +1255,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
       }
@@ -1211,10 +1268,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
       }
@@ -1229,7 +1286,7 @@ const updateYFragment = (y, yDomFragment, pNode, mapping) => {
       const rightP = pChildren[pChildCnt - right - 1];
       if (leftY instanceof Y__namespace.XmlText && leftP instanceof Array) {
         if (!equalYTextPText(leftY, leftP)) {
-          updateYText(leftY, leftP, mapping);
+          updateYText(leftY, leftP, meta);
         }
         left += 1;
       } else {
@@ -1242,12 +1299,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
@@ -1270,7 +1327,7 @@ const updateYFragment = (y, yDomFragment, pNode, mapping) => {
             y,
             /** @type {Y.XmlFragment} */ (leftY),
             /** @type {PModel.Node} */ (leftP),
-            mapping
+            meta
           );
           left += 1;
         } else if (updateRight) {
@@ -1278,14 +1335,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;
         }
@@ -1295,18 +1352,18 @@ const updateYFragment = (y, yDomFragment, pNode, mapping) => {
     if (
       yChildCnt === 1 && pChildCnt === 0 && yChildren[0] instanceof Y__namespace.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);
     }
@@ -1516,7 +1573,7 @@ const yXmlFragmentToProseMirrorFragment = (yXmlFragment, schema) => {
     createNodeFromYElement(
       /** @type {Y.XmlElement} */ (t),
       schema,
-      new Map()
+      createEmptyMeta()
     )
   ).filter((n) => n !== null);
   return PModel.Fragment.fromArray(fragmentContent)
@@ -1537,21 +1594,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, PModel.Fragment.fromArray(fragmentContent));
-  return { doc, mapping }
+  return { doc, meta, mapping: meta.mapping }
 };
 
 /**
@@ -1594,7 +1650,7 @@ function prosemirrorToYDoc (doc, xmlFragment = 'prosemirror') {
 function prosemirrorToYXmlFragment (doc, xmlFragment) {
   const type = xmlFragment || new Y__namespace.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
 }
 
@@ -1690,7 +1746,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
@@ -1700,79 +1759,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__namespace.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__namespace.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__namespace.unexpectedCase();
     }
 
     return response
-  }
+  };
 
   return {
     type: 'doc',
@@ -1815,7 +1844,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 {
@@ -1830,8 +1859,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 = (
@@ -1849,7 +1878,7 @@ const createDecorations = (
     ystate.binding.mapping.size === 0
   ) {
     // do not render cursors while snapshot is active
-    return view.DecorationSet.create(state.doc, [])
+    return prosemirrorView.DecorationSet.create(state.doc, [])
   }
   awareness.getStates().forEach((aw, clientId) => {
     if (!awarenessFilter(y.clientID, clientId, aw)) {
@@ -1861,7 +1890,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) {
@@ -1884,7 +1913,7 @@ const createDecorations = (
         anchor = math__namespace.min(anchor, maxsize);
         head = math__namespace.min(head, maxsize);
         decorations.push(
-          view.Decoration.widget(head, () => createCursor(user), {
+          prosemirrorView.Decoration.widget(head, () => createCursor(user, clientId), {
             key: clientId + '',
             side: 10
           })
@@ -1892,7 +1921,7 @@ const createDecorations = (
         const from = math__namespace.min(anchor, head);
         const to = math__namespace.max(anchor, head);
         decorations.push(
-          view.Decoration.inline(from, to, createSelection(user), {
+          prosemirrorView.Decoration.inline(from, to, createSelection(user, clientId), {
             inclusiveEnd: true,
             inclusiveStart: false
           })
@@ -1900,7 +1929,7 @@ const createDecorations = (
       }
     }
   });
-  return view.DecorationSet.create(state.doc, decorations)
+  return prosemirrorView.DecorationSet.create(state.doc, decorations)
 };
 
 /**
@@ -1911,8 +1940,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}
@@ -1927,7 +1956,7 @@ const yCursorPlugin = (
   } = {},
   cursorStateField = 'cursor'
 ) =>
-  new state.Plugin({
+  new prosemirrorState.Plugin({
     key: yCursorPluginKey,
     state: {
       init (_, state) {