Resetting a Slate.js editor to an empty state
I've been messing with Slate.js and happen to be using it in the context of having a persistent editor on the page that can be used post from. It's sort of like a chat's message input, it's always there, and when you submit it, it resets back to it's original state.
When your destroying a component after submit, this isn't a problem, but in my particular use case it was, so I needed to figure out how the heck to clear out the editor and reset it back to it's original glory.
Unfortunately, Slate.js doesn't have a command to just reset the editor back to birth, and setting the value to just an empty string or null doesn't fit into the types for what a proper editor value looks like.
After poking around a bit to see what the editor value looks like when it's initially created, I grabbed said array and dictionary and simply used it as my "initial value" that I used to both initialize the state, as well as reset it.
Said initial value looks like this:
const initialEditorValue: Node[] = [{
type: 'paragraph',
children: [{ text: '' }],
}];To use it to initialize your state (via hooks):
const [editorValue, setEditorValue] = useState(initialEditorValue);And to reset it (usually done after you're done submitting the editor's value:
setEditorValue(initialEditorValue);