FrameworkJavaScript

Notifier API: show notifications

Display notification messages to users. Rendering is pluggable: pass `notifier: (options) => …` in the constructor config and Blok calls your handler instead of rendering anything — the built-in toast is skipped entirely (including its i18n `okText`/`cancelText` defaults), and any error your handler throws propagates to the `show()` call site. `notifierPosition` places the built-in container: 'bottom-left' | 'bottom-right' | 'bottom-center' | 'top-left' | 'top-right' | 'top-center' (default 'bottom-center').

Edit this page on GitHub

Reaching the editor instance

The methods below run on the editor you created with new Blok(). They are available once editor.isReady resolves.

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');

Methods

notifier.show(options)

void

Show a notification message. Supports simple, confirm, and prompt notifications.

When to use

Built-in toast for lightweight feedback. Set type: 'confirm' or 'prompt' to collect a yes/no or text response.

Parameters

Parameter	Type	Required	Default	Description
`options`	`NotifierOptions \| ConfirmNotifierOptions \| PromptNotifierOptions`	Required	—	Notification configuration. Shape depends on type.
`options.message`	`string`	Required	—	Notification text. May contain HTML.
`options.type`	`'alert' \| 'confirm' \| 'prompt'`	—	`'alert'`	Notification type. confirm and prompt add action buttons.
`options.style`	`'success' \| 'error'`	—	`undefined`	Marks the notification's semantic kind. `'error'` raises the message's screen-reader live region to `assertive` (otherwise `polite`), and the value is stamped onto `data-blok-testid` as `notification-success` / `notification-error`. The built-in toast looks identical either way — there is no success/error coloring.
`options.time`	`number`	—	`8000`	Auto-dismiss delay in ms for alert notifications (default 8000). Confirm and prompt notifications ignore this and stay until the user resolves them.
`options.okText`	`string`	—	i18n `notifier.confirm` / `notifier.ok` ('Confirm' / 'OK' in English)	Label for the confirm/submit button (confirm/prompt types only).
`options.okHandler`	`(event: Event) => void \| (value: string) => void`	—	`undefined`	Confirm/submit callback. Receives the click event for confirm, or the input value for prompt. Required for prompt notifications.
`options.cancelText`	`string`	—	i18n `notifier.cancel` ('Cancel' in English)	Label for the cancel button (confirm and prompt types).
`options.cancelHandler`	`(event: Event) => void`	—	`undefined`	Cancel/close callback. Invoked (when provided) before the dialog closes via the cancel button or dismiss/Escape — for both confirm and prompt types.
`options.inputType`	`string`	—	`'text'`	HTML input type for the prompt's text field (prompt type only).
`options.placeholder`	`string`	—	`undefined`	Placeholder text for the prompt's input field (prompt type only).
`options.default`	`string`	—	`undefined`	Default value pre-filled in the prompt's input field (prompt type only).

Errors

The notifier module fails to load (e.g. blocked by CSP, dynamic import failure).
[Blok] Failed to display notification. Reason: <error>
The built-in notifier never throws or rejects — check the browser console, since the failure is logged rather than propagated to your call site. A custom config.notifier handler is a different story: it is called synchronously and its exceptions are not caught.

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