Components
Floating Toolbar Buttons

Floating Toolbar Buttons

Provides a set of buttons for text formatting and other actions in a floating toolbar.

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

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.