1
0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-08-28 01:19:52 +02:00

IE 11 compatibility, use Selection.collapse/extend instead of Selection.setBaseAndExtent (#1386)

* IE 11 compatibility, use Selection.collapse/extend instead of Selection.setBaseAndExtent

* lint

* use collapse/extend for both forward and backward selection

* lint

* use of Selection.extend if supported

* IE11 selection compat

* cleanup

* clean up IE 11 compat code
This commit is contained in:
Gergely Illés
2017-11-13 20:40:20 +01:00
committed by Ian Storm Taylor
parent 0a5bfd2adc
commit 5a6878bccf

View File

@@ -134,7 +134,7 @@ class Content extends React.Component {
const { isBackward } = selection const { isBackward } = selection
const window = getWindow(this.element) const window = getWindow(this.element)
const native = window.getSelection() const native = window.getSelection()
const { rangeCount } = native const { rangeCount, anchorNode } = native
// If both selections are blurred, do nothing. // If both selections are blurred, do nothing.
if (!rangeCount && selection.isBlurred) return if (!rangeCount && selection.isBlurred) return
@@ -142,7 +142,7 @@ class Content extends React.Component {
// If the selection has been blurred, but is still inside the editor in the // If the selection has been blurred, but is still inside the editor in the
// DOM, blur it manually. // DOM, blur it manually.
if (selection.isBlurred) { if (selection.isBlurred) {
if (!this.isInEditor(native.anchorNode)) return if (!this.isInEditor(anchorNode)) return
native.removeAllRanges() native.removeAllRanges()
this.element.blur() this.element.blur()
debug('updateSelection', { selection, native }) debug('updateSelection', { selection, native })
@@ -179,7 +179,8 @@ class Content extends React.Component {
startOffset == current.startOffset && startOffset == current.startOffset &&
endContainer == current.endContainer && endContainer == current.endContainer &&
endOffset == current.endOffset endOffset == current.endOffset
) || ( ) ||
(
startContainer == current.endContainer && startContainer == current.endContainer &&
startOffset == current.endOffset && startOffset == current.endOffset &&
endContainer == current.startContainer && endContainer == current.startContainer &&
@@ -194,12 +195,20 @@ class Content extends React.Component {
this.tmp.isUpdatingSelection = true this.tmp.isUpdatingSelection = true
native.removeAllRanges() native.removeAllRanges()
// COMPAT: Again, since the DOM range has no concept of backwards/forwards // COMPAT: IE 11 does not support Selection.extend
// we need to check and do the right thing here. if (native.extend) {
if (isBackward) { // COMPAT: Since the DOM range has no concept of backwards/forwards
native.setBaseAndExtent(endContainer, endOffset, startContainer, startOffset) // we need to check and do the right thing here.
if (isBackward) {
native.collapse(range.endContainer, range.endOffset)
native.extend(range.startContainer, range.startOffset)
} else {
native.collapse(range.startContainer, range.startOffset)
native.extend(range.endContainer, range.endOffset)
}
} else { } else {
native.setBaseAndExtent(startContainer, startOffset, endContainer, endOffset) // COMPAT: IE 11 does not support Selection.extend, fallback to addRange
native.addRange(range)
} }
// Scroll to the selection, in case it's out of view. // Scroll to the selection, in case it's out of view.