Editor

Text toolbar

The card that appears over a text selection (a vertical toolbar): block type, color, bold / italic / underline / clear, link / strike / code / equation, Comment, Skills and “Edit with AI”.

Usage

  • Editor shows TextToolbar over a text selection; render it yourself only in a custom editor.
  • Use it for inline formatting of the selected text: marks, link, color and turn into.
  • Don’t show it for code blocks or the page title, where inline marks don’t apply.
  • Don’t use it as a page toolbar; keep page actions in the topbar.

Installation

Install the package (React 19):

terminal
npm install @krackedui/motion

Import the styles once, in your app entry or root layout:

/src/main.tsx
import '@krackedui/motion/styles.css';

Use it anywhere inside your app's <Theme> (see Installation):

/src/TexttoolbarExample.tsx
import { TextToolbar } from '@krackedui/motion';

export function TextToolbarExample() {
  return (
    <TextToolbar block={{ type: 'text' }} />
  );
}

Examples

Active marks

Buttons toggle; pressed marks show the hover background (aria-pressed).

Color panel open

defaultPanel="color" opens the color grid (Recently used, Text color, Background color).

Turn into panel open

“Normal Text ▸” opens the Turn into list beside the card.

Without AI

API Reference

TextToolbar

Based on <div> and supports its props (except onChange). Adds:

PropTypeDefault
block
Pick<Block, "type" | "props">
active
Partial<Record<ToolbarMark | "link", boolean>>
{}
color
BlockColor
recentColors
BlockColor[]
onMark
(mark: ToolbarMark) => void
onClearFormat
() => void
onLink
(url: string | null) => void
onColor
(color: BlockColor) => void
onTurnInto
(kind: BlockKind) => void
onComment
() => void
defaultPanel
"none""color""turn""link"
"none"
hideAI
boolean
false

Accessibility

  • The card is a toolbar named "Text formatting": ←/→/↑/↓ move between its buttons, Home/End jump to the ends. "Normal Text ▸" is a button with aria-expanded that opens the Turn into list.
  • Every icon button has an aria-label and title (Bold, Italic, Underline, Clear format, Link, Strikethrough, Inline code, Equation) and aria-pressed for its mark.
  • Mouse-down is prevented (except in the link input) so the text selection is kept while clicking.
  • The link panel input: Enter applies, Esc closes. In the Editor the same marks are on ⌘B / ⌘I / ⌘U / ⌘E / ⌘⇧S.
© 2026 Motion. Internal documentation.