Skip to content
FrameworkJavaScript

Toolbar API: control the block toolbar

Control the block toolbar and its state.

Last updated Sep 26, 2026Edit 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

Dismiss the block toolbar from code. Use it after your custom action runs, so the UI does not linger.

TypeScript
// Standard close. The next mousemove re-opens the toolbar: close() clears the
// hovered block and resets the hover dedup, so BlockHovered fires again.
editor.toolbar.close();

// Close and keep it closed while the pointer stays on the same block
// (skips the hover-state reset, so no BlockHovered is re-emitted for it).
editor.toolbar.close({ setExplicitlyClosed: false });

toolbar.open()

void

Open the toolbar.

When to use

Forces the toolbar open for the current block. It normally appears on hover or focus, so use this sparingly.

TypeScript
editor.toolbar.open();

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

void

Toggle the block settings menu (☰).

When to use

Opens or closes the ☰ settings menu from code. Pass an explicit boolean to set the state instead of flipping it.

Parameters

ParameterTypeRequiredDefaultDescription
openingStateboolean—toggle current state

Force the settings menu open (true) or closed (false).

triggerHTMLElement—undefined

Element to anchor the settings popover to. If it sits inside a block, the menu opens for that block, not for the block holding the caret.

optionsToolbarBlockSettingsOptions—undefined

Placement overrides. placeLeftOfAnchor is already true when you pass a trigger element. Set it to false to open the popover to the right of the trigger instead.

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.
// Left placement is already the default for an element trigger —
// opt out to open the popover to the right instead:
editor.toolbar.toggleBlockSettings(true, triggerEl, { placeLeftOfAnchor: false });

toolbar.toggleToolbox(openingState?)

void

Toggle the toolbox (+ menu).

When to use

Opens or closes the + insert (slash) menu from code. 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. It hides or shows the hover toolbar (plus button and drag handle). It also collapses or restores 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 the toolbar is hidden.

When to use

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

Parameters

ParameterTypeRequiredDefaultDescription
hiddenbooleanRequired—

true hides the hover toolbar and collapses the gutter. false restores both.

TypeScript
// Hide the hover toolbar and collapse its gutter
editor.toolbar.setHidden(true);

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

toolbar.setPosition(position)

void

Runtime setter for config.toolbarPosition. It moves the floating block controls between the editor's inline-start and inline-end gutters. The wrapper's data-blok-toolbar-position attribute is kept in sync. That attribute drives both the gutter swap and the side the controls dock to.

The block-settings menu mirrors with them, so it never opens over the block it belongs to. An open toolbar is re-laid out in place rather than closed.

When to use

The runtime half of the toolbarPosition config option. It moves the controls and the gutter reserved for them together. It also mirrors the block-settings menu, so it never opens over the block.

Parameters

ParameterTypeRequiredDefaultDescription
position'left' | 'right'Required—

'left' for the inline-start gutter (the default), 'right' for inline-end.

TypeScript
// Move the +/⠿ controls to the right of the content column
editor.toolbar.setPosition('right');

// Back to the left gutter
editor.toolbar.setPosition('left');