Backspace does not properly delete complicated emojis

Bug Report: Backspace does not handle complicated emojis

What’s the current behavior?

For an emoji that is represented with multiple characters (example: male zombie 🧟‍♂️), attempting to delete this emoji with the backspace key does not work as expected.

The user must hit the backspace key n times where n is the number of characters in the emoji representation.

What’s the expected behavior?

Pressing backspace once should delete the emoji.

Reproduction

You can reproduce this on the Slate examples page: https://www.slatejs.org/#/plain-text. I am using Chrome on Mac 10.14.2

[adjourn]

Emoji issue seems to be much bigger than that for me (not sure if Linux specific).

@grsmvg Every pasted emoji takes several arrow key presses in Slate to move the selection over “for real”, first press moves caret visually over but when I type a character or press Enter, emoji gets split into two � characters. No such issue in native contenteditable.

• Regular emojis take 2 arrow key presses
• Complex emojis (e.g with skin tone) take 4 arrow key presses

[adjourn]

Your input (and maybe wacky use cases which might break it) is greatly appreciated in #2680 .

CC: @grsmvg @scottluptowski @rikkit