slate-react@0.62.0+ regression: broken void selection behavior

Description

slate-react@0.62.0 introduced a regression when clicking into void nodes. This issue is still present in the latest version. The change that introduced the regression is https://github.com/ianstormtaylor/slate/pull/4057 .

When navigating to these void nodes through key presses, insertBreak will be called when the Enter key is pressed. When clicked, insertBreak is not called. In both situations, the editor has the exact same selection value.

The expectation is that all nodes would behave consistently upon being selected.

This functioned in slate-react@0.61.3 but started to appear in slate-react@0.62.0. The version of slate used does not seem to affect the behavior.

Update: A full description of the cause is in this comment below: https://github.com/ianstormtaylor/slate/issues/4301#issuecomment-851008675

Recording

This recording demonstrates the buggy behavior. Note that this video uses this plugin to insert a new node within insertBreak, which makes the bug more visually clear. However, the bug is independent from that plugin, as the CodeSandboxes below demonstrate.

https://user-images.githubusercontent.com/2322305/120079739-55f06a00-c083-11eb-9069-0c50ef06fef6.mov

Sandbox

These two sandboxes are identical other than the slate-react version.

Behaves as expected (0.61.3) Does not behave as expected (0.62.0)

Steps

1. Navigate to the Behaves as expected sandbox
2. Use the arrow keys to navigate to the void
3. Press the Enter key and observe that [editor.insertBreak] is logged to the console, informing you that that method was just called.
4. Now, click into something other than the void, and then click back to the void. Press enter again. Observe that the console log occurs again.
5. Repeat this for the other sandbox, and observe that step 4 does not log to the console.

Expectation

Both versions of this library would behave identically.

Environment

• Slate Version:

  • slate - 0.63.0
  • slate-history - 0.62.0
  • slate-react - 0.62.0+

• Operating System: macOS

• Browser: Chrome 91.0.4472.77, Safari 14.1.1

• TypeScript Version: N/A

---

One line of investigation suggests it could be related to https://github.com/ianstormtaylor/slate/pull/4048 , but I’m still investigating. The actual source of this change of behavior is https://github.com/ianstormtaylor/slate/pull/4057

[jamesplease]

Hmmm, that wouldn’t give me the behavior that I’m expecting. I’m not trying to prevent the div from being selected.

The desired behavior (demonstrated in the 0.61.3) is that clicking the div will set the document selection on the default empty text child, matching the behavior of using arrow keys. In 0.62.0, clicking the div will set the document selection on the div, rather than the empty text child.

For my specific use case, I have a workaround: I manually move the selection to the default empty text child when you click the div.

This issue is more about if this inconsistency between clicking a void and arrowing into a void is the intended behavior of the lib.

[jamesplease]

No idea tbqh, I paused work on that project. That’s just the last note I left myself