Skip to main content

Indent

The block indentation feature allows you to set indentation for blocks such as paragraphs or headings.

Its main purpose is to visually distinguish parts of the content. Block indentation is mostly useful for graphically differentiate structure elements.

Installation#

npm install @udecode/plate-indent

Usage#

Use the indent or outdent toolbar buttons in the editor below to control the level of indentation of the content, both for paragraph text and headers.

Live Editor
Result
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

Options#

This plugin has a few configuration options that can be used to adjust the block indentation behavior.

types#

  • By default, only the paragraph can be indented.
  • You can use the types option to control which types of block can be indented.
  • The above demo is using types: [ELEMENT_PARAGRAPH, ELEMENT_H1] so the heading block can also be indented.

offset and unit#

  • By default, the block indentation plugin increases or decreases the current indentation by the given offset, using the given unit.
  • The above demo is using the default configuration, which defines a 24px indentation step.
  • You can change that value to, for example, 3em:
Live Editor
Result
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

indentMax#

  • You generally want to set a maximum number of indentation so the text stays readable.
  • Using indentMax: 5 will limit the indent to 5 levels.

classNames#

  • If you want more semantics in your content, use CSS classes instead of fixed indentation units.
  • You can then adjust the indentation in the style sheets of your application.
  • You can use the option classNames so the plugin will pass className instead of style prop:
createIndentPlugin({
classNames: [
'slate-indent-1',
'slate-indent-2',
'slate-indent-3',
],
}),
.slate-indent-1 {
margin-left: 10%;
}
.slate-indent-2 {
margin-left: 20%;
}
.slate-indent-3 {
margin-left: 30%;
}
  • The last class of the array has the biggest indentation, so the above options will restrict indentation levels to 3.
  • Note that offset and unit are ignored if classNames is defined.

Commands#

indent#

  • Increase the indentation of the selected blocks.

outdent#

  • Decrease the indentation of the selected blocks

Source Code#