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 { createIndentPlugin } from '@udecode/plate-indent';
 
const plugins = [
  // ...otherPlugins,
  createHeadingPlugin(),
  createParagraphPlugin(),
  createIndentPlugin({
    inject: {
      props: {
        validTypes: [ELEMENT_PARAGRAPH, ELEMENT_H1],
      },
    },
  }),
];

API

createIndentPlugin

Attributes

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.

createTextIndentPlugin

indent

Increase the indentation of the selected blocks.

outdent

Decrease the indentation of the selected blocks.

setIndent

Add offset to the indentation of the selected blocks.

API Components

useIndentButton

useOutdentButton

Horizontal RuleIndent List