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:

Josh Sherman - The Man, The Myth, The Avatar

About Josh

Husband. Father. Pug dad. Musician. Founder of Holiday API, Head of Engineering and Emoji Specialist at Mailshake, and author of the best damn Lorem Ipsum Library for PHP.

If you found this article helpful, please consider buying me a coffee.