Components
Callout Element

Callout Element

Renders a customizable callout element with an emoji picker.

Block SelectionButtonPlate ElementTooltip
Get the code ->

Callout

Explore the versatility of callouts with editable emojis:
Pro tip: Click the emoji to change it! Try "🔍" for insights.
Caution: Sensitive data ahead. Consider using "🔒" for security.
Error: Action forbidden. Maybe "❌" fits better?
Great job! "🎉" could work for celebrations too.
Callouts support rich formatting including italics and more!
Callouts enhance your document's readability and visual appeal.

Installation

Install the following dependencies:

npm install @udecode/plate-callout @udecode/plate-emoji @udecode/plate-selection @radix-ui/react-slot @radix-ui/react-tooltip @radix-ui/react-popover

Copy and paste the following code into your project.

Get the code ->

Update the import paths to match your project setup.

Block SelectionCaption