From zbeyens. The source code is available on GitHub.

Plate
PlatePliteEditorsTemplates
GitHub16kGitHub
DiscordDiscord
    • Stream
    • Copilot
  • Discussion
    • Comments
    • Suggestion
    • Basic Blocks
      • Blockquote
      • Heading
      • Horizontal Rule
    • Callout
    • Code Block
    • Column
    • Date
    • Equation
    • Link
    • List Classic
    • Media
    • MentionElement
    • Table
    • Table of Contents
    • Footnote
    • Toggle
  • 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
    • Cursor Overlay
    • Drag & Drop
    • Navigation Feedback
    • Tabbable
    • Toolbar
    • Yjs
    • Multi SelectEditor
    • CSV
    • 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.decreaseeditor.plugin(IndentPlugin).update.changeTypesIndentChangeOptionsToolbar Buttons
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 pre-configured IndentPlugin targeting paragraph, heading, blockquote, code block, and toggle elements.

'use client';
 
import { IndentPlugin } from '@platejs/indent/react';
import { PLUGINS } from 'platejs';
 
export const IndentKit = [
  IndentPlugin.configure({
    initialState: {
      offset: 24,
    },
    targetPlugins: [
      PLUGINS.heading,
      PLUGINS.paragraph,
      PLUGINS.blockquote,
      PLUGINS.codeBlock,
      PLUGINS.toggle,
      PLUGINS.image,
    ],
  }),
];
'use client';
 
import { IndentPlugin } from '@platejs/indent/react';
import { PLUGINS } from 'platejs';
 
export const IndentKit = [
  IndentPlugin.configure({
    initialState: {
      offset: 24,
    },
    targetPlugins: [
      PLUGINS.heading,
      PLUGINS.paragraph,
      PLUGINS.blockquote,
      PLUGINS.codeBlock,
      PLUGINS.toggle,
      PLUGINS.image,
    ],
  }),
];
  • 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/indent";
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    ...IndentKit,
  ],
});
import { createPlateEditor } from "platejs/react";
import { IndentKit } from "@/components/editor/indent";
 
const editor = createPlateEditor

Manual Usage

Installation

pnpm add @platejs/indent
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,
  ],
});
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 { PLUGINS } from "platejs";
import { createPlateEditor } from "platejs/react";
 
const editor = createPlateEditor({
  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.

OptionsOmit<IndentChangeOptions, 'offset'>

    Options for indenting blocks.

editor.plugin(IndentPlugin).update.decrease

Decreases the indentation of the selected blocks.

OptionsOmit<IndentChangeOptions, 'offset'>

    Options for outdenting blocks.

editor.plugin(IndentPlugin).update.change

Adds an offset to the indentation of the selected blocks.

OptionsIndentChangeOptions

    Indentation offset used in (offset * element.indent) + unit. - Default: 1

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

    Returns additional properties to set for the next indent value.

    Additional persisted property keys to unset when indentation reaches zero. - Default: []

Types

IndentChangeOptions

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

Options

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

    Node query and update options.

    Builds additional properties from the next indent value.

    Persisted property keys to unset when indentation reaches zero.

Toolbar Buttons

Toolbar components call the descriptor-scoped updates directly:

const { update } = useEditorPlugin(IndentPlugin);
 
<ToolbarButton onClick={() => update.increase()}>Indent</ToolbarButton>
<ToolbarButton onClick={() => update.decrease()}>Outdent</ToolbarButton>
const { update } = useEditorPlugin(IndentPlugin);
 
<ToolbarButton onClick={() => update.increase()}>Indent</ToolbarButton>
<ToolbarButton onClick={() => update.decrease()}>Outdent</ToolbarButton>
({
plugins: [
// ...otherPlugins,
...IndentKit,
],
});
},
},
initialState: {
offset: 24,
unit: "px",
indentMax: 10,
},
}),
],
});
import { IndentPlugin } from "@platejs/indent/react";
import { PLUGINS } from "platejs";
import { createPlateEditor } from "platejs/react";
 
const editor = createPlateEditor({
  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,
      },
    }),
  ],
});