mirror of
https://github.com/ueberdosis/tiptap.git
synced 2024-12-13 09:29:01 +08:00
1.8 KiB
1.8 KiB
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
npm install @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:
npm install 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
Mention.configure({
suggestion: {
// …
},
})