Add floating elements to editor selection

A utility component for creating floating UI elements tied to editor selections.

Install

npx @tiptap/cli add floating-element

Usage

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

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

  const [show, setShow] = React.useState(false)

  return (
    <div>
      <EditorContent editor={editor} />
      <FloatingElement editor={editor} shouldShow={show} zIndex={50}>
        <div className="floating-toolbar">{/* Toolbar content */}</div>
      </FloatingElement>
    </div>
  )
}

Props

Name	Type	Default	Description
editor	Editor \| null	null	The Tiptap editor instance
shouldShow	boolean	false	Controls whether the element should be visible
floatingOptions	UseFloatingOptions		Options for the floating UI
zIndex	number	50	Z-index for the floating element
onOpenChange	(open: boolean) => void	-	Callback when visibility state changes
getBoundingClientRect	(editor: Editor) => DOMRect \| null	getSelectionBoundingRect	Tiptap util function to determine position
updateOnScroll	boolean	true	Whether to update position on scroll events

Requirements

Used reference components

tiptap-utils (lib)
use-tiptap-editor (hook)
use-floating-element (hook)

Open source feature(s)

@floating-ui/react