Callout - Plate — ContextQMD

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

</PackageInfo>

Kit Usage

<Steps>

Installation

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

CalloutElement: Renders callout elements.

Add Kit

Add the kit to your plugins:

tsx

import { createPlateEditor } from 'platejs/react';
import { CalloutKit } from '@/components/editor/plugins/callout-kit';

const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    ...CalloutKit,
  ],
});

</Steps>

Manual Usage

<Steps>

Installation

bash

npm install @platejs/callout

Add Plugin

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

tsx

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.

tsx

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

withComponent: Assigns CalloutElement to render callout elements.

</Steps>

Plate Plus

Plugins

`CalloutPlugin`

Callout element plugin.

Transforms

`tf.insert.callout`

Insert a callout element into the editor.

<API name="callout"> <APIOptions type="object"> <APIItem name="variant" type="string" optional> The variant of the callout to insert. </APIItem> <APIItem name="...InsertNodesOptions" type="InsertNodesOptions<V>"> Other options from `InsertNodesOptions`. </APIItem> </APIOptions> </API>

Hooks

`useCalloutEmojiPicker`

Manage the emoji picker functionality for callouts.

<API name="useCalloutEmojiPicker"> <APIOptions type="UseCalloutEmojiPickerOptions"> <APIItem name="isOpen" type="boolean"> Whether the emoji picker is open. </APIItem> <APIItem name="setIsOpen" type="(isOpen: boolean) => void"> Function to set the open state of the emoji picker. </APIItem> </APIOptions> <APIReturns type="object"> <APIItem name="emojiToolbarDropdownProps" type="object"> Props for the emoji toolbar dropdown. <APISubList> <APISubListItem parent="emojiToolbarDropdownProps" name="isOpen" type="boolean"> Whether the emoji picker is open. </APISubListItem> <APISubListItem parent="emojiToolbarDropdownProps" name="setIsOpen" type="(v: boolean) => void"> Function to set the open state of the emoji picker, respecting read-only mode. </APISubListItem> </APISubList> </APIItem> <APIItem name="props" type="object"> Props for the emoji picker component. <APISubList> <APISubListItem parent="props" name="isOpen" type="boolean"> Whether the emoji picker is open. </APISubListItem> <APISubListItem parent="props" name="setIsOpen" type="(isOpen: boolean) => void"> Function to set the open state of the emoji picker. </APISubListItem> <APISubListItem parent="props" name="onSelectEmoji" type="(options: { emojiValue?: any; icon?: any }) => void"> Function called when an emoji is selected. It updates the callout's icon and closes the picker. </APISubListItem> </APISubList> </APIItem> </APIReturns> </API>

Types

`TCalloutElement`

typescript

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

<API name="TCalloutElement"> <APIAttributes> <APIItem name="variant" type="string" optional> The variant of the callout. </APIItem> <APIItem name="icon" type="string" optional> The icon or emoji to display. </APIItem> </APIAttributes> </API>