yarn add slate
and retrieve the bundled dist/slate.js
file! Check out the Using the Bundled Source guide for more information.<App>
component:Editor
object. We want the editor to be stable across renders, so we use the useState
hook without a setter:If you are using TypeScript, you will also need to extend theEditor
withReactEditor
and add annotations as per the documentation on TypeScript. The example below also includes the custom types required for the rest of this example.
<Slate>
context provider.<Editable>
components. But it can also provide the editor state to other components like toolbars, menus, etc. using the useSlate
hook.<Slate>
component as providing a context to every component underneath it.Slate Provider's "value" prop is 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.
<input>
or <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 itself:<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!