Tiptap Docs

Menus and handles

Menus and handles place your own controls next to the content: a menu at the selected text, a menu on empty lines, and a handle to drag blocks.

Bubble menu
A menu that appears next to the selected text, for example to format it.
Open source
Drag handle
A handle to drag blocks to another place in the document.
Open source
Drag handle React
The drag handle as a React component.
Open source
Drag handle Vue
The drag handle as a Vue component.
Open source
Floating menu
A menu that appears on empty lines, for example to insert blocks.
Open source

When you use them

  • Formatting a selection. Bubble menu shows a menu next to the selected text, for example with buttons that apply marks.
  • Inserting blocks. Floating menu shows a menu on empty lines, for example to insert blocks.
  • Moving blocks. Drag handle shows a handle that people drag to move a block to another place. With its nested setting, it also works for list items and other nested content.

How they work

  • You build the controls. The extensions show and position an element you provide, and its markup and styling are up to you.
  • React and Vue have components. @tiptap/react and @tiptap/vue-3 have Bubble menu and Floating menu components; with them you don't add the extension. Drag handle React and Drag handle Vue are the drag handle as a component, which registers it with the editor for you.
  • Several instances need their own keys. Give every menu or handle in one editor a unique pluginKey.
  • You add them yourself. None of them is part of the StarterKit.
PreviouslyMention