Skip to main content

Basic Elements

Includes the following plugins:

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

Installation#

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

Usage#

import React from 'react';
import {
  createBasicElementsPlugin,
  createExitBreakPlugin,
  createResetNodePlugin,
  createSoftBreakPlugin,
  Plate,
  PlateProvider,
} from '@udecode/plate';
import { basicElementsValue } from './basic-elements/basicElementsValue';
import { BasicElementToolbarButtons } from './basic-elements/BasicElementToolbarButtons';
import { editableProps } from './common/editableProps';
import { plateUI } from './common/plateUI';
import { exitBreakPlugin } from './exit-break/exitBreakPlugin';
import { resetBlockTypePlugin } from './reset-node/resetBlockTypePlugin';
import { softBreakPlugin } from './soft-break/softBreakPlugin';
import { Toolbar } from './toolbar/Toolbar';
import { createMyPlugins, MyValue } from './typescript/plateTypes';

const plugins = createMyPlugins(
  [
    createBasicElementsPlugin(),
    createResetNodePlugin(resetBlockTypePlugin),
    createSoftBreakPlugin(softBreakPlugin),
    createExitBreakPlugin(exitBreakPlugin),
  ],
  {
    components: plateUI,
  }
);

export default () => (
  <PlateProvider<MyValue> initialValue={basicElementsValue} plugins={plugins}>
    <Toolbar>
      <BasicElementToolbarButtons />
    </Toolbar>

    <Plate<MyValue> editableProps={editableProps} />
  </PlateProvider>

Code Block#

The code block component is not included in Plate UI. You can add it using:

[ELEMENT_CODE_BLOCK]: CodeBlockElement

Options#

export type HotkeyPlugin = {
/**
* Hotkeys to listen to trigger a plugin action.
*/
hotkey?: string | string[];
};
export interface CodeBlockPlugin extends HotkeyPlugin {
syntax?: boolean;
syntaxPopularFirst?: boolean;
deserializers?: string[];
}
export interface HeadingPlugin extends HotkeyPlugin {}
export interface HeadingsPlugin {
/**
* Heading levels supported from 1 to `levels`
*/
levels?: number;
}

Source Code#

Edit this page