From 8db3251e6e219896f6cc8d34bfdd3875364324e9 Mon Sep 17 00:00:00 2001
From: BitPhinix <ericmeier@protonmail.com>
Date: Fri, 29 Apr 2022 15:08:48 -0400
Subject: [PATCH] Unset isComposing on keydown with isCompsing false

---
 .changeset/breezy-lizards-impress.md          |  5 ++++
 .../slate-react/src/components/editable.tsx   | 24 +++++++++++++------
 2 files changed, 22 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/breezy-lizards-impress.md

diff --git a/.changeset/breezy-lizards-impress.md b/.changeset/breezy-lizards-impress.md
new file mode 100644
index 0000000000..ab587fe8c5
--- /dev/null
+++ b/.changeset/breezy-lizards-impress.md
@@ -0,0 +1,5 @@
+---
+'slate-react': patch
+---
+
+Unset isComposing on keydown with isCompsing false
diff --git a/packages/slate-react/src/components/editable.tsx b/packages/slate-react/src/components/editable.tsx
index c0c8376c79..e015cd4779 100644
--- a/packages/slate-react/src/components/editable.tsx
+++ b/packages/slate-react/src/components/editable.tsx
@@ -1090,15 +1090,25 @@ export const Editable = (props: EditableProps) => {
           )}
           onKeyDown={useCallback(
             (event: React.KeyboardEvent<HTMLDivElement>) => {
-              if (
-                !readOnly &&
-                hasEditableTarget(editor, event.target) &&
-                !isEventHandled(event, attributes.onKeyDown) &&
-                !state.isComposing
-              ) {
+              if (!readOnly && hasEditableTarget(editor, event.target)) {
                 const { nativeEvent } = event
-                const { selection } = editor
 
+                // COMPAT: The composition end event isn't fired reliably in all browsers,
+                // so we sometimes might end up stuck in a composition state even though we
+                // aren't composing any more.
+                if (state.isComposing && nativeEvent.isComposing === false) {
+                  state.isComposing = false
+                  setIsComposing(false)
+                }
+
+                if (
+                  isEventHandled(event, attributes.onKeyDown) ||
+                  state.isComposing
+                ) {
+                  return
+                }
+
+                const { selection } = editor
                 const element =
                   editor.children[
                     selection !== null ? selection.focus.path[0] : 0