Indent Kit

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.

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.

• 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,
  ],
});