Indent

Indent Toolbar ButtonOutdent Toolbar Button
Loading...
Files
components/demo.tsx
'use client';

import React from 'react';

import { Plate } from '@udecode/plate/react';

import { editorPlugins } from '@/components/editor/plugins/editor-plugins';
import { useCreateEditor } from '@/components/editor/use-create-editor';
import { Editor, EditorContainer } from '@/components/plate-ui/editor';

import { DEMO_VALUES } from './values/demo-values';

export default function Demo({ id }: { id: string }) {
  const editor = useCreateEditor({
    plugins: [...editorPlugins],
    value: DEMO_VALUES[id],
  });

  return (
    <Plate editor={editor}>
      <EditorContainer variant="demo">
        <Editor />
      </EditorContainer>
    </Plate>
  );
}

Features

  • Core Functionality:

    • Indent/outdent any block element
    • Tab/Shift+Tab keyboard shortcuts
    • Clean DOM structure

  • Customization:

    • Define target block types
    • Set indentation size and units
    • Control maximum depth
    • Custom CSS styling

For list-specific features, see the Indent List plugin.

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/react';
 
const plugins = [
  // ...otherPlugins,
  HeadingPlugin,
  IndentPlugin.configure({
    inject: {
      targetPlugins: [ParagraphPlugin.key, HEADING_KEYS.h1],
    },
  }),
];

Plugins

IndentPlugin

Options

Collapse all

    Indentation offset used in (offset * element.indent) + unit.

    • Default: 40

    Indentation unit used in (offset * element.indent) + unit.

    • Default: 'px'

    Maximum number of indentations allowed.

API

indent

Indents the selected block(s) in the editor.

OptionsSetIndentOptions

    Options for indenting blocks.

outdent

Decrease the indentation of the selected blocks.

OptionsSetIndentOptions

    Options for outdenting blocks.

setIndent

Add offset to the indentation of the selected blocks.

OptionsSetIndentOptions

Collapse all

    Indentation offset used in (offset * element.indent) + unit.

    • Default: 1

    Options to get nodes to indent.

    Additional props to set on nodes to indent.

    Additional props to unset on nodes to indent.

    • Default: []

Types

SetIndentOptions

Used to provide options for setting the indentation of a block of text.

Options

Collapse all

    Change in indentation (1 to indent, -1 to outdent).

    • Default: 1

    Additional getNodes options.

    Additional setNodes options.

    Properties to unset when indentation is 0.

Hooks

useIndentButton

A behavior hook for the indent button component.

Returnsobject

Collapse all

    Props for the indent button.

useOutdentButton

A behavior hook for the outdent button component.

Returnsobject

Collapse all

    Props for the outdent button.