mirror of
https://github.com/ueberdosis/tiptap.git
synced 2024-12-04 11:49:02 +08:00
84 lines
2.5 KiB
Markdown
84 lines
2.5 KiB
Markdown
---
|
||
description: Ping all your people @marijn @kevin
|
||
icon: at-line
|
||
---
|
||
|
||
# Mention
|
||
[](https://www.npmjs.com/package/@tiptap/extension-mention)
|
||
[](https://npmcharts.com/compare/@tiptap/extension-mention?minimal=true)
|
||
|
||
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](https://fusejs.io/) to your project.
|
||
|
||
## Installation
|
||
```bash
|
||
# 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](https://atomiks.github.io/tippyjs/) in all our examples. You are free to bring your own library, but if you’re fine with it, just install what we use:
|
||
|
||
```bash
|
||
# with npm
|
||
npm install tippy.js
|
||
|
||
# with Yarn
|
||
yarn add tippy.js
|
||
```
|
||
|
||
## Rendering
|
||
Currently, we’re supporting custom Vue.js components only. To get the required `VueRenderer` install our Vue.js package:
|
||
|
||
```bash
|
||
# with npm
|
||
npm install @tiptap/vue-2
|
||
|
||
# with Yarn
|
||
yarn add @tiptap/vue-2
|
||
```
|
||
If you are using `vue-3` then the `VueRenderer` requires different input:
|
||
```js
|
||
new VueRenderer(MentionList, {
|
||
props: props,
|
||
editor: this.editor,
|
||
})
|
||
```
|
||
and not
|
||
```js
|
||
new VueRenderer(MentionList, {
|
||
parent: this,
|
||
propsData: props,
|
||
})
|
||
```
|
||
|
||
And yes, we plan to support React, too. Meanwhile, you can roll your own `ReactRenderer`, but don’t forget to share it with the community.
|
||
|
||
It’s also possible to use Vanilla JavaScript, but that is probably a lot more work.
|
||
|
||
## Settings
|
||
|
||
### HTMLAttributes
|
||
Custom HTML attributes that should be added to the rendered HTML tag.
|
||
|
||
```js
|
||
Mention.configure({
|
||
HTMLAttributes: {
|
||
class: 'my-custom-class',
|
||
},
|
||
})
|
||
```
|
||
|
||
| 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/)
|
||
|
||
## Usage
|
||
<tiptap-demo name="Nodes/Mention"></tiptap-demo>
|