---
title: "Блок «Выноска» — заметки и подсказки в тексте"
description: "Выделенные блоки-заметки с иконкой и цветовым пресетом — для предупреждений, советов и отступлений в документе."
source: https://blokeditor.com/ru/docs/callout/
lastmod: 2026-09-07
---

Фреймворк JavaScript

Блочные инструменты Выноска

# Выноска: выделенные заметки

Блок-контейнер для выделенного содержимого с иконкой-эмодзи. Поддерживает настраиваемые цвета текста и фона через палитру цветов. Дочерние блоки вкладываются внутрь выноски. Удобен для советов, предупреждений, заметок и другого содержимого, привлекающего внимание. Enter добавляет строку внутри панели; повторное нажатие на пустой последней строке выводит из выноски, поэтому пустая строка становится параграфом ниже, а не растягивает панель.

### Импорт

TypeScript

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

### Конфигурация

| Опция | Тип | По умолчанию | Описание |
| --- | --- | --- | --- |
| `emojiPicker` | `(onSelect: (emoji: string) => void) => void` | `undefined` | Собственный обработчик выбора эмодзи, заменяющий встроенный. Вызовите `onSelect` с выбранным эмодзи или с "", чтобы очистить значение. |

### Формат данных

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"
  }
}
```

### Пример использования

TypeScript

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

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