Фреймворк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,
    },
  },
});