{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "list-docs",
"title": "List",
"description": "Documentation for List",
"files": [
{
"path": "../../content/docs/(plugins)/(styles)/list.mdx",
"content": "---\ntitle: List\ndocs:\n - route: /docs/components/list-toolbar-button\n title: List Toolbar Button\n---\n\n\n\n\n\n## Features\n\n- **Flexible Block Indentation**: Transform any block type (paragraphs, headings, etc.) into list items through indentation.\n- **Simplified Structure**: Flat DOM structure where each indented block is independent, unlike [List Classic plugin](/docs/list-classic).\n- **List Types**: Support for bulleted lists (unordered) and numbered lists (ordered).\n- **Markdown Shortcuts**: Register the shipped list input rules to create lists from markdown triggers like `-`, `*`, `1.`, and `[]`.\n\nFor more information about the underlying indentation system, see the [Indent plugin](/docs/indent).\n\n\n\n## Kit Usage\n\n\n\n### Installation\n\nThe 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](/docs/indent) targeting paragraph, heading, blockquote, code block, and toggle elements.\n\n\n\n- [`BlockList`](/docs/components/block-list): Renders list wrapper elements with support for todo lists.\n- Includes [`IndentKit`](/docs/indent) for the underlying indentation system.\n- Configures `Paragraph`, `Heading`, `Blockquote`, `CodeBlock`, and `Toggle` elements to support list functionality.\n\n### Add Kit\n\nAdd the kit to your plugins:\n\n```tsx\nimport { createPlateEditor } from 'platejs/react';\nimport { ListKit } from '@/components/editor/plugins/list-kit';\n\nconst editor = createPlateEditor({\n plugins: [\n // ...otherPlugins,\n ...ListKit,\n ],\n});\n```\n\n### Add Toolbar Button\n\nYou can add [`ListToolbarButton`](/docs/components/list-toolbar-button) to your [Toolbar](/docs/toolbar) to create and manage lists.\n\n\n\n## Turn Into Toolbar Button\n\nYou can add these items to the [Turn Into Toolbar Button](/docs/toolbar#turn-into-toolbar-button) to convert blocks into lists:\n\n```tsx\n{\n icon: ,\n label: 'Bulleted list',\n value: KEYS.ul,\n}\n```\n\n```tsx\n{\n icon: ,\n label: 'Numbered list',\n value: KEYS.ol,\n}\n```\n\n```tsx\n{\n icon: ,\n label: 'To-do list',\n value: KEYS.listTodo,\n}\n```\n\n## Manual Usage\n\n\n\n### Installation\n\n```bash\nnpm install @platejs/list @platejs/indent\n```\n\n### Add Plugins\n\nInclude both `IndentPlugin` and `ListPlugin` in your Plate plugins array when creating the editor. The List plugin depends on the Indent plugin.\n\n```tsx\nimport { IndentPlugin } from '@platejs/indent/react';\nimport { ListPlugin } from '@platejs/list/react';\nimport { createPlateEditor } from 'platejs/react';\n\nconst editor = createPlateEditor({\n plugins: [\n // ...otherPlugins,\n IndentPlugin,\n ListPlugin,\n ],\n});\n```\n\n### Configure Plugins\n\nYou can configure both plugins to target specific elements, customize list behavior, and register the shipped markdown rules.\n\n```tsx\nimport { IndentPlugin } from '@platejs/indent/react';\nimport {\n BulletedListRules,\n OrderedListRules,\n TaskListRules,\n} from '@platejs/list';\nimport { ListPlugin } from '@platejs/list/react';\nimport { KEYS } from 'platejs';\nimport { createPlateEditor } from 'platejs/react';\nimport { BlockList } from '@/components/ui/block-list';\n\nconst editor = createPlateEditor({\n plugins: [\n // ...otherPlugins,\n IndentPlugin.configure({\n inject: {\n targetPlugins: [...KEYS.heading, KEYS.p, KEYS.blockquote, KEYS.codeBlock],\n },\n }),\n ListPlugin.configure({\n inputRules: [\n BulletedListRules.markdown({ variant: '-' }),\n OrderedListRules.markdown({ variant: '.' }),\n TaskListRules.markdown({ checked: false }),\n ],\n inject: {\n targetPlugins: [...KEYS.heading, KEYS.p, KEYS.blockquote, KEYS.codeBlock],\n },\n render: {\n belowNodes: BlockList,\n },\n }),\n ],\n});\n```\n\n- `inject.targetPlugins`: An array of plugin keys indicating which element types can become list items.\n- `inputRules`: Registers the feature-owned markdown shortcuts for bulleted, ordered, and task lists.\n- `render.belowNodes`: Assigns [`BlockList`](/docs/components/block-list) to render list wrapper elements.\n\nFor the runtime model and other variants, see [Plugin Input Rules](/docs/plugin-input-rules).\n\n\n\n## Plugins\n\n### `ListPlugin`\n\nPlugin for creating and managing lists. It works with the [Indent plugin](/docs/indent) to provide flexible list functionality where any block can be transformed into a list item through indentation.\n\n\n\n \" optional>\n Function to determine indent list options for sibling elements.\n \n ListStyleType\" optional>\n Function mapping HTML elements to list style types.\n \n\n\n\n## API\n\n### `getNextList`\n\nGets the next sibling entry with an indent list.\n\n\n\n \n Entry of the current element.\n \n \" optional>\n Options for getting next indent list.\n \n\n\n\n Entry of the next sibling with an indent list, or `undefined` if not found.\n\n\n\n### `getPreviousList`\n\nGets the previous sibling entry with an indent list.\n\n\n\n \n Entry of the current element.\n \n \" optional>\n Options for getting previous indent list.\n \n\n\n\n Entry of the previous sibling with an indent list, or `undefined` if not found.\n\n\n\n### `indentList`\n\nIncreases the indentation of the selected blocks.\n\n\n\n \n List style type to use.\n - **Default:** `ListStyleType.Disc`\n \n\n\n\n### `outdentList`\n\nDecreases the indentation of the selected blocks.\n\n\n\n \n List style type to use.\n - **Default:** `ListStyleType.Disc`\n \n\n\n\n### `someList`\n\nChecks if some of the selected blocks have a specific list style type.\n\n\n\n \n List style type to check.\n \n\n\n\n### `toggleList`\n\nToggles the indent list.\n\n\n\n \n List style type to use.\n \n\n \n Override the number of the list item.\n \n\n \n Override the number of the list item, only taking effect if the list item is the first in the list.\n \n\n\n\n## Types\n\n### `GetSiblingListOptions`\n\nUsed to provide options for getting the sibling indent list in a block of text.\n\n\n\n \n This function is used to get the previous sibling entry from a given entry.\n \n \n This function is used to get the next sibling entry from a given entry.\n \n \n This function is used to validate a sibling node during the lookup process.\n If it returns false, the next sibling is checked.\n \n \n Indicates whether to break the lookup when the sibling node has an indent\n level equal to the current node. If true, the lookup stops when a sibling\n node with the same indent level is found.\n \n boolean | undefined\">\n A function that takes a `TNode` and returns a boolean value or undefined.\n This function is used to specify a condition under which the lookup process\n should be stopped.\n \n \n Indicates whether to break the lookup when a sibling node with a lower\n indent level is found. If true, the lookup stops when a sibling node with a\n lower indent level is found.\n \n \n Indicates whether to break the lookup when a sibling node with the same\n indent level but a different list style type is found. If true, the lookup\n stops when such a sibling node is found.\n \n\n\n\n## Hooks\n\n### `useListToolbarButton`\n\nA behavior hook for the indent list toolbar button.\n\n\n\n \n The list style type.\n \n \n Whether the button is pressed.\n \n\n\n\n \n Props for the toolbar button.\n \n \n Whether the button is pressed.\n \n \n Callback to handle the click event. Toggles the indent list of the specified node type and focuses the editor.\n \n \n \n\n\n",
"type": "registry:file",
"target": "content/docs/plate/(plugins)/(styles)/list.mdx"
}
],
"type": "registry:file"
}