Basic Elements
Includes the following plugins:
createBlockquotePlugin()
for theblockquote
elementcreateCodeBlockPlugin()
for thecode_block
elementcreateHeadingPlugin()
for theh1
,h2
,... elementscreateParagraphPlugin()
for thep
element
#
Installation- npm
- Yarn
#
Usageimport 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 BlockThe code block component is not included in Plate UI. You can add it using: