Tiptap Docs

Mentions and emoji

Mention and Emoji add @mentions and emojis to the text, each as a node of its own, with a suggestion popup while people type.

Emoji
Render emojis as inline nodes with fallback images for unsupported emojis.
Open source
Mention
Mention other users with a suggestion popup and full control over the rendering.
Open source

When you use them

  • Mentioning people. Mention adds @mentions, for example to ping users, and shows a popup of matching items while someone types.
  • Several kinds of mentions. Mention's suggestions setting defines more than one trigger, for example @ for people and # for movies.
  • Emojis. Emoji turns typed and pasted emojis into nodes, so emojis that a system can't show get a fallback image. It can also turn emoticons such as <3 into emojis.

How they work

  • They are nodes. A mention or an emoji is a node inside the text, and Emoji renders inline. Copying text out of the editor turns emojis back into plain text. Nodes and marks
  • The popup comes from the Suggestion utility. Both have a suggestion setting that defines, for example, the character that opens the popup. Mention needs @tiptap/suggestion installed next to it. Suggestion utility
  • The items and the rendering are yours. Mention items can come from a filtered list or from async queries to an API, and you can pass a custom component to render them.
  • You add them yourself. Neither is part of the StarterKit.
PreviouslyYouTube