Components
Callout Element

Callout Element

Renders a customizable callout element with an emoji picker.

CalloutBlock SelectionButtonEmoji PickerPlate ElementSpinnerTooltip

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.

Examples

Callout

Get the code ->

Callout

Use callouts to highlight important information or add special notes to your document.
How to use callouts:
  • Type "/callout" to trigger the callout menu and insert a callout.
  • Click on the default emoji to modify it and choose a different one.
Example of a callout:
This is an example callout. You can change the emoji by clicking on it, and add your content here.


Emoji

Get the code ->

😃 Emoji Input

The Emoji Input feature allows you to easily insert emojis into your text using an intuitive inline search.
How to use Emoji Input:
  • Type ":" anywhere in your text to trigger the emoji search.
  • Continue typing to search for specific emojis.
  • Use arrow keys or mouse to navigate through the results.
  • Press Enter or click to insert the selected emoji.
Try it out! Type ":" followed by an emoji name, like "smile" or "heart".
Blockquote ElementCode Block Element