If you are using TypeScript, you will also need to extend the
ReactEditorand add annotations as per the documentation on TypeScript. The example below also includes the custom types required for the rest of this example.
<Editable>components. But it can also provide the editor state to other components like toolbars, menus, etc. using the
<Slate>component as providing a context to every component underneath it.
As of v0.67 the Slate Provider's "value" prop is now only used as initial state for editor.children. If your code relies on replacing editor.children you should do so by replacing it directly instead of relying on the "value" prop to do this for you. See Slate PR 4540 for a more in-depth discussion.
<textarea>, because richtext documents are more complex. You'll often want to include toolbars, or live previews, or other complex components next to your editable content.
<Editable>component acts like
contenteditable. Anywhere you render it will render an editable richtext document for the nearest editor context.
array as the initial value of the editor, so it has no content. Let's fix that by defining an initial value.
A line of text in a paragraph.And when you type, you should see the text change!