From 28450334a7e10bafddedd3dbf8839071ffbaacb6 Mon Sep 17 00:00:00 2001 From: Kelly Joseph Price Date: Tue, 30 Jan 2018 18:09:39 -0800 Subject: [PATCH] Edge browser selection edge case (#1574) * Handle Edge browser selection case * Re-use const --- .../slate-react/src/constants/environment.js | 1 + packages/slate-react/src/utils/find-range.js | 17 +++++++++++++++++ 2 files changed, 18 insertions(+) diff --git a/packages/slate-react/src/constants/environment.js b/packages/slate-react/src/constants/environment.js index 8f9a46486..e26b4be7c 100644 --- a/packages/slate-react/src/constants/environment.js +++ b/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' diff --git a/packages/slate-react/src/utils/find-range.js b/packages/slate-react/src/utils/find-range.js index a59ef4dbf..658d2b034 100644 --- a/packages/slate-react/src/utils/find-range.js +++ b/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,