Valid slate state errors on mobile/android

[TrySpace]

Description
The issue is being unable to edit some elements on mobile, in this example it's mainly header elements, but I think the real issue is some different in the slate object, I can't figure out what that difference is...

So for some strange reason, in some cases, the Blocks: h1, h2 etc... are not editable on mobile, while they are editable on desktop.

So what happens is when I focus the header, and start typing, the cursor will jump to the start of the word, so in a multi-word Header, it wil jump to the start of a word to the left on each keystroke... and when pressing Enter at the end of the header does nothing:

But when I edit another, non-header element first, that will work, but as soon as I try to change the header, the rest also breaks:

Original thread: #1210

A valid slate state that gives the problem on mobile:

[
  { "children": [{ "text": "Text ", "bold": true }, { "text": "test" }] },
  { "children": [{ "text": "Text " }], "type": "h2" }
]

This state as well:

[{"type":"p","children":[{"text":"test"}]}]

The error stack on mobile, when trying to type:

at Object.toDOMNode (react-editor.ts:278:1)
  at isLineBreak (mutation-detection.ts:86:1)
  at AndroidInputManager.reconcileMutations (android-input-manager.ts:90:1)
  at AndroidInputManager.flush (android-input-manager.ts:68:1)
  at MutationObserver.<anonymous> (use-android-input-manager.ts:36:1)
console.<computed> @ index.js:1
AndroidInputManager.flush @ android-input-manager.ts:71
(anonymous) @ use-android-input-manager.ts:36

Alos, when I press Enter in the middle of the Header, it will error, again only on mobile/android:
Failed to execute 'removeChild' on 'Node' (../hooks/use-content-key.ts:19)

Sandbox
In creating a sandbox, I found another, probably related, but differently behaving bug, which also acts up on desktop:
https://codesandbox.io/s/plate-playground-forked-21mrr?file=/index.tsx
With the same Slate state as before, editing either of the first 2 lines, will make the first line an h2, (while it's the 2nd line that has h2 styling) But this is a different issue, but they might be related.
But apparently I can't reproduce it via the playground...

Sandbox issue:

Expectation
For consistant editor behaviour regardless of platform.

I suspect this is an issue with the shape of the slate state (even though desktop is mostly fine, except the sandbox example), but when using the examples from the docs, the Typescript is all over the place and does not match, so I have to ignore some typescript rules. Or I'm missing something, but out of the box the examples have typescript inconsistencies. Like the state type doesn't match the value that Plate accepts, and is of a totally different family of types...

Environment

• "slate": "^0.72.3",
• "slate-react": "^0.72.4",
• Mobile browser: Chrome Version 97.0.4692.87
• Desktop browser: Chrome Version 97.0.4692.71 (Official Build) (64-bit)

[dylans]

slate-react 0.72.4 did attempt to fix some of this, but based on your description, it sounds like this may be in part because slate-react has a separate Android editor for some of its functionality, and perhaps Plate is only assuming the non-Android code?

[TrySpace]

It seems that Android is a nightmare for these rich-text editors. Check these issues with slate, which is also coping with similar input bugs on android:

ianstormtaylor/slate#1720
ianstormtaylor/slate#725