From 8c7f7ea6ac491d6e1325810ef11fc2b3455b1304 Mon Sep 17 00:00:00 2001
From: Czy <touchczy@outlook.com>
Date: Tue, 8 Oct 2024 21:55:45 +0800
Subject: [PATCH] fix: chromium interrupt ime (#5736)

---
 site/examples/js/mentions.jsx | 28 ++++++++++++++++------------
 site/examples/ts/mentions.tsx | 28 ++++++++++++++++------------
 2 files changed, 32 insertions(+), 24 deletions(-)

diff --git a/site/examples/js/mentions.jsx b/site/examples/js/mentions.jsx
index 41c92654e..080a1839d 100644
--- a/site/examples/js/mentions.jsx
+++ b/site/examples/js/mentions.jsx
@@ -220,18 +220,22 @@ const Mention = ({ attributes, children, element }) => {
       data-cy={`mention-${element.character.replace(' ', '-')}`}
       style={style}
     >
-      {IS_MAC ? (
-        // Mac OS IME https://github.com/ianstormtaylor/slate/issues/3490
-        <Fragment>
-          {children}@{element.character}
-        </Fragment>
-      ) : (
-        // Others like Android https://github.com/ianstormtaylor/slate/pull/5360
-        <Fragment>
-          @{element.character}
-          {children}
-        </Fragment>
-      )}
+      {/* Prevent Chromium from interrupting IME when moving the cursor */}
+      {/* 1. span + inline-block 2. div + contenteditable=false */}
+      <div contentEditable={false}>
+        {IS_MAC ? (
+          // Mac OS IME https://github.com/ianstormtaylor/slate/issues/3490
+          <Fragment>
+            {children}@{element.character}
+          </Fragment>
+        ) : (
+          // Others like Android https://github.com/ianstormtaylor/slate/pull/5360
+          <Fragment>
+            @{element.character}
+            {children}
+          </Fragment>
+        )}
+      </div>
     </span>
   )
 }
diff --git a/site/examples/ts/mentions.tsx b/site/examples/ts/mentions.tsx
index b990c55de..74d81f4a6 100644
--- a/site/examples/ts/mentions.tsx
+++ b/site/examples/ts/mentions.tsx
@@ -242,18 +242,22 @@ const Mention = ({ attributes, children, element }) => {
       data-cy={`mention-${element.character.replace(' ', '-')}`}
       style={style}
     >
-      {IS_MAC ? (
-        // Mac OS IME https://github.com/ianstormtaylor/slate/issues/3490
-        <Fragment>
-          {children}@{element.character}
-        </Fragment>
-      ) : (
-        // Others like Android https://github.com/ianstormtaylor/slate/pull/5360
-        <Fragment>
-          @{element.character}
-          {children}
-        </Fragment>
-      )}
+      {/* Prevent Chromium from interrupting IME when moving the cursor */}
+      {/* 1. span + inline-block 2. div + contenteditable=false */}
+      <div contentEditable={false}>
+        {IS_MAC ? (
+          // Mac OS IME https://github.com/ianstormtaylor/slate/issues/3490
+          <Fragment>
+            {children}@{element.character}
+          </Fragment>
+        ) : (
+          // Others like Android https://github.com/ianstormtaylor/slate/pull/5360
+          <Fragment>
+            @{element.character}
+            {children}
+          </Fragment>
+        )}
+      </div>
     </span>
   )
 }