From 91a5aa32b1930cbafd79fd86018861455d7a0900 Mon Sep 17 00:00:00 2001 From: Hans Pagel Date: Wed, 27 Jan 2021 11:52:42 +0100 Subject: [PATCH] docs: add content to the Mention page --- docs/src/docPages/api/nodes/mention.md | 28 +++++++++++++++++++++----- 1 file changed, 23 insertions(+), 5 deletions(-) diff --git a/docs/src/docPages/api/nodes/mention.md b/docs/src/docPages/api/nodes/mention.md index 4f40ec4e..b0223491 100644 --- a/docs/src/docPages/api/nodes/mention.md +++ b/docs/src/docPages/api/nodes/mention.md @@ -2,7 +2,9 @@ [![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. +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 @@ -14,14 +16,30 @@ yarn add @tiptap/extension-mention ``` ## 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 -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 | Option | Type | Default | Description |