From f96b659755673375ef1b6a1cc925c73ce4934a03 Mon Sep 17 00:00:00 2001
From: Eric Meier <ericmeier@protonmail.com>
Date: Fri, 15 Jul 2022 15:12:48 +0200
Subject: [PATCH] fix macos accent menu when using arrow keys (#5046)

---
 .changeset/ten-chefs-cheat.md                 |  5 +++++
 .../slate-react/src/components/editable.tsx   | 22 +++++++++++++------
 2 files changed, 20 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/ten-chefs-cheat.md

diff --git a/.changeset/ten-chefs-cheat.md b/.changeset/ten-chefs-cheat.md
new file mode 100644
index 000000000..b861babd0
--- /dev/null
+++ b/.changeset/ten-chefs-cheat.md
@@ -0,0 +1,5 @@
+---
+'slate-react': patch
+---
+
+fix macos accent menu when using arrow keys
diff --git a/packages/slate-react/src/components/editable.tsx b/packages/slate-react/src/components/editable.tsx
index 3adfc44fb..0c428486e 100644
--- a/packages/slate-react/src/components/editable.tsx
+++ b/packages/slate-react/src/components/editable.tsx
@@ -340,12 +340,12 @@ export const Editable = (props: EditableProps) => {
         const { inputType: type } = event
         const data = (event as any).dataTransfer || event.data || undefined
 
-        // These two types occur while a user is composing text and can't be
-        // cancelled. Let them through and wait for the composition to end.
-        if (
-          type === 'insertCompositionText' ||
-          type === 'deleteCompositionText'
-        ) {
+        const isCompositionChange =
+          type === 'insertCompositionText' || type === 'deleteCompositionText'
+
+        // COMPAT: use composition change events as a hint to where we should insert
+        // composition text if we aren't composing to work around https://github.com/ianstormtaylor/slate/issues/5038
+        if (isCompositionChange && ReactEditor.isComposing(editor)) {
           return
         }
 
@@ -431,7 +431,9 @@ export const Editable = (props: EditableProps) => {
               native = false
 
               const selectionRef =
-                editor.selection && Editor.rangeRef(editor, editor.selection)
+                !isCompositionChange &&
+                editor.selection &&
+                Editor.rangeRef(editor, editor.selection)
 
               Transforms.select(editor, range)
 
@@ -442,6 +444,12 @@ export const Editable = (props: EditableProps) => {
           }
         }
 
+        // Composition change types occur while a user is composing text and can't be
+        // cancelled. Let them through and wait for the composition to end.
+        if (isCompositionChange) {
+          return
+        }
+
         if (!native) {
           event.preventDefault()
         }