Callouts Extension

Highlight key information, warnings, or tips in your documents with customizable callout blocks rendered using custom Svelte components.

Usage

The Callout extension is a custom TipTap Node that integrates a Svelte component view. It supports emojis, draggable states, and custom markdown rendering.

Markdown Syntax & Parsing

Edra automatically parses callouts from markdown strings using a custom dollar-sign wrap syntax:

Input Rules

You can instantly create a callout in the editor by typing $callout followed by an optional emoji and a space (e.g. $callout ⚠️) at the start of any new paragraph.

Node Customization

The node view handles custom emoji Pickers, background color matching based on your theme, and draggable handles to move callout boxes easily in your doc layout.