Tiptap Editor 3.0 Beta is out. Start here

Add a floating toolbar next to selected text

A floating toolbar that appears when text is selected.

Install

npx @tiptap/cli add toolbar-floating

Usage

import { ToolbarFloating } from '@/components/tiptap-ui/toolbar-floating'
import { useEditor, EditorContent } from '@tiptap/react'

export default function MyEditor() {
  const editor = useEditor({
    // editor configuration
  })

  return (
    <div>
      <EditorContent editor={editor} />
      <ToolbarFloating editor={editor} />
    </div>
  )
}

Props

NameTypeDefaultDescription
editorEditor | nullnullThe Tiptap editor instance

Requirements

Used reference components

  • app-context (context)
  • use-mobile (hook)
  • use-tiptap-editor (hook)
  • use-window-size (hook)
  • tiptap-utils (lib)
  • comment-button (ui)
  • floating-element (ui)
  • heading-dropdown-menu (ui)
  • list-dropdown-menu (ui)
  • mark-button (ui)
  • link-popover (ui)
  • toolbar (primitive)