FloatingMenu extension

Use the Floating Menu extension in Tiptap to make a menu appear on an empty line.

Install the extension

Install the Floating Menu extension and the Floating UI library.

npm install @tiptap/extension-floating-menu @floating-ui/dom@^1.6.0

Settings

element

The DOM element that contains your menu.

Type: HTMLElement

Default: null

options

Under the hood, the FloatingMenu uses Floating UI. You can control the middleware and positioning of the floating menu with these options.

Type: Object

Default: { strategy: 'absolute', placement: 'right' }

Option	Type	Description
`strategy`	`string`	The positioning strategy. See here
`placement`	`string`	The placement of the menu. See here
`offset`	`number`, `OffsetOptions` or `boolean`	The offset middleware options. If `true` use default options, if `false` disable the middleware
`flip`	`FlipOptions` or `boolean`	The flip middleware options. If `true` use default options, if `false` disable the middleware
`shift`	`ShiftOptions` or `boolean`	The shift middleware options. If `true` use default options, if `false` disable the middleware
`arrow`	`ArrowOptions` or `false`	The arrow middleware options. If `false` disable the middleware
`size`	`SizeOptions` or `boolean`	The size middleware options. If `true` use default options, if `false` disable the middleware
`autoPlacement`	`AutoPlacementOptions` or `boolean`	The autoPlacement middleware options. If `true` use default options, if `false` disable the middleware
`hide`	`HideOptions` or `boolean`	The hide middleware options. If `true` use default options, if `false` disable the middleware
`inline`	`InlineOptions` or `boolean`	The inline middleware options. If `true` use default options, if `false` disable the middleware
`onShow`	`Function` or `undefined`	A callback that is called when the menu is shown. This can be used to add custom logic or styles when the menu is displayed.
`onHide`	`Function` or `undefined`	A callback that is called when the menu is hidden. This can be used to add custom logic or styles when the menu is hidden.
`onUpdate`	`Function` or `undefined`	A callback that is called when the menu is updated. This can be used to add custom logic or styles when the menu is updated.
`onDestroy`	`Function` or `undefined`	A callback that is called when the menu is destroyed. This can be used to add custom logic or styles when the menu is removed.

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'),
    }),
  ],
})