Text Align

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.

• 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:

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

Installation

bunnpmpnpmyarn
pnpm add @platejs/basic-styles
Copy

Add Plugin

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

Copyimport { 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.

Copyimport { 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.