Indent

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:

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

Installation

bunnpmpnpmyarn
pnpm add @platejs/indent
Copy

Add Plugin

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

Copyimport { 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.

Copyimport { 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.