Indent
components/demo.tsx
'use client';
import React from 'react';
import { Plate } from '@udecode/plate/react';
import { editorPlugins } from '@/components/editor/plugins/editor-plugins';
import { useCreateEditor } from '@/components/editor/use-create-editor';
import { Editor, EditorContainer } from '@/components/plate-ui/editor';
import { DEMO_VALUES } from './values/demo-values';
export default function Demo({ id }: { id: string }) {
const editor = useCreateEditor({
plugins: [...editorPlugins],
value: DEMO_VALUES[id],
});
return (
<Plate editor={editor}>
<EditorContainer variant="demo">
<Editor />
</EditorContainer>
</Plate>
);
}
Features
-
Core Functionality:
- Indent/outdent any block element
- Tab/Shift+Tab keyboard shortcuts
- Clean DOM structure
-
Customization:
- Define target block types
- Set indentation size and units
- Control maximum depth
- Custom CSS styling
For list-specific features, see the Indent List plugin.
Installation
npm install @udecode/plate-indentUsage
import { IndentPlugin } from '@udecode/plate-indent/react';
import { HEADING_KEYS } from '@udecode/plate-heading';
import { HeadingPlugin } from '@udecode/plate-heading/react';
import { ParagraphPlugin } from '@udecode/plate/react';
const plugins = [
// ...otherPlugins,
HeadingPlugin,
IndentPlugin.configure({
inject: {
targetPlugins: [ParagraphPlugin.key, HEADING_KEYS.h1],
},
}),
];