@liveblocks/react-tiptap 3.9.1 → 3.9.2-tiptap2

package/dist/index.d.ts

@@ -1,5 +1,7 @@
-import { ContextualPromptContext, ContextualPromptResponse, ThreadData, MentionData, BaseMetadata, DM, HistoryVersion } from '@liveblocks/core';
-import { Content, Extension, Node } from '@tiptap/core';
+import { ContextualPromptContext, ContextualPromptResponse, ThreadData, Relax, MentionData, BaseMetadata, DM, HistoryVersion } from '@liveblocks/core';
+import { LiveblocksYjsProvider } from '@liveblocks/yjs';
+import { Content, Range, Extension, Node } from '@tiptap/core';
+import { Doc, PermanentUserData, Snapshot } from 'yjs';
 import * as react from 'react';
 import { ComponentProps, ReactNode, ComponentType, PropsWithChildren, ComponentPropsWithoutRef, HTMLAttributes } from 'react';
 import { Editor } from '@tiptap/react';
@@ -55,6 +57,135 @@ type LiveblocksExtensionOptions = {
     initialContent?: Content;
     enablePermanentUserData?: boolean;
 };
+type LiveblocksExtensionStorage = {
+    unsubs: (() => void)[];
+    doc: Doc;
+    provider: LiveblocksYjsProvider;
+    permanentUserData?: PermanentUserData;
+};
+type CommentsExtensionStorage = {
+    pendingComment: boolean;
+};
+/**
+ * The state of the AI toolbar.
+ *
+ *                             ┌────────────────────────────────────────────────────────────────────────────────┐
+ *                             │                                                                                │
+ *                             │ ┌──────────────────────────────────────────────┐                               │
+ *                             ▼ ▼                                              │                               │
+ *              ┌───────$closeAiToolbar()───────┐                               │                               │
+ *              ▼                               ◇                               ◇                               ◇
+ *  ┌───────────────────────┐       ┌───────────────────────┐       ┌───────────────────────┐       ┌───────────────────────┐
+ *  │        CLOSED         │       │        ASKING         │       │       THINKING        │       │       REVIEWING       │
+ *  └───────────────────────┘       └───────────────────────┘       └───────────────────────┘       └───────────────────────┘
+ *           ▲ ◇ ◇                           ▲ ▲ ◇ ▲                          ▲ ◇                             ▲ ◇ ◇
+ *           │ │ └───$openAiToolbarAsking()──┘ │ │ └ ─ ─ ─ ─ ─ ─⚠─ ─ ─ ─ ─ ─ ─│─├── ─ ─ ─ ─ ─ ─✓─ ─ ─ ─ ─ ─ ─ ┘ │ │
+ *           │ │                               │ ▼                            │ │                               │ │
+ *           │ └─────────────────$startAiToolbarThinking(prompt)──────────────┘ │                               │ │
+ *           │                                 │ ▲                              │                               │ │
+ *           │                                 │ └──────────────────────────────┼───────────────────────────────┘ │
+ *           │                                 │                                │                                 │
+ *           │                                 └───$cancelAiToolbarThinking()───┘                                 │
+ *           │                                                                                                    │
+ *           └─────────────────────────────────────$acceptAiToolbarResponse()─────────────────────────────────────┘
+ *
+ */
+type AiToolbarState = Relax<{
+    phase: "closed";
+} | {
+    phase: "asking";
+    /**
+     * The selection stored when opening the AI toolbar.
+     */
+    initialSelection: Range;
+    /**
+     * The custom prompt being written in the toolbar.
+     */
+    customPrompt: string;
+    /**
+     * A potential error that occurred during the last AI request.
+     */
+    error?: Error;
+} | {
+    phase: "thinking";
+    /**
+     * The selection stored when opening the AI toolbar.
+     */
+    initialSelection: Range;
+    /**
+     * The custom prompt being written in the toolbar.
+     */
+    customPrompt: string;
+    /**
+     * An abort controller to cancel the AI request.
+     */
+    abortController: AbortController;
+    /**
+     * The prompt sent to the AI.
+     */
+    prompt: string;
+    /**
+     * The previous response if this "thinking" phase is a refinement.
+     */
+    previousResponse?: ContextualPromptResponse;
+} | {
+    phase: "reviewing";
+    /**
+     * The selection stored when opening the AI toolbar.
+     */
+    initialSelection: Range;
+    /**
+     * The custom prompt being written in the toolbar.
+     */
+    customPrompt: string;
+    /**
+     * The prompt sent to the AI.
+     */
+    prompt: string;
+    /**
+     * The response of the AI request.
+     */
+    response: ContextualPromptResponse;
+}>;
+type AiExtensionStorage = {
+    name: string;
+    state: AiToolbarState;
+    snapshot?: Snapshot;
+};
+declare module "@tiptap/core" {
+    interface Storage {
+        liveblocksAi: AiExtensionStorage;
+        liveblocksExtension: LiveblocksExtensionStorage;
+        liveblocksComments: CommentsExtensionStorage;
+    }
+    interface Commands<ReturnType> {
+        collaborationCaret: {
+            /**
+             * Update details of the current user
+             * @example editor.commands.updateUser({ name: 'John Doe', color: '#305500' })
+             */
+            updateUser: (attributes: Record<string, any>) => ReturnType;
+            /**
+             * Update details of the current user
+             *
+             * @deprecated The "user" command is deprecated. Please use "updateUser" instead. Read more: https://tiptap.dev/api/extensions/collaboration-caret
+             */
+            user: (attributes: Record<string, any>) => ReturnType;
+        };
+        collaboration: {
+            /**
+             * Undo recent changes
+             * @example editor.commands.undo()
+             */
+            undo: () => ReturnType;
+            /**
+             * Reapply reverted changes
+             * @example editor.commands.redo()
+             */
+            redo: () => ReturnType;
+        };
+    }
+}
 type FloatingPosition = "top" | "bottom";
 type CommentsCommands<ReturnType = boolean> = {
     /**
@@ -192,7 +323,7 @@ declare function FloatingThreads({ threads, components, editor, ...props }: Floa
 declare function useIsEditorReady(): boolean;
 declare const useLiveblocksExtension: (opts?: LiveblocksExtensionOptions) => Extension;
 
-declare const GroupMentionNode: Node<never, never>;
+declare const GroupMentionNode: Node<any, any>;
 
 type MentionExtensionOptions = {
     onCreateMention: (mention: TiptapMentionData) => void;
@@ -200,7 +331,7 @@ type MentionExtensionOptions = {
 };
 declare const MentionExtension: Extension<MentionExtensionOptions, any>;
 
-declare const MentionNode: Node<never, never>;
+declare const MentionNode: Node<any, any>;
 
 interface ToolbarSlotProps {
     editor: Editor;

package/dist/mentions/GroupMentionNode.cjs

@@ -38,6 +38,7 @@ const GroupMentionNode = core.Node.create({
           }
           return {
             "data-id": attributes.id
+            // "as" typing because TipTap doesn't have a way to type attributes
           };
         }
       },
@@ -73,6 +74,7 @@ const GroupMentionNode = core.Node.create({
           }
           return {
             "data-notification-id": attributes.notificationId
+            // "as" typing because TipTap doesn't have a way to type attributes
           };
         }
       }

package/dist/mentions/GroupMentionNode.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"GroupMentionNode.cjs","sources":["../../src/mentions/GroupMentionNode.ts"],"sourcesContent":["import { mergeAttributes, Node } from \"@tiptap/core\";\nimport { ReactNodeViewRenderer } from \"@tiptap/react\";\n\nimport { LIVEBLOCKS_GROUP_MENTION_TYPE } from \"../types\";\nimport { Mention } from \"./Mention\";\n\nexport const GroupMentionNode = Node.create<never, never>({\n  name: LIVEBLOCKS_GROUP_MENTION_TYPE,\n  group: \"inline\",\n  inline: true,\n  selectable: true,\n  atom: true,\n\n  priority: 101,\n  parseHTML() {\n    return [\n      {\n        tag: \"liveblocks-group-mention\",\n      },\n    ];\n  },\n\n  renderHTML({ HTMLAttributes }) {\n    return [\"liveblocks-group-mention\", mergeAttributes(HTMLAttributes)];\n  },\n\n  addNodeView() {\n    return ReactNodeViewRenderer(Mention, {\n      contentDOMElementTag: \"span\",\n    });\n  },\n\n  addAttributes() {\n    return {\n      id: {\n        default: null,\n        parseHTML: (element) => element.getAttribute(\"data-id\"),\n        renderHTML: (attributes) => {\n          if (!attributes.id) {\n            return {};\n          }\n\n          return {\n            \"data-id\": attributes.id as string, // \"as\" typing because TipTap doesn't have a way to type attributes\n          };\n        },\n      },\n      userIds: {\n        default: undefined,\n        parseHTML: (element) => {\n          const userIdsAttribute = element.getAttribute(\"data-user-ids\");\n\n          if (!userIdsAttribute) {\n            return undefined;\n          }\n\n          try {\n            const userIds = JSON.parse(userIdsAttribute) as string[];\n\n            return Array.isArray(userIds) ? userIds : undefined;\n          } catch {\n            return undefined;\n          }\n        },\n        renderHTML: (attributes) => {\n          if (!attributes.userIds || !Array.isArray(attributes.userIds)) {\n            return {};\n          }\n\n          return {\n            \"data-user-ids\": JSON.stringify(attributes.userIds),\n          };\n        },\n      },\n      notificationId: {\n        default: null,\n        parseHTML: (element) => element.getAttribute(\"data-notification-id\"),\n        renderHTML: (attributes) => {\n          if (!attributes.notificationId) {\n            return {};\n          }\n\n          return {\n            \"data-notification-id\": attributes.notificationId as string, // \"as\" typing because TipTap doesn't have a way to type attributes\n          };\n        },\n      },\n    };\n  },\n  addKeyboardShortcuts() {\n    return {\n      Backspace: () =>\n        this.editor.commands.command(({ tr, state }) => {\n          let isMention = false;\n          const { selection } = state;\n          const { empty, anchor } = selection;\n\n          if (!empty) {\n            return false;\n          }\n\n          state.doc.nodesBetween(anchor - 1, anchor, (node, pos) => {\n            if (node.type.name === this.name) {\n              isMention = true;\n              tr.insertText(\"\", pos, pos + node.nodeSize);\n            }\n          });\n\n          return isMention;\n        }),\n    };\n  },\n});\n"],"names":["Node","LIVEBLOCKS_GROUP_MENTION_TYPE","mergeAttributes","ReactNodeViewRenderer","Mention"],"mappings":";;;;;;;AAMa,MAAA,gBAAA,GAAmBA,UAAK,MAAqB,CAAA;AAAA,EACxD,IAAM,EAAAC,mCAAA;AAAA,EACN,KAAO,EAAA,QAAA;AAAA,EACP,MAAQ,EAAA,IAAA;AAAA,EACR,UAAY,EAAA,IAAA;AAAA,EACZ,IAAM,EAAA,IAAA;AAAA,EAEN,QAAU,EAAA,GAAA;AAAA,EACV,SAAY,GAAA;AACV,IAAO,OAAA;AAAA,MACL;AAAA,QACE,GAAK,EAAA,0BAAA;AAAA,OACP;AAAA,KACF,CAAA;AAAA,GACF;AAAA,EAEA,UAAA,CAAW,EAAE,cAAA,EAAkB,EAAA;AAC7B,IAAA,OAAO,CAAC,0BAAA,EAA4BC,oBAAgB,CAAA,cAAc,CAAC,CAAA,CAAA;AAAA,GACrE;AAAA,EAEA,WAAc,GAAA;AACZ,IAAA,OAAOC,4BAAsBC,eAAS,EAAA;AAAA,MACpC,oBAAsB,EAAA,MAAA;AAAA,KACvB,CAAA,CAAA;AAAA,GACH;AAAA,EAEA,aAAgB,GAAA;AACd,IAAO,OAAA;AAAA,MACL,EAAI,EAAA;AAAA,QACF,OAAS,EAAA,IAAA;AAAA,QACT,SAAW,EAAA,CAAC,OAAY,KAAA,OAAA,CAAQ,aAAa,SAAS,CAAA;AAAA,QACtD,UAAA,EAAY,CAAC,UAAe,KAAA;AAC1B,UAAI,IAAA,CAAC,WAAW,EAAI,EAAA;AAClB,YAAA,OAAO,EAAC,CAAA;AAAA,WACV;AAEA,UAAO,OAAA;AAAA,YACL,WAAW,UAAW,CAAA,EAAA;AAAA,WACxB,CAAA;AAAA,SACF;AAAA,OACF;AAAA,MACA,OAAS,EAAA;AAAA,QACP,OAAS,EAAA,KAAA,CAAA;AAAA,QACT,SAAA,EAAW,CAAC,OAAY,KAAA;AACtB,UAAM,MAAA,gBAAA,GAAmB,OAAQ,CAAA,YAAA,CAAa,eAAe,CAAA,CAAA;AAE7D,UAAA,IAAI,CAAC,gBAAkB,EAAA;AACrB,YAAO,OAAA,KAAA,CAAA,CAAA;AAAA,WACT;AAEA,UAAI,IAAA;AACF,YAAM,MAAA,OAAA,GAAU,IAAK,CAAA,KAAA,CAAM,gBAAgB,CAAA,CAAA;AAE3C,YAAA,OAAO,KAAM,CAAA,OAAA,CAAQ,OAAO,CAAA,GAAI,OAAU,GAAA,KAAA,CAAA,CAAA;AAAA,WAC1C,CAAA,MAAA;AACA,YAAO,OAAA,KAAA,CAAA,CAAA;AAAA,WACT;AAAA,SACF;AAAA,QACA,UAAA,EAAY,CAAC,UAAe,KAAA;AAC1B,UAAI,IAAA,CAAC,WAAW,OAAW,IAAA,CAAC,MAAM,OAAQ,CAAA,UAAA,CAAW,OAAO,CAAG,EAAA;AAC7D,YAAA,OAAO,EAAC,CAAA;AAAA,WACV;AAEA,UAAO,OAAA;AAAA,YACL,eAAiB,EAAA,IAAA,CAAK,SAAU,CAAA,UAAA,CAAW,OAAO,CAAA;AAAA,WACpD,CAAA;AAAA,SACF;AAAA,OACF;AAAA,MACA,cAAgB,EAAA;AAAA,QACd,OAAS,EAAA,IAAA;AAAA,QACT,SAAW,EAAA,CAAC,OAAY,KAAA,OAAA,CAAQ,aAAa,sBAAsB,CAAA;AAAA,QACnE,UAAA,EAAY,CAAC,UAAe,KAAA;AAC1B,UAAI,IAAA,CAAC,WAAW,cAAgB,EAAA;AAC9B,YAAA,OAAO,EAAC,CAAA;AAAA,WACV;AAEA,UAAO,OAAA;AAAA,YACL,wBAAwB,UAAW,CAAA,cAAA;AAAA,WACrC,CAAA;AAAA,SACF;AAAA,OACF;AAAA,KACF,CAAA;AAAA,GACF;AAAA,EACA,oBAAuB,GAAA;AACrB,IAAO,OAAA;AAAA,MACL,SAAA,EAAW,MACT,IAAA,CAAK,MAAO,CAAA,QAAA,CAAS,QAAQ,CAAC,EAAE,EAAI,EAAA,KAAA,EAAY,KAAA;AAC9C,QAAA,IAAI,SAAY,GAAA,KAAA,CAAA;AAChB,QAAM,MAAA,EAAE,WAAc,GAAA,KAAA,CAAA;AACtB,QAAM,MAAA,EAAE,KAAO,EAAA,MAAA,EAAW,GAAA,SAAA,CAAA;AAE1B,QAAA,IAAI,CAAC,KAAO,EAAA;AACV,UAAO,OAAA,KAAA,CAAA;AAAA,SACT;AAEA,QAAA,KAAA,CAAM,IAAI,YAAa,CAAA,MAAA,GAAS,GAAG,MAAQ,EAAA,CAAC,MAAM,GAAQ,KAAA;AACxD,UAAA,IAAI,IAAK,CAAA,IAAA,CAAK,IAAS,KAAA,IAAA,CAAK,IAAM,EAAA;AAChC,YAAY,SAAA,GAAA,IAAA,CAAA;AACZ,YAAA,EAAA,CAAG,UAAW,CAAA,EAAA,EAAI,GAAK,EAAA,GAAA,GAAM,KAAK,QAAQ,CAAA,CAAA;AAAA,WAC5C;AAAA,SACD,CAAA,CAAA;AAED,QAAO,OAAA,SAAA,CAAA;AAAA,OACR,CAAA;AAAA,KACL,CAAA;AAAA,GACF;AACF,CAAC;;;;"}
+{"version":3,"file":"GroupMentionNode.cjs","sources":["../../src/mentions/GroupMentionNode.ts"],"sourcesContent":["import { mergeAttributes, Node } from \"@tiptap/core\";\nimport { ReactNodeViewRenderer } from \"@tiptap/react\";\n\nimport { LIVEBLOCKS_GROUP_MENTION_TYPE } from \"../types\";\nimport { Mention } from \"./Mention\";\n\nexport const GroupMentionNode = Node.create({\n  name: LIVEBLOCKS_GROUP_MENTION_TYPE,\n  group: \"inline\",\n  inline: true,\n  selectable: true,\n  atom: true,\n\n  priority: 101,\n  parseHTML() {\n    return [\n      {\n        tag: \"liveblocks-group-mention\",\n      },\n    ];\n  },\n\n  renderHTML({ HTMLAttributes }) {\n    return [\"liveblocks-group-mention\", mergeAttributes(HTMLAttributes)];\n  },\n\n  addNodeView() {\n    return ReactNodeViewRenderer(Mention, {\n      contentDOMElementTag: \"span\",\n    });\n  },\n\n  addAttributes() {\n    return {\n      id: {\n        default: null,\n        parseHTML: (element) => element.getAttribute(\"data-id\"),\n        renderHTML: (attributes) => {\n          if (!attributes.id) {\n            return {};\n          }\n\n          return {\n            \"data-id\": attributes.id as string, // \"as\" typing because TipTap doesn't have a way to type attributes\n          };\n        },\n      },\n      userIds: {\n        default: undefined,\n        parseHTML: (element) => {\n          const userIdsAttribute = element.getAttribute(\"data-user-ids\");\n\n          if (!userIdsAttribute) {\n            return undefined;\n          }\n\n          try {\n            const userIds = JSON.parse(userIdsAttribute) as string[];\n\n            return Array.isArray(userIds) ? userIds : undefined;\n          } catch {\n            return undefined;\n          }\n        },\n        renderHTML: (attributes) => {\n          if (!attributes.userIds || !Array.isArray(attributes.userIds)) {\n            return {};\n          }\n\n          return {\n            \"data-user-ids\": JSON.stringify(attributes.userIds),\n          };\n        },\n      },\n      notificationId: {\n        default: null,\n        parseHTML: (element) => element.getAttribute(\"data-notification-id\"),\n        renderHTML: (attributes) => {\n          if (!attributes.notificationId) {\n            return {};\n          }\n\n          return {\n            \"data-notification-id\": attributes.notificationId as string, // \"as\" typing because TipTap doesn't have a way to type attributes\n          };\n        },\n      },\n    };\n  },\n  addKeyboardShortcuts() {\n    return {\n      Backspace: () =>\n        this.editor.commands.command(({ tr, state }) => {\n          let isMention = false;\n          const { selection } = state;\n          const { empty, anchor } = selection;\n\n          if (!empty) {\n            return false;\n          }\n\n          state.doc.nodesBetween(anchor - 1, anchor, (node, pos) => {\n            if (node.type.name === this.name) {\n              isMention = true;\n              tr.insertText(\"\", pos, pos + node.nodeSize);\n            }\n          });\n\n          return isMention;\n        }),\n    };\n  },\n});\n"],"names":["Node","LIVEBLOCKS_GROUP_MENTION_TYPE","mergeAttributes","ReactNodeViewRenderer","Mention"],"mappings":"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"}

package/dist/mentions/GroupMentionNode.js

@@ -36,6 +36,7 @@ const GroupMentionNode = Node.create({
           }
           return {
             "data-id": attributes.id
+            // "as" typing because TipTap doesn't have a way to type attributes
           };
         }
       },
@@ -71,6 +72,7 @@ const GroupMentionNode = Node.create({
           }
           return {
             "data-notification-id": attributes.notificationId
+            // "as" typing because TipTap doesn't have a way to type attributes
           };
         }
       }

package/dist/mentions/GroupMentionNode.js.map

@@ -1 +1 @@
-{"version":3,"file":"GroupMentionNode.js","sources":["../../src/mentions/GroupMentionNode.ts"],"sourcesContent":["import { mergeAttributes, Node } from \"@tiptap/core\";\nimport { ReactNodeViewRenderer } from \"@tiptap/react\";\n\nimport { LIVEBLOCKS_GROUP_MENTION_TYPE } from \"../types\";\nimport { Mention } from \"./Mention\";\n\nexport const GroupMentionNode = Node.create<never, never>({\n  name: LIVEBLOCKS_GROUP_MENTION_TYPE,\n  group: \"inline\",\n  inline: true,\n  selectable: true,\n  atom: true,\n\n  priority: 101,\n  parseHTML() {\n    return [\n      {\n        tag: \"liveblocks-group-mention\",\n      },\n    ];\n  },\n\n  renderHTML({ HTMLAttributes }) {\n    return [\"liveblocks-group-mention\", mergeAttributes(HTMLAttributes)];\n  },\n\n  addNodeView() {\n    return ReactNodeViewRenderer(Mention, {\n      contentDOMElementTag: \"span\",\n    });\n  },\n\n  addAttributes() {\n    return {\n      id: {\n        default: null,\n        parseHTML: (element) => element.getAttribute(\"data-id\"),\n        renderHTML: (attributes) => {\n          if (!attributes.id) {\n            return {};\n          }\n\n          return {\n            \"data-id\": attributes.id as string, // \"as\" typing because TipTap doesn't have a way to type attributes\n          };\n        },\n      },\n      userIds: {\n        default: undefined,\n        parseHTML: (element) => {\n          const userIdsAttribute = element.getAttribute(\"data-user-ids\");\n\n          if (!userIdsAttribute) {\n            return undefined;\n          }\n\n          try {\n            const userIds = JSON.parse(userIdsAttribute) as string[];\n\n            return Array.isArray(userIds) ? userIds : undefined;\n          } catch {\n            return undefined;\n          }\n        },\n        renderHTML: (attributes) => {\n          if (!attributes.userIds || !Array.isArray(attributes.userIds)) {\n            return {};\n          }\n\n          return {\n            \"data-user-ids\": JSON.stringify(attributes.userIds),\n          };\n        },\n      },\n      notificationId: {\n        default: null,\n        parseHTML: (element) => element.getAttribute(\"data-notification-id\"),\n        renderHTML: (attributes) => {\n          if (!attributes.notificationId) {\n            return {};\n          }\n\n          return {\n            \"data-notification-id\": attributes.notificationId as string, // \"as\" typing because TipTap doesn't have a way to type attributes\n          };\n        },\n      },\n    };\n  },\n  addKeyboardShortcuts() {\n    return {\n      Backspace: () =>\n        this.editor.commands.command(({ tr, state }) => {\n          let isMention = false;\n          const { selection } = state;\n          const { empty, anchor } = selection;\n\n          if (!empty) {\n            return false;\n          }\n\n          state.doc.nodesBetween(anchor - 1, anchor, (node, pos) => {\n            if (node.type.name === this.name) {\n              isMention = true;\n              tr.insertText(\"\", pos, pos + node.nodeSize);\n            }\n          });\n\n          return isMention;\n        }),\n    };\n  },\n});\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"GroupMentionNode.js","sources":["../../src/mentions/GroupMentionNode.ts"],"sourcesContent":["import { mergeAttributes, Node } from \"@tiptap/core\";\nimport { ReactNodeViewRenderer } from \"@tiptap/react\";\n\nimport { LIVEBLOCKS_GROUP_MENTION_TYPE } from \"../types\";\nimport { Mention } from \"./Mention\";\n\nexport const GroupMentionNode = Node.create({\n  name: LIVEBLOCKS_GROUP_MENTION_TYPE,\n  group: \"inline\",\n  inline: true,\n  selectable: true,\n  atom: true,\n\n  priority: 101,\n  parseHTML() {\n    return [\n      {\n        tag: \"liveblocks-group-mention\",\n      },\n    ];\n  },\n\n  renderHTML({ HTMLAttributes }) {\n    return [\"liveblocks-group-mention\", mergeAttributes(HTMLAttributes)];\n  },\n\n  addNodeView() {\n    return ReactNodeViewRenderer(Mention, {\n      contentDOMElementTag: \"span\",\n    });\n  },\n\n  addAttributes() {\n    return {\n      id: {\n        default: null,\n        parseHTML: (element) => element.getAttribute(\"data-id\"),\n        renderHTML: (attributes) => {\n          if (!attributes.id) {\n            return {};\n          }\n\n          return {\n            \"data-id\": attributes.id as string, // \"as\" typing because TipTap doesn't have a way to type attributes\n          };\n        },\n      },\n      userIds: {\n        default: undefined,\n        parseHTML: (element) => {\n          const userIdsAttribute = element.getAttribute(\"data-user-ids\");\n\n          if (!userIdsAttribute) {\n            return undefined;\n          }\n\n          try {\n            const userIds = JSON.parse(userIdsAttribute) as string[];\n\n            return Array.isArray(userIds) ? userIds : undefined;\n          } catch {\n            return undefined;\n          }\n        },\n        renderHTML: (attributes) => {\n          if (!attributes.userIds || !Array.isArray(attributes.userIds)) {\n            return {};\n          }\n\n          return {\n            \"data-user-ids\": JSON.stringify(attributes.userIds),\n          };\n        },\n      },\n      notificationId: {\n        default: null,\n        parseHTML: (element) => element.getAttribute(\"data-notification-id\"),\n        renderHTML: (attributes) => {\n          if (!attributes.notificationId) {\n            return {};\n          }\n\n          return {\n            \"data-notification-id\": attributes.notificationId as string, // \"as\" typing because TipTap doesn't have a way to type attributes\n          };\n        },\n      },\n    };\n  },\n  addKeyboardShortcuts() {\n    return {\n      Backspace: () =>\n        this.editor.commands.command(({ tr, state }) => {\n          let isMention = false;\n          const { selection } = state;\n          const { empty, anchor } = selection;\n\n          if (!empty) {\n            return false;\n          }\n\n          state.doc.nodesBetween(anchor - 1, anchor, (node, pos) => {\n            if (node.type.name === this.name) {\n              isMention = true;\n              tr.insertText(\"\", pos, pos + node.nodeSize);\n            }\n          });\n\n          return isMention;\n        }),\n    };\n  },\n});\n"],"names":[],"mappings":"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"}

package/dist/mentions/Mention.cjs

@@ -3,52 +3,41 @@
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@liveblocks/core');
 var _private = require('@liveblocks/react-ui/_private');
-var react$1 = require('@tiptap/react');
-var react = require('react');
+var react = require('@tiptap/react');
 var types = require('../types.cjs');
 
-const UserMention = react.forwardRef(
-  ({ mention, isSelected }, forwardedRef) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs(react$1.NodeViewWrapper, {
+const UserMention = ({ isSelected, mention }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    react.NodeViewWrapper,
+    {
       className: _private.cn(
         "lb-root lb-mention lb-tiptap-mention",
         isSelected && "lb-mention-selected"
       ),
       as: "span",
-      ref: forwardedRef,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", {
-          className: "lb-mention-symbol",
-          children: core.MENTION_CHARACTER
-        }),
-        /* @__PURE__ */ jsxRuntime.jsx(_private.User, {
-          userId: mention.id
-        })
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lb-mention-symbol", children: core.MENTION_CHARACTER }),
+        /* @__PURE__ */ jsxRuntime.jsx(_private.User, { userId: mention.id })
       ]
-    });
-  }
-);
-const GroupMention = react.forwardRef(
-  ({ mention, isSelected }, forwardedRef) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs(react$1.NodeViewWrapper, {
+    }
+  );
+};
+const GroupMention = ({ isSelected, mention }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    react.NodeViewWrapper,
+    {
       className: _private.cn(
         "lb-root lb-mention lb-tiptap-mention",
         isSelected && "lb-mention-selected"
       ),
       as: "span",
-      ref: forwardedRef,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", {
-          className: "lb-mention-symbol",
-          children: core.MENTION_CHARACTER
-        }),
-        /* @__PURE__ */ jsxRuntime.jsx(_private.Group, {
-          groupId: mention.id
-        })
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lb-mention-symbol", children: core.MENTION_CHARACTER }),
+        /* @__PURE__ */ jsxRuntime.jsx(_private.Group, { groupId: mention.id })
       ]
-    });
-  }
-);
+    }
+  );
+};
 function deserializeGroupUserIds(userIds) {
   if (typeof userIds !== "string") {
     return void 0;
@@ -63,18 +52,20 @@ function deserializeGroupUserIds(userIds) {
     return void 0;
   }
 }
-const Mention = react.forwardRef(({ node, selected: isSelected }, forwardedRef) => {
+const Mention = ({ node, selected: isSelected }) => {
   const attrs = node.attrs;
   if (node.type.name === types.LIVEBLOCKS_MENTION_TYPE) {
     const mention = {
       kind: "user",
       id: attrs.id
     };
-    return /* @__PURE__ */ jsxRuntime.jsx(UserMention, {
-      mention,
-      isSelected,
-      ref: forwardedRef
-    });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      UserMention,
+      {
+        mention,
+        isSelected
+      }
+    );
   }
   if (node.type.name === types.LIVEBLOCKS_GROUP_MENTION_TYPE) {
     const mention = {
@@ -82,14 +73,16 @@ const Mention = react.forwardRef(({ node, selected: isSelected }, forwardedRef)
       id: attrs.id,
       userIds: deserializeGroupUserIds(attrs.userIds)
     };
-    return /* @__PURE__ */ jsxRuntime.jsx(GroupMention, {
-      mention,
-      isSelected,
-      ref: forwardedRef
-    });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      GroupMention,
+      {
+        mention,
+        isSelected
+      }
+    );
   }
   return null;
-});
+};
 
 exports.Mention = Mention;
 //# sourceMappingURL=Mention.cjs.map

package/dist/mentions/Mention.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Mention.cjs","sources":["../../src/mentions/Mention.tsx"],"sourcesContent":["import {\n  type GroupMentionData,\n  MENTION_CHARACTER,\n  type MentionData,\n  type UserMentionData,\n} from \"@liveblocks/core\";\nimport { cn, Group, User } from \"@liveblocks/react-ui/_private\";\nimport type { Node } from \"@tiptap/pm/model\";\nimport { NodeViewWrapper } from \"@tiptap/react\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\n\nimport {\n  LIVEBLOCKS_GROUP_MENTION_TYPE,\n  LIVEBLOCKS_MENTION_TYPE,\n  type SerializedTiptapMentionData,\n} from \"../types\";\n\ninterface MentionProps extends ComponentPropsWithoutRef<\"span\"> {\n  mention: MentionData;\n  isSelected: boolean;\n}\n\nconst UserMention = forwardRef<HTMLSpanElement, MentionProps>(\n  ({ mention, isSelected }, forwardedRef) => {\n    return (\n      <NodeViewWrapper\n        className={cn(\n          \"lb-root lb-mention lb-tiptap-mention\",\n          isSelected && \"lb-mention-selected\"\n        )}\n        as=\"span\"\n        ref={forwardedRef}\n      >\n        <span className=\"lb-mention-symbol\">{MENTION_CHARACTER}</span>\n        <User userId={mention.id} />\n      </NodeViewWrapper>\n    );\n  }\n);\n\nconst GroupMention = forwardRef<HTMLSpanElement, MentionProps>(\n  ({ mention, isSelected }, forwardedRef) => {\n    return (\n      <NodeViewWrapper\n        className={cn(\n          \"lb-root lb-mention lb-tiptap-mention\",\n          isSelected && \"lb-mention-selected\"\n        )}\n        as=\"span\"\n        ref={forwardedRef}\n      >\n        <span className=\"lb-mention-symbol\">{MENTION_CHARACTER}</span>\n        <Group groupId={mention.id} />\n      </NodeViewWrapper>\n    );\n  }\n);\n\nfunction deserializeGroupUserIds(\n  userIds: string | undefined\n): string[] | undefined {\n  if (typeof userIds !== \"string\") {\n    return undefined;\n  }\n\n  try {\n    const parsedUserIds = JSON.parse(userIds) as string[];\n\n    if (Array.isArray(parsedUserIds)) {\n      return parsedUserIds;\n    }\n\n    return undefined;\n  } catch {\n    return undefined;\n  }\n}\n\nexport const Mention = forwardRef<\n  HTMLSpanElement,\n  { node: Node; selected: boolean }\n>(({ node, selected: isSelected }, forwardedRef) => {\n  const attrs = node.attrs as Omit<SerializedTiptapMentionData, \"kind\">;\n\n  if (node.type.name === LIVEBLOCKS_MENTION_TYPE) {\n    const mention: UserMentionData = {\n      kind: \"user\",\n      id: attrs.id,\n    };\n\n    return (\n      <UserMention\n        mention={mention}\n        isSelected={isSelected}\n        ref={forwardedRef}\n      />\n    );\n  }\n\n  if (node.type.name === LIVEBLOCKS_GROUP_MENTION_TYPE) {\n    const mention: GroupMentionData = {\n      kind: \"group\",\n      id: attrs.id,\n      userIds: deserializeGroupUserIds(attrs.userIds),\n    };\n\n    return (\n      <GroupMention\n        mention={mention}\n        isSelected={isSelected}\n        ref={forwardedRef}\n      />\n    );\n  }\n\n  return null;\n});\n"],"names":["forwardRef","jsxs","NodeViewWrapper","cn","jsx","MENTION_CHARACTER","User","Group","LIVEBLOCKS_MENTION_TYPE","LIVEBLOCKS_GROUP_MENTION_TYPE"],"mappings":"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"}
+{"version":3,"file":"Mention.cjs","sources":["../../src/mentions/Mention.tsx"],"sourcesContent":["import {\n  type GroupMentionData,\n  MENTION_CHARACTER,\n  type MentionData,\n  type UserMentionData,\n} from \"@liveblocks/core\";\nimport { cn, Group, User } from \"@liveblocks/react-ui/_private\";\nimport { NodeViewWrapper, type ReactNodeViewProps } from \"@tiptap/react\";\n\nimport {\n  LIVEBLOCKS_GROUP_MENTION_TYPE,\n  LIVEBLOCKS_MENTION_TYPE,\n  type SerializedTiptapMentionData,\n} from \"../types\";\n\ninterface MentionProps {\n  mention: MentionData;\n  isSelected: boolean;\n}\ninterface GroupMentionProps {\n  mention: GroupMentionData;\n  isSelected: boolean;\n}\n\nconst UserMention = ({ isSelected, mention }: MentionProps) => {\n\n  return (\n    <NodeViewWrapper\n      className={cn(\n        \"lb-root lb-mention lb-tiptap-mention\",\n        isSelected && \"lb-mention-selected\"\n      )}\n      as=\"span\"\n    >\n      <span className=\"lb-mention-symbol\">{MENTION_CHARACTER}</span>\n      <User userId={mention.id} />\n    </NodeViewWrapper>\n  );\n};\n\nconst GroupMention = ({ isSelected, mention }: GroupMentionProps) => {\n  return (\n    <NodeViewWrapper\n      className={cn(\n        \"lb-root lb-mention lb-tiptap-mention\",\n        isSelected && \"lb-mention-selected\"\n      )}\n      as=\"span\"\n    >\n      <span className=\"lb-mention-symbol\">{MENTION_CHARACTER}</span>\n      <Group groupId={mention.id} />\n    </NodeViewWrapper>\n  );\n};\n\nfunction deserializeGroupUserIds(\n  userIds: string | undefined\n): string[] | undefined {\n  if (typeof userIds !== \"string\") {\n    return undefined;\n  }\n\n  try {\n    const parsedUserIds = JSON.parse(userIds) as string[];\n\n    if (Array.isArray(parsedUserIds)) {\n      return parsedUserIds;\n    }\n\n    return undefined;\n  } catch {\n    return undefined;\n  }\n}\n\nexport const Mention = ({ node, selected: isSelected }: ReactNodeViewProps<HTMLSpanElement>) => {\n  const attrs = node.attrs as Omit<SerializedTiptapMentionData, \"kind\">;\n\n  if (node.type.name === LIVEBLOCKS_MENTION_TYPE) {\n    const mention: UserMentionData = {\n      kind: \"user\",\n      id: attrs.id,\n    };\n\n    return (\n      <UserMention\n        mention={mention}\n        isSelected={isSelected}\n      />\n    );\n  }\n  if (node.type.name === LIVEBLOCKS_GROUP_MENTION_TYPE) {\n    const mention: GroupMentionData = {\n      kind: \"group\",\n      id: attrs.id,\n      userIds: deserializeGroupUserIds(attrs.userIds),\n    };\n\n    return (\n      <GroupMention\n        mention={mention}\n        isSelected={isSelected}\n      />\n    );\n  }\n\n  return null;\n};\n"],"names":["jsxs","NodeViewWrapper","cn","jsx","MENTION_CHARACTER","User","Group","LIVEBLOCKS_MENTION_TYPE","LIVEBLOCKS_GROUP_MENTION_TYPE"],"mappings":";;;;;;;;AAwBA,MAAM,WAAc,GAAA,CAAC,EAAE,UAAA,EAAY,SAA4B,KAAA;AAE7D,EACE,uBAAAA,eAAA;AAAA,IAACC,qBAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAAC,WAAA;AAAA,QACT,sCAAA;AAAA,QACA,UAAc,IAAA,qBAAA;AAAA,OAChB;AAAA,MACA,EAAG,EAAA,MAAA;AAAA,MAEH,QAAA,EAAA;AAAA,wBAACC,cAAA,CAAA,MAAA,EAAA,EAAK,SAAU,EAAA,mBAAA,EAAqB,QAAkB,EAAAC,sBAAA,EAAA,CAAA;AAAA,wBACtDD,cAAA,CAAAE,aAAA,EAAA,EAAK,MAAQ,EAAA,OAAA,CAAQ,EAAI,EAAA,CAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GAC5B,CAAA;AAEJ,CAAA,CAAA;AAEA,MAAM,YAAe,GAAA,CAAC,EAAE,UAAA,EAAY,SAAiC,KAAA;AACnE,EACE,uBAAAL,eAAA;AAAA,IAACC,qBAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAAC,WAAA;AAAA,QACT,sCAAA;AAAA,QACA,UAAc,IAAA,qBAAA;AAAA,OAChB;AAAA,MACA,EAAG,EAAA,MAAA;AAAA,MAEH,QAAA,EAAA;AAAA,wBAACC,cAAA,CAAA,MAAA,EAAA,EAAK,SAAU,EAAA,mBAAA,EAAqB,QAAkB,EAAAC,sBAAA,EAAA,CAAA;AAAA,wBACtDD,cAAA,CAAAG,cAAA,EAAA,EAAM,OAAS,EAAA,OAAA,CAAQ,EAAI,EAAA,CAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GAC9B,CAAA;AAEJ,CAAA,CAAA;AAEA,SAAS,wBACP,OACsB,EAAA;AACtB,EAAI,IAAA,OAAO,YAAY,QAAU,EAAA;AAC/B,IAAO,OAAA,KAAA,CAAA,CAAA;AAAA,GACT;AAEA,EAAI,IAAA;AACF,IAAM,MAAA,aAAA,GAAgB,IAAK,CAAA,KAAA,CAAM,OAAO,CAAA,CAAA;AAExC,IAAI,IAAA,KAAA,CAAM,OAAQ,CAAA,aAAa,CAAG,EAAA;AAChC,MAAO,OAAA,aAAA,CAAA;AAAA,KACT;AAEA,IAAO,OAAA,KAAA,CAAA,CAAA;AAAA,GACD,CAAA,MAAA;AACN,IAAO,OAAA,KAAA,CAAA,CAAA;AAAA,GACT;AACF,CAAA;AAEO,MAAM,UAAU,CAAC,EAAE,IAAM,EAAA,QAAA,EAAU,YAAsD,KAAA;AAC9F,EAAA,MAAM,QAAQ,IAAK,CAAA,KAAA,CAAA;AAEnB,EAAI,IAAA,IAAA,CAAK,IAAK,CAAA,IAAA,KAASC,6BAAyB,EAAA;AAC9C,IAAA,MAAM,OAA2B,GAAA;AAAA,MAC/B,IAAM,EAAA,MAAA;AAAA,MACN,IAAI,KAAM,CAAA,EAAA;AAAA,KACZ,CAAA;AAEA,IACE,uBAAAJ,cAAA;AAAA,MAAC,WAAA;AAAA,MAAA;AAAA,QACC,OAAA;AAAA,QACA,UAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GAEJ;AACA,EAAI,IAAA,IAAA,CAAK,IAAK,CAAA,IAAA,KAASK,mCAA+B,EAAA;AACpD,IAAA,MAAM,OAA4B,GAAA;AAAA,MAChC,IAAM,EAAA,OAAA;AAAA,MACN,IAAI,KAAM,CAAA,EAAA;AAAA,MACV,OAAA,EAAS,uBAAwB,CAAA,KAAA,CAAM,OAAO,CAAA;AAAA,KAChD,CAAA;AAEA,IACE,uBAAAL,cAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,OAAA;AAAA,QACA,UAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GAEJ;AAEA,EAAO,OAAA,IAAA,CAAA;AACT;;;;"}

package/dist/mentions/Mention.js

@@ -2,51 +2,40 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { MENTION_CHARACTER } from '@liveblocks/core';
 import { cn, User, Group } from '@liveblocks/react-ui/_private';
 import { NodeViewWrapper } from '@tiptap/react';
-import { forwardRef } from 'react';
 import { LIVEBLOCKS_MENTION_TYPE, LIVEBLOCKS_GROUP_MENTION_TYPE } from '../types.js';
 
-const UserMention = forwardRef(
-  ({ mention, isSelected }, forwardedRef) => {
-    return /* @__PURE__ */ jsxs(NodeViewWrapper, {
+const UserMention = ({ isSelected, mention }) => {
+  return /* @__PURE__ */ jsxs(
+    NodeViewWrapper,
+    {
       className: cn(
         "lb-root lb-mention lb-tiptap-mention",
         isSelected && "lb-mention-selected"
       ),
       as: "span",
-      ref: forwardedRef,
       children: [
-        /* @__PURE__ */ jsx("span", {
-          className: "lb-mention-symbol",
-          children: MENTION_CHARACTER
-        }),
-        /* @__PURE__ */ jsx(User, {
-          userId: mention.id
-        })
+        /* @__PURE__ */ jsx("span", { className: "lb-mention-symbol", children: MENTION_CHARACTER }),
+        /* @__PURE__ */ jsx(User, { userId: mention.id })
       ]
-    });
-  }
-);
-const GroupMention = forwardRef(
-  ({ mention, isSelected }, forwardedRef) => {
-    return /* @__PURE__ */ jsxs(NodeViewWrapper, {
+    }
+  );
+};
+const GroupMention = ({ isSelected, mention }) => {
+  return /* @__PURE__ */ jsxs(
+    NodeViewWrapper,
+    {
       className: cn(
         "lb-root lb-mention lb-tiptap-mention",
         isSelected && "lb-mention-selected"
       ),
       as: "span",
-      ref: forwardedRef,
       children: [
-        /* @__PURE__ */ jsx("span", {
-          className: "lb-mention-symbol",
-          children: MENTION_CHARACTER
-        }),
-        /* @__PURE__ */ jsx(Group, {
-          groupId: mention.id
-        })
+        /* @__PURE__ */ jsx("span", { className: "lb-mention-symbol", children: MENTION_CHARACTER }),
+        /* @__PURE__ */ jsx(Group, { groupId: mention.id })
       ]
-    });
-  }
-);
+    }
+  );
+};
 function deserializeGroupUserIds(userIds) {
   if (typeof userIds !== "string") {
     return void 0;
@@ -61,18 +50,20 @@ function deserializeGroupUserIds(userIds) {
     return void 0;
   }
 }
-const Mention = forwardRef(({ node, selected: isSelected }, forwardedRef) => {
+const Mention = ({ node, selected: isSelected }) => {
   const attrs = node.attrs;
   if (node.type.name === LIVEBLOCKS_MENTION_TYPE) {
     const mention = {
       kind: "user",
       id: attrs.id
     };
-    return /* @__PURE__ */ jsx(UserMention, {
-      mention,
-      isSelected,
-      ref: forwardedRef
-    });
+    return /* @__PURE__ */ jsx(
+      UserMention,
+      {
+        mention,
+        isSelected
+      }
+    );
   }
   if (node.type.name === LIVEBLOCKS_GROUP_MENTION_TYPE) {
     const mention = {
@@ -80,14 +71,16 @@ const Mention = forwardRef(({ node, selected: isSelected }, forwardedRef) => {
       id: attrs.id,
       userIds: deserializeGroupUserIds(attrs.userIds)
     };
-    return /* @__PURE__ */ jsx(GroupMention, {
-      mention,
-      isSelected,
-      ref: forwardedRef
-    });
+    return /* @__PURE__ */ jsx(
+      GroupMention,
+      {
+        mention,
+        isSelected
+      }
+    );
   }
   return null;
-});
+};
 
 export { Mention };
 //# sourceMappingURL=Mention.js.map

package/dist/mentions/Mention.js.map

@@ -1 +1 @@
-{"version":3,"file":"Mention.js","sources":["../../src/mentions/Mention.tsx"],"sourcesContent":["import {\n  type GroupMentionData,\n  MENTION_CHARACTER,\n  type MentionData,\n  type UserMentionData,\n} from \"@liveblocks/core\";\nimport { cn, Group, User } from \"@liveblocks/react-ui/_private\";\nimport type { Node } from \"@tiptap/pm/model\";\nimport { NodeViewWrapper } from \"@tiptap/react\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\n\nimport {\n  LIVEBLOCKS_GROUP_MENTION_TYPE,\n  LIVEBLOCKS_MENTION_TYPE,\n  type SerializedTiptapMentionData,\n} from \"../types\";\n\ninterface MentionProps extends ComponentPropsWithoutRef<\"span\"> {\n  mention: MentionData;\n  isSelected: boolean;\n}\n\nconst UserMention = forwardRef<HTMLSpanElement, MentionProps>(\n  ({ mention, isSelected }, forwardedRef) => {\n    return (\n      <NodeViewWrapper\n        className={cn(\n          \"lb-root lb-mention lb-tiptap-mention\",\n          isSelected && \"lb-mention-selected\"\n        )}\n        as=\"span\"\n        ref={forwardedRef}\n      >\n        <span className=\"lb-mention-symbol\">{MENTION_CHARACTER}</span>\n        <User userId={mention.id} />\n      </NodeViewWrapper>\n    );\n  }\n);\n\nconst GroupMention = forwardRef<HTMLSpanElement, MentionProps>(\n  ({ mention, isSelected }, forwardedRef) => {\n    return (\n      <NodeViewWrapper\n        className={cn(\n          \"lb-root lb-mention lb-tiptap-mention\",\n          isSelected && \"lb-mention-selected\"\n        )}\n        as=\"span\"\n        ref={forwardedRef}\n      >\n        <span className=\"lb-mention-symbol\">{MENTION_CHARACTER}</span>\n        <Group groupId={mention.id} />\n      </NodeViewWrapper>\n    );\n  }\n);\n\nfunction deserializeGroupUserIds(\n  userIds: string | undefined\n): string[] | undefined {\n  if (typeof userIds !== \"string\") {\n    return undefined;\n  }\n\n  try {\n    const parsedUserIds = JSON.parse(userIds) as string[];\n\n    if (Array.isArray(parsedUserIds)) {\n      return parsedUserIds;\n    }\n\n    return undefined;\n  } catch {\n    return undefined;\n  }\n}\n\nexport const Mention = forwardRef<\n  HTMLSpanElement,\n  { node: Node; selected: boolean }\n>(({ node, selected: isSelected }, forwardedRef) => {\n  const attrs = node.attrs as Omit<SerializedTiptapMentionData, \"kind\">;\n\n  if (node.type.name === LIVEBLOCKS_MENTION_TYPE) {\n    const mention: UserMentionData = {\n      kind: \"user\",\n      id: attrs.id,\n    };\n\n    return (\n      <UserMention\n        mention={mention}\n        isSelected={isSelected}\n        ref={forwardedRef}\n      />\n    );\n  }\n\n  if (node.type.name === LIVEBLOCKS_GROUP_MENTION_TYPE) {\n    const mention: GroupMentionData = {\n      kind: \"group\",\n      id: attrs.id,\n      userIds: deserializeGroupUserIds(attrs.userIds),\n    };\n\n    return (\n      <GroupMention\n        mention={mention}\n        isSelected={isSelected}\n        ref={forwardedRef}\n      />\n    );\n  }\n\n  return null;\n});\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Mention.js","sources":["../../src/mentions/Mention.tsx"],"sourcesContent":["import {\n  type GroupMentionData,\n  MENTION_CHARACTER,\n  type MentionData,\n  type UserMentionData,\n} from \"@liveblocks/core\";\nimport { cn, Group, User } from \"@liveblocks/react-ui/_private\";\nimport { NodeViewWrapper, type ReactNodeViewProps } from \"@tiptap/react\";\n\nimport {\n  LIVEBLOCKS_GROUP_MENTION_TYPE,\n  LIVEBLOCKS_MENTION_TYPE,\n  type SerializedTiptapMentionData,\n} from \"../types\";\n\ninterface MentionProps {\n  mention: MentionData;\n  isSelected: boolean;\n}\ninterface GroupMentionProps {\n  mention: GroupMentionData;\n  isSelected: boolean;\n}\n\nconst UserMention = ({ isSelected, mention }: MentionProps) => {\n\n  return (\n    <NodeViewWrapper\n      className={cn(\n        \"lb-root lb-mention lb-tiptap-mention\",\n        isSelected && \"lb-mention-selected\"\n      )}\n      as=\"span\"\n    >\n      <span className=\"lb-mention-symbol\">{MENTION_CHARACTER}</span>\n      <User userId={mention.id} />\n    </NodeViewWrapper>\n  );\n};\n\nconst GroupMention = ({ isSelected, mention }: GroupMentionProps) => {\n  return (\n    <NodeViewWrapper\n      className={cn(\n        \"lb-root lb-mention lb-tiptap-mention\",\n        isSelected && \"lb-mention-selected\"\n      )}\n      as=\"span\"\n    >\n      <span className=\"lb-mention-symbol\">{MENTION_CHARACTER}</span>\n      <Group groupId={mention.id} />\n    </NodeViewWrapper>\n  );\n};\n\nfunction deserializeGroupUserIds(\n  userIds: string | undefined\n): string[] | undefined {\n  if (typeof userIds !== \"string\") {\n    return undefined;\n  }\n\n  try {\n    const parsedUserIds = JSON.parse(userIds) as string[];\n\n    if (Array.isArray(parsedUserIds)) {\n      return parsedUserIds;\n    }\n\n    return undefined;\n  } catch {\n    return undefined;\n  }\n}\n\nexport const Mention = ({ node, selected: isSelected }: ReactNodeViewProps<HTMLSpanElement>) => {\n  const attrs = node.attrs as Omit<SerializedTiptapMentionData, \"kind\">;\n\n  if (node.type.name === LIVEBLOCKS_MENTION_TYPE) {\n    const mention: UserMentionData = {\n      kind: \"user\",\n      id: attrs.id,\n    };\n\n    return (\n      <UserMention\n        mention={mention}\n        isSelected={isSelected}\n      />\n    );\n  }\n  if (node.type.name === LIVEBLOCKS_GROUP_MENTION_TYPE) {\n    const mention: GroupMentionData = {\n      kind: \"group\",\n      id: attrs.id,\n      userIds: deserializeGroupUserIds(attrs.userIds),\n    };\n\n    return (\n      <GroupMention\n        mention={mention}\n        isSelected={isSelected}\n      />\n    );\n  }\n\n  return null;\n};\n"],"names":[],"mappings":";;;;;;AAwBA,MAAM,WAAc,GAAA,CAAC,EAAE,UAAA,EAAY,SAA4B,KAAA;AAE7D,EACE,uBAAA,IAAA;AAAA,IAAC,eAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,EAAA;AAAA,QACT,sCAAA;AAAA,QACA,UAAc,IAAA,qBAAA;AAAA,OAChB;AAAA,MACA,EAAG,EAAA,MAAA;AAAA,MAEH,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,MAAA,EAAA,EAAK,SAAU,EAAA,mBAAA,EAAqB,QAAkB,EAAA,iBAAA,EAAA,CAAA;AAAA,wBACtD,GAAA,CAAA,IAAA,EAAA,EAAK,MAAQ,EAAA,OAAA,CAAQ,EAAI,EAAA,CAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GAC5B,CAAA;AAEJ,CAAA,CAAA;AAEA,MAAM,YAAe,GAAA,CAAC,EAAE,UAAA,EAAY,SAAiC,KAAA;AACnE,EACE,uBAAA,IAAA;AAAA,IAAC,eAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,EAAA;AAAA,QACT,sCAAA;AAAA,QACA,UAAc,IAAA,qBAAA;AAAA,OAChB;AAAA,MACA,EAAG,EAAA,MAAA;AAAA,MAEH,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,MAAA,EAAA,EAAK,SAAU,EAAA,mBAAA,EAAqB,QAAkB,EAAA,iBAAA,EAAA,CAAA;AAAA,wBACtD,GAAA,CAAA,KAAA,EAAA,EAAM,OAAS,EAAA,OAAA,CAAQ,EAAI,EAAA,CAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GAC9B,CAAA;AAEJ,CAAA,CAAA;AAEA,SAAS,wBACP,OACsB,EAAA;AACtB,EAAI,IAAA,OAAO,YAAY,QAAU,EAAA;AAC/B,IAAO,OAAA,KAAA,CAAA,CAAA;AAAA,GACT;AAEA,EAAI,IAAA;AACF,IAAM,MAAA,aAAA,GAAgB,IAAK,CAAA,KAAA,CAAM,OAAO,CAAA,CAAA;AAExC,IAAI,IAAA,KAAA,CAAM,OAAQ,CAAA,aAAa,CAAG,EAAA;AAChC,MAAO,OAAA,aAAA,CAAA;AAAA,KACT;AAEA,IAAO,OAAA,KAAA,CAAA,CAAA;AAAA,GACD,CAAA,MAAA;AACN,IAAO,OAAA,KAAA,CAAA,CAAA;AAAA,GACT;AACF,CAAA;AAEO,MAAM,UAAU,CAAC,EAAE,IAAM,EAAA,QAAA,EAAU,YAAsD,KAAA;AAC9F,EAAA,MAAM,QAAQ,IAAK,CAAA,KAAA,CAAA;AAEnB,EAAI,IAAA,IAAA,CAAK,IAAK,CAAA,IAAA,KAAS,uBAAyB,EAAA;AAC9C,IAAA,MAAM,OAA2B,GAAA;AAAA,MAC/B,IAAM,EAAA,MAAA;AAAA,MACN,IAAI,KAAM,CAAA,EAAA;AAAA,KACZ,CAAA;AAEA,IACE,uBAAA,GAAA;AAAA,MAAC,WAAA;AAAA,MAAA;AAAA,QACC,OAAA;AAAA,QACA,UAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GAEJ;AACA,EAAI,IAAA,IAAA,CAAK,IAAK,CAAA,IAAA,KAAS,6BAA+B,EAAA;AACpD,IAAA,MAAM,OAA4B,GAAA;AAAA,MAChC,IAAM,EAAA,OAAA;AAAA,MACN,IAAI,KAAM,CAAA,EAAA;AAAA,MACV,OAAA,EAAS,uBAAwB,CAAA,KAAA,CAAM,OAAO,CAAA;AAAA,KAChD,CAAA;AAEA,IACE,uBAAA,GAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,OAAA;AAAA,QACA,UAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GAEJ;AAEA,EAAO,OAAA,IAAA,CAAA;AACT;;;;"}

package/dist/mentions/MentionExtension.cjs

@@ -140,6 +140,7 @@ const MentionExtension = core$1.Extension.create({
         },
         allowSpaces: true,
         items: () => [],
+        // we'll let the mentions list component do this
         render: () => {
           let component;
           return {