Alignment

Align your content to different positions.

Align Dropdown Menu
Loading...
Files
components/demo.tsx
'use client';

import React from 'react';

import { Plate } from '@udecode/plate-common/react';

import { editorPlugins } from '@/components/editor/plugins/editor-plugins';
import { useCreateEditor } from '@/components/editor/use-create-editor';
import { Editor, EditorContainer } from '@/components/plate-ui/editor';

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

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

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

Features

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

Installation

npm install @udecode/plate-alignment

Usage

// ...
import { createPlateEditor } from '@udecode/plate-common/react';
import { AlignPlugin } from '@udecode/plate-alignment/react';
import { ParagraphPlugin } from '@udecode/plate-common/react';
import { HeadingPlugin } from '@udecode/plate-heading/react';
 
const editor = createPlateEditor({
  plugins: [
    HeadingPlugin,
    AlignPlugin.configure({
      inject: {
        targetPlugins: [
          ParagraphPlugin.key,
          HeadingPlugin.key,
        ],
      },
    }),
  ],
});

Plugins

AlignPlugin

API

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.

AI CopilotAutoformat