List Kit

Features

• Flexible Block Indentation: Transform any block type (paragraphs, headings, etc.) into list items through indentation.
• Simplified Structure: Flat DOM structure where each indented block is independent, unlike List Classic plugin.
• List Types: Support for bulleted lists (unordered) and numbered lists (ordered).
• Markdown Shortcuts: Register the shipped list input rules to create lists from markdown triggers like -, *, 1., and [].

For more information about the underlying indentation system, see the Indent plugin.

Usage

Installation

The fastest way to add list functionality is with the ListKit, which includes pre-configured ListPlugin, the shipped list input rules, and the required Indent plugin targeting paragraph, heading, blockquote, code block, and toggle elements.

• BlockList: Renders list wrapper elements with support for todo lists.
• Includes IndentKit for the underlying indentation system.
• Configures Paragraph, Heading, Blockquote, CodeBlock, and Toggle elements to support list functionality.

Add Kit

Add the kit to your plugins:

import { createPlateEditor } from "platejs/react";
import { ListKit } from "@/components/editor/plugins/list-kit";

const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    ...ListKit,
  ],
});

Add Toolbar Button

You can add ListToolbarButton to your Toolbar to create and manage lists.