mirror/slate
1
0
Fork 0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-02-01 05:16:10 +01:00
Code Issues Releases Wiki Activity

Fix drag-and-drop issues in IE11 (#1967)

Browse Source 
There were three problems preventing drag-and-drop in IE:

* IE [doesn't consider contentEditables as inputs](https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/913982/) when it comes to calling `onDrop`.
* Setting `dropEffect` causes an `unspecified error`.
* You can only get a cursor position from a point with `createTextRange` and `moveToPoint`. Also, `moveToPoint` raises an error if it's called during a dropEvent.
This commit is contained in:
Justin Weiss 2018-07-19 12:01:46 -07:00 committed by Ian Storm Taylor
parent 31ca817f18
commit 6e749e2f0e
2 changed files with 26 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/slate-react/src/plugins/before.js
View File

@ -4,6 +4,7 @@ import { findDOMNode } from 'react-dom'
import Hotkeys from 'slate-hotkeys'
import {
IS_FIREFOX,
IS_IE,
IS_IOS,
IS_ANDROID,
SUPPORTED_EVENTS,
@ -275,10 +276,21 @@ function BeforePlugin() {
const node = findNode(event.target, editor.value)
if (node.isVoid) event.preventDefault()
// COMPAT: IE won't call onDrop on contentEditables unless the
// default dragOver is prevented:
// https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/913982/
// (2018/07/11)
if (IS_IE) event.preventDefault()
// If a drag is already in progress, don't do this again.
if (!isDragging) {
isDragging = true
event.nativeEvent.dataTransfer.dropEffect = 'move'
// COMPAT: IE will raise an `unspecified error` if dropEffect is
// set. (2018/07/11)
if (!IS_IE) {
event.nativeEvent.dataTransfer.dropEffect = 'move'
}
}
debug('onDragOver', { event })

14
packages/slate-react/src/utils/get-event-range.js
View File

@ -56,11 +56,23 @@ function getEventRange(event, value) {
// COMPAT: In Firefox, `caretRangeFromPoint` doesn't exist. (2016/07/25)
if (window.document.caretRangeFromPoint) {
native = window.document.caretRangeFromPoint(x, y)
} else {
} else if (window.document.caretPositionFromPoint) {
const position = window.document.caretPositionFromPoint(x, y)
native = window.document.createRange()
native.setStart(position.offsetNode, position.offset)
native.setEnd(position.offsetNode, position.offset)
} else if (window.document.body.createTextRange) {
// COMPAT: In IE, `caretRangeFromPoint` and
// `caretPositionFromPoint` don't exist. (2018/07/11)
native = window.document.body.createTextRange()
try {
native.moveToPoint(x, y)
} catch (error) {
// IE11 will raise an `unspecified error` if `moveToPoint` is
// called during a dropEvent.
return null
}
}
// Resolve a Slate range from the DOM range.