Callout

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

Plugins

CalloutPlugin

Callout element plugin.

Transforms

editor.tf.insert.callout

Insert a callout element into the editor.

Parameters

Collapse all

    The editor instance.

    Options for inserting the callout.

Optionsobject

Collapse all

    The variant of the callout to insert.

    Other options from InsertNodesOptions.

Hooks

useCalloutEmojiPicker

Manage the emoji picker functionality for callouts.

Parameters

Collapse all

    Options for the callout emoji picker.

OptionsUseCalloutEmojiPickerOptions

Collapse all

    Whether the emoji picker is open.

    Function to set the open state of the emoji picker.

Returns{ emojiToolbarDropdownProps: object; props: object }

Collapse all

    Props for the emoji toolbar dropdown.

    Props for the emoji picker component.

Types

TCalloutElement

Attributes

Collapse all

    The variant of the callout.

    The icon or emoji to display.