Basic Plugins

note

Even when not providing any plugins to Plate, core plugins like react, history are loaded by default. To disable these, use disableCorePlugins prop.

This guide will show you how to use the existing Plate plugins.

Plugins

Let's use the basic element and basic mark plugins.

note

Plate is using the type property so a plugin can render a node by type.

import React from 'react';
import {
  createBlockquotePlugin,
  createBoldPlugin,
  createCodeBlockPlugin,
  createCodePlugin,
  createHeadingPlugin,
  createItalicPlugin,
  createParagraphPlugin,
  createStrikethroughPlugin,
  createUnderlinePlugin,
  Plate,
} from '@udecode/plate';
import { basicElementsValue } from './basic-elements/basicElementsValue';
import { basicMarksValue } from './basic-marks/basicMarksValue';
import { editableProps } from './common/editableProps';
import { MyPlatePlugin, MyValue } from './typescript/plateTypes';

const plugins: MyPlatePlugin[] = [
  createParagraphPlugin(),
  createBlockquotePlugin(),
  createCodeBlockPlugin(),
  createHeadingPlugin(),

  createBoldPlugin(),
  createItalicPlugin(),
  createUnderlinePlugin(),
  createStrikethroughPlugin(),
  createCodePlugin(),
];

export default () => (
  <Plate<MyValue>
    editableProps={editableProps}
    initialValue={[...basicElementsValue, ...basicMarksValue]}
    plugins={plugins}
  />
);

To enter the code editing mode, press Enter. To exit the edit mode, press Escape

You are editing the code. To exit the edit mode, press Escape

Everything actually works by looking at the debug value. However, we didn't provide any components to render, so it's using the default (unstyled) ones. The default element component is a div and the default leaf component is a span.

info

Plate plugins are bundled without any default component, meaning that you're in full control over markup and styling so you can plug-in your own design system or Plate UI (see next section).

Components

To plug all the components at once, you can use createPlugins:

• use the first parameter for the plugins
• use the second parameter for the components. In the following example we'll use createPlateUI(), which returns all Plate components by plugin key.

import React from 'react';
import {
  createBlockquotePlugin,
  createBoldPlugin,
  createCodePlugin,
  createHeadingPlugin,
  createItalicPlugin,
  createParagraphPlugin,
  createPlugins,
  createStrikethroughPlugin,
  createUnderlinePlugin,
  Plate,
} from '@udecode/plate';
import { basicElementsValue } from './basic-elements/basicElementsValue';
import { basicMarksValue } from './basic-marks/basicMarksValue';
import { editableProps } from './common/editableProps';
import { plateUI } from './common/plateUI';
import { MyValue } from './typescript/plateTypes';

// try to remove a few plugins!
const plugins = createPlugins<MyValue>(
  [
    createParagraphPlugin(),
    createBlockquotePlugin(),
    // createCodeBlockPlugin({
    //   // You can either pass a component per plugin
    //   component: CodeBlockElement,
    // }),
    createHeadingPlugin(),

    createBoldPlugin(),
    createItalicPlugin(),
    createUnderlinePlugin(),
    createStrikethroughPlugin(),
    createCodePlugin(),
  ],
  {
    // Or pass all components at once
    components: plateUI,
  }
);

export default () => (
  <Plate<MyValue>
    editableProps={editableProps}
    initialValue={[...basicElementsValue, ...basicMarksValue]}
    plugins={plugins}
  />
);

To enter the code editing mode, press Enter. To exit the edit mode, press Escape

You are editing the code. To exit the edit mode, press Escape

Voilà!

Plate enforces decoupled structures, you can read the next sections to learn more about the API.