Alignment and indent

Two toolbar groups for block layout: alignment toggles and indent buttons.

Installation

This pattern is built from files in @intentui/editor. Install the editor, then copy the code above into a component of your own.

npx shadcn@latest add @intentui/editor

What's included

PieceWhy it is here
RichTextExtensionHandles the align and indent commands. Every pattern needs it.
InitialStateExtensionApplies the seeded content immediately, so the server and the client render the same. Leave it out if your editor starts empty. See Seeding initial content.
FormatStateExtensionTracks the alignment and indent level of the current block. Remove it and the buttons throw, because they read from it.
TabIndentationExtensionIndents with the Tab key. Remove it and Tab moves focus out of the editor.
ShortcutsExtensionRegisters the keyboard shortcuts below. Remove it and the buttons still work, but the shortcuts do not.
ElementFormatToolbarPluginThe alignment toggles.
IndentToolbarPluginThe indent and outdent buttons.
ToolbarThe container that holds toolbar plugins. See Toolbar.

You can use either plugin on its own. Keep FormatStateExtension in both cases.

Alignment

The buttons are toggles, and the one matching the current block is pressed. Blocks without an explicit alignment show as left.

ButtonShortcut
Align leftCtrl Shift L
Align centerCtrl Shift E
Align rightCtrl Shift R
JustifyCtrl Shift J
Align start, Align endNone

Use Cmd instead of Ctrl on macOS.

Basic alignment only

Set formats="basic" to render only left, center, right and justify. The default adds start and end, which follow the text direction.

<ElementFormatToolbarPlugin formats="basic" />

Indent

Outdent is disabled when the current block has no indentation. The icons flip in right-to-left layouts.

ActionShortcut
IndentCtrl ] or Tab
OutdentCtrl [

Styling

The indent step is a CSS variable in components/editor/theme.css.

components/editor/theme.css
.editor-indent {
  --lexical-indent-base-value: 32px;
}

API

Props of ElementFormatToolbarPlugin. IndentToolbarPlugin takes no props.
formats"basic" | "all"
basic renders left, center, right and justify. all adds start and end.
Default: "all"