Callout

PreviousNext

Highlight important information or add special notes.

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.

'use client';
 
import { CalloutPlugin } from '@platejs/callout/react';
 
import { CalloutElement } from '@/components/ui/callout-node';
 
export const CalloutKit = [CalloutPlugin.withComponent(CalloutElement)];
'use client';
 
import { CalloutPlugin } from '@platejs/callout/react';
 
import { CalloutElement } from '@/components/ui/callout-node';
 
export const CalloutKit = [CalloutPlugin.withComponent(CalloutElement)];

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,
  ],
});
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
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,
  ],
});
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),
  ],
});
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

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

Plugins

CalloutPlugin

Callout element plugin.

Transforms

tf.insert.callout

Insert a callout element into the editor.

Optionsobject

    The variant of the callout to insert.

    Other options from InsertNodesOptions.

Hooks

useCalloutEmojiPicker

Manage the emoji picker functionality for callouts.

OptionsUseCalloutEmojiPickerOptions

    Whether the emoji picker is open.

    Function to set the open state of the emoji picker.

Returnsobject

    Props for the emoji toolbar dropdown.

    Props for the emoji picker component.

Types

TCalloutElement

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

Attributes

    The variant of the callout.

    The icon or emoji to display.