EditorToolbar

Medium-style floating selection toolbar (or fixed-top variant) with an accent-toned AI button slot.

Inspired by Medium (2012), Notion / Linear inline toolbars, Konstantin Münster on Lexical.

Preview

What it looks like.

The Locara runtime is responsible for honoring the manifest's capability declarations at every system call.

Usage

Drop it into your app.

import { EditorToolbar } from '@locara/components'

<EditorToolbar
  mode="floating"
  anchor={selectionRect}
  items={[
    { id: 'bold', icon: <BoldIcon/>, label: 'Bold', shortcut: '⌘B', onClick: () => wrap('**') },
    { id: 'italic', icon: <ItalicIcon/>, label: 'Italic', shortcut: '⌘I', active: isItalic, onClick: () => wrap('_') },
    { id: 'code', icon: <CodeIcon/>, label: 'Code', onClick: () => wrap('`') },
    'separator',
    { id: 'ai', icon: <SparkIcon/>, label: 'Ask AI', tone: 'accent', onClick: openInlineEdit },
  ]}
/>

Or copy the source into your repo: locara add editor-toolbar