Plate
PlateEditorsTemplates
GitHub16kGitHub
DiscordDiscord
    • Stream
    • Copilot
  • Comments
  • Discussion
  • Suggestions
    • Basic Blocks
      • Blockquote
      • Heading
      • Horizontal Rule
    • Callout
    • Code Block
    • Column
    • Date
    • Equation
    • Link
    • Media
    • MentionElement
    • Table
    • Table of Contents
    • Footnote
    • Details
  • Marks
    • Bold
    • Italic
    • Underline
    • Code
    • Highlight
    • Keyboard Input
    • Strikethrough
    • Subscript
    • Superscript
      • Font
      • Line Height
      • Text Align
    • Indent
    • List
      • Exit Break
      • Single Block
      • Trailing Block
    • Autoformat
    • Block Menu
    • Block Placeholder
    • Combobox
      • Emoji
      • MentionElement
      • Slash Command
    • Drag & Drop
    • Navigation Feedback
    • Linting
    • Tabbable
    • Toolbar
    • Yjs
    • Multi SelectEditor
    • DOCX
    • HTML
    • Markdown

Indent

PreviousNext

Customize text indentation.

Indent Toolbar Buttons
Loading…
Text AlignList

On This Page

FeaturesKit usageInstallationAdd kitManual usageInstallationAdd pluginConfigure pluginAdd toolbar buttonPluginsIndentPluginAPIeditor.plugin(IndentPlugin).update.increaseeditor.plugin(IndentPlugin).update.decreaseTypesIndentChangeOptionsToolbar buttonsFirst-line indent
Build your editor
Production-ready AI template and reusable components.
Get all-access

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.
Report an issue

Kit usage

Installation

The fastest way to add indent functionality is with the IndentKit, which includes a pre-configured IndentPlugin for text, Details, media and other common blocks. Tables are not among them, because a table keeps its own left margin.

'use client';
 
import { PLUGINS } from 'platejs';
import { IndentPlugin } from 'platejs/react';
 
export const IndentKit = [
  IndentPlugin.configure({
    initialState: {
      offset: 24,
    },
    targetPlugins: [
      PLUGINS.heading,
      PLUGINS.paragraph,
      PLUGINS.blockquote,
      PLUGINS.codeBlock,
      PLUGINS.details,
      PLUGINS.image,
      PLUGINS.audio,
      PLUGINS.callout,
      PLUGINS.columnGroup,
      PLUGINS.equation,
      PLUGINS.excalidraw,
      PLUGINS.file,
      PLUGINS.horizontalRule,
      PLUGINS.mediaEmbed,
      PLUGINS.toc,
      PLUGINS.upload,
      PLUGINS.video,
    ],
  }),
];
'use client';
 
import { PLUGINS } from 'platejs';
import { IndentPlugin } from 'platejs/react';
 
export const IndentKit = [
  IndentPlugin.configure({
    initialState: {
      offset: 24,
    },
    targetPlugins: [
      PLUGINS.heading,
      PLUGINS.paragraph,
      PLUGINS.blockquote,
      PLUGINS.codeBlock,
      PLUGINS.details,
      PLUGINS.image,
      PLUGINS.audio,
      PLUGINS.callout,
      PLUGINS.columnGroup,
      PLUGINS.equation,
  • Configures paragraph, heading, blockquote, code block, Details, image, audio, video, file, media embed, upload, callout, column group, equation, Excalidraw, horizontal rule and table of contents elements to support the indent property, so a Details body that holds them can become a list.
  • 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 { createEditor } from "platejs/react";
import { IndentKit } from "@/components/editor/indent";
 
const editor = createEditor({
  plugins: [
    // ...otherPlugins,
    ...IndentKit,
  ],
});
import { createEditor } from "platejs/react";
import { IndentKit } from "@/components/editor/indent";
 
const editor = createEditor

Manual usage

Installation

pnpm add platejs
pnpm add platejs

Add plugin

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

import { IndentPlugin } from "platejs/react";
import { createEditor } from "platejs/react";
 
const editor = createEditor({
  plugins: [
    // ...otherPlugins,
    IndentPlugin,
  ],
});
import { IndentPlugin } from "platejs/react";
import { createEditor } from "platejs/react";
 
const editor = createEditor({
  plugins: [
    // ...otherPlugins,
    IndentPlugin,
  ],
});

Configure plugin

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

import { IndentPlugin } from "platejs/react";
import { PLUGINS } from "platejs";
import { createEditor } from "platejs/react";
 
const editor = createEditor({
  plugins: [
    // ...otherPlugins,
    IndentPlugin.configure({
      targetPlugins: [
        PLUGINS.heading, PLUGINS.heading, PLUGINS.heading, PLUGINS.heading, PLUGINS.heading, PLUGINS.heading,
        PLUGINS.paragraph,
        PLUGINS.blockquote,
      ],
      inject: {
        nodeProps: {
          styleKey: "marginLeft",
  • inject.nodeProps.styleKey: Maps the injected prop to the CSS marginLeft property.
  • targetPlugins: Element plugin descriptors or dynamic names whose nodes can store indentation.
  • initialState.offset: Indentation offset in pixels (default: 24).
  • initialState.unit: Unit for indentation values (default: 'px').
  • initialState.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 targetPlugins and applies marginLeft styling.

Optionsobject

    CSS property name for styling. - Default: 'marginLeft'

    Element plugin descriptors or dynamic names targeted for indent storage and injection. - Default: [BaseParagraphPlugin]

    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

editor.plugin(IndentPlugin).update.increase

Indents the selected block(s) in the editor.

OptionsIndentChangeOptions

    Options for indenting blocks.

editor.plugin(IndentPlugin).update.decrease

Decreases the indentation of the selected blocks.

OptionsIndentChangeOptions

    Options for outdenting blocks.

Types

IndentChangeOptions

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

Options

    Node query and update options. match may further restrict target blocks.

Toolbar buttons

Toolbar components call the descriptor-scoped updates directly:

import { IndentPlugin, useEditor } from 'platejs/react';
 
const editor = useEditor();
const { update } = editor.plugin(IndentPlugin);
 
<>
  <ToolbarButton onClick={() => update.increase()}>Indent</ToolbarButton>
  <ToolbarButton onClick={() => update.decrease()}>Outdent</ToolbarButton>
</>
import { IndentPlugin, useEditor } from 'platejs/react';
 
const editor = useEditor();
const { update } = editor.plugin(IndentPlugin);
 
<>
  <ToolbarButton onClick={() => update.increase()}>Indent</ToolbarButton>
  <ToolbarButton onClick={() => update.decrease()}>Outdent</ToolbarButton>
</>

First-line indent

TextIndentPlugin indents only a block's first line. It stores a step count in textIndent and draws CSS text-indent as offset * textIndent + unit, so a negative count is a hanging indent. No kit installs it, so add it yourself:

import { TextIndentPlugin } from "platejs/react";
import { createEditor } from "platejs/react";
 
const editor = createEditor({
  plugins: [
    // ...otherPlugins,
    TextIndentPlugin,
  ],
});
 
editor.update.textIndent.set(1);
editor.update.textIndent.clear({ at: [] });
import { TextIndentPlugin } from "platejs/react";
import { createEditor } from "platejs/react";
 
const editor = createEditor({
  plugins: [
    // ...otherPlugins,
    TextIndentPlugin,
  ],
});
 
editor.update.textIndent.set(1);
editor.update.textIndent.clear({ at: [] });

set(value, options?) saves the count on matching target blocks, and clear(options?) removes it. Both take Plate node update options for the target range and matcher. The plugin targets paragraphs unless you pass targetPlugins. initialState.offset and initialState.unit set the step size, 24 and 'px' by default. Word export writes the count as a first-line indent, or a hanging indent when negative, and skips it on list paragraphs.

PLUGINS.excalidraw,
PLUGINS.file,
PLUGINS.horizontalRule,
PLUGINS.mediaEmbed,
PLUGINS.toc,
PLUGINS.upload,
PLUGINS.video,
],
}),
];
({
plugins: [
// ...otherPlugins,
...IndentKit,
],
});
},
},
initialState: {
offset: 24,
unit: "px",
indentMax: 10,
},
}),
],
});
import { IndentPlugin } from "platejs/react";
import { PLUGINS } from "platejs";
import { createEditor } from "platejs/react";
 
const editor = createEditor({
  plugins: [
    // ...otherPlugins,
    IndentPlugin.configure({
      targetPlugins: [
        PLUGINS.heading, PLUGINS.heading, PLUGINS.heading, PLUGINS.heading, PLUGINS.heading, PLUGINS.heading,
        PLUGINS.paragraph,
        PLUGINS.blockquote,
      ],
      inject: {
        nodeProps: {
          styleKey: "marginLeft",
        },
      },
      initialState: {
        offset: 24,
        unit: "px",
        indentMax: 10,
      },
    }),
  ],
});