fix: chromium interrupt ime (#5736)

ianstormtaylor · Oct 8, 2024 · 8c7f7ea · 8c7f7ea
1 parent b1a1021
commit 8c7f7ea
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 24 deletions.
diff --git 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
@@ -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>
   )
 }