@tiptap/extension-mention 3.0.0-beta.3 → 3.0.0-beta.30

package/dist/index.cjs

@@ -31,64 +31,101 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   Mention: () => Mention,
-  MentionPluginKey: () => MentionPluginKey,
   default: () => index_default
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/mention.ts
 var import_core = require("@tiptap/core");
-var import_state = require("@tiptap/pm/state");
+var import_model = require("@tiptap/pm/model");
 var import_suggestion = __toESM(require("@tiptap/suggestion"), 1);
-var MentionPluginKey = new import_state.PluginKey("mention");
+
+// src/utils/get-default-suggestion-attributes.ts
+var import_state = require("@tiptap/pm/state");
+function getSuggestionOptions({
+  editor: tiptapEditor,
+  overrideSuggestionOptions,
+  extensionName,
+  char = "@"
+}) {
+  const pluginKey = new import_state.PluginKey();
+  return {
+    editor: tiptapEditor,
+    char,
+    pluginKey,
+    command: ({ editor, range, props }) => {
+      var _a, _b, _c;
+      const nodeAfter = editor.view.state.selection.$to.nodeAfter;
+      const overrideSpace = (_a = nodeAfter == null ? void 0 : nodeAfter.text) == null ? void 0 : _a.startsWith(" ");
+      if (overrideSpace) {
+        range.to += 1;
+      }
+      editor.chain().focus().insertContentAt(range, [
+        {
+          type: extensionName,
+          attrs: { ...props, mentionSuggestionChar: char }
+        },
+        {
+          type: "text",
+          text: " "
+        }
+      ]).run();
+      (_c = (_b = editor.view.dom.ownerDocument.defaultView) == null ? void 0 : _b.getSelection()) == null ? void 0 : _c.collapseToEnd();
+    },
+    allow: ({ state, range }) => {
+      const $from = state.doc.resolve(range.from);
+      const type = state.schema.nodes[extensionName];
+      const allow = !!$from.parent.type.contentMatch.matchType(type);
+      return allow;
+    },
+    ...overrideSuggestionOptions
+  };
+}
+
+// src/mention.ts
+function getSuggestions(options) {
+  return (options.options.suggestions.length ? options.options.suggestions : [options.options.suggestion]).map(
+    (suggestion) => getSuggestionOptions({
+      // @ts-ignore `editor` can be `undefined` when converting the document to HTML with the HTML utility
+      editor: options.editor,
+      overrideSuggestionOptions: suggestion,
+      extensionName: options.name,
+      char: suggestion.char
+    })
+  );
+}
+function getSuggestionFromChar(options, char) {
+  const suggestions = getSuggestions(options);
+  const suggestion = suggestions.find((s) => s.char === char);
+  if (suggestion) {
+    return suggestion;
+  }
+  if (suggestions.length) {
+    return suggestions[0];
+  }
+  return null;
+}
 var Mention = import_core.Node.create({
   name: "mention",
   priority: 101,
   addOptions() {
     return {
       HTMLAttributes: {},
-      renderText({ options, node }) {
-        var _a;
-        return `${options.suggestion.char}${(_a = node.attrs.label) != null ? _a : node.attrs.id}`;
+      renderText({ node, suggestion }) {
+        var _a, _b;
+        return `${(_a = suggestion == null ? void 0 : suggestion.char) != null ? _a : "@"}${(_b = node.attrs.label) != null ? _b : node.attrs.id}`;
       },
       deleteTriggerWithBackspace: false,
-      renderHTML({ options, node }) {
-        var _a;
+      renderHTML({ options, node, suggestion }) {
+        var _a, _b;
         return [
           "span",
           (0, import_core.mergeAttributes)(this.HTMLAttributes, options.HTMLAttributes),
-          `${options.suggestion.char}${(_a = node.attrs.label) != null ? _a : node.attrs.id}`
+          `${(_a = suggestion == null ? void 0 : suggestion.char) != null ? _a : "@"}${(_b = node.attrs.label) != null ? _b : node.attrs.id}`
         ];
       },
-      suggestion: {
-        char: "@",
-        pluginKey: MentionPluginKey,
-        command: ({ editor, range, props }) => {
-          var _a, _b, _c;
-          const nodeAfter = editor.view.state.selection.$to.nodeAfter;
-          const overrideSpace = (_a = nodeAfter == null ? void 0 : nodeAfter.text) == null ? void 0 : _a.startsWith(" ");
-          if (overrideSpace) {
-            range.to += 1;
-          }
-          editor.chain().focus().insertContentAt(range, [
-            {
-              type: this.name,
-              attrs: props
-            },
-            {
-              type: "text",
-              text: " "
-            }
-          ]).run();
-          (_c = (_b = editor.view.dom.ownerDocument.defaultView) == null ? void 0 : _b.getSelection()) == null ? void 0 : _c.collapseToEnd();
-        },
-        allow: ({ state, range }) => {
-          const $from = state.doc.resolve(range.from);
-          const type = state.schema.nodes[this.name];
-          const allow = !!$from.parent.type.contentMatch.matchType(type);
-          return allow;
-        }
-      }
+      suggestions: [],
+      suggestion: {}
     };
   },
   group: "inline",
@@ -120,6 +157,16 @@ var Mention = import_core.Node.create({
             "data-label": attributes.label
           };
         }
+      },
+      // When there are multiple types of mentions, this attribute helps distinguish them
+      mentionSuggestionChar: {
+        default: "@",
+        parseHTML: (element) => element.getAttribute("data-mention-suggestion-char"),
+        renderHTML: (attributes) => {
+          return {
+            "data-mention-suggestion-char": attributes.mentionSuggestionChar
+          };
+        }
       }
     };
   },
@@ -131,6 +178,7 @@ var Mention = import_core.Node.create({
     ];
   },
   renderHTML({ node, HTMLAttributes }) {
+    const suggestion = getSuggestionFromChar(this, node.attrs.mentionSuggestionChar);
     if (this.options.renderLabel !== void 0) {
       console.warn("renderLabel is deprecated use renderText and renderHTML instead");
       return [
@@ -138,7 +186,8 @@ var Mention = import_core.Node.create({
         (0, import_core.mergeAttributes)({ "data-type": this.name }, this.options.HTMLAttributes, HTMLAttributes),
         this.options.renderLabel({
           options: this.options,
-          node
+          node,
+          suggestion
         })
       ];
     }
@@ -150,7 +199,8 @@ var Mention = import_core.Node.create({
     );
     const html = this.options.renderHTML({
       options: mergedOptions,
-      node
+      node,
+      suggestion
     });
     if (typeof html === "string") {
       return ["span", (0, import_core.mergeAttributes)({ "data-type": this.name }, this.options.HTMLAttributes, HTMLAttributes), html];
@@ -158,17 +208,16 @@ var Mention = import_core.Node.create({
     return html;
   },
   renderText({ node }) {
+    const args = {
+      options: this.options,
+      node,
+      suggestion: getSuggestionFromChar(this, node.attrs.mentionSuggestionChar)
+    };
     if (this.options.renderLabel !== void 0) {
       console.warn("renderLabel is deprecated use renderText and renderHTML instead");
-      return this.options.renderLabel({
-        options: this.options,
-        node
-      });
+      return this.options.renderLabel(args);
     }
-    return this.options.renderText({
-      options: this.options,
-      node
-    });
+    return this.options.renderText(args);
   },
   addKeyboardShortcuts() {
     return {
@@ -179,28 +228,29 @@ var Mention = import_core.Node.create({
         if (!empty) {
           return false;
         }
+        let mentionNode = new import_model.Node();
+        let mentionPos = 0;
         state.doc.nodesBetween(anchor - 1, anchor, (node, pos) => {
           if (node.type.name === this.name) {
             isMention = true;
-            tr.insertText(
-              this.options.deleteTriggerWithBackspace ? "" : this.options.suggestion.char || "",
-              pos,
-              pos + node.nodeSize
-            );
+            mentionNode = node;
+            mentionPos = pos;
             return false;
           }
         });
+        if (isMention) {
+          tr.insertText(
+            this.options.deleteTriggerWithBackspace ? "" : mentionNode.attrs.mentionSuggestionChar,
+            mentionPos,
+            mentionPos + mentionNode.nodeSize
+          );
+        }
         return isMention;
       })
     };
   },
   addProseMirrorPlugins() {
-    return [
-      (0, import_suggestion.default)({
-        editor: this.editor,
-        ...this.options.suggestion
-      })
-    ];
+    return getSuggestions(this).map(import_suggestion.default);
   }
 });
 
@@ -208,7 +258,6 @@ var Mention = import_core.Node.create({
 var index_default = Mention;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  Mention,
-  MentionPluginKey
+  Mention
 });
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/mention.ts"],"sourcesContent":["import { Mention } from './mention.js'\n\nexport * from './mention.js'\n\nexport default Mention\n","import { mergeAttributes, Node } from '@tiptap/core'\nimport type { DOMOutputSpec, Node as ProseMirrorNode } from '@tiptap/pm/model'\nimport { PluginKey } from '@tiptap/pm/state'\nimport type { SuggestionOptions } from '@tiptap/suggestion'\nimport Suggestion from '@tiptap/suggestion'\n\n// See `addAttributes` below\nexport interface MentionNodeAttrs {\n  /**\n   * The identifier for the selected item that was mentioned, stored as a `data-id`\n   * attribute.\n   */\n  id: string | null\n  /**\n   * The label to be rendered by the editor as the displayed text for this mentioned\n   * item, if provided. Stored as a `data-label` attribute. See `renderLabel`.\n   */\n  label?: string | null\n}\n\nexport type MentionOptions<SuggestionItem = any, Attrs extends Record<string, any> = MentionNodeAttrs> = {\n  /**\n   * The HTML attributes for a mention node.\n   * @default {}\n   * @example { class: 'foo' }\n   */\n  HTMLAttributes: Record<string, any>\n\n  /**\n   * A function to render the label of a mention.\n   * @deprecated use renderText and renderHTML instead\n   * @param props The render props\n   * @returns The label\n   * @example ({ options, node }) => `${options.suggestion.char}${node.attrs.label ?? node.attrs.id}`\n   */\n  renderLabel?: (props: { options: MentionOptions<SuggestionItem, Attrs>; node: ProseMirrorNode }) => string\n\n  /**\n   * A function to render the text of a mention.\n   * @param props The render props\n   * @returns The text\n   * @example ({ options, node }) => `${options.suggestion.char}${node.attrs.label ?? node.attrs.id}`\n   */\n  renderText: (props: { options: MentionOptions<SuggestionItem, Attrs>; node: ProseMirrorNode }) => string\n\n  /**\n   * A function to render the HTML of a mention.\n   * @param props The render props\n   * @returns The HTML as a ProseMirror DOM Output Spec\n   * @example ({ options, node }) => ['span', { 'data-type': 'mention' }, `${options.suggestion.char}${node.attrs.label ?? node.attrs.id}`]\n   */\n  renderHTML: (props: { options: MentionOptions<SuggestionItem, Attrs>; node: ProseMirrorNode }) => DOMOutputSpec\n\n  /**\n   * Whether to delete the trigger character with backspace.\n   * @default false\n   */\n  deleteTriggerWithBackspace: boolean\n\n  /**\n   * The suggestion options.\n   * @default {}\n   * @example { char: '@', pluginKey: MentionPluginKey, command: ({ editor, range, props }) => { ... } }\n   */\n  suggestion: Omit<SuggestionOptions<SuggestionItem, Attrs>, 'editor'>\n}\n\n/**\n * The plugin key for the mention plugin.\n * @default 'mention'\n */\nexport const MentionPluginKey = new PluginKey('mention')\n\n/**\n * This extension allows you to insert mentions into the editor.\n * @see https://www.tiptap.dev/api/extensions/mention\n */\nexport const Mention = Node.create<MentionOptions>({\n  name: 'mention',\n\n  priority: 101,\n\n  addOptions() {\n    return {\n      HTMLAttributes: {},\n      renderText({ options, node }) {\n        return `${options.suggestion.char}${node.attrs.label ?? node.attrs.id}`\n      },\n      deleteTriggerWithBackspace: false,\n      renderHTML({ options, node }) {\n        return [\n          'span',\n          mergeAttributes(this.HTMLAttributes, options.HTMLAttributes),\n          `${options.suggestion.char}${node.attrs.label ?? node.attrs.id}`,\n        ]\n      },\n      suggestion: {\n        char: '@',\n        pluginKey: MentionPluginKey,\n        command: ({ editor, range, props }) => {\n          // increase range.to by one when the next node is of type \"text\"\n          // and starts with a space character\n          const nodeAfter = editor.view.state.selection.$to.nodeAfter\n          const overrideSpace = nodeAfter?.text?.startsWith(' ')\n\n          if (overrideSpace) {\n            range.to += 1\n          }\n\n          editor\n            .chain()\n            .focus()\n            .insertContentAt(range, [\n              {\n                type: this.name,\n                attrs: props,\n              },\n              {\n                type: 'text',\n                text: ' ',\n              },\n            ])\n            .run()\n\n          // get reference to `window` object from editor element, to support cross-frame JS usage\n          editor.view.dom.ownerDocument.defaultView?.getSelection()?.collapseToEnd()\n        },\n        allow: ({ state, range }) => {\n          const $from = state.doc.resolve(range.from)\n          const type = state.schema.nodes[this.name]\n          const allow = !!$from.parent.type.contentMatch.matchType(type)\n\n          return allow\n        },\n      },\n    }\n  },\n\n  group: 'inline',\n\n  inline: true,\n\n  selectable: false,\n\n  atom: true,\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,\n          }\n        },\n      },\n\n      label: {\n        default: null,\n        parseHTML: element => element.getAttribute('data-label'),\n        renderHTML: attributes => {\n          if (!attributes.label) {\n            return {}\n          }\n\n          return {\n            'data-label': attributes.label,\n          }\n        },\n      },\n    }\n  },\n\n  parseHTML() {\n    return [\n      {\n        tag: `span[data-type=\"${this.name}\"]`,\n      },\n    ]\n  },\n\n  renderHTML({ node, HTMLAttributes }) {\n    if (this.options.renderLabel !== undefined) {\n      console.warn('renderLabel is deprecated use renderText and renderHTML instead')\n      return [\n        'span',\n        mergeAttributes({ 'data-type': this.name }, this.options.HTMLAttributes, HTMLAttributes),\n        this.options.renderLabel({\n          options: this.options,\n          node,\n        }),\n      ]\n    }\n    const mergedOptions = { ...this.options }\n\n    mergedOptions.HTMLAttributes = mergeAttributes(\n      { 'data-type': this.name },\n      this.options.HTMLAttributes,\n      HTMLAttributes,\n    )\n    const html = this.options.renderHTML({\n      options: mergedOptions,\n      node,\n    })\n\n    if (typeof html === 'string') {\n      return ['span', mergeAttributes({ 'data-type': this.name }, this.options.HTMLAttributes, HTMLAttributes), html]\n    }\n    return html\n  },\n\n  renderText({ node }) {\n    if (this.options.renderLabel !== undefined) {\n      console.warn('renderLabel is deprecated use renderText and renderHTML instead')\n      return this.options.renderLabel({\n        options: this.options,\n        node,\n      })\n    }\n    return this.options.renderText({\n      options: this.options,\n      node,\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(\n                this.options.deleteTriggerWithBackspace ? '' : this.options.suggestion.char || '',\n                pos,\n                pos + node.nodeSize,\n              )\n\n              return false\n            }\n          })\n\n          return isMention\n        }),\n    }\n  },\n\n  addProseMirrorPlugins() {\n    return [\n      Suggestion({\n        editor: this.editor,\n        ...this.options.suggestion,\n      }),\n    ]\n  },\n})\n"],"mappings":"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","names":["Suggestion"]}
+{"version":3,"sources":["../src/index.ts","../src/mention.ts","../src/utils/get-default-suggestion-attributes.ts"],"sourcesContent":["import { Mention } from './mention.js'\n\nexport * from './mention.js'\n\nexport default Mention\n","import type { Editor } from '@tiptap/core'\nimport { mergeAttributes, Node } from '@tiptap/core'\nimport type { DOMOutputSpec } from '@tiptap/pm/model'\nimport { Node as ProseMirrorNode } from '@tiptap/pm/model'\nimport type { SuggestionOptions } from '@tiptap/suggestion'\nimport Suggestion from '@tiptap/suggestion'\n\nimport { getSuggestionOptions } from './utils/get-default-suggestion-attributes.js'\n\n// See `addAttributes` below\nexport interface MentionNodeAttrs {\n  /**\n   * The identifier for the selected item that was mentioned, stored as a `data-id`\n   * attribute.\n   */\n  id: string | null\n  /**\n   * The label to be rendered by the editor as the displayed text for this mentioned\n   * item, if provided. Stored as a `data-label` attribute. See `renderLabel`.\n   */\n  label?: string | null\n  /**\n   * The character that triggers the suggestion, stored as\n   * `data-mention-suggestion-char` attribute.\n   */\n  mentionSuggestionChar?: string\n}\n\nexport interface MentionOptions<SuggestionItem = any, Attrs extends Record<string, any> = MentionNodeAttrs> {\n  /**\n   * The HTML attributes for a mention node.\n   * @default {}\n   * @example { class: 'foo' }\n   */\n  HTMLAttributes: Record<string, any>\n\n  /**\n   * A function to render the label of a mention.\n   * @deprecated use renderText and renderHTML instead\n   * @param props The render props\n   * @returns The label\n   * @example ({ options, node }) => `${options.suggestion.char}${node.attrs.label ?? node.attrs.id}`\n   */\n  renderLabel?: (props: {\n    options: MentionOptions<SuggestionItem, Attrs>\n    node: ProseMirrorNode\n    suggestion: SuggestionOptions | null\n  }) => string\n\n  /**\n   * A function to render the text of a mention.\n   * @param props The render props\n   * @returns The text\n   * @example ({ options, node }) => `${options.suggestion.char}${node.attrs.label ?? node.attrs.id}`\n   */\n  renderText: (props: {\n    options: MentionOptions<SuggestionItem, Attrs>\n    node: ProseMirrorNode\n    suggestion: SuggestionOptions | null\n  }) => string\n\n  /**\n   * A function to render the HTML of a mention.\n   * @param props The render props\n   * @returns The HTML as a ProseMirror DOM Output Spec\n   * @example ({ options, node }) => ['span', { 'data-type': 'mention' }, `${options.suggestion.char}${node.attrs.label ?? node.attrs.id}`]\n   */\n  renderHTML: (props: {\n    options: MentionOptions<SuggestionItem, Attrs>\n    node: ProseMirrorNode\n    suggestion: SuggestionOptions | null\n  }) => DOMOutputSpec\n\n  /**\n   * Whether to delete the trigger character with backspace.\n   * @default false\n   */\n  deleteTriggerWithBackspace: boolean\n\n  /**\n   * The suggestion options, when you want to support multiple triggers.\n   *\n   * With this parameter, you can define multiple types of mention. For example, you can use the `@` character\n   * to mention users and the `#` character to mention tags.\n   *\n   * @default [{ char: '@', pluginKey: MentionPluginKey }]\n   * @example [{ char: '@', pluginKey: MentionPluginKey }, { char: '#', pluginKey: new PluginKey('hashtag') }]\n   */\n  suggestions: Array<Omit<SuggestionOptions<SuggestionItem, Attrs>, 'editor'>>\n\n  /**\n   * The suggestion options, when you want to support only one trigger. To support multiple triggers, use the\n   * `suggestions` parameter instead.\n   *\n   * @default {}\n   * @example { char: '@', pluginKey: MentionPluginKey, command: ({ editor, range, props }) => { ... } }\n   */\n  suggestion: Omit<SuggestionOptions<SuggestionItem, Attrs>, 'editor'>\n}\n\ninterface GetSuggestionsOptions {\n  editor?: Editor\n  options: MentionOptions\n  name: string\n}\n\n/**\n * Returns the suggestions for the mention extension.\n *\n * @param options The extension options\n * @returns the suggestions\n */\nfunction getSuggestions(options: GetSuggestionsOptions) {\n  return (options.options.suggestions.length ? options.options.suggestions : [options.options.suggestion]).map(\n    suggestion =>\n      getSuggestionOptions({\n        // @ts-ignore `editor` can be `undefined` when converting the document to HTML with the HTML utility\n        editor: options.editor,\n        overrideSuggestionOptions: suggestion,\n        extensionName: options.name,\n        char: suggestion.char,\n      }),\n  )\n}\n\n/**\n * Returns the suggestion options of the mention that has a given character trigger. If not\n * found, it returns the first suggestion.\n *\n * @param options The extension options\n * @param char The character that triggers the mention\n * @returns The suggestion options\n */\nfunction getSuggestionFromChar(options: GetSuggestionsOptions, char: string) {\n  const suggestions = getSuggestions(options)\n\n  const suggestion = suggestions.find(s => s.char === char)\n  if (suggestion) {\n    return suggestion\n  }\n\n  if (suggestions.length) {\n    return suggestions[0]\n  }\n\n  return null\n}\n\n/**\n * This extension allows you to insert mentions into the editor.\n * @see https://www.tiptap.dev/api/extensions/mention\n */\nexport const Mention = Node.create<MentionOptions>({\n  name: 'mention',\n\n  priority: 101,\n\n  addOptions() {\n    return {\n      HTMLAttributes: {},\n      renderText({ node, suggestion }) {\n        return `${suggestion?.char ?? '@'}${node.attrs.label ?? node.attrs.id}`\n      },\n      deleteTriggerWithBackspace: false,\n      renderHTML({ options, node, suggestion }) {\n        return [\n          'span',\n          mergeAttributes(this.HTMLAttributes, options.HTMLAttributes),\n          `${suggestion?.char ?? '@'}${node.attrs.label ?? node.attrs.id}`,\n        ]\n      },\n      suggestions: [],\n      suggestion: {},\n    }\n  },\n\n  group: 'inline',\n\n  inline: true,\n\n  selectable: false,\n\n  atom: true,\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,\n          }\n        },\n      },\n\n      label: {\n        default: null,\n        parseHTML: element => element.getAttribute('data-label'),\n        renderHTML: attributes => {\n          if (!attributes.label) {\n            return {}\n          }\n\n          return {\n            'data-label': attributes.label,\n          }\n        },\n      },\n\n      // When there are multiple types of mentions, this attribute helps distinguish them\n      mentionSuggestionChar: {\n        default: '@',\n        parseHTML: element => element.getAttribute('data-mention-suggestion-char'),\n        renderHTML: attributes => {\n          return {\n            'data-mention-suggestion-char': attributes.mentionSuggestionChar,\n          }\n        },\n      },\n    }\n  },\n\n  parseHTML() {\n    return [\n      {\n        tag: `span[data-type=\"${this.name}\"]`,\n      },\n    ]\n  },\n\n  renderHTML({ node, HTMLAttributes }) {\n    const suggestion = getSuggestionFromChar(this, node.attrs.mentionSuggestionChar)\n\n    if (this.options.renderLabel !== undefined) {\n      console.warn('renderLabel is deprecated use renderText and renderHTML instead')\n      return [\n        'span',\n        mergeAttributes({ 'data-type': this.name }, this.options.HTMLAttributes, HTMLAttributes),\n        this.options.renderLabel({\n          options: this.options,\n          node,\n          suggestion,\n        }),\n      ]\n    }\n    const mergedOptions = { ...this.options }\n\n    mergedOptions.HTMLAttributes = mergeAttributes(\n      { 'data-type': this.name },\n      this.options.HTMLAttributes,\n      HTMLAttributes,\n    )\n\n    const html = this.options.renderHTML({\n      options: mergedOptions,\n      node,\n      suggestion,\n    })\n\n    if (typeof html === 'string') {\n      return ['span', mergeAttributes({ 'data-type': this.name }, this.options.HTMLAttributes, HTMLAttributes), html]\n    }\n    return html\n  },\n\n  renderText({ node }) {\n    const args = {\n      options: this.options,\n      node,\n      suggestion: getSuggestionFromChar(this, node.attrs.mentionSuggestionChar),\n    }\n    if (this.options.renderLabel !== undefined) {\n      console.warn('renderLabel is deprecated use renderText and renderHTML instead')\n      return this.options.renderLabel(args)\n    }\n\n    return this.options.renderText(args)\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          // Store node and position for later use\n          let mentionNode = new ProseMirrorNode()\n          let mentionPos = 0\n\n          state.doc.nodesBetween(anchor - 1, anchor, (node, pos) => {\n            if (node.type.name === this.name) {\n              isMention = true\n              mentionNode = node\n              mentionPos = pos\n              return false\n            }\n          })\n\n          if (isMention) {\n            tr.insertText(\n              this.options.deleteTriggerWithBackspace ? '' : mentionNode.attrs.mentionSuggestionChar,\n              mentionPos,\n              mentionPos + mentionNode.nodeSize,\n            )\n          }\n\n          return isMention\n        }),\n    }\n  },\n\n  addProseMirrorPlugins() {\n    // Create a plugin for each suggestion configuration\n    return getSuggestions(this).map(Suggestion)\n  },\n})\n","import type { Editor } from '@tiptap/core'\nimport { PluginKey } from '@tiptap/pm/state'\nimport type { SuggestionOptions } from '@tiptap/suggestion'\n\n/**\n * Arguments for the `getSuggestionOptions` function\n * @see getSuggestionOptions\n */\nexport interface GetSuggestionOptionsOptions {\n  /**\n   * The Tiptap editor instance.\n   */\n  editor: Editor\n  /**\n   * The suggestion options configuration provided to the\n   * `Mention` extension.\n   */\n  overrideSuggestionOptions: Omit<SuggestionOptions, 'editor'>\n  /**\n   * The name of the Mention extension\n   */\n  extensionName: string\n  /**\n   * The character that triggers the suggestion.\n   * @default '@'\n   */\n  char?: string\n}\n\n/**\n * Returns the suggestion options for a trigger of the Mention extension. These\n * options are used to create a `Suggestion` ProseMirror plugin. Each plugin lets\n * you define a different trigger that opens the Mention menu. For example,\n * you can define a `@` trigger to mention users and a `#` trigger to mention\n * tags.\n *\n * @param param0 The configured options for the suggestion\n * @returns\n */\nexport function getSuggestionOptions({\n  editor: tiptapEditor,\n  overrideSuggestionOptions,\n  extensionName,\n  char = '@',\n}: GetSuggestionOptionsOptions): SuggestionOptions {\n  const pluginKey = new PluginKey()\n\n  return {\n    editor: tiptapEditor,\n    char,\n    pluginKey,\n    command: ({ editor, range, props }: { editor: any; range: any; props: any }) => {\n      // increase range.to by one when the next node is of type \"text\"\n      // and starts with a space character\n      const nodeAfter = editor.view.state.selection.$to.nodeAfter\n      const overrideSpace = nodeAfter?.text?.startsWith(' ')\n\n      if (overrideSpace) {\n        range.to += 1\n      }\n\n      editor\n        .chain()\n        .focus()\n        .insertContentAt(range, [\n          {\n            type: extensionName,\n            attrs: { ...props, mentionSuggestionChar: char },\n          },\n          {\n            type: 'text',\n            text: ' ',\n          },\n        ])\n        .run()\n\n      // get reference to `window` object from editor element, to support cross-frame JS usage\n      editor.view.dom.ownerDocument.defaultView?.getSelection()?.collapseToEnd()\n    },\n    allow: ({ state, range }: { state: any; range: any }) => {\n      const $from = state.doc.resolve(range.from)\n      const type = state.schema.nodes[extensionName]\n      const allow = !!$from.parent.type.contentMatch.matchType(type)\n\n      return allow\n    },\n    ...overrideSuggestionOptions,\n  }\n}\n"],"mappings":"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","names":["ProseMirrorNode","Suggestion"]}

package/dist/index.d.cts

@@ -1,6 +1,5 @@
 import { Node as Node$1 } from '@tiptap/core';
 import { Node, DOMOutputSpec } from '@tiptap/pm/model';
-import { PluginKey } from '@tiptap/pm/state';
 import { SuggestionOptions } from '@tiptap/suggestion';
 
 interface MentionNodeAttrs {
@@ -14,8 +13,13 @@ interface MentionNodeAttrs {
      * item, if provided. Stored as a `data-label` attribute. See `renderLabel`.
      */
     label?: string | null;
+    /**
+     * The character that triggers the suggestion, stored as
+     * `data-mention-suggestion-char` attribute.
+     */
+    mentionSuggestionChar?: string;
 }
-type MentionOptions<SuggestionItem = any, Attrs extends Record<string, any> = MentionNodeAttrs> = {
+interface MentionOptions<SuggestionItem = any, Attrs extends Record<string, any> = MentionNodeAttrs> {
     /**
      * The HTML attributes for a mention node.
      * @default {}
@@ -32,6 +36,7 @@ type MentionOptions<SuggestionItem = any, Attrs extends Record<string, any> = Me
     renderLabel?: (props: {
         options: MentionOptions<SuggestionItem, Attrs>;
         node: Node;
+        suggestion: SuggestionOptions | null;
     }) => string;
     /**
      * A function to render the text of a mention.
@@ -42,6 +47,7 @@ type MentionOptions<SuggestionItem = any, Attrs extends Record<string, any> = Me
     renderText: (props: {
         options: MentionOptions<SuggestionItem, Attrs>;
         node: Node;
+        suggestion: SuggestionOptions | null;
     }) => string;
     /**
      * A function to render the HTML of a mention.
@@ -52,6 +58,7 @@ type MentionOptions<SuggestionItem = any, Attrs extends Record<string, any> = Me
     renderHTML: (props: {
         options: MentionOptions<SuggestionItem, Attrs>;
         node: Node;
+        suggestion: SuggestionOptions | null;
     }) => DOMOutputSpec;
     /**
      * Whether to delete the trigger character with backspace.
@@ -59,21 +66,28 @@ type MentionOptions<SuggestionItem = any, Attrs extends Record<string, any> = Me
      */
     deleteTriggerWithBackspace: boolean;
     /**
-     * The suggestion options.
+     * The suggestion options, when you want to support multiple triggers.
+     *
+     * With this parameter, you can define multiple types of mention. For example, you can use the `@` character
+     * to mention users and the `#` character to mention tags.
+     *
+     * @default [{ char: '@', pluginKey: MentionPluginKey }]
+     * @example [{ char: '@', pluginKey: MentionPluginKey }, { char: '#', pluginKey: new PluginKey('hashtag') }]
+     */
+    suggestions: Array<Omit<SuggestionOptions<SuggestionItem, Attrs>, 'editor'>>;
+    /**
+     * The suggestion options, when you want to support only one trigger. To support multiple triggers, use the
+     * `suggestions` parameter instead.
+     *
      * @default {}
      * @example { char: '@', pluginKey: MentionPluginKey, command: ({ editor, range, props }) => { ... } }
      */
     suggestion: Omit<SuggestionOptions<SuggestionItem, Attrs>, 'editor'>;
-};
-/**
- * The plugin key for the mention plugin.
- * @default 'mention'
- */
-declare const MentionPluginKey: PluginKey<any>;
+}
 /**
  * This extension allows you to insert mentions into the editor.
  * @see https://www.tiptap.dev/api/extensions/mention
  */
 declare const Mention: Node$1<MentionOptions<any, MentionNodeAttrs>, any>;
 
-export { Mention, type MentionNodeAttrs, type MentionOptions, MentionPluginKey, Mention as default };
+export { Mention, type MentionNodeAttrs, type MentionOptions, Mention as default };

package/dist/index.d.ts

@@ -1,6 +1,5 @@
 import { Node as Node$1 } from '@tiptap/core';
 import { Node, DOMOutputSpec } from '@tiptap/pm/model';
-import { PluginKey } from '@tiptap/pm/state';
 import { SuggestionOptions } from '@tiptap/suggestion';
 
 interface MentionNodeAttrs {
@@ -14,8 +13,13 @@ interface MentionNodeAttrs {
      * item, if provided. Stored as a `data-label` attribute. See `renderLabel`.
      */
     label?: string | null;
+    /**
+     * The character that triggers the suggestion, stored as
+     * `data-mention-suggestion-char` attribute.
+     */
+    mentionSuggestionChar?: string;
 }
-type MentionOptions<SuggestionItem = any, Attrs extends Record<string, any> = MentionNodeAttrs> = {
+interface MentionOptions<SuggestionItem = any, Attrs extends Record<string, any> = MentionNodeAttrs> {
     /**
      * The HTML attributes for a mention node.
      * @default {}
@@ -32,6 +36,7 @@ type MentionOptions<SuggestionItem = any, Attrs extends Record<string, any> = Me
     renderLabel?: (props: {
         options: MentionOptions<SuggestionItem, Attrs>;
         node: Node;
+        suggestion: SuggestionOptions | null;
     }) => string;
     /**
      * A function to render the text of a mention.
@@ -42,6 +47,7 @@ type MentionOptions<SuggestionItem = any, Attrs extends Record<string, any> = Me
     renderText: (props: {
         options: MentionOptions<SuggestionItem, Attrs>;
         node: Node;
+        suggestion: SuggestionOptions | null;
     }) => string;
     /**
      * A function to render the HTML of a mention.
@@ -52,6 +58,7 @@ type MentionOptions<SuggestionItem = any, Attrs extends Record<string, any> = Me
     renderHTML: (props: {
         options: MentionOptions<SuggestionItem, Attrs>;
         node: Node;
+        suggestion: SuggestionOptions | null;
     }) => DOMOutputSpec;
     /**
      * Whether to delete the trigger character with backspace.
@@ -59,21 +66,28 @@ type MentionOptions<SuggestionItem = any, Attrs extends Record<string, any> = Me
      */
     deleteTriggerWithBackspace: boolean;
     /**
-     * The suggestion options.
+     * The suggestion options, when you want to support multiple triggers.
+     *
+     * With this parameter, you can define multiple types of mention. For example, you can use the `@` character
+     * to mention users and the `#` character to mention tags.
+     *
+     * @default [{ char: '@', pluginKey: MentionPluginKey }]
+     * @example [{ char: '@', pluginKey: MentionPluginKey }, { char: '#', pluginKey: new PluginKey('hashtag') }]
+     */
+    suggestions: Array<Omit<SuggestionOptions<SuggestionItem, Attrs>, 'editor'>>;
+    /**
+     * The suggestion options, when you want to support only one trigger. To support multiple triggers, use the
+     * `suggestions` parameter instead.
+     *
      * @default {}
      * @example { char: '@', pluginKey: MentionPluginKey, command: ({ editor, range, props }) => { ... } }
      */
     suggestion: Omit<SuggestionOptions<SuggestionItem, Attrs>, 'editor'>;
-};
-/**
- * The plugin key for the mention plugin.
- * @default 'mention'
- */
-declare const MentionPluginKey: PluginKey<any>;
+}
 /**
  * This extension allows you to insert mentions into the editor.
  * @see https://www.tiptap.dev/api/extensions/mention
  */
 declare const Mention: Node$1<MentionOptions<any, MentionNodeAttrs>, any>;
 
-export { Mention, type MentionNodeAttrs, type MentionOptions, MentionPluginKey, Mention as default };
+export { Mention, type MentionNodeAttrs, type MentionOptions, Mention as default };

package/dist/index.js

@@ -1,56 +1,94 @@
 // src/mention.ts
 import { mergeAttributes, Node } from "@tiptap/core";
-import { PluginKey } from "@tiptap/pm/state";
+import { Node as ProseMirrorNode } from "@tiptap/pm/model";
 import Suggestion from "@tiptap/suggestion";
-var MentionPluginKey = new PluginKey("mention");
+
+// src/utils/get-default-suggestion-attributes.ts
+import { PluginKey } from "@tiptap/pm/state";
+function getSuggestionOptions({
+  editor: tiptapEditor,
+  overrideSuggestionOptions,
+  extensionName,
+  char = "@"
+}) {
+  const pluginKey = new PluginKey();
+  return {
+    editor: tiptapEditor,
+    char,
+    pluginKey,
+    command: ({ editor, range, props }) => {
+      var _a, _b, _c;
+      const nodeAfter = editor.view.state.selection.$to.nodeAfter;
+      const overrideSpace = (_a = nodeAfter == null ? void 0 : nodeAfter.text) == null ? void 0 : _a.startsWith(" ");
+      if (overrideSpace) {
+        range.to += 1;
+      }
+      editor.chain().focus().insertContentAt(range, [
+        {
+          type: extensionName,
+          attrs: { ...props, mentionSuggestionChar: char }
+        },
+        {
+          type: "text",
+          text: " "
+        }
+      ]).run();
+      (_c = (_b = editor.view.dom.ownerDocument.defaultView) == null ? void 0 : _b.getSelection()) == null ? void 0 : _c.collapseToEnd();
+    },
+    allow: ({ state, range }) => {
+      const $from = state.doc.resolve(range.from);
+      const type = state.schema.nodes[extensionName];
+      const allow = !!$from.parent.type.contentMatch.matchType(type);
+      return allow;
+    },
+    ...overrideSuggestionOptions
+  };
+}
+
+// src/mention.ts
+function getSuggestions(options) {
+  return (options.options.suggestions.length ? options.options.suggestions : [options.options.suggestion]).map(
+    (suggestion) => getSuggestionOptions({
+      // @ts-ignore `editor` can be `undefined` when converting the document to HTML with the HTML utility
+      editor: options.editor,
+      overrideSuggestionOptions: suggestion,
+      extensionName: options.name,
+      char: suggestion.char
+    })
+  );
+}
+function getSuggestionFromChar(options, char) {
+  const suggestions = getSuggestions(options);
+  const suggestion = suggestions.find((s) => s.char === char);
+  if (suggestion) {
+    return suggestion;
+  }
+  if (suggestions.length) {
+    return suggestions[0];
+  }
+  return null;
+}
 var Mention = Node.create({
   name: "mention",
   priority: 101,
   addOptions() {
     return {
       HTMLAttributes: {},
-      renderText({ options, node }) {
-        var _a;
-        return `${options.suggestion.char}${(_a = node.attrs.label) != null ? _a : node.attrs.id}`;
+      renderText({ node, suggestion }) {
+        var _a, _b;
+        return `${(_a = suggestion == null ? void 0 : suggestion.char) != null ? _a : "@"}${(_b = node.attrs.label) != null ? _b : node.attrs.id}`;
       },
       deleteTriggerWithBackspace: false,
-      renderHTML({ options, node }) {
-        var _a;
+      renderHTML({ options, node, suggestion }) {
+        var _a, _b;
         return [
           "span",
           mergeAttributes(this.HTMLAttributes, options.HTMLAttributes),
-          `${options.suggestion.char}${(_a = node.attrs.label) != null ? _a : node.attrs.id}`
+          `${(_a = suggestion == null ? void 0 : suggestion.char) != null ? _a : "@"}${(_b = node.attrs.label) != null ? _b : node.attrs.id}`
         ];
       },
-      suggestion: {
-        char: "@",
-        pluginKey: MentionPluginKey,
-        command: ({ editor, range, props }) => {
-          var _a, _b, _c;
-          const nodeAfter = editor.view.state.selection.$to.nodeAfter;
-          const overrideSpace = (_a = nodeAfter == null ? void 0 : nodeAfter.text) == null ? void 0 : _a.startsWith(" ");
-          if (overrideSpace) {
-            range.to += 1;
-          }
-          editor.chain().focus().insertContentAt(range, [
-            {
-              type: this.name,
-              attrs: props
-            },
-            {
-              type: "text",
-              text: " "
-            }
-          ]).run();
-          (_c = (_b = editor.view.dom.ownerDocument.defaultView) == null ? void 0 : _b.getSelection()) == null ? void 0 : _c.collapseToEnd();
-        },
-        allow: ({ state, range }) => {
-          const $from = state.doc.resolve(range.from);
-          const type = state.schema.nodes[this.name];
-          const allow = !!$from.parent.type.contentMatch.matchType(type);
-          return allow;
-        }
-      }
+      suggestions: [],
+      suggestion: {}
     };
   },
   group: "inline",
@@ -82,6 +120,16 @@ var Mention = Node.create({
             "data-label": attributes.label
           };
         }
+      },
+      // When there are multiple types of mentions, this attribute helps distinguish them
+      mentionSuggestionChar: {
+        default: "@",
+        parseHTML: (element) => element.getAttribute("data-mention-suggestion-char"),
+        renderHTML: (attributes) => {
+          return {
+            "data-mention-suggestion-char": attributes.mentionSuggestionChar
+          };
+        }
       }
     };
   },
@@ -93,6 +141,7 @@ var Mention = Node.create({
     ];
   },
   renderHTML({ node, HTMLAttributes }) {
+    const suggestion = getSuggestionFromChar(this, node.attrs.mentionSuggestionChar);
     if (this.options.renderLabel !== void 0) {
       console.warn("renderLabel is deprecated use renderText and renderHTML instead");
       return [
@@ -100,7 +149,8 @@ var Mention = Node.create({
         mergeAttributes({ "data-type": this.name }, this.options.HTMLAttributes, HTMLAttributes),
         this.options.renderLabel({
           options: this.options,
-          node
+          node,
+          suggestion
         })
       ];
     }
@@ -112,7 +162,8 @@ var Mention = Node.create({
     );
     const html = this.options.renderHTML({
       options: mergedOptions,
-      node
+      node,
+      suggestion
     });
     if (typeof html === "string") {
       return ["span", mergeAttributes({ "data-type": this.name }, this.options.HTMLAttributes, HTMLAttributes), html];
@@ -120,17 +171,16 @@ var Mention = Node.create({
     return html;
   },
   renderText({ node }) {
+    const args = {
+      options: this.options,
+      node,
+      suggestion: getSuggestionFromChar(this, node.attrs.mentionSuggestionChar)
+    };
     if (this.options.renderLabel !== void 0) {
       console.warn("renderLabel is deprecated use renderText and renderHTML instead");
-      return this.options.renderLabel({
-        options: this.options,
-        node
-      });
+      return this.options.renderLabel(args);
     }
-    return this.options.renderText({
-      options: this.options,
-      node
-    });
+    return this.options.renderText(args);
   },
   addKeyboardShortcuts() {
     return {
@@ -141,28 +191,29 @@ var Mention = Node.create({
         if (!empty) {
           return false;
         }
+        let mentionNode = new ProseMirrorNode();
+        let mentionPos = 0;
         state.doc.nodesBetween(anchor - 1, anchor, (node, pos) => {
           if (node.type.name === this.name) {
             isMention = true;
-            tr.insertText(
-              this.options.deleteTriggerWithBackspace ? "" : this.options.suggestion.char || "",
-              pos,
-              pos + node.nodeSize
-            );
+            mentionNode = node;
+            mentionPos = pos;
             return false;
           }
         });
+        if (isMention) {
+          tr.insertText(
+            this.options.deleteTriggerWithBackspace ? "" : mentionNode.attrs.mentionSuggestionChar,
+            mentionPos,
+            mentionPos + mentionNode.nodeSize
+          );
+        }
         return isMention;
       })
     };
   },
   addProseMirrorPlugins() {
-    return [
-      Suggestion({
-        editor: this.editor,
-        ...this.options.suggestion
-      })
-    ];
+    return getSuggestions(this).map(Suggestion);
   }
 });
 
@@ -170,7 +221,6 @@ var Mention = Node.create({
 var index_default = Mention;
 export {
   Mention,
-  MentionPluginKey,
   index_default as default
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/mention.ts","../src/index.ts"],"sourcesContent":["import { mergeAttributes, Node } from '@tiptap/core'\nimport type { DOMOutputSpec, Node as ProseMirrorNode } from '@tiptap/pm/model'\nimport { PluginKey } from '@tiptap/pm/state'\nimport type { SuggestionOptions } from '@tiptap/suggestion'\nimport Suggestion from '@tiptap/suggestion'\n\n// See `addAttributes` below\nexport interface MentionNodeAttrs {\n  /**\n   * The identifier for the selected item that was mentioned, stored as a `data-id`\n   * attribute.\n   */\n  id: string | null\n  /**\n   * The label to be rendered by the editor as the displayed text for this mentioned\n   * item, if provided. Stored as a `data-label` attribute. See `renderLabel`.\n   */\n  label?: string | null\n}\n\nexport type MentionOptions<SuggestionItem = any, Attrs extends Record<string, any> = MentionNodeAttrs> = {\n  /**\n   * The HTML attributes for a mention node.\n   * @default {}\n   * @example { class: 'foo' }\n   */\n  HTMLAttributes: Record<string, any>\n\n  /**\n   * A function to render the label of a mention.\n   * @deprecated use renderText and renderHTML instead\n   * @param props The render props\n   * @returns The label\n   * @example ({ options, node }) => `${options.suggestion.char}${node.attrs.label ?? node.attrs.id}`\n   */\n  renderLabel?: (props: { options: MentionOptions<SuggestionItem, Attrs>; node: ProseMirrorNode }) => string\n\n  /**\n   * A function to render the text of a mention.\n   * @param props The render props\n   * @returns The text\n   * @example ({ options, node }) => `${options.suggestion.char}${node.attrs.label ?? node.attrs.id}`\n   */\n  renderText: (props: { options: MentionOptions<SuggestionItem, Attrs>; node: ProseMirrorNode }) => string\n\n  /**\n   * A function to render the HTML of a mention.\n   * @param props The render props\n   * @returns The HTML as a ProseMirror DOM Output Spec\n   * @example ({ options, node }) => ['span', { 'data-type': 'mention' }, `${options.suggestion.char}${node.attrs.label ?? node.attrs.id}`]\n   */\n  renderHTML: (props: { options: MentionOptions<SuggestionItem, Attrs>; node: ProseMirrorNode }) => DOMOutputSpec\n\n  /**\n   * Whether to delete the trigger character with backspace.\n   * @default false\n   */\n  deleteTriggerWithBackspace: boolean\n\n  /**\n   * The suggestion options.\n   * @default {}\n   * @example { char: '@', pluginKey: MentionPluginKey, command: ({ editor, range, props }) => { ... } }\n   */\n  suggestion: Omit<SuggestionOptions<SuggestionItem, Attrs>, 'editor'>\n}\n\n/**\n * The plugin key for the mention plugin.\n * @default 'mention'\n */\nexport const MentionPluginKey = new PluginKey('mention')\n\n/**\n * This extension allows you to insert mentions into the editor.\n * @see https://www.tiptap.dev/api/extensions/mention\n */\nexport const Mention = Node.create<MentionOptions>({\n  name: 'mention',\n\n  priority: 101,\n\n  addOptions() {\n    return {\n      HTMLAttributes: {},\n      renderText({ options, node }) {\n        return `${options.suggestion.char}${node.attrs.label ?? node.attrs.id}`\n      },\n      deleteTriggerWithBackspace: false,\n      renderHTML({ options, node }) {\n        return [\n          'span',\n          mergeAttributes(this.HTMLAttributes, options.HTMLAttributes),\n          `${options.suggestion.char}${node.attrs.label ?? node.attrs.id}`,\n        ]\n      },\n      suggestion: {\n        char: '@',\n        pluginKey: MentionPluginKey,\n        command: ({ editor, range, props }) => {\n          // increase range.to by one when the next node is of type \"text\"\n          // and starts with a space character\n          const nodeAfter = editor.view.state.selection.$to.nodeAfter\n          const overrideSpace = nodeAfter?.text?.startsWith(' ')\n\n          if (overrideSpace) {\n            range.to += 1\n          }\n\n          editor\n            .chain()\n            .focus()\n            .insertContentAt(range, [\n              {\n                type: this.name,\n                attrs: props,\n              },\n              {\n                type: 'text',\n                text: ' ',\n              },\n            ])\n            .run()\n\n          // get reference to `window` object from editor element, to support cross-frame JS usage\n          editor.view.dom.ownerDocument.defaultView?.getSelection()?.collapseToEnd()\n        },\n        allow: ({ state, range }) => {\n          const $from = state.doc.resolve(range.from)\n          const type = state.schema.nodes[this.name]\n          const allow = !!$from.parent.type.contentMatch.matchType(type)\n\n          return allow\n        },\n      },\n    }\n  },\n\n  group: 'inline',\n\n  inline: true,\n\n  selectable: false,\n\n  atom: true,\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,\n          }\n        },\n      },\n\n      label: {\n        default: null,\n        parseHTML: element => element.getAttribute('data-label'),\n        renderHTML: attributes => {\n          if (!attributes.label) {\n            return {}\n          }\n\n          return {\n            'data-label': attributes.label,\n          }\n        },\n      },\n    }\n  },\n\n  parseHTML() {\n    return [\n      {\n        tag: `span[data-type=\"${this.name}\"]`,\n      },\n    ]\n  },\n\n  renderHTML({ node, HTMLAttributes }) {\n    if (this.options.renderLabel !== undefined) {\n      console.warn('renderLabel is deprecated use renderText and renderHTML instead')\n      return [\n        'span',\n        mergeAttributes({ 'data-type': this.name }, this.options.HTMLAttributes, HTMLAttributes),\n        this.options.renderLabel({\n          options: this.options,\n          node,\n        }),\n      ]\n    }\n    const mergedOptions = { ...this.options }\n\n    mergedOptions.HTMLAttributes = mergeAttributes(\n      { 'data-type': this.name },\n      this.options.HTMLAttributes,\n      HTMLAttributes,\n    )\n    const html = this.options.renderHTML({\n      options: mergedOptions,\n      node,\n    })\n\n    if (typeof html === 'string') {\n      return ['span', mergeAttributes({ 'data-type': this.name }, this.options.HTMLAttributes, HTMLAttributes), html]\n    }\n    return html\n  },\n\n  renderText({ node }) {\n    if (this.options.renderLabel !== undefined) {\n      console.warn('renderLabel is deprecated use renderText and renderHTML instead')\n      return this.options.renderLabel({\n        options: this.options,\n        node,\n      })\n    }\n    return this.options.renderText({\n      options: this.options,\n      node,\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(\n                this.options.deleteTriggerWithBackspace ? '' : this.options.suggestion.char || '',\n                pos,\n                pos + node.nodeSize,\n              )\n\n              return false\n            }\n          })\n\n          return isMention\n        }),\n    }\n  },\n\n  addProseMirrorPlugins() {\n    return [\n      Suggestion({\n        editor: this.editor,\n        ...this.options.suggestion,\n      }),\n    ]\n  },\n})\n","import { Mention } from './mention.js'\n\nexport * from './mention.js'\n\nexport default Mention\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/mention.ts","../src/utils/get-default-suggestion-attributes.ts","../src/index.ts"],"sourcesContent":["import type { Editor } from '@tiptap/core'\nimport { mergeAttributes, Node } from '@tiptap/core'\nimport type { DOMOutputSpec } from '@tiptap/pm/model'\nimport { Node as ProseMirrorNode } from '@tiptap/pm/model'\nimport type { SuggestionOptions } from '@tiptap/suggestion'\nimport Suggestion from '@tiptap/suggestion'\n\nimport { getSuggestionOptions } from './utils/get-default-suggestion-attributes.js'\n\n// See `addAttributes` below\nexport interface MentionNodeAttrs {\n  /**\n   * The identifier for the selected item that was mentioned, stored as a `data-id`\n   * attribute.\n   */\n  id: string | null\n  /**\n   * The label to be rendered by the editor as the displayed text for this mentioned\n   * item, if provided. Stored as a `data-label` attribute. See `renderLabel`.\n   */\n  label?: string | null\n  /**\n   * The character that triggers the suggestion, stored as\n   * `data-mention-suggestion-char` attribute.\n   */\n  mentionSuggestionChar?: string\n}\n\nexport interface MentionOptions<SuggestionItem = any, Attrs extends Record<string, any> = MentionNodeAttrs> {\n  /**\n   * The HTML attributes for a mention node.\n   * @default {}\n   * @example { class: 'foo' }\n   */\n  HTMLAttributes: Record<string, any>\n\n  /**\n   * A function to render the label of a mention.\n   * @deprecated use renderText and renderHTML instead\n   * @param props The render props\n   * @returns The label\n   * @example ({ options, node }) => `${options.suggestion.char}${node.attrs.label ?? node.attrs.id}`\n   */\n  renderLabel?: (props: {\n    options: MentionOptions<SuggestionItem, Attrs>\n    node: ProseMirrorNode\n    suggestion: SuggestionOptions | null\n  }) => string\n\n  /**\n   * A function to render the text of a mention.\n   * @param props The render props\n   * @returns The text\n   * @example ({ options, node }) => `${options.suggestion.char}${node.attrs.label ?? node.attrs.id}`\n   */\n  renderText: (props: {\n    options: MentionOptions<SuggestionItem, Attrs>\n    node: ProseMirrorNode\n    suggestion: SuggestionOptions | null\n  }) => string\n\n  /**\n   * A function to render the HTML of a mention.\n   * @param props The render props\n   * @returns The HTML as a ProseMirror DOM Output Spec\n   * @example ({ options, node }) => ['span', { 'data-type': 'mention' }, `${options.suggestion.char}${node.attrs.label ?? node.attrs.id}`]\n   */\n  renderHTML: (props: {\n    options: MentionOptions<SuggestionItem, Attrs>\n    node: ProseMirrorNode\n    suggestion: SuggestionOptions | null\n  }) => DOMOutputSpec\n\n  /**\n   * Whether to delete the trigger character with backspace.\n   * @default false\n   */\n  deleteTriggerWithBackspace: boolean\n\n  /**\n   * The suggestion options, when you want to support multiple triggers.\n   *\n   * With this parameter, you can define multiple types of mention. For example, you can use the `@` character\n   * to mention users and the `#` character to mention tags.\n   *\n   * @default [{ char: '@', pluginKey: MentionPluginKey }]\n   * @example [{ char: '@', pluginKey: MentionPluginKey }, { char: '#', pluginKey: new PluginKey('hashtag') }]\n   */\n  suggestions: Array<Omit<SuggestionOptions<SuggestionItem, Attrs>, 'editor'>>\n\n  /**\n   * The suggestion options, when you want to support only one trigger. To support multiple triggers, use the\n   * `suggestions` parameter instead.\n   *\n   * @default {}\n   * @example { char: '@', pluginKey: MentionPluginKey, command: ({ editor, range, props }) => { ... } }\n   */\n  suggestion: Omit<SuggestionOptions<SuggestionItem, Attrs>, 'editor'>\n}\n\ninterface GetSuggestionsOptions {\n  editor?: Editor\n  options: MentionOptions\n  name: string\n}\n\n/**\n * Returns the suggestions for the mention extension.\n *\n * @param options The extension options\n * @returns the suggestions\n */\nfunction getSuggestions(options: GetSuggestionsOptions) {\n  return (options.options.suggestions.length ? options.options.suggestions : [options.options.suggestion]).map(\n    suggestion =>\n      getSuggestionOptions({\n        // @ts-ignore `editor` can be `undefined` when converting the document to HTML with the HTML utility\n        editor: options.editor,\n        overrideSuggestionOptions: suggestion,\n        extensionName: options.name,\n        char: suggestion.char,\n      }),\n  )\n}\n\n/**\n * Returns the suggestion options of the mention that has a given character trigger. If not\n * found, it returns the first suggestion.\n *\n * @param options The extension options\n * @param char The character that triggers the mention\n * @returns The suggestion options\n */\nfunction getSuggestionFromChar(options: GetSuggestionsOptions, char: string) {\n  const suggestions = getSuggestions(options)\n\n  const suggestion = suggestions.find(s => s.char === char)\n  if (suggestion) {\n    return suggestion\n  }\n\n  if (suggestions.length) {\n    return suggestions[0]\n  }\n\n  return null\n}\n\n/**\n * This extension allows you to insert mentions into the editor.\n * @see https://www.tiptap.dev/api/extensions/mention\n */\nexport const Mention = Node.create<MentionOptions>({\n  name: 'mention',\n\n  priority: 101,\n\n  addOptions() {\n    return {\n      HTMLAttributes: {},\n      renderText({ node, suggestion }) {\n        return `${suggestion?.char ?? '@'}${node.attrs.label ?? node.attrs.id}`\n      },\n      deleteTriggerWithBackspace: false,\n      renderHTML({ options, node, suggestion }) {\n        return [\n          'span',\n          mergeAttributes(this.HTMLAttributes, options.HTMLAttributes),\n          `${suggestion?.char ?? '@'}${node.attrs.label ?? node.attrs.id}`,\n        ]\n      },\n      suggestions: [],\n      suggestion: {},\n    }\n  },\n\n  group: 'inline',\n\n  inline: true,\n\n  selectable: false,\n\n  atom: true,\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,\n          }\n        },\n      },\n\n      label: {\n        default: null,\n        parseHTML: element => element.getAttribute('data-label'),\n        renderHTML: attributes => {\n          if (!attributes.label) {\n            return {}\n          }\n\n          return {\n            'data-label': attributes.label,\n          }\n        },\n      },\n\n      // When there are multiple types of mentions, this attribute helps distinguish them\n      mentionSuggestionChar: {\n        default: '@',\n        parseHTML: element => element.getAttribute('data-mention-suggestion-char'),\n        renderHTML: attributes => {\n          return {\n            'data-mention-suggestion-char': attributes.mentionSuggestionChar,\n          }\n        },\n      },\n    }\n  },\n\n  parseHTML() {\n    return [\n      {\n        tag: `span[data-type=\"${this.name}\"]`,\n      },\n    ]\n  },\n\n  renderHTML({ node, HTMLAttributes }) {\n    const suggestion = getSuggestionFromChar(this, node.attrs.mentionSuggestionChar)\n\n    if (this.options.renderLabel !== undefined) {\n      console.warn('renderLabel is deprecated use renderText and renderHTML instead')\n      return [\n        'span',\n        mergeAttributes({ 'data-type': this.name }, this.options.HTMLAttributes, HTMLAttributes),\n        this.options.renderLabel({\n          options: this.options,\n          node,\n          suggestion,\n        }),\n      ]\n    }\n    const mergedOptions = { ...this.options }\n\n    mergedOptions.HTMLAttributes = mergeAttributes(\n      { 'data-type': this.name },\n      this.options.HTMLAttributes,\n      HTMLAttributes,\n    )\n\n    const html = this.options.renderHTML({\n      options: mergedOptions,\n      node,\n      suggestion,\n    })\n\n    if (typeof html === 'string') {\n      return ['span', mergeAttributes({ 'data-type': this.name }, this.options.HTMLAttributes, HTMLAttributes), html]\n    }\n    return html\n  },\n\n  renderText({ node }) {\n    const args = {\n      options: this.options,\n      node,\n      suggestion: getSuggestionFromChar(this, node.attrs.mentionSuggestionChar),\n    }\n    if (this.options.renderLabel !== undefined) {\n      console.warn('renderLabel is deprecated use renderText and renderHTML instead')\n      return this.options.renderLabel(args)\n    }\n\n    return this.options.renderText(args)\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          // Store node and position for later use\n          let mentionNode = new ProseMirrorNode()\n          let mentionPos = 0\n\n          state.doc.nodesBetween(anchor - 1, anchor, (node, pos) => {\n            if (node.type.name === this.name) {\n              isMention = true\n              mentionNode = node\n              mentionPos = pos\n              return false\n            }\n          })\n\n          if (isMention) {\n            tr.insertText(\n              this.options.deleteTriggerWithBackspace ? '' : mentionNode.attrs.mentionSuggestionChar,\n              mentionPos,\n              mentionPos + mentionNode.nodeSize,\n            )\n          }\n\n          return isMention\n        }),\n    }\n  },\n\n  addProseMirrorPlugins() {\n    // Create a plugin for each suggestion configuration\n    return getSuggestions(this).map(Suggestion)\n  },\n})\n","import type { Editor } from '@tiptap/core'\nimport { PluginKey } from '@tiptap/pm/state'\nimport type { SuggestionOptions } from '@tiptap/suggestion'\n\n/**\n * Arguments for the `getSuggestionOptions` function\n * @see getSuggestionOptions\n */\nexport interface GetSuggestionOptionsOptions {\n  /**\n   * The Tiptap editor instance.\n   */\n  editor: Editor\n  /**\n   * The suggestion options configuration provided to the\n   * `Mention` extension.\n   */\n  overrideSuggestionOptions: Omit<SuggestionOptions, 'editor'>\n  /**\n   * The name of the Mention extension\n   */\n  extensionName: string\n  /**\n   * The character that triggers the suggestion.\n   * @default '@'\n   */\n  char?: string\n}\n\n/**\n * Returns the suggestion options for a trigger of the Mention extension. These\n * options are used to create a `Suggestion` ProseMirror plugin. Each plugin lets\n * you define a different trigger that opens the Mention menu. For example,\n * you can define a `@` trigger to mention users and a `#` trigger to mention\n * tags.\n *\n * @param param0 The configured options for the suggestion\n * @returns\n */\nexport function getSuggestionOptions({\n  editor: tiptapEditor,\n  overrideSuggestionOptions,\n  extensionName,\n  char = '@',\n}: GetSuggestionOptionsOptions): SuggestionOptions {\n  const pluginKey = new PluginKey()\n\n  return {\n    editor: tiptapEditor,\n    char,\n    pluginKey,\n    command: ({ editor, range, props }: { editor: any; range: any; props: any }) => {\n      // increase range.to by one when the next node is of type \"text\"\n      // and starts with a space character\n      const nodeAfter = editor.view.state.selection.$to.nodeAfter\n      const overrideSpace = nodeAfter?.text?.startsWith(' ')\n\n      if (overrideSpace) {\n        range.to += 1\n      }\n\n      editor\n        .chain()\n        .focus()\n        .insertContentAt(range, [\n          {\n            type: extensionName,\n            attrs: { ...props, mentionSuggestionChar: char },\n          },\n          {\n            type: 'text',\n            text: ' ',\n          },\n        ])\n        .run()\n\n      // get reference to `window` object from editor element, to support cross-frame JS usage\n      editor.view.dom.ownerDocument.defaultView?.getSelection()?.collapseToEnd()\n    },\n    allow: ({ state, range }: { state: any; range: any }) => {\n      const $from = state.doc.resolve(range.from)\n      const type = state.schema.nodes[extensionName]\n      const allow = !!$from.parent.type.contentMatch.matchType(type)\n\n      return allow\n    },\n    ...overrideSuggestionOptions,\n  }\n}\n","import { Mention } from './mention.js'\n\nexport * from './mention.js'\n\nexport default Mention\n"],"mappings":"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","names":[]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tiptap/extension-mention",
   "description": "mention extension for tiptap",
-  "version": "3.0.0-beta.3",
+  "version": "3.0.0-beta.30",
   "homepage": "https://tiptap.dev",
   "keywords": [
     "tiptap",
@@ -31,14 +31,14 @@
     "dist"
   ],
   "devDependencies": {
-    "@tiptap/core": "3.0.0-beta.3",
-    "@tiptap/suggestion": "3.0.0-beta.3",
-    "@tiptap/pm": "3.0.0-beta.3"
+    "@tiptap/core": "3.0.0-beta.30",
+    "@tiptap/pm": "3.0.0-beta.30",
+    "@tiptap/suggestion": "3.0.0-beta.30"
   },
   "peerDependencies": {
-    "@tiptap/core": "3.0.0-beta.3",
-    "@tiptap/suggestion": "3.0.0-beta.3",
-    "@tiptap/pm": "3.0.0-beta.3"
+    "@tiptap/core": "3.0.0-beta.30",
+    "@tiptap/pm": "3.0.0-beta.30",
+    "@tiptap/suggestion": "3.0.0-beta.30"
   },
   "repository": {
     "type": "git",

package/src/mention.ts

@@ -1,9 +1,12 @@
+import type { Editor } from '@tiptap/core'
 import { mergeAttributes, Node } from '@tiptap/core'
-import type { DOMOutputSpec, Node as ProseMirrorNode } from '@tiptap/pm/model'
-import { PluginKey } from '@tiptap/pm/state'
+import type { DOMOutputSpec } from '@tiptap/pm/model'
+import { Node as ProseMirrorNode } from '@tiptap/pm/model'
 import type { SuggestionOptions } from '@tiptap/suggestion'
 import Suggestion from '@tiptap/suggestion'
 
+import { getSuggestionOptions } from './utils/get-default-suggestion-attributes.js'
+
 // See `addAttributes` below
 export interface MentionNodeAttrs {
   /**
@@ -16,9 +19,14 @@ export interface MentionNodeAttrs {
    * item, if provided. Stored as a `data-label` attribute. See `renderLabel`.
    */
   label?: string | null
+  /**
+   * The character that triggers the suggestion, stored as
+   * `data-mention-suggestion-char` attribute.
+   */
+  mentionSuggestionChar?: string
 }
 
-export type MentionOptions<SuggestionItem = any, Attrs extends Record<string, any> = MentionNodeAttrs> = {
+export interface MentionOptions<SuggestionItem = any, Attrs extends Record<string, any> = MentionNodeAttrs> {
   /**
    * The HTML attributes for a mention node.
    * @default {}
@@ -33,7 +41,11 @@ export type MentionOptions<SuggestionItem = any, Attrs extends Record<string, an
    * @returns The label
    * @example ({ options, node }) => `${options.suggestion.char}${node.attrs.label ?? node.attrs.id}`
    */
-  renderLabel?: (props: { options: MentionOptions<SuggestionItem, Attrs>; node: ProseMirrorNode }) => string
+  renderLabel?: (props: {
+    options: MentionOptions<SuggestionItem, Attrs>
+    node: ProseMirrorNode
+    suggestion: SuggestionOptions | null
+  }) => string
 
   /**
    * A function to render the text of a mention.
@@ -41,7 +53,11 @@ export type MentionOptions<SuggestionItem = any, Attrs extends Record<string, an
    * @returns The text
    * @example ({ options, node }) => `${options.suggestion.char}${node.attrs.label ?? node.attrs.id}`
    */
-  renderText: (props: { options: MentionOptions<SuggestionItem, Attrs>; node: ProseMirrorNode }) => string
+  renderText: (props: {
+    options: MentionOptions<SuggestionItem, Attrs>
+    node: ProseMirrorNode
+    suggestion: SuggestionOptions | null
+  }) => string
 
   /**
    * A function to render the HTML of a mention.
@@ -49,7 +65,11 @@ export type MentionOptions<SuggestionItem = any, Attrs extends Record<string, an
    * @returns The HTML as a ProseMirror DOM Output Spec
    * @example ({ options, node }) => ['span', { 'data-type': 'mention' }, `${options.suggestion.char}${node.attrs.label ?? node.attrs.id}`]
    */
-  renderHTML: (props: { options: MentionOptions<SuggestionItem, Attrs>; node: ProseMirrorNode }) => DOMOutputSpec
+  renderHTML: (props: {
+    options: MentionOptions<SuggestionItem, Attrs>
+    node: ProseMirrorNode
+    suggestion: SuggestionOptions | null
+  }) => DOMOutputSpec
 
   /**
    * Whether to delete the trigger character with backspace.
@@ -58,18 +78,73 @@ export type MentionOptions<SuggestionItem = any, Attrs extends Record<string, an
   deleteTriggerWithBackspace: boolean
 
   /**
-   * The suggestion options.
+   * The suggestion options, when you want to support multiple triggers.
+   *
+   * With this parameter, you can define multiple types of mention. For example, you can use the `@` character
+   * to mention users and the `#` character to mention tags.
+   *
+   * @default [{ char: '@', pluginKey: MentionPluginKey }]
+   * @example [{ char: '@', pluginKey: MentionPluginKey }, { char: '#', pluginKey: new PluginKey('hashtag') }]
+   */
+  suggestions: Array<Omit<SuggestionOptions<SuggestionItem, Attrs>, 'editor'>>
+
+  /**
+   * The suggestion options, when you want to support only one trigger. To support multiple triggers, use the
+   * `suggestions` parameter instead.
+   *
    * @default {}
    * @example { char: '@', pluginKey: MentionPluginKey, command: ({ editor, range, props }) => { ... } }
    */
   suggestion: Omit<SuggestionOptions<SuggestionItem, Attrs>, 'editor'>
 }
 
+interface GetSuggestionsOptions {
+  editor?: Editor
+  options: MentionOptions
+  name: string
+}
+
 /**
- * The plugin key for the mention plugin.
- * @default 'mention'
+ * Returns the suggestions for the mention extension.
+ *
+ * @param options The extension options
+ * @returns the suggestions
  */
-export const MentionPluginKey = new PluginKey('mention')
+function getSuggestions(options: GetSuggestionsOptions) {
+  return (options.options.suggestions.length ? options.options.suggestions : [options.options.suggestion]).map(
+    suggestion =>
+      getSuggestionOptions({
+        // @ts-ignore `editor` can be `undefined` when converting the document to HTML with the HTML utility
+        editor: options.editor,
+        overrideSuggestionOptions: suggestion,
+        extensionName: options.name,
+        char: suggestion.char,
+      }),
+  )
+}
+
+/**
+ * Returns the suggestion options of the mention that has a given character trigger. If not
+ * found, it returns the first suggestion.
+ *
+ * @param options The extension options
+ * @param char The character that triggers the mention
+ * @returns The suggestion options
+ */
+function getSuggestionFromChar(options: GetSuggestionsOptions, char: string) {
+  const suggestions = getSuggestions(options)
+
+  const suggestion = suggestions.find(s => s.char === char)
+  if (suggestion) {
+    return suggestion
+  }
+
+  if (suggestions.length) {
+    return suggestions[0]
+  }
+
+  return null
+}
 
 /**
  * This extension allows you to insert mentions into the editor.
@@ -83,56 +158,19 @@ export const Mention = Node.create<MentionOptions>({
   addOptions() {
     return {
       HTMLAttributes: {},
-      renderText({ options, node }) {
-        return `${options.suggestion.char}${node.attrs.label ?? node.attrs.id}`
+      renderText({ node, suggestion }) {
+        return `${suggestion?.char ?? '@'}${node.attrs.label ?? node.attrs.id}`
       },
       deleteTriggerWithBackspace: false,
-      renderHTML({ options, node }) {
+      renderHTML({ options, node, suggestion }) {
         return [
           'span',
           mergeAttributes(this.HTMLAttributes, options.HTMLAttributes),
-          `${options.suggestion.char}${node.attrs.label ?? node.attrs.id}`,
+          `${suggestion?.char ?? '@'}${node.attrs.label ?? node.attrs.id}`,
         ]
       },
-      suggestion: {
-        char: '@',
-        pluginKey: MentionPluginKey,
-        command: ({ editor, range, props }) => {
-          // increase range.to by one when the next node is of type "text"
-          // and starts with a space character
-          const nodeAfter = editor.view.state.selection.$to.nodeAfter
-          const overrideSpace = nodeAfter?.text?.startsWith(' ')
-
-          if (overrideSpace) {
-            range.to += 1
-          }
-
-          editor
-            .chain()
-            .focus()
-            .insertContentAt(range, [
-              {
-                type: this.name,
-                attrs: props,
-              },
-              {
-                type: 'text',
-                text: ' ',
-              },
-            ])
-            .run()
-
-          // get reference to `window` object from editor element, to support cross-frame JS usage
-          editor.view.dom.ownerDocument.defaultView?.getSelection()?.collapseToEnd()
-        },
-        allow: ({ state, range }) => {
-          const $from = state.doc.resolve(range.from)
-          const type = state.schema.nodes[this.name]
-          const allow = !!$from.parent.type.contentMatch.matchType(type)
-
-          return allow
-        },
-      },
+      suggestions: [],
+      suggestion: {},
     }
   },
 
@@ -173,6 +211,17 @@ export const Mention = Node.create<MentionOptions>({
           }
         },
       },
+
+      // When there are multiple types of mentions, this attribute helps distinguish them
+      mentionSuggestionChar: {
+        default: '@',
+        parseHTML: element => element.getAttribute('data-mention-suggestion-char'),
+        renderHTML: attributes => {
+          return {
+            'data-mention-suggestion-char': attributes.mentionSuggestionChar,
+          }
+        },
+      },
     }
   },
 
@@ -185,6 +234,8 @@ export const Mention = Node.create<MentionOptions>({
   },
 
   renderHTML({ node, HTMLAttributes }) {
+    const suggestion = getSuggestionFromChar(this, node.attrs.mentionSuggestionChar)
+
     if (this.options.renderLabel !== undefined) {
       console.warn('renderLabel is deprecated use renderText and renderHTML instead')
       return [
@@ -193,6 +244,7 @@ export const Mention = Node.create<MentionOptions>({
         this.options.renderLabel({
           options: this.options,
           node,
+          suggestion,
         }),
       ]
     }
@@ -203,9 +255,11 @@ export const Mention = Node.create<MentionOptions>({
       this.options.HTMLAttributes,
       HTMLAttributes,
     )
+
     const html = this.options.renderHTML({
       options: mergedOptions,
       node,
+      suggestion,
     })
 
     if (typeof html === 'string') {
@@ -215,17 +269,17 @@ export const Mention = Node.create<MentionOptions>({
   },
 
   renderText({ node }) {
+    const args = {
+      options: this.options,
+      node,
+      suggestion: getSuggestionFromChar(this, node.attrs.mentionSuggestionChar),
+    }
     if (this.options.renderLabel !== undefined) {
       console.warn('renderLabel is deprecated use renderText and renderHTML instead')
-      return this.options.renderLabel({
-        options: this.options,
-        node,
-      })
+      return this.options.renderLabel(args)
     }
-    return this.options.renderText({
-      options: this.options,
-      node,
-    })
+
+    return this.options.renderText(args)
   },
 
   addKeyboardShortcuts() {
@@ -240,30 +294,34 @@ export const Mention = Node.create<MentionOptions>({
             return false
           }
 
+          // Store node and position for later use
+          let mentionNode = new ProseMirrorNode()
+          let mentionPos = 0
+
           state.doc.nodesBetween(anchor - 1, anchor, (node, pos) => {
             if (node.type.name === this.name) {
               isMention = true
-              tr.insertText(
-                this.options.deleteTriggerWithBackspace ? '' : this.options.suggestion.char || '',
-                pos,
-                pos + node.nodeSize,
-              )
-
+              mentionNode = node
+              mentionPos = pos
               return false
             }
           })
 
+          if (isMention) {
+            tr.insertText(
+              this.options.deleteTriggerWithBackspace ? '' : mentionNode.attrs.mentionSuggestionChar,
+              mentionPos,
+              mentionPos + mentionNode.nodeSize,
+            )
+          }
+
           return isMention
         }),
     }
   },
 
   addProseMirrorPlugins() {
-    return [
-      Suggestion({
-        editor: this.editor,
-        ...this.options.suggestion,
-      }),
-    ]
+    // Create a plugin for each suggestion configuration
+    return getSuggestions(this).map(Suggestion)
   },
 })

package/src/utils/get-default-suggestion-attributes.ts

@@ -0,0 +1,89 @@
+import type { Editor } from '@tiptap/core'
+import { PluginKey } from '@tiptap/pm/state'
+import type { SuggestionOptions } from '@tiptap/suggestion'
+
+/**
+ * Arguments for the `getSuggestionOptions` function
+ * @see getSuggestionOptions
+ */
+export interface GetSuggestionOptionsOptions {
+  /**
+   * The Tiptap editor instance.
+   */
+  editor: Editor
+  /**
+   * The suggestion options configuration provided to the
+   * `Mention` extension.
+   */
+  overrideSuggestionOptions: Omit<SuggestionOptions, 'editor'>
+  /**
+   * The name of the Mention extension
+   */
+  extensionName: string
+  /**
+   * The character that triggers the suggestion.
+   * @default '@'
+   */
+  char?: string
+}
+
+/**
+ * Returns the suggestion options for a trigger of the Mention extension. These
+ * options are used to create a `Suggestion` ProseMirror plugin. Each plugin lets
+ * you define a different trigger that opens the Mention menu. For example,
+ * you can define a `@` trigger to mention users and a `#` trigger to mention
+ * tags.
+ *
+ * @param param0 The configured options for the suggestion
+ * @returns
+ */
+export function getSuggestionOptions({
+  editor: tiptapEditor,
+  overrideSuggestionOptions,
+  extensionName,
+  char = '@',
+}: GetSuggestionOptionsOptions): SuggestionOptions {
+  const pluginKey = new PluginKey()
+
+  return {
+    editor: tiptapEditor,
+    char,
+    pluginKey,
+    command: ({ editor, range, props }: { editor: any; range: any; props: any }) => {
+      // increase range.to by one when the next node is of type "text"
+      // and starts with a space character
+      const nodeAfter = editor.view.state.selection.$to.nodeAfter
+      const overrideSpace = nodeAfter?.text?.startsWith(' ')
+
+      if (overrideSpace) {
+        range.to += 1
+      }
+
+      editor
+        .chain()
+        .focus()
+        .insertContentAt(range, [
+          {
+            type: extensionName,
+            attrs: { ...props, mentionSuggestionChar: char },
+          },
+          {
+            type: 'text',
+            text: ' ',
+          },
+        ])
+        .run()
+
+      // get reference to `window` object from editor element, to support cross-frame JS usage
+      editor.view.dom.ownerDocument.defaultView?.getSelection()?.collapseToEnd()
+    },
+    allow: ({ state, range }: { state: any; range: any }) => {
+      const $from = state.doc.resolve(range.from)
+      const type = state.schema.nodes[extensionName]
+      const allow = !!$from.parent.type.contentMatch.matchType(type)
+
+      return allow
+    },
+    ...overrideSuggestionOptions,
+  }
+}