Indent List
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>
);
}
Plate offers two approaches for implementing lists:
-
This Indent List plugin - Flexible indentation-based lists:
- More like Word/Google Docs behavior
- Any block can be indented to create list-like structures
- Used in the AI editor
- Better for free-form content organization
-
The List plugin - Traditional HTML-spec lists with strict nesting rules:
- Follows standard HTML list structure (
ul/ol>li) - Maintains consistent list hierarchy
- Best for content that may be exported to HTML/markdown
- Highest complexity
- Follows standard HTML list structure (
Choose based on your needs:
- Use the Indent List plugin when you want more flexible indentation behavior
- Use the List plugin when you need standard HTML list compatibility
Features
-
Flexible Block Indentation:
- Set list indentation for any block type (paragraphs, headings, etc.)
- Transform any block into a list item through indentation
- More intuitive Word/Google Docs-like behavior
-
Simplified Structure - Differs from the List plugin:
- Flat DOM structure where each indented block is independent
- Each indented list block consists of a single
ulorolwith one item - No strict parent-child relationships enforced
- Better for free-form content organization
-
List Types:
- Bulleted lists (unordered)
- Numbered lists (ordered)
-
Shortcuts:
- Combined with the autoformat plugin, use markdown shortcuts (
-,*,1.) to create lists - Tab/Shift+Tab for indentation control
- Combined with the autoformat plugin, use markdown shortcuts (
For more information about the underlying indentation system, see the Indent doc.
Installation
npm install @udecode/plate-indent-list @udecode/plate-indentUsage
import { IndentPlugin } from '@udecode/plate-indent/react';
import { IndentListPlugin } from '@udecode/plate-indent-list/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],
}
}),
IndentListPlugin.configure({
inject: {
targetPlugins: [ParagraphPlugin.key, HEADING_KEYS.h1],
}
}),
];