import React , { useState } from 'react' ; import type { Value } from '@react-page/editor' ; import Editor , { createValue } from '@react-page/editor' ; import slate from '@react-page/plugins-slate' ; import PageLayout from '../../components/PageLayout' ; import customContentPlugin from '../../plugins/customContentPlugin' ; const cellPlugins = [ slate ( ) , customContentPlugin ] ; const INITIAL_VALUE = createValue ( { rows : [ [ { plugin : customContentPlugin , } , ] , ] , } , { cellPlugins , lang : 'default' , } ) ; export default function MultiControls ( ) { const [ value , setValue ] = useState < Value > ( INITIAL_VALUE ) ; return ( < PageLayout > < Editor cellPlugins = { cellPlugins } value = { value } onChange = { setValue } / > < /PageLayout>); }