Text Align

PreviousNext
Align Toolbar Button
Loading...
Files
components/demo.tsx
'use client';

import * as React from 'react';

import { Plate, usePlateEditor } from 'platejs/react';

import { EditorKit } from '@/components/editor/editor-kit';
import { Editor, EditorContainer } from '@/components/ui/editor';

import { DEMO_VALUES } from './values/demo-values';

export default function Demo({ id }: { id: string }) {
  const editor = usePlateEditor({
    plugins: EditorKit,
    value: DEMO_VALUES[id],
  });

  return (
    <Plate editor={editor}>
      <EditorContainer variant="demo">
        <Editor />
      </EditorContainer>
    </Plate>
  );
}

Features

  • Apply text alignment to block elements like paragraphs and headings.
  • Supports left, right, center, and justify alignment.
  • Injects an align prop into targeted block elements.

Kit Usage

Installation

The fastest way to add text alignment functionality is with the AlignKit, which includes pre-configured TextAlignPlugin targeting paragraph, heading, image, and media elements.

'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],
    },
  }),
];
  • Configures Paragraph, Heading, Image, and Media elements to support the align property.
  • Provides alignment options: start, left, center, right, end, justify.

Add Kit

Add the kit to your plugins:

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

Manual Usage

Installation

pnpm add @platejs/basic-styles

Add Plugin

Include TextAlignPlugin in your Plate plugins array when creating the editor.

import { TextAlignPlugin } from '@platejs/basic-styles/react';
import { createPlateEditor } from 'platejs/react';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    TextAlignPlugin,
  ],
});

Configure Plugin

You can configure the TextAlignPlugin to target specific elements and define alignment options.

import { TextAlignPlugin } from '@platejs/basic-styles/react';
import { KEYS } from 'platejs';
import { createPlateEditor } from 'platejs/react';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    TextAlignPlugin.configure({
      inject: {
        nodeProps: {
          nodeKey: 'align',
          defaultNodeValue: 'start',
          styleKey: 'textAlign',
          validNodeValues: ['start', 'left', 'center', 'right', 'end', 'justify'],
        },
        targetPlugins: [...KEYS.heading, KEYS.p],
      },
    }),
  ],
});
  • inject.nodeProps.nodeKey: The property name injected into target elements (align by default). Set to 'textAlign' if you prefer that prop name.
  • inject.nodeProps.defaultNodeValue: Sets the default alignment (start).
  • inject.nodeProps.styleKey: Maps the injected prop to the CSS textAlign property.
  • inject.nodeProps.validNodeValues: Defines valid alignment values for UI controls.
  • inject.targetPlugins: An array of plugin keys indicating which element types will receive the alignment prop.

Add Toolbar Button

You can add AlignToolbarButton to your Toolbar to control text alignment.

Plugins

TextAlignPlugin

Plugin for aligning text within block elements. It injects an align prop into the elements specified by inject.targetPlugins.

Optionsobject

Collapse all

    The property name injected into target elements.

    • Default: 'align'

    Default text alignment value.

    • Default: 'start'

    CSS property name for styling.

    • Default: 'textAlign'

    Array of valid alignment values.

    • Default: ['start', 'left', 'center', 'right', 'end', 'justify']

    Array of plugin keys to target for alignment injection.

    • Default: ['p']

Transforms

tf.textAlign.setNodes

Sets the alignment for the selected block nodes that are configured as targets for this plugin.

Parameters

Collapse all

    The alignment value (e.g., 'left', 'center', 'right', 'justify').

    Options for the setNodes function.

Line HeightIndent