Fix backward typing bug in Safari by ensuring the selection is remove…

…d on blur (#4324)

Safari doesn't always remove the selection, even if the contenteditable element no longer has focus. In this scenario, we need to forcefully remove the selection on blur https://stackoverflow.com/questions/12353247/force-contenteditable-div-to-stop-accepting-input-after-it-loses-focus-under-web

.changeset/safari-backwards-typing.md

@@ -0,0 +1,8 @@
+---
+'slate-react': patch
+---
+
+Fix backward typing bug in Safari by ensuring the selection is always removed on blur.
+Safari doesn't always remove the selection, even if the contenteditable element no longer has focus.
+In this scenario, we need to forcefully remove the selection on blur.
+Refer to https://stackoverflow.com/questions/12353247/force-contenteditable-div-to-stop-accepting-input-after-it-loses-focus-under-web

packages/slate-react/src/components/editable.tsx

@@ -560,8 +560,6 @@ export const Editable = (props: EditableProps) => {
                 return
               }
 
-              const window = ReactEditor.getWindow(editor)
-
               // COMPAT: If the current `activeElement` is still the previous
               // one, this is due to the window being blurred when the tab
               // itself becomes unfocused, so we want to abort early to allow to
@@ -605,6 +603,14 @@ export const Editable = (props: EditableProps) => {
                 }
               }
 
+              // COMPAT: Safari doesn't always remove the selection even if the content-
+              // editable element no longer has focus. Refer to:
+              // https://stackoverflow.com/questions/12353247/force-contenteditable-div-to-stop-accepting-input-after-it-loses-focus-under-web
+              if (IS_SAFARI) {
+                const domSelection = root.getSelection()
+                domSelection?.removeAllRanges()
+              }
+
               IS_FOCUSED.delete(editor)
             },
             [readOnly, attributes.onBlur]