Basic Elements

Enhance your editor with essential formatting elements.

Block Quote ElementCode Block ElementCode Line ElementCode Syntax LeafHeading Element
Loading...

Features

  • Includes commonly used block elements: blockquote, code block, and headings.

Plugins:

  • BlockquotePlugin for blockquote element
  • CodeBlockPlugin for code_block element
  • HeadingPlugin for h1, h2,... elements

Installation

npm install @udecode/plate-basic-elements
# or
npm install @udecode/plate-block-quote @udecode/plate-code-block @udecode/plate-heading

Usage

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

Keyboard Shortcuts

KeyDescription
Cmd + Opt + 1Toggle heading 1 block.
Cmd + Opt + 2Toggle heading 2 block.
Cmd + Opt + 3Toggle heading 3 block.
Cmd + Shift + .

Toggle the blockquote formatting for selected text.

Plugins

BasicElementsPlugin

BlockquotePlugin

HeadingPlugin

Options

Collapse all

    Specifies the heading levels supported, ranging from 1 to the specified levels.

CodeBlockPlugin

Options

Collapse all

    Determines if syntax highlighting is enabled.

    Determines if popular syntax should be displayed first.

    Defines deserializers for the code block plugin.

API Code Block

isCodeBlockEmpty

Checks if the selection is inside an empty code block.

Parameters

Collapse all

    The editor instance.

Returns

Collapse all

    Returns true if the selection is in an empty code block.

isSelectionAtCodeBlockStart

Checks if the selection is at the start of the first code line in a code block.

Parameters

Collapse all

    The editor instance.

Returns

Collapse all

    Returns true if the selection is at the start of the first code line in a code block.

indentCodeLine

Indents the code line if the selection is expanded or there are no non-whitespace characters at left of the cursor. The indentation is 2 spaces by default.

Parameters

Collapse all

    The editor instance.

insertCodeBlock

Inserts a code block by setting the node to code line and wrapping it with a code block. If the cursor is not at the block start, it inserts a break before the code block.

Parameters

Collapse all

    The editor instance.

insertCodeLine

Inserts a code line starting with the specified indentation depth.

Parameters

Collapse all

    The editor instance.

    The depth of indentation for the code line.

    • Default: 0

outdentCodeLine

Outdents a code line, removing two whitespace characters if present.

Parameters

Collapse all

    The editor instance.

toggleCodeBlock

Toggles the code block in the editor.

Parameters

Collapse all

    The editor instance.

unwrapCodeBlock

Unwraps the code block in the editor.

Parameters

Collapse all

    The editor instance.

useCodeBlockCombobox

State

Collapse all

    The code block element.

    Set element value callback.

Returns

Collapse all

    The props for the command item.

useCodeBlockElementState

Parameters

Collapse all

    The code block element.

Returns

Collapse all

    The CSS class name for the code block element, representing the selected language.

    The syntax plugin option.

useCodeSyntaxLeaf

Parameters

Collapse all

Returns

Collapse all

    The props for the token.

AutoformatBasic Marks