Indent

Indent Toolbar ButtonOutdent Toolbar Button
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

  • Core Functionality:

    • Indent/outdent any block element
    • Tab/Shift+Tab keyboard shortcuts
    • Clean DOM structure

  • Customization:

    • Define target block types
    • Set indentation size and units
    • Control maximum depth
    • Custom CSS styling

For list-specific features, see the Indent List plugin.

Installation

npm install @udecode/plate-indent

Usage

import { IndentPlugin } from '@udecode/plate-indent/react';
import { HEADING_KEYS } from '@udecode/plate-heading';
import { HeadingPlugin } from '@udecode/plate-heading/react';
import { ParagraphPlugin } from '@udecode/plate-common/react';
 
const plugins = [
  // ...otherPlugins,
  HeadingPlugin,
  IndentPlugin.configure({
    inject: {
      targetPlugins: [ParagraphPlugin.key, HEADING_KEYS.h1],
    },
  }),
];

Plugins

IndentPlugin

Options

Collapse all

    The indentation offset used in (offset * element.indent) + unit.

    • Default: 40

    The indentation unit used in (offset * element.indent) + unit.

    • Default: 'px'

    The maximum number of indentations that can be applied to an element.

API

indent

Indents the selected block(s) in the editor.

Parameters

Collapse all

    The editor instance.

outdent

Decrease the indentation of the selected blocks.

Parameters

Collapse all

    The editor instance.

setIndent

Add offset to the indentation of the selected blocks.

Parameters

Collapse all

    The editor instance.

SetIndentOptions

Used to provide options for setting the indentation of a block of text.

State

Collapse all

    Defines the change in indentation. A value of 1 increases the indentation (indents the block), whereas a value of -1 decreases the indentation (outdents the block). By default, the offset is set to 1.

    Additional getNodes options.

    Additional setNodes options.

    A list of property names that should be unset when the indentation is 0.

API Components

useIndentButton

A behavior hook for the indent button component.

Returns

Collapse all

useOutdentButton

A behavior hook for the outdent button component.

Returns

Collapse all