2.9 KiB
description | icon |
---|---|
Make a toolbar appear automagically on empty lines. | menu-4-line |
Floating Menu
This extension will make a menu appear in an empty line.
Installation
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/
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
https://embed.tiptap.dev/preview/Extensions/FloatingMenu
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'),
}),
],
})