Skip to main content

​
Callout Plugin

The Callout plugin provides themed notification boxes for highlighting important information, warnings, errors, success messages, and general notes.

​
Installation

npm install @yoopta/callout

​
Usage

import Callout from '@yoopta/callout';
import { createYooptaEditor } from '@yoopta/editor';

const plugins = [Callout];
const editor = createYooptaEditor({ plugins });

​
Features

  • Five themed styles: default, info, success, warning, error
  • Distinct colors and borders for each theme
  • Keyboard shortcut: <
  • HTML, Markdown, and Email export
  • Supports all text marks (bold, italic, etc.)
  • Supports alignment and depth

​
Options

{
  type: 'Callout',
  options: {
    display: {
      title: 'Callout',
      description: 'Make writing stand out',
    },
    shortcuts: ['<'],
  },
}

​
Element Type

import type { CalloutElement, CalloutElementProps, CalloutTheme } from '@yoopta/callout';

type CalloutTheme = 'default' | 'success' | 'warning' | 'error' | 'info';

type CalloutElementProps = { 
  theme: CalloutTheme 
};

type CalloutElement = SlateElement<'callout', CalloutElementProps>;

​
Default Props

{
  theme: 'default'
}

​
Theme Styles

Each theme has distinct colors:

​
Default

  • Color: #374151 (dark gray)
  • Border: 4px solid #9ca3af (gray)
  • Background: #f3f4f6 (light gray)

​
Info

  • Color: #1e3a5f (dark blue)
  • Border: 4px solid #3b82f6 (blue)
  • Background: #eff6ff (light blue)

​
Success

  • Color: #14532d (dark green)
  • Border: 4px solid #22c55e (green)
  • Background: #f0fdf4 (light green)

​
Warning

  • Color: #713f12 (dark yellow)
  • Border: 4px solid #eab308 (yellow)
  • Background: #fefce8 (light yellow)

​
Error

  • Color: #7f1d1d (dark red)
  • Border: 4px solid #ef4444 (red)
  • Background: #fef2f2 (light red)

​
Commands

import { CalloutCommands } from '@yoopta/callout';

// Insert callout
editor.commands.Callout.insertCallout();

// Change callout theme
editor.commands.Callout.setTheme(blockId, 'warning');

​
Parsers

​
HTML

Deserialize: Converts <dl> or <div> tags with data-theme attribute Serialize: Outputs styled callout box 
<dl 
  data-theme="info" 
  data-meta-align="left" 
  data-meta-depth="0" 
  style="
    margin-left: 0px; 
    text-align: left; 
    padding: .5rem .5rem .5rem 1rem; 
    margin-top: .5rem; 
    border-radius: .375rem; 
    color: #1e3a5f; 
    border-left: 4px solid #3b82f6; 
    background-color: #eff6ff;
  ">
  Callout content
</dl>

​
Markdown

Exports as blockquote (Markdown doesn’t have native callout support): 
> Callout content

​
Email

Wraps in table structure with theme colors: 
<table style="width: 100%;">
  <tbody style="width: 100%;">
    <tr>
      <td 
        data-theme="info" 
        style="
          font-size: 16px;
          line-height: 1.75rem;
          padding: .5rem .5rem .5rem 1rem; 
          margin-top: .5rem; 
          border-radius: .375rem; 
          color: #1e3a5f; 
          border-left: 4px solid #3b82f6; 
          background-color: #eff6ff;
        ">
        Callout content
      </td>
    </tr>
  </tbody>
</table>

​
Examples

​
Basic Usage

import YooptaEditor, { createYooptaEditor } from '@yoopta/editor';
import Callout from '@yoopta/callout';
import Paragraph from '@yoopta/paragraph';

function Editor() {
  const editor = useMemo(() => 
    createYooptaEditor({ 
      plugins: [Paragraph, Callout] 
    }), 
    []
  );

  return <YooptaEditor editor={editor} />;
}

​
Insert Callout with Theme

import { Blocks } from '@yoopta/editor';
import { generateId } from '@yoopta/editor';

// Insert info callout
Blocks.insertBlock(editor, {
  type: 'Callout',
  value: [
    {
      id: generateId(),
      type: 'callout',
      props: { theme: 'info' },
      children: [
        { text: 'This is important information you should know.' },
      ],
    },
  ],
});

// Insert warning callout
Blocks.insertBlock(editor, {
  type: 'Callout',
  value: [
    {
      id: generateId(),
      type: 'callout',
      props: { theme: 'warning' },
      children: [
        { text: 'Proceed with caution!' },
      ],
    },
  ],
});

​
Change Callout Theme

import { Elements } from '@yoopta/editor';

// Update callout theme
Elements.updateElement(editor, {
  blockId: 'callout-block-id',
  elementId: 'callout-element-id',
  props: { theme: 'error' },
});

​
Using Keyboard Shortcut

Type < at the start of an empty paragraph, then press Space: 
< [Space] → Converts to callout (default theme)

​
All Theme Examples

const themes = ['default', 'info', 'success', 'warning', 'error'];

themes.forEach(theme => {
  Blocks.insertBlock(editor, {
    type: 'Callout',
    value: [
      {
        id: generateId(),
        type: 'callout',
        props: { theme },
        children: [{ text: `${theme.toUpperCase()} callout` }],
      },
    ],
  });
});

​
Use Cases

​
Info Callouts

  • Additional context
  • Tips and hints
  • Reference information

​
Success Callouts

  • Completion messages
  • Best practices
  • Achievements

​
Warning Callouts

  • Deprecation notices
  • Important considerations
  • Breaking changes

​
Error Callouts

  • Common mistakes
  • Critical warnings
  • Security notices

​
Default Callouts

  • General notes
  • Neutral information
  • Asides

Build docs developers (and LLMs) love

Get started for freeTalk to us