tiptap/docs/api/nodes/mention.md
2021-09-16 14:41:25 +02:00

71 lines
2.6 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# Mention
[![Version](https://img.shields.io/npm/v/@tiptap/extension-mention.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-mention)
[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-mention.svg)](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, were using [tippy.js](https://atomiks.github.io/tippyjs/) in all our examples. You are free to bring your own library, but if youre fine with it, just install what we use:
```bash
# with npm
npm install tippy.js
# with Yarn
yarn add tippy.js
```
## Rendering
Currently, were 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 dont forget to share it with the community.
Its 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. |
| 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>