Edge browser selection edge case (#1574)

* Handle Edge browser selection case

* Re-use const

packages/slate-react/src/constants/environment.js

@@ -91,6 +91,7 @@ export const IS_CHROME = BROWSER === 'chrome'
 export const IS_FIREFOX = BROWSER === 'firefox'
 export const IS_SAFARI = BROWSER === 'safari'
 export const IS_IE = BROWSER === 'ie'
+export const IS_EDGE = BROWSER === 'edge'
 
 export const IS_ANDROID = OS === 'android'
 export const IS_IOS = OS === 'ios'

packages/slate-react/src/utils/find-range.js

@@ -4,6 +4,8 @@ import isBackward from 'selection-is-backward'
 import { Range } from 'slate'
 
 import findPoint from './find-point'
+import findDOMPoint from './find-dom-point'
+import { IS_IE, IS_EDGE } from '../constants/environment'
 
 /**
  * Find a Slate range from a DOM `native` selection.
@@ -35,6 +37,21 @@ function findRange(native, value) {
   const focus = isCollapsed ? anchor : findPoint(focusNode, focusOffset, value)
   if (!anchor || !focus) return null
 
+  // COMPAT: ??? The Edge browser seems to have a case where if you select the
+  // last word of a span, it sets the endContainer to the containing span.
+  // `selection-is-backward` doesn't handle this case.
+  if (IS_IE || IS_EDGE) {
+    const domAnchor = findDOMPoint(anchor.key, anchor.offset)
+    const domFocus = findDOMPoint(focus.key, focus.offset)
+
+    native = {
+      anchorNode: domAnchor.node,
+      anchorOffset: domAnchor.offset,
+      focusNode: domFocus.node,
+      focusOffset: domFocus.offset,
+    }
+  }
+
   const range = Range.create({
     anchorKey: anchor.key,
     anchorOffset: anchor.offset,