Alignment

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

import React from 'react';

import { Plate } from '@udecode/plate/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/react';
import { AlignPlugin } from '@udecode/plate-alignment/react';
import { ParagraphPlugin } from '@udecode/plate/react';
import { HeadingPlugin } from '@udecode/plate-heading/react';
 
const editor = createPlateEditor({
  plugins: [
    HeadingPlugin,
    AlignPlugin.configure({
      inject: {
        targetPlugins: [
          ParagraphPlugin.key,
          HeadingPlugin.key,
        ],
      },
    }),
  ],
});

Plugins

AlignPlugin

Plugin for aligning text within block elements.

Options

Collapse all

API

setAlign

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

Parameters

Collapse all

    The editor instance.

    Options for setting alignment.

Optionsobject

Collapse all

    The alignment value.

    Options for the setNodes function.

Hooks

useAlignDropdownMenuState

Returnsobject

Collapse all

    The alignment value.

useAlignDropdownMenu

State

Collapse all

    The alignment value.

Returnsobject

Collapse all

    Props for the radio group.