remove gridsome

This commit is contained in:
Philipp Kühn
2021-09-16 14:41:25 +02:00
parent e012a29240
commit 2f15a11572
311 changed files with 157 additions and 10308 deletions

70
docs/api/nodes/mention.md Normal file
View File

@@ -0,0 +1,70 @@
# 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>