Multiple Editors
Plate support multiple editor instances by using the id prop.
#
ExampleLet's render 3 editors with common heading and balloon toolbars.
import React from 'react'; import { Plate, PlateProps } from '@udecode/plate'; import { MarkBalloonToolbar } from './balloon-toolbar/MarkBalloonToolbar'; import { basicElementsValue } from './basic-elements/basicElementsValue'; import { BasicElementToolbarButtons } from './basic-elements/BasicElementToolbarButtons'; import { basicMarksValue } from './basic-marks/basicMarksValue'; import { BasicMarkToolbarButtons } from './basic-marks/BasicMarkToolbarButtons'; import { basicNodesPlugins } from './basic-nodes/basicNodesPlugins'; import { imagePlugins } from './image/imagePlugins'; import { imageValue } from './image/imageValue'; import { Toolbar } from './toolbar/Toolbar'; import { MyValue } from './typescript/plateTypes'; const styles = { wrapper: { display: 'flex', }, }; const Editor = (props: PlateProps<MyValue>) => ( <Plate {...props}> <MarkBalloonToolbar /> </Plate> ); export default () => ( <> <Toolbar> <BasicElementToolbarButtons /> <BasicMarkToolbarButtons /> </Toolbar> <div style={styles.wrapper}> <Editor id="basic" plugins={basicNodesPlugins} initialValue={basicElementsValue} /> <Editor id="marks" plugins={basicNodesPlugins} initialValue={basicMarksValue} /> <Editor id="image" plugins={imagePlugins} initialValue={imageValue} /> </div> </> );