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
Name | Type | Default | Description |
---|---|---|---|
editor | Editor | null | null | The 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)