Error: Cannot resolve a DOM point from Slate point

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 resolve a DOM point from Slate point error that would crop up when attempting 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();
};