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.
#
PluginsLet'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} /> );
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).
#
ComponentsTo 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 usecreatePlateUI()
, 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} /> );
Voilà !
Plate
enforces decoupled structures, you can read the next sections to learn more about the API.