Basic Elements

'use client';

import React from 'react';

import { Plate } from '@udecode/plate/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>
  );
}

Plugins

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

Installation

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

Usage

Basic Setup

import { BasicElementsPlugin, CodeBlockPlugin } from '@udecode/plate-basic-elements/react';
import { all, createLowlight } from 'lowlight';
 
// Create a lowlight instance with all languages
const lowlight = createLowlight(all);
 
const plugins = [
  // ...otherPlugins,
  BasicElementsPlugin.configurePlugin(CodeBlockPlugin, {
    options: {
      lowlight,
    },
  }),
];

Custom Language Setup

For optimized bundle size, you can register only specific languages:

import { createLowlight } from 'lowlight';
import css from 'highlight.js/lib/languages/css';
import js from 'highlight.js/lib/languages/javascript';
import ts from 'highlight.js/lib/languages/typescript';
import html from 'highlight.js/lib/languages/xml';
 
// Create a lowlight instance
const lowlight = createLowlight();
 
// Register only the languages you need
lowlight.register('html', html);
lowlight.register('css', css);
lowlight.register('js', js);
lowlight.register('ts', ts);
 
const plugins = [
  BasicElementsPlugin.configurePlugin(CodeBlockPlugin, {
    options: {
      lowlight,
      // Set default language (optional)
      defaultLanguage: 'js',
    },
  }),
];

Keyboard Shortcuts

Plugins

BasicElementsPlugin

Plugin that includes all basic element plugins.

BlockquotePlugin

Plugin for blockquote elements.

HeadingPlugin

CodeBlockPlugin

API Code Block

isCodeBlockEmpty

isSelectionAtCodeBlockStart

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.