FloatingMenu extension
Use the Floating Menu extension in Tiptap to make a menu appear on an empty line.
Install the extension
npm install @tiptap/extension-floating-menu
Settings
element
The DOM element that contains your menu.
Type: HTMLElement
Default: null
tippyOptions
Under the hood, the FloatingMenu
uses tippy.js. You can directly pass options to it.
Type: Object
Default: {}
pluginKey
The key for the underlying ProseMirror plugin. Make sure to use different keys if you add more than one instance.
Type: string | PluginKey
Default: 'floatingMenu'
shouldShow
A callback to control whether the menu should be shown or not.
Type: (props) => boolean
Source code
packages/extension-floating-menu/
Use in Vanilla JavaScript
import { Editor } from '@tiptap/core'
import FloatingMenu from '@tiptap/extension-floating-menu'
new Editor({
extensions: [
FloatingMenu.configure({
element: document.querySelector('.menu'),
}),
],
})
Other frameworks
Check out the demo at the top of this page to see how to integrate the floating menu extension with React or Vue.
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 '@tiptap/pm/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'),
}),
],
})