mirror of
https://github.com/ueberdosis/tiptap.git
synced 2024-12-13 01:19:01 +08:00
3.1 KiB
3.1 KiB
Floating Menu
This extension will make a contextual menu appear near a selection of text.
Installation
# 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. |
tippyOptions | Object |
{} |
Options for tippy.js |
pluginKey | `string | PluginKey` | 'floatingMenu' |
shouldShow | (props) => boolean |
Controls whether the menu should be shown or not. |
Source code
packages/extension-floating-menu/
Using Vanilla JavaScript
import { Editor } from '@tiptap/core'
import FloatingMenu from '@tiptap/extension-floating-menu'
new Editor({
extensions: [
FloatingMenu.configure({
element: document.querySelector('.menu'),
}),
],
})
Using a framework
Custom logic
Customize the logic for showing the menu with the shouldShow
option. For components, shouldShow
can be passed as a prop.
FloatingMenu.configure({
shouldShow: ({ editor, view, state, oldState }) => {
// show the floating within any paragraph
return editor.isActive('paragraph')
},
})
Multiple menus
Use multiple menus by setting an unique pluginKey
.
import { Editor } from '@tiptap/core'
import FloatingMenu from '@tiptap/extension-floating-menu'
new Editor({
extensions: [
FloatingMenu.configure({
pluginKey: 'floatingMenuOne',
element: document.querySelector('.menu-one'),
}),
FloatingMenu.configure({
pluginKey: 'floatingMenuTwo',
element: document.querySelector('.menu-two'),
}),
],
})
Alternatively you can pass a ProseMirror PluginKey
.
import { Editor } from '@tiptap/core'
import FloatingMenu from '@tiptap/extension-floating-menu'
import { PluginKey } from 'prosemirror-state'
new Editor({
extensions: [
FloatingMenu.configure({
pluginKey: new PluginKey('floatingMenuOne'),
element: document.querySelector('.menu-one'),
}),
FloatingMenu.configure({
pluginKey: new PluginKey('floatingMenuOne'),
element: document.querySelector('.menu-two'),
}),
],
})