[WIP] Add onMouseMove method; Fix incorrect selection when click and drag move

[zhujinxuan]

Is this adding or improving a feature or fixing a bug?

bug

What's the new behavior?

If user click and drag, and an selection event is fired during dragging. Then we shall expect an extended range instead of an collapsed range. When the browser accidentally causes an collapsed range, then we shall extend it to the new selection instead of select.

Have you checked that...?

• The new code matches the existing patterns and styles.
• The tests pass with yarn test.
• The linter passes with yarn lint. (Fix errors with yarn prettier.)
• The relevant examples still work. (Run examples with yarn watch.)

Does this fix any issues or need any specific reviewers?

Fixes: #1969
Reviewers: @

[codecov]

Codecov Report

Merging #2104 into master will decrease coverage by 0.11%.
The diff coverage is 0%.

@@            Coverage Diff             @@
##           master    #2104      +/-   ##
==========================================
- Coverage   69.54%   69.42%   -0.12%     
==========================================
  Files          73       73              
  Lines        5437     5446       +9     
==========================================
  Hits         3781     3781              
- Misses       1656     1665       +9

Impacted Files	Coverage Δ
...ckages/slate-react/src/constants/event-handlers.js	100% <ø> (ø)	⬆️
packages/slate-react/src/plugins/after.js	4.42% <0%> (-0.14%)	⬇️
packages/slate-react/src/components/content.js	23.76% <0%> (-0.24%)	⬇️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update ba9b791...27f0084. Read the comment docs.

[ianstormtaylor]

Hey @zhujinxuan, this sounds like a good call. Can you explain exactly what's going on here in terms of the events that are firing in the browser? I'm not sure I understand.

[zhujinxuan]

@ianstormtaylor Sometimes, when you press and drag from a empty block start. The browser will fire onSelection events with collapsed selection, rather than selection extended from the mouse down selection. (#1969)

This PR tries to fix the problem that, for any onSelection event during onMouseMove, if the left key is pressed when mouse moves (click and drag) and if the previous selection and current selection is both collapsed, we identify that the bug occurs. Then we fix the selection with extending between previous and current selection.

[ianstormtaylor]

@zhujinxuan is this something that other editors experience? I remember someone mentioning that the reason this happens might be due to the zero-width spaces. But in #1969 it sounds like there might even be cases where this happens without the zero-width spaces?

I'd like to have more research before we merge this, because having a constant timeout timer for any mouse movements (with a magic 24ms delay) seems like something that should be a last resort for us.

[zhujinxuan]

@ianstormtaylor I can only reproduce it in the slate. I can only reproduce #1969 (comment) but unable to reproduce #1969 (comment). (only able to reproduce the zero-width condition but not the second one).

Can we just change this PR to add onMouseMove handlers (without adding the timer to the core)?
Then a temporary solution can be provided as a plugin.

[zhujinxuan]

@ianstormtaylor BTW, the timer is initialized only on (pressed & mouse move). Because the setTimeout is called only when (event.buttons % 2 == 1) (which means left mouse button is pressed)

But I agree that the timer solution is an ugly solution.

[zhujinxuan]

Will use another PR to fix the problem