Basic Elements

PreviewCode

Paragraph

Editing

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!');
}

JavaScript

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.

Edit link

1

100%

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

Plugins

BasicElementsPlugin

BlockquotePlugin

HeadingPlugin

CodeBlockPlugin

API Code Block

isCodeBlockEmpty

Checks if the selection is inside an empty code block.

isSelectionAtCodeBlockStart

Checks 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.

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.

insertCodeLine

Inserts a code line starting with the specified indentation depth.

outdentCodeLine

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

toggleCodeBlock

Toggles the code block in the editor.

unwrapCodeBlock

Unwraps the code block in the editor.

useCodeBlockCombobox

useCodeBlockElementState

useCodeSyntaxLeaf