import React , { useState } from 'react' ; import type { CellPlugin , Value } from '@react-page/editor' ; import Editor from '@react-page/editor' ; import slate from '@react-page/plugins-slate' ; import image from '@react-page/plugins-image' ; import PageLayout from '../../components/PageLayout' ; const aPlugin = { id : 'some-plugin' , title : 'Some plugin with child constraints' , Renderer : ( props ) => ( < div style = { { border : '5px solid black' } } > { props . children } < /div>), childConstraints : { maxChildren : 1 , } , version : 1 , cellStyle : { padding : 0 , } , } ; const cellPlugins = [ slate ( ) , image , aPlugin ] ; export default function SimpleExample ( ) { const [ value , setValue ] = useState < Value > ( null ) ; return ( < PageLayout > < Editor cellPlugins = { cellPlugins } value = { value } onChange = { setValue } childConstraints = { { maxChildren : 1 } } /> < /PageLayout>); }