Docs
Indent

Indent

Customize text indentation.

Indent Toolbar ButtonOutdent Toolbar Button

Indentation

Easily control the indentation of specific blocks to highlight important information and improve visual structure.
For instance, this paragraph looks like it belongs to the previous one.

Features

  • Set text block indentation for differentiating structural elements or emphasizing certain content sections.

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

Horizontal RuleIndent List