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(),
];

API

createBasicElementsPlugin

API Block Quote

createBlockquotePlugin

API Heading

createHeadingPlugin

Attributes

Collapse all

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

API Paragraph

createParagraphPlugin

API Code Block

createCodeBlockPlugin

Attributes

Collapse all

    Options.

    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

isSelectionAtCodeBlockStart

indentCodeLine

insertCodeBlock

insertCodeLine

outdentCodeLine

toggleCodeBlock

unwrapCodeBlock

useCodeBlockCombobox

useCodeBlockComboboxState

useCodeBlockElement

useCodeBlockElementState

useCodeSyntaxLeaf

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.

AutoformatBasic Marks