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

ueberdosis · Jun 14, 2021 · 3b78af4 · 3b78af4
1 parent c64761a
commit 3b78af4
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 6 deletions.
diff --git 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
@@ -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() {