Indent

PreviousNext
Indent Toolbar Buttons
Loading...
Files
components/demo.tsx
'use client';

import * as React from 'react';

import { Plate, usePlateEditor } from 'platejs/react';

import { EditorKit } from '@/components/editor/editor-kit';
import { Editor, EditorContainer } from '@/components/ui/editor';

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

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

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

Features

  • Add indentation to block elements using Tab/Shift+Tab keyboard shortcuts.
  • Apply consistent indentation with customizable offset and units.
  • Injects an indent prop into targeted block elements.
  • Support for maximum indentation depth control.

Kit Usage

Installation

The fastest way to add indent functionality is with the IndentKit, which includes pre-configured IndentPlugin targeting paragraph, heading, blockquote, code block, and toggle elements.

'use client';
 
import { IndentPlugin } from '@platejs/indent/react';
import { KEYS } from 'platejs';
 
export const IndentKit = [
  IndentPlugin.configure({
    inject: {
      targetPlugins: [
        ...KEYS.heading,
        KEYS.p,
        KEYS.blockquote,
        KEYS.codeBlock,
        KEYS.toggle,
      ],
    },
    options: {
      offset: 24,
    },
  }),
];
  • Configures Paragraph, Heading, Blockquote, CodeBlock, and Toggle elements to support the indent property.
  • Sets a custom offset of 24px for indentation spacing.
  • Provides Tab/Shift+Tab keyboard shortcuts for indenting and outdenting.

Add Kit

Add the kit to your plugins:

import { createPlateEditor } from 'platejs/react';
import { IndentKit } from '@/components/editor/plugins/indent-kit';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    ...IndentKit,
  ],
});

Manual Usage

Installation

pnpm add @platejs/indent

Add Plugin

Include IndentPlugin in your Plate plugins array when creating the editor.

import { IndentPlugin } from '@platejs/indent/react';
import { createPlateEditor } from 'platejs/react';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    IndentPlugin,
  ],
});

Configure Plugin

You can configure the IndentPlugin to target specific elements and customize indentation behavior.

import { IndentPlugin } from '@platejs/indent/react';
import { KEYS } from 'platejs';
import { createPlateEditor } from 'platejs/react';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    IndentPlugin.configure({
      inject: {
        nodeProps: {
          styleKey: 'marginLeft',
        },
        targetPlugins: [...KEYS.heading, KEYS.p, KEYS.blockquote],
      },
      options: {
        offset: 24,
        unit: 'px',
        indentMax: 10,
      },
    }),
  ],
});
  • inject.nodeProps.styleKey: Maps the injected prop to the CSS marginLeft property.
  • inject.targetPlugins: An array of plugin keys indicating which element types can be indented.
  • options.offset: Indentation offset in pixels (default: 24).
  • options.unit: Unit for indentation values (default: 'px').
  • options.indentMax: Maximum number of indentations allowed.

Add Toolbar Button

You can add IndentToolbarButton to your Toolbar to control indentation.

Plugins

IndentPlugin

Plugin for indenting block elements. It injects an indent prop into the elements specified by inject.targetPlugins and applies marginLeft styling.

Optionsobject

Collapse all

    The property name injected into target elements.

    • Default: 'indent'

    CSS property name for styling.

    • Default: 'marginLeft'

    Array of plugin keys to target for indent injection.

    • Default: ['p']

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

    • Default: 24

    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.

Text AlignList