Basic Elements

'use client';

import React from 'react';

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

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