diff --git a/docs/src/demos/Extensions/FloatingMenu/Vue/index.vue b/docs/src/demos/Extensions/FloatingMenu/Vue/index.vue index 4954ea36..8d249bf4 100644 --- a/docs/src/demos/Extensions/FloatingMenu/Vue/index.vue +++ b/docs/src/demos/Extensions/FloatingMenu/Vue/index.vue @@ -41,7 +41,7 @@ export default { ], content: `
- 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.
`, }) diff --git a/docs/src/docPages/api/extensions/floating-menu.md b/docs/src/docPages/api/extensions/floating-menu.md new file mode 100644 index 00000000..ead688e0 --- /dev/null +++ b/docs/src/docPages/api/extensions/floating-menu.md @@ -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 +