Basic Elements

Enhance your editor with essential formatting elements.

Block Quote ElementCode Block ElementCode Line ElementCode Syntax LeafHeading Element
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>
  );
}

功能特点

  • 包含常用的块级元素：引用块、代码块和标题。

插件：

  • BlockquotePlugin 用于 blockquote 元素
  • CodeBlockPlugin 用于 code_block 元素
  • HeadingPlugin 用于 h1、h2... 等元素

安装

Usage

import {
  BasicElementsPlugin,
  CodeBlockPlugin,
} from '@udecode/plate-basic-elements/react';
import Prism from 'prismjs';
 
const plugins = [
  // ...otherPlugins,
  BasicElementsPlugin.configurePlugin(CodeBlockPlugin, {
    options: {
      prism: Prism,
    },
  }),
];

键盘快捷键

KeyDescription
Cmd + Opt + 1切换一级标题块。
Cmd + Opt + 2切换二级标题块。
Cmd + Opt + 3切换三级标题块。
Cmd + Shift + .

切换所选文本的引用块格式。

插件

BasicElementsPlugin

BlockquotePlugin

HeadingPlugin

Options

Collapse all

    指定支持的标题级别，范围从1到指定的级别。

CodeBlockPlugin

Options

Collapse all

    确定是否启用语法高亮。

    确定是否优先显示常用语法。

    定义代码块插件的反序列化器。

代码块 API

isCodeBlockEmpty

检查选区是否在空代码块内。

Parameters

Collapse all

    编辑器实例。

Returns

Collapse all

    如果选区在空代码块内则返回 true。

isSelectionAtCodeBlockStart

检查选区是否在代码块第一行的开始位置。

Parameters

Collapse all

    编辑器实例。

Returns

Collapse all

    如果选区在代码块第一行的开始位置则返回 true。

indentCodeLine

如果选区已展开或光标左侧没有非空白字符，则缩进代码行。默认缩进为2个空格。

Parameters

Collapse all

    编辑器实例。

insertCodeBlock

插入一个代码块，将节点设置为代码行并将其包裹在代码块中。如果光标不在块开始处，则会在代码块前插入一个换行符。

Parameters

Collapse all

    编辑器实例。

    setNodes 函数的选项。

insertCodeLine

插入一个具有指定缩进深度的代码行。

Parameters

Collapse all

    编辑器实例。

    代码行的缩进深度。

    • 默认值： 0

outdentCodeLine

减少代码行缩进，如果存在则删除两个空白字符。

Parameters

Collapse all

    编辑器实例。

toggleCodeBlock

在编辑器中切换代码块。

Parameters

Collapse all

    编辑器实例。

unwrapCodeBlock

在编辑器中解除代码块包裹。

Parameters

Collapse all

    编辑器实例。

useCodeBlockCombobox

State

Collapse all

    代码块元素。

    设置元素值的回调函数。

Returns

Collapse all

    命令项的属性。

useCodeBlockElementState

Parameters

Collapse all

    代码块元素。

Returns

Collapse all

    代码块元素的 CSS 类名，表示所选的语言。

    语法插件选项。

useCodeSyntaxLeaf

Parameters

Collapse all

Returns

Collapse all

    标记的属性。

AutoformatBasic Marks