replace IS_FIREFOX with IS_FIREFOX_LEGACY in HAS_BEFORE_INPUT_SUPPORT (…

…ianstormtaylor#4150)

* replace IS_FIREFOX with IS_FIREFOX_LEGACY in HAS_BEFORE_INPUT_SUPPORT

* fix linting errors

* Create afraid-donuts-flow.md

* Update environment.ts

Co-authored-by: Ian Storm Taylor <ian@ianstormtaylor.com>
# Conflicts:
#	packages/slate-react/src/utils/environment.ts

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
 )

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'
+)