Components
Floating Toolbar Buttons

Floating Toolbar Buttons

A set of formatting buttons for the floating toolbar.

AI Toolbar ButtonColor Dropdown MenuComment Toolbar ButtonDropdown MenuInline Equation Toolbar ButtonLink Toolbar ButtonMore Dropdown MenuSeparatorToolbarTooltipTurn Into Dropdown Menu

Installation

Install the following dependencies:

npm install @udecode/plate-basic-marks @udecode/plate-comments @radix-ui/react-toolbar @radix-ui/react-tooltip @radix-ui/react-separator @udecode/plate-font @radix-ui/react-dropdown-menu @udecode/plate-math @udecode/plate-link @udecode/plate-selection @udecode/plate-block-quote @udecode/plate-callout @udecode/plate-code-block @udecode/plate-heading @udecode/plate-indent-list @udecode/plate-toggle @udecode/plate-date @udecode/plate-layout @udecode/plate-media @udecode/plate-table

Copy and paste the following code into your project.

Get the code ->

Update the import paths to match your project setup.

Examples

Floating Toolbar

Get the code ->

Floating Toolbar

The floating toolbar provides quick access to formatting options and actions for selected text.
How to use the floating toolbar:
  • Select any text to invoke the floating toolbar.
With the floating toolbar, you can:
  • Ask AI for assistance
  • Add a comment to the selected text
  • Transform the selected into an another block
  • Apply text formatting: bold, italic, underline, strikethrough, code
  • Mark text as an equation
  • Change text color or background color
  • Open the block menu for additional options
Try selecting some text below to see the floating toolbar in action:
Bold text, italic text, underlined text, and combined formatting.
Emoji PickerFloating Toolbar