Docs
Basic Elements

Basic Elements

Enhance your editor with essential formatting elements.

Block Quote ElementCode Block ElementCode Line ElementCode Syntax LeafHeading ElementParagraph Element

🌳 Blocks

Easily create headings of various levels, from H1 to H6, to structure your content and make it more organized.
Create blockquotes to emphasize important information or highlight quotes from external sources.
// Use code blocks to showcase code snippets
function greet() {
  console.info('Hello World!');
}

🌱 Marks

Add style and emphasis to your text using the mark plugins, which offers a variety of formatting options.
Make text bold, italic, underlined, or apply a combination of these styles for a visually striking effect.
Add strikethrough to indicate deleted or outdated content.
Write code snippets with inline code formatting for easy readability.

Features

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

Plugins:

  • createBlockquotePlugin() for blockquote element
  • createCodeBlockPlugin() for code_block element
  • createHeadingPlugin() for h1, h2,... elements
  • createParagraphPlugin() for p element

Installation

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

Usage

import { createBasicElementsPlugin } from '@udecode/plate-basic-elements';
 
const plugins = [
  // ...otherPlugins,
  createBasicElementsPlugin(),
];

Keyboard Interactions

KeyDescription
Cmd + Opt + 0Toggle paragraph block.
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.

Cmd + A

Select all text in the code block.

API

createBasicElementsPlugin

API Block Quote

createBlockquotePlugin

API Heading

createHeadingPlugin

Options

Collapse all

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

API Paragraph

createParagraphPlugin

API Code Block

createCodeBlockPlugin

Options

Collapse all

    Determines if syntax highlighting is enabled.

    Determines if popular syntax should be displayed first.

    Defines deserializers for the code block plugin.

    Hotkeys to trigger a code block action.

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