insertNodes with select:true puts the cursor *before* the new node

Description A call to Slate.Transforms.insertNodes(..., { select: true }) should always put the cursor inside the new node. But under some conditions (minimal sandbox reproduction below), the cursor is placed BEFORE the new node. Reverting https://github.com/ianstormtaylor/slate/pull/4304 fixes this bug.

Recording

https://user-images.githubusercontent.com/166966/138719381-5fbf12d1-76a3-4109-816d-969ff8806c78.mp4

Sandbox https://codepen.io/jameshfisher/pen/gOxmWoJ

Steps To reproduce the behavior:

1. Go to https://codepen.io/jameshfisher/pen/gOxmWoJ
2. Put your cursor in the pink box.
3. Hit return. This removes the pink box, inserts a new one in its place, and selects the new one. But from slate-react@0.66.4, the cursor is put BEFORE the new box.

Expectation A call to Slate.Transforms.insertNodes(..., { select: true }) should put the cursor inside the new node.

But with slate-react@0.66.4 and above, the cursor is placed BEFORE the new node.

Environment

• Slate Version: 0.66.4 and above (i.e. any version with https://github.com/ianstormtaylor/slate/pull/4304; reverting this one line fixes the bug)
• Operating System: macOS
• Browser: Chrome, Firefox, Safari

Context

The feature I’m implementing is a Notion-style “commander”, where you type something like “/math”, hit return, and it executes some command, like inserting an inline math element.

This is probably related to https://github.com/ianstormtaylor/slate/issues/4601, another bug caused by https://github.com/ianstormtaylor/slate/pull/4304

[jameshfisher]

@dylans would you also accept a PR that adds a rudimentary official example of implementing “slash commands”? I was again in the situation where I couldn’t demo this bug using official examples, and I suspect this “slash commands” feature is an increasingly common one …

[dylans]

I’m guessing this is also the source of #4611.