Text Align

Align block content.

TextAlignPlugin stores block alignment in an align property and renders it as CSS text-align. Setting the default start value removes the property from matching blocks.

Loading…

Features

Block-level text alignment.
start, left, center, right, end, and justify values.
HTML text-align style deserialization.
Default-value cleanup.
Configurable target block types.
Registry dropdown toolbar for common alignments.

Kit Usage

Add the Kit

Use AlignKit for the Plate UI setup. It targets headings, paragraphs, images, and media embeds.

'use client';
 
import { TextAlignPlugin } from '@platejs/basic-styles/react';
import { KEYS } from 'platejs';
 
export const AlignKit = [
  TextAlignPlugin.configure({
    inject: {
      nodeProps: {
        defaultNodeValue: 'start',
        nodeKey: 'align',
        styleKey: 'textAlign',
        validNodeValues: ['start', 'left', 'center', 'right', 'end', 'justify'],
      },
      targetPlugins: [...KEYS.heading, KEYS.p, KEYS.img, KEYS.mediaEmbed],
    },
  }),
];

'use client';
 
import { TextAlignPlugin } from '@platejs/basic-styles/react';
import { KEYS } from 'platejs';
 
export const AlignKit = [
  TextAlignPlugin.configure({
    inject: {
      nodeProps: {
        defaultNodeValue: 'start',
        nodeKey: 'align',
        styleKey: 'textAlign',
        validNodeValues: ['start', 'left', 'center', 'right', 'end', 'justify'],
      },
      targetPlugins: [...KEYS.heading, KEYS.p, KEYS.img, KEYS.mediaEmbed],
    },
  }),
];

import { createPlateEditor } from 'platejs/react';
 
import { AlignKit } from '@/components/editor/plugins/align-kit';
 
export const editor = createPlateEditor({
  plugins: [...AlignKit],
});

import { createPlateEditor } from 'platejs/react';
 
import { AlignKit } from '@/components/editor/plugins/align-kit';
 
export const editor = createPlateEditor({
  plugins: [...AlignKit],
});

AlignToolbarButton shows left, center, right, and justify controls.

import { AlignToolbarButton } from '@/components/ui/align-toolbar-button';
 
export function AlignControls() {
  return <AlignToolbarButton />;
}

import { AlignToolbarButton } from '@/components/ui/align-toolbar-button';
 
export function AlignControls() {
  return <AlignToolbarButton />;
}

Manual Usage

Install Package

pnpm add @platejs/basic-styles

pnpm add @platejs/basic-styles

Add the Plugin

Configure the blocks that can store alignment.

import { TextAlignPlugin } from '@platejs/basic-styles/react';
import { KEYS } from 'platejs';
import { createPlateEditor } from 'platejs/react';
 
export const editor = createPlateEditor({
  plugins: [
    TextAlignPlugin.configure({
      inject: {
        nodeProps: {
          defaultNodeValue: 'start',
          nodeKey: 'align',
          styleKey: 'textAlign',
          validNodeValues: [
            'start',
            'left',
            'center',
            'right',
            'end',
            'justify',
          ],
        },
        targetPlugins: [...KEYS.heading, KEYS.p],
      },
    }),
  ],
});

import { TextAlignPlugin } from '@platejs/basic-styles/react';
import { KEYS } from 'platejs';
import { createPlateEditor } from 'platejs/react';
 
export const editor = createPlateEditor({
  plugins: [
    TextAlignPlugin.configure({
      inject: {
        nodeProps: {
          defaultNodeValue: 'start',
          nodeKey: 'align',
          styleKey: 'textAlign',
          validNodeValues: [
            'start',
            'left',
            'center',
            'right',
            'end',
            'justify',
          ],
        },
        targetPlugins: [...KEYS.heading, KEYS.p],
      },
    }),
  ],
});

Set Alignment

Use the bound transform or the headless utility.

import { setAlign } from '@platejs/basic-styles';
 
editor.tf.textAlign.setNodes('center');
 
setAlign(editor, 'start', { at: [] });

import { setAlign } from '@platejs/basic-styles';
 
editor.tf.textAlign.setNodes('center');
 
setAlign(editor, 'start', { at: [] });

Ownership

Surface	Owner	What It Does
`BaseTextAlignPlugin`	`@platejs/basic-styles`	Headless plugin that stores alignment, injects block props, and parses HTML text-align styles.
`TextAlignPlugin`	`@platejs/basic-styles/react`	React wrapper around `BaseTextAlignPlugin`.
`setAlign`	`@platejs/basic-styles`	Sets or clears alignment on matching blocks.
`tf.textAlign.setNodes`	`@platejs/basic-styles`	Bound transform exposed by the plugin.
`BaseAlignKit`	Registry kit	Static/headless setup for headings, paragraphs, images, and media embeds.
`AlignKit`	Registry kit	React setup plus toolbar dependency.
`AlignToolbarButton`	Registry UI	Dropdown that writes alignment through `textAlign.setNodes`.

The package owns alignment storage and parsing. The registry owns the dropdown UI.

Behavior

Behavior	Source
Plugin key	`KEYS.textAlign`
Stored property	`align`
Rendered CSS style	`textAlign`
Default target plugins	`[KEYS.p]`
Registry target plugins	`[...KEYS.heading, KEYS.p, KEYS.img, KEYS.mediaEmbed]`
Default value	`start`
Valid values	`start`, `left`, `center`, `right`, `end`, `justify`
HTML parser	Reads `element.style.textAlign`.
Setting a custom value	Sets `{ align: value }` on matching blocks.
Setting `start`	Unsets the stored alignment property.
Non-target blocks	Are ignored by `setAlign`.

HTML

The plugin injects an HTML deserializer into each target plugin. Pasted HTML with a text-align style becomes an align prop on matching blocks.

<p style="text-align: center">Centered text</p>

<p style="text-align: center">Centered text</p>

API Reference

API	Package	Use
`TextAlignPlugin`	`@platejs/basic-styles/react`	React alignment plugin.
`BaseTextAlignPlugin`	`@platejs/basic-styles`	Headless alignment plugin.
`editor.tf.textAlign.setNodes(value, options?)`	`@platejs/basic-styles`	Sets or clears alignment on matching blocks.
`setAlign(editor, value, options?)`	`@platejs/basic-styles`	Headless transform behind the bound API.

Options

Option	Surface	Use
`inject.targetPlugins`	`TextAlignPlugin`	Block types that can keep `align`.
`inject.nodeProps.nodeKey`	`TextAlignPlugin`	Stored block property; registry kits use `align`.
`inject.nodeProps.defaultNodeValue`	`TextAlignPlugin`	Value that clears the stored property when selected.
`inject.nodeProps.styleKey`	`TextAlignPlugin`	CSS property used for rendering.
`inject.nodeProps.validNodeValues`	Registry toolbar	Values exposed to alignment UI.
`SetNodesOptions`	`setAlign`	Slate node update options passed to `setNodes` or `unsetNodes`.

Line Height Indent

On This Page

Features Kit Usage Add the Kit Add the Toolbar Control Manual Usage Install Package Add the Plugin Set Alignment Ownership Behavior HTML API Reference Options

Build your editor

Production-ready AI template and reusable components.