fix: [AndroidEditor] Solve input association problems and add click events.

[YasinChan]

Description
I asked some questions about Android devices earlier in #4705 . I tried to switch to DefaultEditable but that didn't resolve my questions. After i read source code about AndroidEditable. I may sum up a few questions and try to resolve them.

Q:

1. As we can see in these issues Quick typing on android #4715 Long press backspace #4714 or the first video, using the typing with association function will trigger an unexpected insertText operation .
2. We can't click block element on Android which also mentioned in Can't select images by clicking on them on Android #4719 .

A:

1. MutationObserver is used in AndroidEditable to monitor DOM changes. Whenever we input a character, MutationObserver will be triggered and insertText into the editor. However, in the keyboard association state, performing a delete operation or inputting characters may trigger character association, and then unexpected characters are added between triggering the onDOMBeforeInput event and triggering the MutationObserver event. I haven't figured out the reason yet, but I try to solve it in another way. The association function will trigger the composition event, so I attempt to record the characters that originally wanted to insertText in the MutationObserver event in the isComposing , and then insertText in the onCompositionend event.
2. Synchronize the click event from Editable. By the way, i also synchronize some other code from Editable like fix: flush selection change on before input #4669 .

Example
before

Record_2021-12-15-23-11-37_40deb401b9ffe8e1df2f1c.mp4

after

Record_2021-12-15-23-12-28_40deb401b9ffe8e1df2f1c.mp4

Image can be clicked.

Record_2021-12-16-01-44-28_40deb401b9ffe8e1df2f1c.mp4

Context
There are still some minor problems. When the above method is triggered, the mark setting cannot take effect immediately, but it takes effect after onCompositionend.

Record_2021-12-16-01-04-40_40deb401b9ffe8e1df2f1c.mp4

Checks

• The new code matches the existing patterns and styles.
• The tests pass with yarn test.
• The linter passes with yarn lint. (Fix errors with yarn fix.)
• The relevant examples still work. (Run examples with yarn start.)
• You've added a changeset if changing functionality. (Add one with yarn changeset add.)

[changeset-bot]

🦋 Changeset detected

Latest commit: b1e362b

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
slate-react	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[dylans]

Amazing, thanks for tackling this @YasinChan !