diff --git a/packages/slate-react/src/components/editable.tsx b/packages/slate-react/src/components/editable.tsx index 6dc39af7b4..b6009a2099 100644 --- a/packages/slate-react/src/components/editable.tsx +++ b/packages/slate-react/src/components/editable.tsx @@ -21,6 +21,7 @@ import { IS_SAFARI, IS_EDGE_LEGACY, IS_CHROME_LEGACY, + IS_FIREFOX_LEGACY, } from '../utils/environment' import { ReactEditor } from '..' import { ReadOnlyContext } from '../hooks/use-read-only' @@ -49,7 +50,7 @@ import { // COMPAT: Firefox/Edge Legacy don't support the `beforeinput` event // Chrome Legacy doesn't support `beforeinput` correctly const HAS_BEFORE_INPUT_SUPPORT = !( - IS_FIREFOX || + IS_FIREFOX_LEGACY || IS_EDGE_LEGACY || IS_CHROME_LEGACY ) diff --git a/packages/slate-react/src/utils/environment.ts b/packages/slate-react/src/utils/environment.ts index a12cdbcaac..d11c8d245c 100644 --- a/packages/slate-react/src/utils/environment.ts +++ b/packages/slate-react/src/utils/environment.ts @@ -20,7 +20,26 @@ export const IS_EDGE_LEGACY = typeof navigator !== 'undefined' && /Edge?\/(?:[0-6][0-9]|[0-7][0-8])/i.test(navigator.userAgent) -// Native beforeInput events don't work well with react on Chrome 75 and older, Chrome 76+ can use beforeInput +export const IS_CHROME = + typeof navigator !== 'undefined' && /Chrome/i.test(navigator.userAgent) + +// Native `beforeInput` events don't work well with react on Chrome 75 +// and older, Chrome 76+ can use `beforeInput` though. export const IS_CHROME_LEGACY = typeof navigator !== 'undefined' && /Chrome?\/(?:[0-7][0-5]|[0-6][0-9])/i.test(navigator.userAgent) + +// Firefox did not support `beforeInput` until `v87`. +export const IS_FIREFOX_LEGACY = + typeof navigator !== 'undefined' && + /^(?!.*Seamonkey)(?=.*Firefox\/(?:[0-7][0-9]|[0-8][0-6])).*/i.test( + navigator.userAgent + ) + +// Check if DOM is available as React does internally. +// https://github.com/facebook/react/blob/master/packages/shared/ExecutionEnvironment.js +export const CAN_USE_DOM = !!( + typeof window !== 'undefined' && + typeof window.document !== 'undefined' && + typeof window.document.createElement !== 'undefined' +)