Docs
Alignment

Alignment

Align your content to different positions.

Align Dropdown Menu

Alignment

Align text within blocks to create visually appealing and balanced layouts.

Center

Create clean and balanced layouts by justifying block text, providing a professional and polished look.

Features

  • Provides text alignment options: left, right, center, or justify.

Installation

npm install @udecode/plate-alignment

Usage

// ...
import { createAlignPlugin } from '@udecode/plate-alignment';
 
const plugins = [
  // ...otherPlugins,
  createAlignPlugin({
    inject: {
      props: {
        validTypes: [
          ELEMENT_PARAGRAPH,
          ELEMENT_H1,
          ELEMENT_H2,
          ELEMENT_H3,
          ELEMENT_H4,
          ELEMENT_H5,
          ELEMENT_H6,
        ],
      },
    },
  }),
];

API

createAlignPlugin

setAlign

Sets the alignment for the specified block elements in the editor.

Parameters

Collapse all

    The editor instance.

API Components

useAlignDropdownMenuState

Returns

Collapse all

    The alignment value.

useAlignDropdownMenu

State

Collapse all

    The alignment value.

Returns

Collapse all

    Props for the radio group.

TypescriptAutoformat