FrameworkJavaScript

Callout block: highlighted notes

A container block for highlighted content with an emoji icon. It supports customisable text and background colours via a colour picker. In the emoji picker, category buttons show their names after a brief hover or on keyboard focus.

Child blocks are nested inside the callout. It is useful for tips, warnings, notes, and other call-to-action content.

Enter adds a line inside the panel. Pressing it again on the empty last line leaves the callout, so the blank line becomes the paragraph below instead of padding the panel out.

The picker loads its emoji list only when first needed. Editable callouts start that load on their own once the page is idle. To have it ready earlier, call preloadEmojiData(locale) from @bloklabs/core/tools, for example after login: preloadEmojiData('ru').

The locale is optional and defaults to 'en'. Calling it more than once is safe. You don't need it if you pass your own emojiPicker.

Import

TypeScript

import { Callout } from '@bloklabs/core/tools';

Configuration

Option	Type	Default	Description
`emojiPicker`	`(onSelect: (emoji: string) => void) => void`	`undefined`	Custom emoji picker handler that replaces the built-in picker. Call `onSelect` with the chosen emoji, or "" to clear.

Save Data

TypeScript

interface CalloutData {
  emoji: string;             // Emoji character (e.g. "💡")
  textColor: string | null;  // Colour preset name, or null for default
  backgroundColor: string | null; // Colour preset name, or null for default
}

JSON

{
  "id": "pqr678",
  "type": "callout",
  "data": {
    "emoji": "💡",
    "textColor": null,
    "backgroundColor": "yellow"
  }
}

Usage Example

TypeScript

import { Blok } from '@bloklabs/core';
import { Callout } from '@bloklabs/core/tools';

const editor = new Blok({
  holder: 'editor',
  tools: {
    callout: {
      class: Callout,
    },
  },
});