Components
Media Toolbar

Media Toolbar

Provides a toolbar for media elements with options for alignment, caption, expansion, and more.

Installation

Install the following dependencies:

npm install @udecode/plate-caption @udecode/plate-media @udecode/plate-selection @radix-ui/react-dropdown-menu @radix-ui/react-toolbar @radix-ui/react-tooltip @radix-ui/react-separator

Copy and paste the following code into your project.

Get the code ->

Update the import paths to match your project setup.

Examples

Media Toolbar

Media Toolbar

The media toolbar provides tools for managing and customizing media elements in your document.
How to use the media toolbar:
  • Hover over the image to reveal the controller buttons at the top right corner.
  • Click on the alignment icon to adjust the positioning of the media.
  • Use the caption button to add or edit the media caption.
  • Click on the download button to download the media.
  • Use the preview button to view the media in full size.
  • Open the block menu by clicking on the three dots.

You can resize the image by dragging the handles on the left and right sides. The caption will automatically adjust to match the image width.