chore: update excludes & mapAttributionToMark

Author: nperez0111

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

@@ -9,7 +9,7 @@ import { MarkSpec } from "prosemirror-model";
 export const SuggestionAddMark = Mark.create({
   name: "y-attributed-insert",
   inclusive: false,
-  excludes: "y-attributed-delete y-attributed-format y-attributed-insert",
+  excludes: "",
   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)
@@ -61,7 +61,7 @@ export const SuggestionAddMark = Mark.create({
 export const SuggestionDeleteMark = Mark.create({
   name: "y-attributed-delete",
   inclusive: false,
-  excludes: "y-attributed-delete y-attributed-format y-attributed-insert",
+  excludes: "",
   addAttributes() {
     return {
       id: { default: null, validate: "number" }, // note: validate is supported in prosemirror but not in tiptap
@@ -116,16 +116,11 @@ export const SuggestionDeleteMark = Mark.create({
 export const SuggestionModificationMark = Mark.create({
   name: "y-attributed-format",
   inclusive: false,
-  excludes: "y-attributed-delete y-attributed-format y-attributed-insert",
+  excludes: "",
   addAttributes() {
-    // note: validate is supported in prosemirror but not in tiptap
     return {
-      id: { default: null, validate: "number" },
+      id: { default: null, validate: "number" }, // note: validate is supported in prosemirror but not in tiptap
       "user-color": { default: null, validate: "string" },
-      type: { validate: "string" },
-      attrName: { default: null, validate: "string|null" },
-      previousValue: { default: null },
-      newValue: { default: null },
     };
   },
   extendMarkSchema(extension) {
@@ -135,28 +130,18 @@ export const SuggestionModificationMark = Mark.create({
     return {
       blocknoteIgnore: true,
       inclusive: false,
-      // attrs: {
-      //   id: { validate: "number" },
-      //   type: { validate: "string" },
-      //   attrName: { default: null, validate: "string|null" },
-      //   previousValue: { default: null },
-      //   newValue: { default: null },
-      // },
       toDOM(mark, inline) {
         return [
           inline ? "span" : "div",
           {
             "data-type": "modification",
             "data-id": String(mark.attrs["id"]),
             "data-user-color": String(mark.attrs["user-color"]),
-            "data-mod-type": mark.attrs["type"] as string,
-            "data-mod-prev-val": JSON.stringify(mark.attrs["previousValue"]),
-            // TODO: Try to serialize marks with toJSON?
-            "data-mod-new-val": JSON.stringify(mark.attrs["newValue"]),
             style:
-              "user-color" in mark.attrs
-                ? ` --user-color: ${mark.attrs["user-color"]}`
-                : "", // changed to "contents" to make this work for table rows
+              (inline ? "" : "display: contents") +
+              ("user-color" in mark.attrs
+                ? `; --user-color: ${mark.attrs["user-color"]}`
+                : ""),
           },
           0,
         ];
@@ -170,10 +155,7 @@ export const SuggestionModificationMark = Mark.create({
             }
             return {
               id: parseInt(node.dataset["id"], 10),
-              userColor: node.dataset["userColor"],
-              type: node.dataset["modType"],
-              previousValue: node.dataset["modPrevVal"],
-              newValue: node.dataset["modNewVal"],
+              "user-color": node.dataset["userColor"],
             };
           },
         },
@@ -185,8 +167,7 @@ export const SuggestionModificationMark = Mark.create({
             }
             return {
               id: parseInt(node.dataset["id"], 10),
-              type: node.dataset["modType"],
-              previousValue: node.dataset["modPrevVal"],
+              "user-color": node.dataset["userColor"],
             };
           },
         },

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

@@ -5,6 +5,94 @@ import {
 } from "../../editor/BlockNoteExtension.js";
 import { CollaborationOptions } from "./index.js";
 
+/**
+ * Deterministic hash of a string to an unsigned 32-bit integer.
+ */
+const hashStr = (s: string): number => {
+  let h = 0;
+  for (let i = 0; i < s.length; i++) {
+    h = ((h << 5) - h + s.charCodeAt(i)) | 0;
+  }
+  return h >>> 0;
+};
+
+/**
+ * Pick a deterministic user-color from a palette based on user ids.
+ * Must be deterministic so the sync plugin's readback matches the mapper output.
+ */
+const userColorPalette = [
+  "#30bced",
+  "#6eeb83",
+  "#ffbc42",
+  "#ecd444",
+  "#ee6352",
+  "#9ac2c9",
+  "#8acb88",
+  "#1be7ff",
+];
+
+const colorForUserIds = (
+  userIds: readonly string[] | undefined | null,
+): string => {
+  if (!userIds || userIds.length === 0) {
+    return userColorPalette[0];
+  }
+  return userColorPalette[
+    hashStr(String(userIds[0])) % userColorPalette.length
+  ];
+};
+
+/**
+ * Map a Y attribution to BlockNote's `y-attributed-*` mark attrs.
+ *
+ * The mapper must be deterministic in `(format, attribution)` and emit
+ * attrs that exactly match the declared mark schema in SuggestionMarks.ts.
+ * Any mismatch causes the sync plugin to fire phantom reconcile dispatches
+ * in a loop. See ATTRIBUTION.md in @y/prosemirror.
+ *
+ * Declared attrs per mark (all three are the same shape):
+ * - y-attributed-insert: { id, "user-color" }
+ * - y-attributed-delete: { id, "user-color" }
+ * - y-attributed-format: { id, "user-color" }
+ */
+const mapAttributionToMark = (
+  format: Record<string, unknown> | null,
+  attribution: {
+    insert?: readonly string[];
+    delete?: readonly string[];
+    format?: Record<string, readonly string[]>;
+    insertAt?: number;
+    deleteAt?: number;
+    formatAt?: number;
+  },
+): Record<string, unknown> => {
+  const out: Record<string, unknown> = { ...format };
+
+  if (attribution.insert) {
+    out["y-attributed-insert"] = {
+      id: attribution.insert[0] ?? null,
+      "user-color": colorForUserIds(attribution.insert),
+    };
+  }
+
+  if (attribution.delete) {
+    out["y-attributed-delete"] = {
+      id: attribution.delete[0] ?? 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,
+      "user-color": colorForUserIds(userIds),
+    };
+  }
+
+  return out;
+};
+
 export const YSyncExtension = createExtension(
   ({
     options,
@@ -29,27 +117,7 @@ export const YSyncExtension = createExtension(
       prosemirrorPlugins: [
         syncPlugin({
           suggestionDoc: options.suggestionDoc,
-          // // @ts-ignore types are messed up in the @y/prosemirror package right now
-          // mapAttributionToMark(format, attribution) {
-          //   console.log("attribution", attribution);
-          //   console.log("format", format);
-          //   if (attribution.delete) {
-          //     return Object.assign({}, format, {
-          //       deletion: { id, user: attribution.delete?.[0] },
-          //     });
-          //   }
-          //   if (attribution.insert) {
-          //     return Object.assign({}, format, {
-          //       insertion: { id, user: attribution.insert?.[0] },
-          //     });
-          //   }
-          //   if (attribution.format) {
-          //     return Object.assign({}, format, {
-          //       insertion: { id, user: attribution.format?.[0] },
-          //     });
-          //   }
-          //   return format;
-          // },
+          mapAttributionToMark,
         }),
       ],
       runsBefore: ["default"],