Components
Turn Into Dropdown Menu

Turn Into Dropdown Menu

Dropdown menu for converting between block types.

Installation

Install the following dependencies:

npm install @radix-ui/react-dropdown-menu @udecode/plate-block-quote @udecode/plate-callout @udecode/plate-code-block @udecode/plate-heading @udecode/plate-indent-list @udecode/plate-toggle @radix-ui/react-toolbar @radix-ui/react-tooltip @radix-ui/react-separator @udecode/plate-date @udecode/plate-layout @udecode/plate-math @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.