Components
More Dropdown Menu

More Dropdown Menu

Renders a dropdown menu with additional options for selected blocks in the editor.

API ReferenceDropdown MenuToolbar
Get the code ->

Context Menu

  1. Right-click on any block to open its context menu.
  1. Try these actions from the context menu:
  • Ask AI: Get AI-powered suggestions for your content.
  • Delete: Remove the selected block.
  • Duplicate: Create a copy of the selected block.
  • Turn into: Convert the block to a different type.
  1. Experiment with text formatting options:
  • Bold, italic, and underline text styles.
  • Change text and background colors.
  1. Align text using the context menu options.
Pro tip: You can select multiple blocks and apply actions to all of them at once!
  1. Right-clicking on selected text opens the browser's default menu for additional options.
Enjoy exploring the versatile context menu features!

Installation

Install the following dependencies:

npm install @udecode/plate-selection @radix-ui/react-toolbar @radix-ui/react-dropdown-menu

Copy and paste the following code into your project.

Get the code ->

Update the import paths to match your project setup.

Mention Input ElementParagraph Element