Перейти к содержимому
ФреймворкJavaScript

Notifier API: показ уведомлений

Отображение уведомлений для пользователей. Отрисовка подключаемая: передайте `notifier: (options) => …` в конфигурации конструктора, и Blok вызовет ваш обработчик вместо собственной отрисовки — встроенный тост пропускается полностью (вместе со значениями `okText`/`cancelText` из i18n), а любая ошибка вашего обработчика доходит до места вызова `show()`. `notifierPosition` задаёт положение встроенного контейнера: 'bottom-left' | 'bottom-right' | 'bottom-center' | 'top-left' | 'top-right' | 'top-center' (по умолчанию 'bottom-center').

Как получить экземпляр редактора

Методы ниже вызываются на редакторе, созданном через new Blok(). Они доступны после того, как разрешится editor.isReady.

TypeScript
// You already hold the instance returned by the constructor.
const editor = new Blok({ holder: 'editor' });
await editor.isReady;

// Call any API method on it.
editor.caret.setToLastBlock('end');

Методы

notifier.show(options)

void

Показать уведомление. Поддерживает простые уведомления, confirm и prompt.

Когда использовать

Встроенное уведомление для лёгкой обратной связи. type: 'confirm' или 'prompt' — для ответа да/нет или текста.

Параметры

ПараметрТипОбязательныйПо умолчаниюОписание
optionsNotifierOptions | ConfirmNotifierOptions | PromptNotifierOptionsОбязательныйКонфигурация уведомления. Форма зависит от type.
options.messagestringОбязательныйТекст уведомления. Может содержать HTML.
options.type'alert' | 'confirm' | 'prompt''alert'Тип уведомления. confirm и prompt добавляют кнопки действий.
options.style'success' | 'error'undefinedОбозначает семантический вид уведомления. 'error' повышает live-регион сообщения для скринридеров до assertive (иначе polite), а само значение попадает в data-blok-testid как notification-success / notification-error. Встроенный тост в обоих случаях выглядит одинаково — раскраски success/error нет.
options.timenumber8000Время автозакрытия в мс для уведомлений-алертов (по умолчанию 8000). confirm и prompt — модальные и остаются на экране, пока пользователь не ответит.
options.okTextstringi18n `notifier.confirm` / `notifier.ok` ('Confirm' / 'OK' in English)Текст кнопки подтверждения/отправки (только для confirm/prompt).
options.okHandler(event: Event) => void | (value: string) => voidundefinedКолбэк подтверждения/отправки. Получает событие клика для confirm или значение поля для prompt. Обязателен для уведомлений типа prompt.
options.cancelTextstringi18n `notifier.cancel` ('Cancel' in English)Текст кнопки отмены (типы confirm и prompt).
options.cancelHandler(event: Event) => voidundefinedКолбэк отмены/закрытия. Вызывается (если передан) перед закрытием диалога по кнопке отмены, по закрытию или Esc — как для типа confirm, так и для prompt.
options.inputTypestring'text'Тип HTML-поля ввода для текстового поля prompt (только для типа prompt).
options.placeholderstringundefinedТекст плейсхолдера для поля ввода prompt (только для типа prompt).
options.defaultstringundefinedЗначение по умолчанию, предзаполненное в поле ввода prompt (только для типа prompt).

Ошибки

  • Модуль уведомлений не загрузился (например, заблокирован CSP, ошибка динамического импорта).

    [Blok] Failed to display notification. Reason: <error>

    Встроенный notifier никогда не выбрасывает ошибку и не отклоняет промис — проверьте консоль браузера, так как сбой только логируется, а не передаётся в точку вызова. С пользовательским обработчиком config.notifier всё иначе: он вызывается синхронно, и его исключения не перехватываются.

TypeScript
// Simple notification
editor.notifier.show({
  message: 'Changes saved',
  style: 'success'
});
// → renders a body-mounted, viewport-fixed toast (default: bottom-center —
//   see config.notifierPosition); returns nothing to await

// Confirm notification
editor.notifier.show({
  message: 'Delete this block?',
  type: 'confirm',
  okHandler: () => console.log('Confirmed'),
  cancelHandler: () => console.log('Cancelled')
});

// Prompt notification
editor.notifier.show({
  message: 'Enter a title',
  type: 'prompt',
  okHandler: (value) => console.log('Entered:', value)
});