ФреймворкJavaScript

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

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

Дочерние блоки вкладываются внутрь выноски. Удобен для советов, предупреждений, заметок и другого содержимого, привлекающего внимание.

Enter добавляет строку внутри панели. Повторное нажатие на пустой последней строке выводит из выноски, поэтому пустая строка становится параграфом ниже, а не растягивает панель.

Панель выбора загружает список эмодзи только тогда, когда он впервые нужен. Редактируемые выноски сами начинают эту загрузку, как только страница простаивает. Чтобы данные были готовы раньше, вызовите preloadEmojiData(locale) из @bloklabs/core/tools, например после входа в систему: preloadEmojiData('ru').

Локаль необязательна, по умолчанию 'en'. Повторные вызовы безопасны. Если вы передаёте собственный emojiPicker, вызов не нужен.

Импорт

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,
    },
  },
});