Skip to content
FrameworkJavaScript

Toolbar API: control the block toolbar

Control the block toolbar and its state.

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

toolbar.close(options?)

void

Close the toolbar with optional configuration.

When to use

Programmatically dismiss the block toolbar — e.g. after your custom action runs so the UI doesn't linger.

TypeScript
// Standard close (prevents hover reopen — default)
editor.toolbar.close();

// Close but allow the toolbar to reopen on hover
editor.toolbar.close({ setExplicitlyClosed: false });

toolbar.open()

void

Open the toolbar.

When to use

Force the toolbar open for the current block; it normally appears on hover/focus, so use sparingly.

TypeScript
editor.toolbar.open();

toolbar.toggleBlockSettings(openingState?, trigger?, options?)

void

Toggle the block settings menu (☰).

When to use

Open/close the ☰ settings menu in code; pass an explicit boolean to set state rather than flip it.

Parameters

ParameterTypeRequiredDefaultDescription
openingStateboolean—toggle current stateForce the settings menu open (true) or closed (false).
triggerHTMLElement—undefinedElement to anchor the settings popover to.
optionsToolbarBlockSettingsOptions—undefinedPlacement overrides — placeLeftOfAnchor positions the popover to the left of the anchor.
TypeScript
// Toggle current state
editor.toolbar.toggleBlockSettings();

// Force open
editor.toolbar.toggleBlockSettings(true);

// Force close
editor.toolbar.toggleBlockSettings(false);

// Anchor the settings popover to a custom trigger element,
// placed to the left of the anchor
editor.toolbar.toggleBlockSettings(true, triggerEl, { placeLeftOfAnchor: true });

toolbar.toggleToolbox(openingState?)

void

Toggle the toolbox (+ menu).

When to use

Open/close the + insert (slash) menu programmatically; pass a boolean to force a state.

TypeScript
// Toggle current state
editor.toolbar.toggleToolbox();

// Force open
editor.toolbar.toggleToolbox(true);

toolbar.setHidden(hidden)

void

Runtime setter for `config.hideToolbar`: hide or show the hover toolbar (plus button / drag handle) AND collapse or restore the editor gutter reserved for it — the wrapper's `data-blok-toolbar-hidden` attribute is kept in sync, so no dead space is left behind. The keyboard "/" menu keeps working while hidden.

When to use

The runtime half of the hideToolbar config option — flips both the toolbar behaviour and the reserved gutter, so no dead space is left behind.

Parameters

ParameterTypeRequiredDefaultDescription
hiddenbooleanRequired—true to hide the hover toolbar and collapse the gutter; false to restore both.
TypeScript
// Hide the hover toolbar and collapse its gutter
editor.toolbar.setHidden(true);

// Restore it
editor.toolbar.setHidden(false);