tiptap/docs/api/nodes/mention.md

description	icon
Ping all your people @marijn @kevin	at-line

Mention

Honestly, the mention node is amazing. It adds support for @mentions, for example to ping users, and provides full control over the rendering.

Literally everything can be customized. You can pass a custom component for the rendering. All examples use .filter() to search through items, but feel free to send async queries to an API or add a more advanced library like fuse.js to your project.

Installation

# with npm
npm install @tiptap/extension-mention

# with Yarn
yarn add @tiptap/extension-mention

Dependencies

To place the popups correctly, we’re using tippy.js in all our examples. You are free to bring your own library, but if you’re fine with it, just install what we use:

# with npm
npm install tippy.js

# with Yarn
yarn add tippy.js

Settings

HTMLAttributes

Custom HTML attributes that should be added to the rendered HTML tag.

Mention.configure({
  HTMLAttributes: {
    class: 'my-custom-class',
  },
})

renderLabel

Define how a mention label should be rendered.

Mention.configure({
  renderLabel({ options, node }) {
    return `${options.suggestion.char}${node.attrs.label ?? node.attrs.id}`
  }
})

suggestion

Read more

Mention.configure({
  suggestion: {
    // …
  },
})

Source code

packages/extension-mention/

Usage

https://embed.tiptap.dev/preview/Nodes/Mention