From 3b78af44a054fa5d0101d8f7d836409b0b68547e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Mon, 14 Jun 2021 16:40:17 +0200
Subject: [PATCH] feat: add renderLabel option to mention extension, see #1322

---
 docs/src/docPages/api/nodes/mention.md    |  9 +++++----
 packages/extension-mention/src/mention.ts | 18 ++++++++++++++++--
 2 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/docs/src/docPages/api/nodes/mention.md b/docs/src/docPages/api/nodes/mention.md
index 82c32311..05e2a6fd 100644
--- a/docs/src/docPages/api/nodes/mention.md
+++ b/docs/src/docPages/api/nodes/mention.md
@@ -42,10 +42,11 @@ And yes, we plan to support React, too. Meanwhile, you can roll your own `ReactR
 It’s also possible to use Vanilla JavaScript, but that is probably a lot more work.
 
 ## Settings
-| Option         | Type     | Default | Description                                                           |
-| -------------- | -------- | ------- | --------------------------------------------------------------------- |
-| HTMLAttributes | `Object` | `{}`    | Custom HTML attributes that should be added to the rendered HTML tag. |
-| suggestion     | `Object` | `{ … }` | [Read more](/api/utilities/suggestion)                                |
+| Option         | Type     | Default                    | Description                                                           |
+| -------------- | -------- | -------------------------- | --------------------------------------------------------------------- |
+| HTMLAttributes | `Object` | `{}`                       | Custom HTML attributes that should be added to the rendered HTML tag. |
+| renderLabel    | `String` | `({ options, node }) => …` | Define how a mention label should be rendered.                        |
+| suggestion     | `Object` | `{ … }`                    | [Read more](/api/utilities/suggestion)                                |
 
 ## Source code
 [packages/extension-mention/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-mention/)
diff --git a/packages/extension-mention/src/mention.ts b/packages/extension-mention/src/mention.ts
index 2dae93c4..32765bb8 100644
--- a/packages/extension-mention/src/mention.ts
+++ b/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() {