Build a basic text editor with Slate and React

Instructor: [0:00] First of all, let's install Slate, slate-react, slate-plain-serializer, and the mutable npm package.

[0:10] Next, import the editor component from slate-react and render it in your app. Let's see what happens. We get an error because the value prop of the editor component is undefined.

[0:31] First, we'll import the default object from slate-plain-serializer as plain. We'll create an initial value with the deserialize method. We pass the value variable as a prop to the editor component. Now, our editor component can render without throwing an exception.

[1:02] Import the useState hook. Rename value to initialValue because we'll use it with the useState hook to initialize our state. useState gives us back value, which is our state, and set value, which we use to update the state.

[1:21] Add the onChange editor prop and pass it a callback function to update the value with the setValue method. Now, if you click on the text and edit, it will work as expected.

[1:41] The onChange prop will be called whenever the value of the editor changes, which in turn calls the setValue method to update the component state. The component state gets passed onto the value prop of the editor.