From 3ad13d601550341688cc75466a75b616d8232154 Mon Sep 17 00:00:00 2001
From: Joseph Rollins <rollins.joseph+git@gmail.com>
Date: Wed, 31 May 2023 05:13:03 -0700
Subject: [PATCH] Test for WebKit based browsers instead of Safari (#5437)

* Test for WebKit based browsers instead of Safari

* Add changeset
---
 .changeset/six-dryers-raise.md                   |  5 +++++
 packages/slate-react/src/components/editable.tsx | 10 +++++-----
 packages/slate-react/src/components/leaf.tsx     |  4 ++--
 packages/slate-react/src/utils/environment.ts    |  5 ++---
 4 files changed, 14 insertions(+), 10 deletions(-)
 create mode 100644 .changeset/six-dryers-raise.md

diff --git a/.changeset/six-dryers-raise.md b/.changeset/six-dryers-raise.md
new file mode 100644
index 000000000..63e294b37
--- /dev/null
+++ b/.changeset/six-dryers-raise.md
@@ -0,0 +1,5 @@
+---
+'slate-react': minor
+---
+
+Detect all WebKit based browsers for COMPAT behavior
diff --git a/packages/slate-react/src/components/editable.tsx b/packages/slate-react/src/components/editable.tsx
index e0dab86d7..927b74a0e 100644
--- a/packages/slate-react/src/components/editable.tsx
+++ b/packages/slate-react/src/components/editable.tsx
@@ -46,7 +46,7 @@ import {
   IS_FIREFOX,
   IS_FIREFOX_LEGACY,
   IS_IOS,
-  IS_SAFARI,
+  IS_WEBKIT,
   IS_UC_MOBILE,
   IS_WECHATBROWSER,
 } from '../utils/environment'
@@ -1014,7 +1014,7 @@ 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) {
+                if (IS_WEBKIT) {
                   const domSelection = root.getSelection()
                   domSelection?.removeAllRanges()
                 }
@@ -1112,7 +1112,7 @@ export const Editable = (props: EditableProps) => {
                   // type that we need. So instead, insert whenever a composition
                   // ends since it will already have been committed to the DOM.
                   if (
-                    !IS_SAFARI &&
+                    !IS_WEBKIT &&
                     !IS_FIREFOX_LEGACY &&
                     !IS_IOS &&
                     !IS_WECHATBROWSER &&
@@ -1621,7 +1621,7 @@ export const Editable = (props: EditableProps) => {
                       return
                     }
                   } else {
-                    if (IS_CHROME || IS_SAFARI) {
+                    if (IS_CHROME || IS_WEBKIT) {
                       // COMPAT: Chrome and Safari support `beforeinput` event but do not fire
                       // an event when deleting backwards in a selected void inline node
                       if (
@@ -1670,7 +1670,7 @@ export const Editable = (props: EditableProps) => {
                   if (
                     !HAS_BEFORE_INPUT_SUPPORT ||
                     isPlainTextOnlyPaste(event.nativeEvent) ||
-                    IS_SAFARI
+                    IS_WEBKIT
                   ) {
                     event.preventDefault()
                     ReactEditor.insertData(editor, event.clipboardData)
diff --git a/packages/slate-react/src/components/leaf.tsx b/packages/slate-react/src/components/leaf.tsx
index 3ef85ec44..9ac9253d7 100644
--- a/packages/slate-react/src/components/leaf.tsx
+++ b/packages/slate-react/src/components/leaf.tsx
@@ -15,7 +15,7 @@ import {
 } from '../utils/weak-maps'
 import { RenderLeafProps, RenderPlaceholderProps } from './editable'
 import { useSlateStatic } from '../hooks/use-slate-static'
-import { IS_SAFARI } from '../utils/environment'
+import { IS_WEBKIT } from '../utils/environment'
 
 function disconnectPlaceholderResizeObserver(
   placeholderResizeObserver: MutableRefObject<ResizeObserver | null>,
@@ -128,7 +128,7 @@ const Leaf = (props: {
           userSelect: 'none',
           textDecoration: 'none',
           // Fixes https://github.com/udecode/plate/issues/2315
-          WebkitUserModify: IS_SAFARI ? 'inherit' : undefined,
+          WebkitUserModify: IS_WEBKIT ? 'inherit' : undefined,
         },
         contentEditable: false,
         ref: callbackPlaceholderRef,
diff --git a/packages/slate-react/src/utils/environment.ts b/packages/slate-react/src/utils/environment.ts
index d6dbaefa7..33ab93e93 100644
--- a/packages/slate-react/src/utils/environment.ts
+++ b/packages/slate-react/src/utils/environment.ts
@@ -19,9 +19,8 @@ export const IS_FIREFOX =
   typeof navigator !== 'undefined' &&
   /^(?!.*Seamonkey)(?=.*Firefox).*/i.test(navigator.userAgent)
 
-export const IS_SAFARI =
-  typeof navigator !== 'undefined' &&
-  /Version\/[\d\.]+.*Safari/.test(navigator.userAgent)
+export const IS_WEBKIT =
+  typeof navigator !== 'undefined' && /AppleWebKit/.test(navigator.userAgent)
 
 // "modern" Edge was released at 79.x
 export const IS_EDGE_LEGACY =