Docs
Callout

Callout

Highlight important information or add special notes.

Callout Element

Features

  • Customizable callout blocks for highlighting important information
  • Support for different callout variants (e.g., info, warning, error)
  • Ability to set custom icons or emojis for callouts

Installation

npm install @udecode/plate-callout

Usage

import { CalloutPlugin } from '@udecode/plate-callout/react';
const plugins = [
  // ...otherPlugins,
  CalloutPlugin,
]
const components = {
  // ...otherComponents,
  [CalloutPlugin.key]: CalloutElement,
}

Examples

Plate UI

Work in progress.

Plate Plus

  • Insert callouts using the slash command
  • Ability to change the callout emoji
  • Beautifully crafted UI

Plugins

CalloutPlugin

Callout element plugin.

Transforms

editor.tf.insert.callout

Inserts a callout element into the editor.

Parameters

Collapse all

    The editor instance.

    Options for inserting the callout.

Hooks

useCalloutEmojiPicker

This hook manages the emoji picker functionality for callouts.

Parameters

Collapse all

    Options for the callout emoji picker.

Returns

Collapse all

    Props for the emoji toolbar dropdown.

    Props for the emoji picker component.

Types

TCalloutElement

interface TCalloutElement extends TElement {
  variant?: string;
  icon?: string;
}
Block MenuEquation