By way of recommendation (thanks Brewer), I’ve been messing around
with Slate.js a ton.
Such is life, I did have my fair share of issues, particularly in terms of
getting it to function like a chat message input where hitting Enter will
submit the form and reset it to it’s original state.
The issue that nearly had me walk away from Slate.js is the dreaded Cannot error that would crop up when attempting
resolve a DOM point from Slate point
to reset the editor to it’s original state.
Not being too familiar with Slate.js I did hit up their GitHub repo and found
quite a few open issues citing this particular error in a handful of different
contexts.
One such issue had a recent comment, and having figured out what the underly
cause was, I commented on it giving some insight to another wayward hacker…
…only to have the issue closed with a lovely message about how we were
commenting on old issues.
Dear project maintainers, if you don’t want people commenting on “old” issues
(quotes because the issue was opened in late 2019) you probably want to close
the issue out and save the *splaining for another day.
Not bitter, just hate seeing that shit. Open source is a community effort and by
making people feel like they did something wrong by trying to help, you’re
damaging the community IMHO.
Fortunately, bitter software contributers aren’t the topic of this post.
So the underlying issue that causes the aforementioned error is that the new
value being sent to the editor is significantly different, and from what I
observed, probably shorter then the current value.
In my case, I was taking a populated editor with a bunch of text and tried to
reset it back to it’s original state, the whole while, my cursor was at the end
of the text that was inputted.
Once the new value is set, the cursor ends up getting lost, because the point
that it was at no longer exists.
Definitely took me a hot minute to glean what was going on. After some trial and
error with deleting the text by way of Slate’s commands, and manually moving my
cursor to the start of the input, it finally all made sense.
Now fully understanding the issue, I set out to figure out how to move the
cursor to the beginning of the input before setting the new (empty) state.
Of course, not as easy peasy as I was expecting, you can set the selection
right on the instance of your editor as such:
const point = { path [0, 0], offset: 0
editor.selection = { anchor: point, focus: point
Not that pretty, but not much to it either. Once the selection is reset, you
should be able to set your new editor value with ease!
The hooks that I’m rockin’ in my React component look like this:
const onSubmit = async (): Promise<void> {
// do some awaiting stuff back to the server
const point = { path [0, 0], offset: 0
editor.selection = { anchor: point, focus: point
// For good measure, you can reset the history as well
editor.history = { redos: [], undos: []
// Reset things back to their original (empty) state
setEditorValue(initialEditorValue
const onKeyDown = (event: any): void => {
event.preventDefault
event.stopPropagataion
onSubmit
