feat: bump y deps/patches, add blockMatchNodes, update suggestion attribution marks

Author: nperez0111

packages/core/package.json

@@ -109,7 +109,7 @@
     "@tiptap/pm": "^3.13.0",
     "emoji-mart": "^5.6.0",
     "fast-deep-equal": "^3.1.3",
-    "lib0": "1.0.0-rc.13",
+    "lib0": "1.0.0-rc.14",
     "prosemirror-highlight": "^0.15.1",
     "prosemirror-model": "^1.25.4",
     "prosemirror-state": "^1.4.4",
@@ -131,7 +131,7 @@
     "y-prosemirror": "^1.3.7",
     "y-protocols": "^1.0.6",
     "yjs": "^13.6.27",
-    "@y/y": "^14.0.0-rc.16",
+    "@y/y": "^14.0.0-rc.17",
     "@y/prosemirror": "^2.0.0-2",
     "@y/protocols": "^1.0.6-rc.1"
   },

packages/core/src/extensions/tiptap-extensions/Suggestions/SuggestionMarks.ts

@@ -6,13 +6,30 @@ import { MarkSpec } from "prosemirror-model";
 
 // The ideal solution would be to not depend on tiptap nodes / marks, but be able to use prosemirror nodes / marks directly
 // this way we could directly use the exported marks from @handlewithcare/prosemirror-suggest-changes
+
+const formatAttributionTitle = (
+  action: string,
+  userIds: readonly string[] | null,
+  timestamp: number | null,
+): string => {
+  const who = userIds && userIds.length > 0 ? userIds.join(", ") : "unknown";
+  const when =
+    timestamp != null
+      ? new Date(timestamp).toLocaleString([], {
+          dateStyle: "medium",
+          timeStyle: "short",
+        })
+      : "unknown time";
+  return `${action} by ${who} on ${when}`;
+};
 export const SuggestionAddMark = Mark.create({
   name: "y-attributed-insert",
   inclusive: false,
-  excludes: "",
+  // excludes: "", TODO: what's desired?
   addAttributes() {
     return {
-      id: { default: null, validate: "number" }, // note: validate is supported in prosemirror but not in tiptap, so this doesn't actually work (considered not critical)
+      userIds: { default: null },
+      timestamp: { default: null },
       "user-color": { default: null, validate: "string" },
     };
   },
@@ -28,7 +45,13 @@ export const SuggestionAddMark = Mark.create({
         return [
           "ins",
           {
-            "data-id": String(mark.attrs["id"]),
+            "data-description": formatAttributionTitle(
+              "Inserted",
+              mark.attrs["userIds"],
+              mark.attrs["timestamp"],
+            ),
+            "data-user-ids": JSON.stringify(mark.attrs["userIds"]),
+            "data-timestamp": String(mark.attrs["timestamp"]),
             "data-user-color": String(mark.attrs["user-color"]),
             "data-inline": String(inline),
             style:
@@ -44,12 +67,15 @@ export const SuggestionAddMark = Mark.create({
         {
           tag: "ins",
           getAttrs(node) {
-            if (!node.dataset["id"]) {
+            if (!node.dataset["userIds"]) {
               return false;
             }
             return {
-              id: parseInt(node.dataset["id"], 10),
-              userColor: node.dataset["userColor"],
+              userIds: JSON.parse(node.dataset["userIds"]),
+              timestamp: node.dataset["timestamp"]
+                ? parseInt(node.dataset["timestamp"], 10)
+                : null,
+              "user-color": node.dataset["userColor"],
             };
           },
         },
@@ -61,10 +87,11 @@ export const SuggestionAddMark = Mark.create({
 export const SuggestionDeleteMark = Mark.create({
   name: "y-attributed-delete",
   inclusive: false,
-  excludes: "",
+  // excludes: "", TODO: what's desired?
   addAttributes() {
     return {
-      id: { default: null, validate: "number" }, // note: validate is supported in prosemirror but not in tiptap
+      userIds: { default: null },
+      timestamp: { default: null },
       "user-color": { default: null, validate: "string" },
     };
   },
@@ -76,14 +103,17 @@ export const SuggestionDeleteMark = Mark.create({
       blocknoteIgnore: true,
       inclusive: false,
 
-      // attrs: {
-      //   id: { validate: "number" },
-      // },
       toDOM(mark, inline) {
         return [
           "del",
           {
-            "data-id": String(mark.attrs["id"]),
+            "data-description": formatAttributionTitle(
+              "Deleted",
+              mark.attrs["userIds"],
+              mark.attrs["timestamp"],
+            ),
+            "data-user-ids": JSON.stringify(mark.attrs["userIds"]),
+            "data-timestamp": String(mark.attrs["timestamp"]),
             "data-user-color": String(mark.attrs["user-color"]),
             "data-inline": String(inline),
             style:
@@ -99,12 +129,15 @@ export const SuggestionDeleteMark = Mark.create({
         {
           tag: "del",
           getAttrs(node) {
-            if (!node.dataset["id"]) {
+            if (!node.dataset["userIds"]) {
               return false;
             }
             return {
-              id: parseInt(node.dataset["id"], 10),
-              userColor: node.dataset["userColor"],
+              userIds: JSON.parse(node.dataset["userIds"]),
+              timestamp: node.dataset["timestamp"]
+                ? parseInt(node.dataset["timestamp"], 10)
+                : null,
+              "user-color": node.dataset["userColor"],
             };
           },
         },
@@ -116,10 +149,12 @@ export const SuggestionDeleteMark = Mark.create({
 export const SuggestionModificationMark = Mark.create({
   name: "y-attributed-format",
   inclusive: false,
-  excludes: "",
+  // excludes: "", TODO: what's desired?
   addAttributes() {
     return {
-      id: { default: null, validate: "number" }, // note: validate is supported in prosemirror but not in tiptap
+      userIds: { default: null },
+      format: { default: null },
+      timestamp: { default: null },
       "user-color": { default: null, validate: "string" },
     };
   },
@@ -134,8 +169,15 @@ export const SuggestionModificationMark = Mark.create({
         return [
           inline ? "span" : "div",
           {
+            "data-description": formatAttributionTitle(
+              "Modified",
+              mark.attrs["userIds"],
+              mark.attrs["timestamp"],
+            ),
             "data-type": "modification",
-            "data-id": String(mark.attrs["id"]),
+            "data-user-ids": JSON.stringify(mark.attrs["userIds"]),
+            "data-format": JSON.stringify(mark.attrs["format"]),
+            "data-timestamp": String(mark.attrs["timestamp"]),
             "data-user-color": String(mark.attrs["user-color"]),
             style:
               (inline ? "" : "display: contents") +
@@ -150,23 +192,35 @@ export const SuggestionModificationMark = Mark.create({
         {
           tag: "span[data-type='modification']",
           getAttrs(node) {
-            if (!node.dataset["id"]) {
+            if (!node.dataset["userIds"]) {
               return false;
             }
             return {
-              id: parseInt(node.dataset["id"], 10),
+              userIds: JSON.parse(node.dataset["userIds"]),
+              format: node.dataset["format"]
+                ? JSON.parse(node.dataset["format"])
+                : null,
+              timestamp: node.dataset["timestamp"]
+                ? parseInt(node.dataset["timestamp"], 10)
+                : null,
               "user-color": node.dataset["userColor"],
             };
           },
         },
         {
           tag: "div[data-type='modification']",
           getAttrs(node) {
-            if (!node.dataset["id"]) {
+            if (!node.dataset["userIds"]) {
               return false;
             }
             return {
-              id: parseInt(node.dataset["id"], 10),
+              userIds: JSON.parse(node.dataset["userIds"]),
+              format: node.dataset["format"]
+                ? JSON.parse(node.dataset["format"])
+                : null,
+              timestamp: node.dataset["timestamp"]
+                ? parseInt(node.dataset["timestamp"], 10)
+                : null,
               "user-color": node.dataset["userColor"],
             };
           },

packages/core/src/extensions/tiptap-extensions/UniqueID/UniqueID.ts

@@ -4,9 +4,9 @@ import {
   findChildrenInRange,
   getChangedRanges,
 } from "@tiptap/core";
-import { Fragment, Slice } from "prosemirror-model";
-import { Plugin, PluginKey } from "prosemirror-state";
 import { uuidv4 } from "lib0/random";
+import { Fragment, Node, Slice } from "prosemirror-model";
+import { Plugin, PluginKey } from "prosemirror-state";
 import { isSuggestedDeletionNode } from "../../../api/getBlockInfoFromPos.js";
 
 /**
@@ -42,6 +42,20 @@ function findDuplicates(items: any) {
   return duplicates;
 }
 
+/**
+ * Whether a node is marked as deleted by a suggestion (carries the
+ * `y-attributed-delete` node mark).
+ *
+ * Under the suggestion/matchNodes binding, changing a block's content type
+ * renders the block as a deleted copy (this mark) next to its inserted
+ * replacement - and both copies share the same `id`. The deleted copy must be
+ * ignored by the uniqueness logic, otherwise its `id` looks like a duplicate
+ * and we'd regenerate the `id` on the surviving block.
+ */
+function isMarkedDeleted(node: Node) {
+  return node.marks.some((mark) => mark.type.name === "y-attributed-delete");
+}
+
 const UniqueID = Extension.create({
   name: "uniqueID",
   // we’ll set a very high priority to make sure this runs first
@@ -163,6 +177,10 @@ const UniqueID = Extension.create({
             const duplicatedNewIds = findDuplicates(newIds);
 
             newNodes.forEach(({ node, pos }) => {
+              // ignore ids on blocks marked as deleted (see above).
+              if (isMarkedDeleted(node)) {
+                return;
+              }
               // instead of checking `node.attrs[attributeName]` directly
               // we look at the current state of the node within `tr.doc`.
               // this helps to prevent adding new ids to the same node

packages/core/src/y/extensions/YSync.ts

@@ -3,6 +3,7 @@ import {
   type ExtensionOptions,
   createExtension,
 } from "../../editor/BlockNoteExtension.js";
+import { blockMatchNodes } from "./blockMatchNodes.js";
 import { CollaborationOptions } from "./index.js";
 
 /**
@@ -70,22 +71,26 @@ const mapAttributionToMark = (
 
   if (attribution.insert) {
     out["y-attributed-insert"] = {
-      id: attribution.insert[0] ?? null,
+      userIds: attribution.insert,
+      timestamp: attribution.insertAt ?? null,
       "user-color": colorForUserIds(attribution.insert),
     };
   }
 
   if (attribution.delete) {
     out["y-attributed-delete"] = {
-      id: attribution.delete[0] ?? null,
+      userIds: attribution.delete,
+      timestamp: attribution.deleteAt ?? null,
       "user-color": colorForUserIds(attribution.delete),
     };
   }
 
   if (attribution.format) {
     const userIds = [...new Set(Object.values(attribution.format).flat())];
     out["y-attributed-format"] = {
-      id: userIds[0] ?? null,
+      userIds,
+      format: attribution.format,
+      timestamp: attribution.formatAt ?? null,
       "user-color": colorForUserIds(userIds),
     };
   }
@@ -118,6 +123,14 @@ export const YSyncExtension = createExtension(
         syncPlugin({
           suggestionDoc: options.suggestionDoc,
           mapAttributionToMark,
+          // Node-pairing policy for the PM->Y diff: a `blockContainer` whose
+          // block-content type changes is treated as a *different* node, so the
+          // diff replaces the whole container (deleted + inserted siblings in
+          // the blockGroup) instead of producing two block-contents in one
+          // container => schema-invalid. No schema change / storage transform
+          // needed; `blockContainer` already whitelists the `y-attributed-*`
+          // marks. See blockMatchNodes.ts.
+          matchNodes: blockMatchNodes,
         }),
       ],
       runsBefore: ["default"],

packages/core/src/y/extensions/blockMatchNodes.ts

@@ -0,0 +1,50 @@
+import * as delta from "lib0/delta";
+
+/**
+ * Canonical name of a content delta's first block child (the child carried by an
+ * insert op), or `null`. For a BlockNote `blockContainer` (content
+ * `blockContent blockGroup?`) this is its block-content type (paragraph,
+ * heading, image, ...).
+ */
+const firstChildName = (d: delta.DeltaAny): string | null => {
+  for (const op of (d as any).children) {
+    if (delta.$insertOp.check(op)) {
+      for (const it of op.insert) {
+        if (delta.$deltaAny.check(it)) {
+          return it.name;
+        }
+      }
+    }
+  }
+  return null;
+};
+
+/**
+ * BlockNote's node-pairing policy for y-prosemirror's `matchNodes` option
+ * (forwarded to `lib0/delta.diff`). This is the schema-specific bit that lives
+ * in userland - the binding itself stays schema-agnostic.
+ *
+ * A `blockContainer` holds exactly one block content (`blockContent
+ * blockGroup?`). Diffing a *type change* of that content as an in-place child
+ * delete+insert would, under a suggestion, tombstone the old content next to the
+ * new one => two block-contents in one container => schema-invalid. So we
+ * declare a container's identity to be its first block-content child's type:
+ * when that changes, the two containers are reported as *different*, the PM->Y
+ * diff replaces the whole container, and the deleted + inserted containers sit
+ * as siblings in the blockGroup (`blockGroupChild+` allows that). Each carries
+ * the `y-attributed-*` node mark - which `blockContainer` already whitelists -
+ * so no schema change and no storage transform are needed. A plain text edit
+ * keeps the same first-child type => same identity => the diff descends and
+ * merges as usual.
+ *
+ * @param a removed (old) node
+ * @param b inserted (new) node
+ * @returns whether `a` and `b` are the same node (diff in place) vs different (replace)
+ */
+export const blockMatchNodes = (
+  a: delta.DeltaAny,
+  b: delta.DeltaAny,
+): boolean =>
+  (a as any).name === (b as any).name &&
+  ((a as any).name !== "blockContainer" ||
+    firstChildName(a) === firstChildName(b));

packages/core/src/y/index.ts

@@ -1,3 +1,4 @@
 export * from "./extensions/index.js";
 export * from "./utils.js";
 export * from "./comments/index.js";
+export * from "./versioning/index.js";