Callout

An icon + highlighted box for tips, warnings, or anything that should stand out. A container block — its contentIds hold nested child blocks (usually one or more paragraphs), not runs directly.

{
  "id": "c1",
  "type": "callout",
  "contentIds": ["p1"],
  "props": { "icon": "💡" }
}
// nested content is a normal block:
{ "id": "p1", "type": "paragraph", "parentId": "c1", "contentIds": ["r1"], "props": {} }

The icon is editable in place — click it to open an emoji picker.

Usage

A fresh callout is seeded with one empty paragraph, so there's somewhere to type immediately. You can add more blocks inside it the same way as any other container.

Slash command

Callout — keywords: callout, tip, note, warning, info.

Styling

.be-callout (flex container), .be-callout-icon, .be-callout-content.

Using it in your editor

useEditor() registers every built-in block by default, callout included. To register only the blocks you use instead:

import { useEditor, NoteloomEditor, registerBlocks, paragraphBlockType, calloutBlockType } from 'noteloom';

function Editor() {
  const editor = useEditor({
    registerBlocks: (registry) => registerBlocks(registry, { paragraph: paragraphBlockType, callout: calloutBlockType }),
  });
  return <NoteloomEditor editor={editor} />;
}

See Picking only the blocks you want for combining this with other types.