缩进

PreviousNext
缩进工具栏按钮
Files
components/demo.tsx
'use client';

import * as React from 'react';

import { Plate, usePlateEditor } from 'platejs/react';

import { EditorKit } from '@/components/editor/editor-kit';
import { Editor, EditorContainer } from '@/components/ui/editor';

import { DEMO_VALUES } from './values/demo-values';

export default function Demo({ id }: { id: string }) {
  const editor = usePlateEditor({
    plugins: EditorKit,
    value: DEMO_VALUES[id],
  });

  return (
    <Plate editor={editor}>
      <EditorContainer variant="demo">
        <Editor />
      </EditorContainer>
    </Plate>
  );
}
indent-demo
indent-demo

特性

  • 使用 Tab/Shift+Tab 快捷键为块级元素添加缩进。
  • 应用具有可自定义偏移量和单位的统一缩进。
  • 向目标块级元素注入 indent 属性。
  • 支持最大缩进深度控制。

Kit 使用

安装

添加缩进功能最快的方法是使用 IndentKit，它包含预配置的 IndentPlugin，针对段落、标题、引用块、代码块和切换元素。

'use client';

import { IndentPlugin } from '@platejs/indent/react';
import { KEYS } from 'platejs';

export const IndentKit = [
  IndentPlugin.configure({
    inject: {
      targetPlugins: [
        ...KEYS.heading,
        KEYS.p,
        KEYS.blockquote,
        KEYS.codeBlock,
        KEYS.toggle,
      ],
    },
    options: {
      offset: 24,
    },
  }),
];
  • 配置 Paragraph、Heading、Blockquote、CodeBlock 和 Toggle 元素以支持 indent 属性。
  • 设置自定义缩进间距为 24px。
  • 提供 Tab/Shift+Tab 快捷键用于缩进和取消缩进。

添加 Kit

将 kit 添加到你的插件中：

import { createPlateEditor } from 'platejs/react';
import { IndentKit } from '@/components/editor/plugins/indent-kit';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    ...IndentKit,
  ],
});

手动使用

安装

pnpm add @platejs/indent

添加插件

在创建编辑器时，将 IndentPlugin 包含在你的 Plate 插件数组中。

import { IndentPlugin } from '@platejs/indent/react';
import { createPlateEditor } from 'platejs/react';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    IndentPlugin,
  ],
});

配置插件

你可以配置 IndentPlugin 以针对特定元素并自定义缩进行为。

import { IndentPlugin } from '@platejs/indent/react';
import { KEYS } from 'platejs';
import { createPlateEditor } from 'platejs/react';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    IndentPlugin.configure({
      inject: {
        nodeProps: {
          styleKey: 'marginLeft',
        },
        targetPlugins: [...KEYS.heading, KEYS.p, KEYS.blockquote],
      },
      options: {
        offset: 24,
        unit: 'px',
        indentMax: 10,
      },
    }),
  ],
});
  • inject.nodeProps.styleKey：将注入的属性映射到 CSS marginLeft 属性。
  • inject.targetPlugins：一个插件键数组，指示哪些元素类型可以缩进。
  • options.offset：缩进偏移量（像素）（默认：24）。
  • options.unit：缩进值的单位（默认：'px'）。
  • options.indentMax：允许的最大缩进次数。

添加工具栏按钮

你可以将 IndentToolbarButton 添加到你的工具栏中以控制缩进。

插件

IndentPlugin

用于缩进块级元素的插件。它向 inject.targetPlugins 指定的元素注入 indent 属性并应用 marginLeft 样式。

Optionsobject

Collapse all

    注入到目标元素的属性名称。

    • 默认值： 'indent'

    用于样式的 CSS 属性名称。

    • 默认值： 'marginLeft'

    用于缩进注入的插件键数组。

    • 默认值： ['p']

    在 (offset * element.indent) + unit 中使用的缩进偏移量。

    • 默认值： 24

    在 (offset * element.indent) + unit 中使用的缩进单位。

    • 默认值： 'px'

    允许的最大缩进次数。

API

indent

缩进编辑器中的选定块。

OptionsSetIndentOptions

Collapse all

    用于缩进块的选项。

outdent

减少选定块的缩进。

OptionsSetIndentOptions

Collapse all

    用于取消缩进块的选项。

setIndent

为选定的块添加缩进偏移量。

OptionsSetIndentOptions

Collapse all

    在 (offset * element.indent) + unit 中使用的缩进偏移量。

    • 默认值： 1

    获取要缩进的节点的选项。

    要设置到要缩进的节点上的其他属性。

    要从未缩进的节点上取消设置的其他属性。

    • 默认值： []

类型

SetIndentOptions

用于提供设置文本块缩进的选项。

Options

Collapse all

    缩进的变化（1 表示缩进，-1 表示取消缩进）。

    • 默认值： 1

    额外的 getNodes 选项。

    额外的 setNodes 选项。

    当缩进为 0 时要取消设置的属性。

Hooks

useIndentButton

缩进按钮组件的行为 hook。

Returnsobject

Collapse all

    缩进按钮的属性。

useOutdentButton

取消缩进按钮组件的行为 hook。

Returnsobject

Collapse all

    取消缩进按钮的属性。

FontIndent