Indent

Customize text indentation.

Indent Toolbar ButtonOutdent 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>
  );
}

功能特点

  • 核心功能:

    • 缩进/减少任何块级元素的缩进
    • Tab/Shift+Tab 键盘快捷键
    • 清晰的 DOM 结构

  • 自定义选项:

    • 定义目标块类型
    • 设置缩进大小和单位
    • 控制最大缩进深度
    • 自定义 CSS 样式

关于列表特定功能，请参见 缩进列表插件。

安装

npm install @udecode/plate-indent

Usage

import { IndentPlugin } from '@udecode/plate-indent/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],
    },
  }),
];

插件

IndentPlugin

Options

Collapse all

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

    • 默认值: 40

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

    • 默认值: 'px'

    可以应用于元素的最大缩进次数。

API

indent

缩进编辑器中选中的块。

Parameters

Collapse all

    编辑器实例。

    选项

outdent

减少选中块的缩进。

Parameters

Collapse all

    编辑器实例。

    选项

setIndent

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

Parameters

Collapse all

    编辑器实例。

SetIndentOptions

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

State

Collapse all

    定义缩进的变化。值为 1 时增加缩进（缩进块），值为 -1 时减少缩进（减少缩进）。默认情况下，偏移量设置为 1。

    额外的 getNodes 选项。

    额外的 setNodes 选项。

    当缩进为 0 时应取消设置的属性名称列表。

API 组件

useIndentButton

缩进按钮组件的行为钩子。

Returns

Collapse all

useOutdentButton

减少缩进按钮组件的行为钩子。

Returns

Collapse all

Horizontal RuleIndent List