Cursor navigation issue

[timagixe]

Description
There's a problem with how the cursor moves in Slate when you use Option + ArrowRight and Option + ArrowLeft (or Ctrl on Windows). It doesn't work the same way as it does in HTML Input element or programs like MS Office, Google Docs, or Notepad. When you try to move through text that has punctuation marks like dots, commas, or brackets, the cursor jumps to the wrong spots. It doesn't go where you expect it to, like between the words and the punctuation marks. This makes editing text harder.

Recording
Behaviour in HTML Input element:

input.mov

Behaviour in Slate:

slate-latest.mov

Behaviour in Google Docs:

google-docs.mov

Sandbox
Input: https://stackblitz.com/edit/stackblitz-starters-cre2sd?file=index.html
Slate: Open https://www.slatejs.org/examples/plaintext and paste text Test1. test2, [...] test3 (US) and Test4

Steps
To reproduce the behavior:

1. Go to https://www.slatejs.org/examples/plaintext
2. Paste into editor this text: Test1. test2, [...] test3 (US) and Test4
3. Focus cursor on the very beginning
4. Iterate over text with Option + ArrowRight (or Ctrl + ArrowRight for Windows)
5. It takes 6 iterations to rich the end of the text in Slate, while in HTML Input element it takes 11 iterations (the same for Google Docs - 11 iterations, etc)

Expectation
The number of Option + Arrow Right / Arrow Left navigations is the same as for the input component - 11 iterations is expected.

Environment

• Slate Version: 0.102
• Operating System: MacOS
• Browser: Chrome
• TypeScript Version: latest

Context
Probably the way we calculate the distances within getWordDistance util should be fixed.

https://github.com/timagixe/slate/blob/c4c14882edf13828f6583a88e50754ce63583bd7/packages/slate/src/utils/string.ts#L86-L107