Callout

PreviousNext
PlusCallout Element
Loading...
Files
components/demo.tsx
'use client';

import * as React from 'react';

import { Plate, usePlateEditor } from 'platejs/react';

import { EditorKit } from '@/components/editor/editor-kit';
import { Editor, EditorContainer } from '@/components/ui/editor';

import { DEMO_VALUES } from './values/demo-values';

export default function Demo({ id }: { id: string }) {
  const editor = usePlateEditor({
    plugins: EditorKit,
    value: DEMO_VALUES[id],
  });

  return (
    <Plate editor={editor}>
      <EditorContainer variant="demo">
        <Editor />
      </EditorContainer>
    </Plate>
  );
}

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

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

  • 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

Collapse all

    The variant of the callout to insert.

    Other options from InsertNodesOptions.

Hooks

useCalloutEmojiPicker

Manage the emoji picker functionality for callouts.

OptionsUseCalloutEmojiPickerOptions

Collapse all

    Whether the emoji picker is open.

    Function to set the open state of the emoji picker.

Returnsobject

Collapse all

    Props for the emoji toolbar dropdown.

    Props for the emoji picker component.

Types

TCalloutElement

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

Attributes

Collapse all

    The variant of the callout.

    The icon or emoji to display.

Horizontal RuleCode Block
Callout - Plate