Callout

PreviousNext
PlusCallout Element
Loading...

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

Kit Usage

Installation

The fastest way to add the callout plugin is with the CalloutKit, which includes pre-configured CalloutPlugin with the Plate UI component.

Add Kit

Add the kit to your plugins:

import { createPlateEditor } from 'platejs/react';
import { CalloutKit } from '@/components/editor/plugins/callout-kit';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    ...CalloutKit,
  ],
});

Manual Usage

Installation

pnpm add @platejs/callout

Add Plugin

Include CalloutPlugin in your Plate plugins array when creating the editor.

import { CalloutPlugin } from '@platejs/callout/react';
import { createPlateEditor } from 'platejs/react';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    CalloutPlugin,
  ],
});

Configure Plugin

You can configure the CalloutPlugin with a custom component to render callout elements.

import { CalloutPlugin } from '@platejs/callout/react';
import { createPlateEditor } from 'platejs/react';
import { CalloutElement } from '@/components/ui/callout-node';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    CalloutPlugin.withComponent(CalloutElement),
  ],
});

Plate Plus

Plugins

CalloutPlugin

Callout element plugin.

Transforms

tf.insert.callout

Insert a callout element into the editor.

Optionsobject

  • variant optional string

    The variant of the callout to insert.

  • ...InsertNodesOptions InsertNodesOptions<V>

    Other options from InsertNodesOptions.

Hooks

useCalloutEmojiPicker

Manage the emoji picker functionality for callouts.

OptionsUseCalloutEmojiPickerOptions

Collapse all

  • isOpen boolean

    Whether the emoji picker is open.

  • setIsOpen (isOpen: boolean) => void

    Function to set the open state of the emoji picker.

Returnsobject

Collapse all

  • emojiToolbarDropdownProps object

    Props for the emoji toolbar dropdown.

  • props object

    Props for the emoji picker component.

Types

TCalloutElement

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

Attributes

Collapse all

  • variant optional string

    The variant of the callout.

  • icon optional string

    The icon or emoji to display.

提示框代码块