Basic Editor
note
Each example is using Sandpack, a live-running coding environment leveraging CodeSandbox.
#
Default EditorLet's start with a minimal editor using Plate and editableProps.
#
ValueLet's set the initial value of the editor: one paragraph.
import React from 'react'; import { Plate } from '@udecode/plate'; import { editableProps } from './common/editableProps'; import { MyParagraphElement, MyValue } from './typescript/plateTypes'; const initialValue = [ { type: 'p', children: [ { text: 'This is editable plain text with react and history plugins, just like a <textarea>!', }, ], } as MyParagraphElement, ]; export default () => ( <Plate<MyValue> editableProps={editableProps} initialValue={initialValue}
#
Change HandlerNow we would like to listen to editor changes so we can save the value somewhere.
Let's use onChange
prop.
import React, { useState } from 'react'; import { Plate } from '@udecode/plate'; import { plainTextValue } from './basic-editor/plainTextValue'; import { editableProps } from './common/editableProps'; import { MyValue } from './typescript/plateTypes'; export default () => { const [debugValue, setDebugValue] = useState<MyValue | null>(null); return ( <Plate<MyValue> editableProps={editableProps} initialValue={plainTextValue} onChange={(newValue) => { setDebugValue(newValue); // save newValue... }} > value: {JSON.stringify(debugValue)} <
note
Plate
children are rendered after the editable component. Use firstChildren
prop to render something before the editable component.
Now we're ready to use plugins!