How to Add Callout/Note Boxes with Different Types in Tiptap: Complete Implementation Guide

The reactjs-tiptap-editor library provides a built-in Callout extension that enables you to insert styled note boxes with configurable semantic types (note, tip, warning, caution, etc.) via the setCallout command and RichTextCallout toolbar component.

Adding visually distinct callout or note boxes to your Tiptap editor enhances content readability and user engagement. The hunghg255/reactjs-tiptap-editor repository ships with a dedicated Callout extension that supports multiple predefined types out of the box. This guide walks you through registering the extension, rendering the UI components, and customizing callout types to match your application's design system.

Registering the Callout Extension

The core logic for the callout node resides in src/extensions/Callout/Callout.ts. This file defines the Tiptap node specification, including the three primary attributes—type, title, and body—along with the setCallout command used to insert nodes programmatically.

To enable callouts in your editor, import the extension from the callout submodule and append it to your extensions array:

// App.tsx or your editor configuration file
import { Callout } from 'reactjs-tiptap-editor/callout';

const extensions = [
  // ... other extensions (StarterKit, etc.)
  Callout,
];

The extension automatically handles HTML parsing and serialization, ensuring callouts are preserved when loading or saving editor content.

Rendering the Toolbar Interface

To allow users to create callouts interactively, render the RichTextCallout component in your toolbar. Located at src/extensions/Callout/components/RichTextCallout.tsx, this component provides a dialog interface for selecting the callout type, entering a title, and writing the body content.

// Inside your toolbar component
import { RichTextCallout } from 'reactjs-tiptap-editor/callout';

export const MyToolbar = () => (
  <div className="flex gap-2">
    {/* other toolbar buttons */}
    <RichTextCallout />
  </div>
);

When clicked, the component opens a modal that lets users choose from five predefined types: note, tip, important, warning, and caution. Upon confirmation, it executes the setCallout command with the selected attributes.

Inserting Callouts Programmatically

You can bypass the UI and insert callouts directly via the editor chain API. This is useful for automated content generation or custom button implementations:

// Anywhere you have access to the editor instance
editor
  .chain()
  .focus()
  .setCallout({
    type: 'warning',
    title: 'Heads-up',
    body: 'Check this configuration before proceeding!'
  })
  .run();

The setCallout command accepts an object matching the node attributes defined in Callout.ts. If a callout is already selected, the command updates its attributes; otherwise, it inserts a new node at the current cursor position.

In-Place Editing with Bubble UI

For editing existing callouts without reopening the main toolbar, use the RichTextBubbleCallout component. This floating interface appears when a user selects a callout node, allowing quick modifications to the type, title, or body content.

import { RichTextBubbleCallout } from 'reactjs-tiptap-editor/bubble';

// Place inside your editor container alongside other bubble menus
<RichTextBubbleCallout />

The bubble component interacts with the React Node View defined in src/extensions/Callout/components/NodeViewCallout/NodeViewCallout.tsx, which renders the actual styled box with appropriate colors, borders, and icons based on the type attribute.

Customizing Callout Types

To extend the default type list, modify the CALLOUT_TYPES constant in both the toolbar component and the node view renderer.

First, update the type definition in src/extensions/Callout/components/RichTextCallout.tsx:

const CALLOUT_TYPES = [
  { value: 'note', label: 'Note', icon: 'Info' },
  { value: 'tip', label: 'Tip', icon: 'Lightbulb' },
  { value: 'warning', label: 'Warning', icon: 'AlertTriangle' },
  // Add your custom type
  { value: 'info', label: 'Info', icon: 'Info' },
] as const;

Then, add the corresponding styling configuration in src/extensions/Callout/components/NodeViewCallout/NodeViewCallout.tsx:

const CALLOUT_TYPES = [
  // ... existing entries
  {
    value: 'info',
    label: 'Info',
    icon: Info,
    color: '#0ea5e9',
    background: '#0ea5e91f',
  },
] as const;

After rebuilding your application, the new type appears in the creation dialog and renders with the specified color scheme and icon.

Summary

• The Callout extension in reactjs-tiptap-editor provides a complete node implementation with type, title, and body attributes.
• Register the extension by importing from 'reactjs-tiptap-editor/callout' and adding it to your editor's extension array.
• Use RichTextCallout for the toolbar UI that opens a dialog to create new callouts via the setCallout command.
• Use RichTextBubbleCallout to enable in-place editing of existing callout nodes.
• Customize types by editing the CALLOUT_TYPES array in both RichTextCallout.tsx and NodeViewCallout.tsx to add new semantic variants with custom colors and icons.

Frequently Asked Questions

How do I add a custom callout type not included by default?

Edit the CALLOUT_TYPES constant in both src/extensions/Callout/components/RichTextCallout.tsx and src/extensions/Callout/components/NodeViewCallout/NodeViewCallout.tsx. Add your new type with a unique value, label, icon reference, and color styling, then rebuild your application.

Can I edit an existing callout without using the toolbar button?

Yes. Import and render the RichTextBubbleCallout component from 'reactjs-tiptap-editor/bubble'. This provides a floating menu that appears when a callout node is selected, allowing users to modify the type, title, and body without navigating back to the main toolbar.

What attributes does the Callout node support?

According to the source in src/extensions/Callout/Callout.ts, the node accepts three attributes: type (string identifying the semantic variant), title (string for the callout header), and body (string or rich content for the main text). These are set via the setCallout command or the provided UI components.

Where is the callout styling defined in the source code?

The visual rendering logic resides in src/extensions/Callout/components/NodeViewCallout/NodeViewCallout.tsx. This file maps each type value to specific color values, background tints, and icon components, determining how each callout variant appears in the editor canvas.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}