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:

https://github.com/ianstormtaylor/slate/assets/60817786/eb6092b6-05ce-4d45-8ec5-693f296ed10e

Behaviour in Slate:

https://github.com/ianstormtaylor/slate/assets/60817786/8165e125-9d2f-451d-8b91-92dff7d0c609

Behaviour in Google Docs:

https://github.com/ianstormtaylor/slate/assets/60817786/32ee93b3-a114-4ad1-be42-f08889ef2289

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