From e58788096437c32843f22c714f87f3dfbeef663e Mon Sep 17 00:00:00 2001
From: Anthony Ciccarello <aciccarello@users.noreply.github.com>
Date: Wed, 15 Mar 2023 21:02:40 -0700
Subject: [PATCH] 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 | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/site/examples/mentions.tsx b/site/examples/mentions.tsx
index c95f06c7e..c7e1d1ca8 100644
--- a/site/examples/mentions.tsx
+++ b/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>
   )
 }