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,
  createPlateUI,
  createResetNodePlugin,
  createSoftBreakPlugin,
  Plate,
} from '@udecode/plate';
import { basicElementsValue } from './basic-elements/basicElementsValue';
import { BasicElementToolbarButtons } from './basic-elements/BasicElementToolbarButtons';
import { editableProps } from './common/editableProps';
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 } from './typescript/plateTypes';

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

export default () => (
  <>
    <Toolbar>
      <BasicElementToolbarButtons />
    </Toolbar>

    <Plate
      editableProps={editableProps}
      initialValue={basicElementsValue}
      plugins={plugins}
    />
  </>
);

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