Components
Floating Toolbar

Floating Toolbar

A toolbar that appears above selected text with formatting options.

Installation

Install the following dependencies:

npm install @udecode/plate-ai @udecode/plate-floating @udecode/plate-link @udecode/plate-selection

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.
Floating Toolbar ButtonsGhost Text