Editorobject. We want the editor to be stable across renders, so we use the
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 "controlled" context to every component underneath it.
<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!