Android mentions fixes (#5360)

* fixes android input events in mention example

Android keyboards use a composition text approach for autocomplete purposes.
Chrome sees the mention text and thinks it is part of the word to complete.
The simplest solution is to add zero width whitespace.

This also adds a click handler on the mention example to help
with the mobile (and desktop) testing experience.

* move mention spacer

site/examples/mentions.tsx

@@ -125,6 +125,11 @@ const MentionExample = () => {
             {chars.map((char, i) => (
               <div
                 key={char}
+                onClick={() => {
+                  Transforms.select(editor, target)
+                  insertMention(editor, char)
+                  setTarget(null)
+                }}
                 style={{
                   padding: '1px 3px',
                   borderRadius: '3px',
@@ -228,7 +233,8 @@ const Mention = ({ attributes, children, element }) => {
       data-cy={`mention-${element.character.replace(' ', '-')}`}
       style={style}
     >
-      {children}@{element.character}
+      @{element.character}
+      {children}
     </span>
   )
 }