feat: add renderLabel option to mention extension, see #1322

packages/extension-mention/src/mention.ts

@@ -1,8 +1,13 @@
 import { Node, mergeAttributes } from '@tiptap/core'
+import { Node as ProseMirrorNode } from 'prosemirror-model'
 import Suggestion, { SuggestionOptions } from '@tiptap/suggestion'
 
 export type MentionOptions = {
   HTMLAttributes: Record<string, any>,
+  renderLabel: (props: {
+    options: MentionOptions,
+    node: ProseMirrorNode,
+  }) => string,
   suggestion: Omit<SuggestionOptions, 'editor'>,
 }
 
@@ -11,6 +16,9 @@ export const Mention = Node.create<MentionOptions>({
 
   defaultOptions: {
     HTMLAttributes: {},
+    renderLabel({ options, node }) {
+      return `${options.suggestion.char}${node.attrs.label ?? node.attrs.id}`
+    },
     suggestion: {
       char: '@',
       command: ({ editor, range, props }) => {
@@ -95,12 +103,18 @@ export const Mention = Node.create<MentionOptions>({
     return [
       'span',
       mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
-      `${this.options.suggestion.char}${node.attrs.label ?? node.attrs.id}`,
+      this.options.renderLabel({
+        options: this.options,
+        node,
+      }),
     ]
   },
 
   renderText({ node }) {
-    return `${this.options.suggestion.char}${node.attrs.label ?? node.attrs.id}`
+    return this.options.renderLabel({
+      options: this.options,
+      node,
+    })
   },
 
   addKeyboardShortcuts() {