Controls

Toolbar

Build reactive toolbar buttons that respond to editor state and cursor position. Commands use the TipTap command API.

Building a Toolbar

Root exposes an EditableState object that tracks the active editor. Use it to build toolbar buttons that react to cursor position. Click into the editor below to see the toolbar appear.

Live Example

Select some text and use the toolbar buttons above to toggle formatting. Try bold, italic, and underline.

<Editable.Root {editing} onsave={handleSave}>
  {#snippet children({ state, save })}
    {#if editing && state}
      <Toolbar {state} onsave={save} />
    {/if}
    <!-- editors... -->
  {/snippet}
</Editable.Root>

EditableState API

state.command(name, fn, attributes?)

Returns { isActive, has, run } — a reactive object for a toolbar button.

const bold = state.command('bold', (e) => e.chain().focus().toggleBold().run());

// bold.isActive — reactive, true when cursor is in bold text
// bold.has      — true if the bold extension is loaded
// bold.run()    — toggles bold on the active editor

state.isActive(name, attributes?)

Reactive check for whether a mark/node is active at the cursor.

state.has(extension)

Whether the extension exists in the active editor's schema.

state.text(fn)

Run a function against the active TipTap Editor instance. Returns undefined if no text editor is active.

state.replaceImage() / state.getImageAlt() / state.setImageAlt(alt)

Image editor controls. Active only when an image editor has focus.