Pressing keys around hashtag (#) makes cursor jump more than one character

Description From slate 0.70.0, pressing keys around hashtag (#) makes cursor jump more than one character.

Recording

Sandbox https://codesandbox.io/s/slate-0-5x-forked-xdp6z

Steps To reproduce the behavior:

1. Go to Sandbox from the link above
2. Type # # foobar
3. Press arrow key around #
4. The cursor moves more than one character

Expectation Cursor moves only one character around #

Environment

• Slate Version: 0.70.0
• Operating System: CodeSandbox and Ubuntu 20.04
• Browser: Chrome 95

Context Having tested locally I found that I can observe this behavior from https://github.com/ianstormtaylor/slate/commit/5818aca5038f38465a5769fe944f184be0255341. #4565 Taking look at the code and running additional unit tests (packages/slate/test/utils/string.ts) locally I found that getCharacterDistance handles KeyCap improperly. Below are the test cases I found failing.

const codepoints = [
  ...
  [' #', 1],
  ['# ', 1],
  ...
]

I am not familiar with code point so I might be misunderstanding stuff. Thanks in advance.

[hitochan777]

@unageek I see! Anyways thank you for your great work 💯

[unageek]

@hitochan777 Thank you for your suggestion! I’ve just opened PR #4671 and added the additional tests.