docs: add content to the Mention page
This commit is contained in:
@@ -2,7 +2,9 @@
|
|||||||
[](https://www.npmjs.com/package/@tiptap/extension-mention)
|
[](https://www.npmjs.com/package/@tiptap/extension-mention)
|
||||||
[](https://npmcharts.com/compare/@tiptap/extension-mention?minimal=true)
|
[](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.
|
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
|
## Installation
|
||||||
```bash
|
```bash
|
||||||
@@ -14,14 +16,30 @@ yarn add @tiptap/extension-mention
|
|||||||
```
|
```
|
||||||
|
|
||||||
## Dependencies
|
## Dependencies
|
||||||
TODO
|
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:
|
||||||
|
|
||||||
* tippy.js
|
```bash
|
||||||
|
# with npm
|
||||||
|
npm install tippy.js
|
||||||
|
|
||||||
|
# with Yarn
|
||||||
|
yarn add tippy.js
|
||||||
|
```
|
||||||
|
|
||||||
## Rendering
|
## Rendering
|
||||||
TODO
|
Currently, we’re supporting custom Vue.js components only. To get the required `VueRenderer` install our Vue.js package:
|
||||||
|
|
||||||
* @tiptap/vue
|
```bash
|
||||||
|
# with npm
|
||||||
|
npm install @tiptap/vue
|
||||||
|
|
||||||
|
# with Yarn
|
||||||
|
yarn add @tiptap/vue
|
||||||
|
```
|
||||||
|
|
||||||
|
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 plain JavaScript, but that is probably a lot more work.
|
||||||
|
|
||||||
## Settings
|
## Settings
|
||||||
| Option | Type | Default | Description |
|
| Option | Type | Default | Description |
|
||||||
|
|||||||
Reference in New Issue
Block a user