add doc page for floating menu

This commit is contained in:
Philipp Kühn
2021-04-01 15:47:00 +02:00
parent c55ebc7ea6
commit 3f1fa81392
3 changed files with 44 additions and 1 deletions

View File

@@ -0,0 +1,41 @@
# Floating Menu
[![Version](https://img.shields.io/npm/v/@tiptap/extension-floating-menu.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-floating-menu)
[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-floating-menu.svg)](https://npmcharts.com/compare/@tiptap/extension-floating-menu?minimal=true)
This extension will make a contextual menu appear near a selection of text.
## Installation
```bash
# with npm
npm install @tiptap/extension-floating-menu
# with Yarn
yarn add @tiptap/extension-floating-menu
```
## Settings
| Option | Type | Default | Description |
| ------------ | ------------- | --------- | ----------------------------- |
| element | `HTMLElement` | `null` | The DOM element of your menu. |
## Source code
[packages/extension-floating-menu/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-floating-menu/)
## Using Vanilla JavaScript
```js
import { Editor } from '@tiptap/core'
import FloatingMenu from '@tiptap/extension-floating-menu'
new Editor({
extensions: [
FloatingMenu.configure({
element: document.querySelector('.menu'),
}),
],
})
```
## Using a framework
<demos :items="{
Vue: 'Extensions/FloatingMenu/Vue',
React: 'Extensions/FloatingMenu/React',
}" />