mirror of
https://github.com/ianstormtaylor/slate.git
synced 2025-08-28 17:39:57 +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:
committed by
Ian Storm Taylor
parent
0a5bfd2adc
commit
5a6878bccf
@@ -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
|
||||||
|
if (native.extend) {
|
||||||
|
// COMPAT: Since the DOM range has no concept of backwards/forwards
|
||||||
// we need to check and do the right thing here.
|
// we need to check and do the right thing here.
|
||||||
if (isBackward) {
|
if (isBackward) {
|
||||||
native.setBaseAndExtent(endContainer, endOffset, startContainer, startOffset)
|
native.collapse(range.endContainer, range.endOffset)
|
||||||
|
native.extend(range.startContainer, range.startOffset)
|
||||||
} else {
|
} else {
|
||||||
native.setBaseAndExtent(startContainer, startOffset, endContainer, endOffset)
|
native.collapse(range.startContainer, range.startOffset)
|
||||||
|
native.extend(range.endContainer, range.endOffset)
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// 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.
|
||||||
|
Reference in New Issue
Block a user