Test for WebKit based browsers instead of Safari (#5437)

* Test for WebKit based browsers instead of Safari

* Add changeset

.changeset/six-dryers-raise.md

@@ -0,0 +1,5 @@
+---
+'slate-react': minor
+---
+
+Detect all WebKit based browsers for COMPAT behavior

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)

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,

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 =