Text Align

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.

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.

</PackageInfo>

Kit Usage

<Steps>

Add the Kit

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

tsx

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.

tsx

import { AlignToolbarButton } from '@/components/ui/align-toolbar-button';

export function AlignControls() {
  return <AlignToolbarButton />;
}

</Steps>

Manual Usage

<Steps>

Install Package

bash

npm install @platejs/basic-styles

Add the Plugin

Configure the blocks that can store alignment.

tsx

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.

tsx

import { setAlign } from '@platejs/basic-styles';

editor.tf.textAlign.setNodes('center');

setAlign(editor, 'start', { at: [] });

</Steps>

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.

html

<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`.