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

npm install @udecode/plate

# or

npm install @udecode/plate-indent

Yarn

yarn add @udecode/plate

# or

yarn add @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>

To enter the code editing mode, press Enter. To exit the edit mode, press Escape

You are editing the code. To exit the edit mode, press Escape

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

• Plugin
• Variables