feat: support overlapping marks #34 based on (#52)

src/lib.js

@@ -1,4 +1,4 @@
-import { updateYFragment, createNodeFromYElement } from './plugins/sync-plugin.js' // eslint-disable-line
+import { updateYFragment, createNodeFromYElement, MarkPrefix } from './plugins/sync-plugin.js' // eslint-disable-line
 import { ySyncPluginKey } from './plugins/keys.js'
 import * as Y from 'yjs'
 import { EditorView } from 'prosemirror-view' // eslint-disable-line
@@ -395,18 +395,37 @@ export function yXmlFragmentToProsemirrorJSON (xmlFragment) {
         }
 
         if (d.attributes) {
-          text.marks = Object.keys(d.attributes).map((type) => {
+          const marks = []
+
+          Object.keys(d.attributes).forEach((type) => {
             const attrs = d.attributes[type]
-            const mark = {
-              type
-            }
+            if (Array.isArray(attrs)) {
+              // multiple marks of same type
+              attrs.forEach(singleAttrs => {
+                const mark = {
+                  type
+                }
 
-            if (Object.keys(attrs)) {
-              mark.attrs = attrs
-            }
+                if (Object.keys(singleAttrs)) {
+                  mark.attrs = singleAttrs
+                }
 
-            return mark
+                marks.push(mark)
+              })
+            } else {
+              const mark = {
+                type
+              }
+
+              if (Object.keys(attrs)) {
+                mark.attrs = attrs
+              }
+
+              marks.push(mark)
+            }
           })
+
+          text.marks = marks
         }
         return text
       })
@@ -416,8 +435,20 @@ export function yXmlFragmentToProsemirrorJSON (xmlFragment) {
       }
 
       const attrs = item.getAttributes()
-      if (Object.keys(attrs).length) {
-        response.attrs = attrs
+
+      // 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]
+          })
       }
 
       const children = item.toArray()

src/plugins/sync-plugin.js

@@ -6,7 +6,6 @@ import { createMutex } from 'lib0/mutex'
 import * as PModel from 'prosemirror-model'
 import { Plugin, TextSelection } from "prosemirror-state"; // eslint-disable-line
 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'
@@ -20,6 +19,9 @@ 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'
+
+export const MarkPrefix = '_mark_'
 
 /**
  * @param {Y.Item} item
@@ -723,7 +725,24 @@ export const createNodeFromYElement = (
           : { type: 'added' }
       }
     }
-    const node = schema.node(el.nodeName, attrs, children)
+    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)
     return node
   } catch (e) {
@@ -761,7 +780,15 @@ const createTextNodesFromYText = (
       const delta = deltas[i]
       const marks = []
       for (const markName in delta.attributes) {
-        marks.push(schema.mark(markName, delta.attributes[markName]))
+        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))
     }
@@ -802,12 +829,16 @@ const createTypeFromTextNodes = (nodes, mapping) => {
  */
 const createTypeFromElementNode = (node, mapping) => {
   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) =>
@@ -835,7 +866,7 @@ 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).length
+    Object.keys(yattrs).filter((key) => yattrs[key] !== null && !key.startsWith(MarkPrefix)).length
   for (let i = 0; i < keys.length && eq; i++) {
     const key = keys[i]
     const l = pattrs[key]
@@ -846,6 +877,20 @@ 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
  */
@@ -882,9 +927,14 @@ const equalYTextPText = (ytext, ptexts) => {
   return delta.length === ptexts.length &&
     delta.every((d, i) =>
       d.insert === /** @type {any} */ (ptexts[i]).text &&
-      object.keys(d.attributes || {}).length === ptexts[i].marks.length &&
-      ptexts[i].marks.every((mark) =>
-        equalAttrs(d.attributes[mark.type.name] || {}, mark.attrs)
+      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)
+      }
       )
     )
 }
@@ -900,7 +950,8 @@ const equalYTypePNode = (ytype, pnode) => {
   ) {
     const normalizedContent = normalizePNodeContent(pnode)
     return ytype._length === normalizedContent.length &&
-      equalAttrs(ytype.getAttributes(), pnode.attrs) &&
+      equalAttrs(pnode.attrs, ytype.getAttributes()) &&
+      equalMarks(pnode.marks, ytype.getAttributes()) &&
       ytype.toArray().every((ychild, i) =>
         equalYTypePNode(ychild, normalizedContent[i])
       )
@@ -1011,7 +1062,26 @@ const marksToAttributes = (marks) => {
   const pattrs = {}
   marks.forEach((mark) => {
     if (mark.type.name !== 'ychange') {
-      pattrs[mark.type.name] = mark.attrs
+      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 nodeMarksToAttributes = (marks) => {
+  const pattrs = {}
+  marks.forEach((mark) => {
+    if (mark.type.name !== 'ychange') {
+      pattrs[`${MarkPrefix}${mark.type.name}`] = mark.toJSON()
     }
   })
   return pattrs
@@ -1042,18 +1112,21 @@ export const updateYFragment = (y, yDomFragment, pNode, mapping) => {
   if (yDomFragment instanceof Y.XmlElement) {
     const yDomAttrs = yDomFragment.getAttributes()
     const pAttrs = pNode.attrs
-    for (const key in pAttrs) {
-      if (pAttrs[key] !== null) {
-        if (yDomAttrs[key] !== pAttrs[key] && key !== 'ychange') {
-          yDomFragment.setAttribute(key, pAttrs[key])
+    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])
         }
       } else {
         yDomFragment.removeAttribute(key)
       }
     }
     // remove all keys that are no longer in pAttrs
     for (const key in yDomAttrs) {
-      if (pAttrs[key] === undefined) {
+      if (attrs[key] === undefined) {
         yDomFragment.removeAttribute(key)
       }
     }

tests/complexSchema.js

@@ -157,6 +157,7 @@ export const nodes = {
 const emDOM = ['em', 0]
 const strongDOM = ['strong', 0]
 const codeDOM = ['code', 0]
+const commentDOM = ['span', 0]
 
 // :: Object [Specs](#model.MarkSpec) for the marks in the schema.
 export const marks = {
@@ -224,6 +225,17 @@ export const marks = {
     }
   },
 
+  comment: {
+    attrs: {
+      id: { default: null }
+    },
+    exclude: '', // allow multiple "comments" marks to overlap
+    parseDOM: [{ tag: 'span' }],
+    toDOM () {
+      return commentDOM
+    }
+  },
+
   ychange: {
     attrs: {
       user: { default: null },