Indent List

Turn any block into a list item.

Indent List Toolbar Button
Loading...
Files
components/demo.tsx
'use client';

import React from 'react';

import { Plate } from '@udecode/plate-common/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>
  );
}

功能

  • 灵活的块缩进：

    • 为任何块类型（段落、标题等）设置列表缩进
    • 通过缩进将任何块转换为列表项
    • 更直观的 Word/Google Docs 式行为

  • 简化结构 - 与列表插件的区别：

    • 每个缩进块都独立的扁平 DOM 结构
    • 每个缩进列表块由一个带有一个项目的 ul 或 ol 组成
    • 不强制严格的父子关系
    • 更适合自由格式的内容组织

  • 列表类型：

    • 项目符号列表（无序）
    • 编号列表（有序）

  • 快捷键：

    • 结合自动格式插件，使用 markdown 快捷键（-、*、1.）创建列表
    • Tab/Shift+Tab 用于缩进控制

有关底层缩进系统的更多信息，请参阅 Indent 文档。

Installation

npm install @udecode/plate-indent-list @udecode/plate-indent

Usage

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-common/react';
 
const plugins = [
  // ...otherPlugins,
  HeadingPlugin,
  IndentPlugin.configure({
    inject: {
      targetPlugins: [ParagraphPlugin.key, HEADING_KEYS.h1],
    }
  }),
  IndentListPlugin.configure({
    inject: {
      targetPlugins: [ParagraphPlugin.key, HEADING_KEYS.h1],
    }
  }),
];

Plugins

IndentListPlugin

Options

Collapse all

    用于确定兄弟元素的缩进列表选项的函数。

    将 HTML 元素映射到列表样式类型的函数。

    在缩进列表节点下渲染组件的函数。

API

getNextIndentList

Parameters

Collapse all

    编辑器实例。

    当前元素的entry。

    获取下一个兄弟缩进列表的选项。

Returns

Collapse all

    具有缩进列表的下一个兄弟entry，如果未找到则返回 undefined。

getPreviousIndentList

获取具有缩进列表的前一个兄弟entry。

Parameters

Collapse all

    编辑器实例。

    当前元素的entry。

    获取前一个兄弟缩进列表的选项。

Returns

Collapse all

    具有缩进列表的前一个兄弟entry，如果未找到则返回 undefined。

indentList

增加所选块的缩进。

Parameters

Collapse all

    编辑器实例。

    扩展 SetIndentOptions。

outdentList

减少所选块的缩进。

Parameters

Collapse all

    编辑器实例。

    扩展 SetIndentOptions。

someIndentList

检查所选块中是否有特定的列表样式类型。

Parameters

Collapse all

    编辑器实例。

    要检查的列表样式类型。

toggleIndentList

切换缩进列表。

Parameters

Collapse all

    编辑器实例。

    切换缩进列表的选项。

GetSiblingIndentListOptions

用于提供获取文本块中兄弟缩进列表的选项。

Attributes

Collapse all

    此函数用于从给定entry获取前一个兄弟entry。

    此函数用于从给定entry获取下一个兄弟entry。

    此函数用于在查找过程中验证兄弟节点。如果返回 false，则检查下一个兄弟节点。

    指示当兄弟节点具有与当前节点相同的缩进级别时是否中断查找。如果为 true，则在找到具有相同缩进级别的兄弟节点时停止查找。

    一个接受 TNode 并返回布尔值或 undefined 的函数。此函数用于指定应该停止查找过程的条件。

    指示当找到具有较低缩进级别的兄弟节点时是否中断查找。如果为 true，则在找到具有较低缩进级别的兄弟节点时停止查找。

    指示当找到具有相同缩进级别但不同列表样式类型的兄弟节点时是否中断查找。如果为 true，则在找到这样的兄弟节点时停止查找。

API 组件

useIndentListToolbarButton

缩进列表工具栏按钮的行为钩子。

State

Collapse all

    列表样式类型。

    指示按钮是否被按下的布尔值。

Returns

Collapse all

IndentKeyboard Input