Docs
Callout

Callout

Callout is a block that allows you to highlight text or add additional information to a block.

Callout Element

Features

  • Provides quick transform for a single block.
  • Allows you to perform actions on blocks such as duplicating, deleting, or moving.
  • Customizable menu items and actions.
  • Accessible via right-click or a dedicated button like drag-handle.
  • Supports keyboard navigation for improved accessibility.

Installation

npm install @udecode/plate-callout

Usage

// ...
import { CalloutPlugin } from '@udecode/plate-callout/react';
 
const editor = usePlateEditor({
  id: 'callout-demo',
  override: {
    components: {
      ...otherComponents,
      [CalloutPlugin.key]: CalloutElement,
    },
  },
  plugins: [
    ...otherPlugins,
    CalloutPlugin,
  ],
  value: calloutValue,
});

Transforms

editor.tf.insert.callout

Inserts a callout.

Parameters

Collapse all

    Options for the insert nodes transform.

Block SelectionCaption