Instructor: We start by importing the editor component from Slate React here, initializing the value here, passing that through use state hook to manage state, and rendering the Slate editor component here.
The editor component has many event handler props. We will use the onKeyDown prop, which is called every time the user presses a key. The onKeyDown prop is called with three arguments -- event, editor, and next.
Always return next in your onKeyDown handler. This ensures that Slate works as expected. If event.key = C and event.metaKey is true, we know that the user has pressed the hot key for copying.
We'll use the alert method to display a message in the browser. Pressing Command-C will display an alert. Change the single quotes of the string to backticks so we can insert a variable.
Insert the variable editor.value.fragments.text. This will give you the currently selected text. Now, you will see the selected text in your alert.
To summarize, all event handlers have three arguments -- event, editor, and next. Don't forget Slate expects you to return next.