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
# or
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.

import React from 'react';
import { createIndentPlugin, Plate, PlateProvider } from '@udecode/plate';
import { basicNodesPlugins } from './basic-nodes/basicNodesPlugins';
import { editableProps } from './common/editableProps';
import { plateUI } from './common/plateUI';
import { indentPlugin } from './indent/indentPlugin';
import { IndentToolbarButtons } from './indent/IndentToolbarButtons';
import { indentValue } from './indent/indentValue';
import { Toolbar } from './toolbar/Toolbar';
import { createMyPlugins, MyValue } from './typescript/plateTypes';

const plugins = createMyPlugins(
  [...basicNodesPlugins, createIndentPlugin(indentPlugin)],
  {
    components: plateUI,
  }
);

export default () => (
  <PlateProvider<MyValue> initialValue={indentValue} plugins={plugins}>
    <Toolbar>
      <IndentToolbarButtons />
    </Toolbar>

    <Plate<MyValue> editableProps={editableProps} />
  </PlateProvider>

Options#

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.
  • Default is 24

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.
  • Default is 'px'

Commands#

indent#

  • Increase the indentation of the selected blocks.

outdent#

  • Decrease the indentation of the selected blocks

Source Code#