add doc page for floating menu
This commit is contained in:
@@ -41,7 +41,7 @@ export default {
|
|||||||
],
|
],
|
||||||
content: `
|
content: `
|
||||||
<p>
|
<p>
|
||||||
Hey, try to select some text here. There will popup a menu for selecting some inline styles. Remember: you have full control about content and styling of this menu.
|
This is an example of a medium-like editor. Enter a new line and some buttons will appear.
|
||||||
</p>
|
</p>
|
||||||
`,
|
`,
|
||||||
})
|
})
|
||||||
|
|||||||
41
docs/src/docPages/api/extensions/floating-menu.md
Normal file
41
docs/src/docPages/api/extensions/floating-menu.md
Normal file
@@ -0,0 +1,41 @@
|
|||||||
|
# Floating Menu
|
||||||
|
[](https://www.npmjs.com/package/@tiptap/extension-floating-menu)
|
||||||
|
[](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',
|
||||||
|
}" />
|
||||||
@@ -207,6 +207,8 @@
|
|||||||
# type: pro
|
# type: pro
|
||||||
- title: Dropcursor
|
- title: Dropcursor
|
||||||
link: /api/extensions/dropcursor
|
link: /api/extensions/dropcursor
|
||||||
|
- title: FloatingMenu
|
||||||
|
link: /api/extensions/floating-menu
|
||||||
- title: Focus
|
- title: Focus
|
||||||
link: /api/extensions/focus
|
link: /api/extensions/focus
|
||||||
- title: FontFamily
|
- title: FontFamily
|
||||||
|
|||||||
Reference in New Issue
Block a user