isTextInputElement determines whether the node is an extraarea or an input element.
getTextContentAccessor gets the text of the node via the 'textContent' or 'innerText' properties.
FallbackCompositionState gets the updated value of the input box or text box.
getNodeForCharacterOffset obtains the node at the start or end position of the selected text, root is the ancestor node of the selected text, and offset is the start or end position.
ReactDOMSelection Gets or sets the selected text of the node (to be recognized).
ReactInputSelection determines whether the input box has the ability to select text, and sets or gets the selected text of the input box.
isTextInputElement.js
'use strict';
var supportedInputTypes = {
'color': true,
'date': true,
'datetime': true,
'datetime-local': true,
'email': true,
'month': true,
'number': true,
'password': true,
'range': true,
'search': true,
'tel': true,
'text': true,
'time': true,
'url': true,
'week': true
};
// Determine if the node is extraarea or input element
function isTextInputElement(elem) {
var nodeName = elem && elem.nodeName && elem.nodeName.toLowerCase();
if (nodeName === 'input') {
return !!supportedInputTypes[elem.type];
}
if (nodeName === 'textarea') {
return true;
}
return false;
}
module.exports = isTextInputElement;
getTextContentAccessor.js
'use strict';
var ExecutionEnvironment = require('fbjs/lib/ExecutionEnvironment');
var contentKey = null;
// Get the text of the node via the 'textContent' or 'innerText' property
function getTextContentAccessor() {
if (!contentKey && ExecutionEnvironment.canUseDOM) {
// SVG <text> elements don't support innerText even
contentKey = 'textContent' in document.documentElement ? 'textContent' : 'innerText';
}
return contentKey;
}
module.exports = getTextContentAccessor;
FallbackCompositionState.js
'use strict';
var _assign = require('object-assign');
var PooledClass = require('./PooledClass');
// Get the text of the node via the 'textContent' or 'innerText' property
var getTextContentAccessor = require('./getTextContentAccessor');
// Get the updated value of the input box or text box
function FallbackCompositionState(root) {
this._root = root;
this._startText = this.getText();// The value of the current input box
this._fallbackText = null;
}
_assign(FallbackCompositionState.prototype, {
destructor: function () {
this._root = null;
this._startText = null;
this._fallbackText = null;
},
// Get the value of the input box
getText: function () {
if ('value' in this._root) {
return this._root.value;
}
return this._root[getTextContentAccessor()];
},
// Compare with the old text, get the value inserted in the input box, this._fallbackText is cleared by the realse method provided by the PooledClass constructor
getData: function () {
if (this._fallbackText) {
return this._fallbackText;
}
was start;
var startValue = this._startText;
var startLength = startValue.length;
var end;
var endValue = this.getText();
var endLength = endValue.length;
for (start = 0; start < startLength; start++) {
if (startValue[start] !== endValue[start]) {
break;
}
}
var minEnd = startLength - start;
for (end = 1; end <= minEnd; end++) {
if (startValue[startLength - end] !== endValue[endLength - end]) {
break;
}
}
var sliceTail = end > 1 ? 1 - end : undefined;
this._fallbackText = endValue.slice(start, sliceTail);
return this._fallbackText;
}
});
PooledClass.addPoolingTo(FallbackCompositionState);
module.exports = FallbackCompositionState;
getNodeForCharacterOffset.js
'use strict';
// Get the bottommost child node
function getLeafNode(node) {
while (node && node.firstChild) {
node = node.firstChild;
}
return node;
}
// get the next node
function getSiblingNode(node) {
while (node) {
if (node.nextSibling) {
return node.nextSibling;
}
node = node.parentNode;
}
}
// Get the node at the start or end position of the selected text, root is the ancestor node of the selected text, offset is the start or end position
function getNodeForCharacterOffset(root, offset) {
var node = getLeafNode(root);
var nodeStart = 0;
var nodeEnd = 0;
while (node) {
if (node.nodeType === 3) {
nodeEnd = nodeStart + node.textContent.length;
if (nodeStart <= offset && nodeEnd >= offset) {
return {
node: node,
offset: offset - nodeStart
};
}
nodeStart = nodeEnd;
}
node = getLeafNode (getSiblingNode (node));
}
}
module.exports = getNodeForCharacterOffset;
ReactDOMSelection.js
'use strict';
var ExecutionEnvironment = require('fbjs/lib/ExecutionEnvironment');
// getNodeForCharacterOffset(root,offset) gets the node at the start or end position of the selected text
// root is the ancestor node of the selected text, offset is the start or end position
var getNodeForCharacterOffset = require('./getNodeForCharacterOffset');
// Get the text of the node via the 'textContent' or 'innerText' property
var getTextContentAccessor = require('./getTextContentAccessor');
/**
* While `isCollapsed` is available on the Selection object and `collapsed`
* is available on the Range object, IE11 sometimes gets them wrong.
* If the anchor/focus nodes and offsets are the same, the range is collapsed.
*/
function isCollapsed(anchorNode, anchorOffset, focusNode, focusOffset) {
return anchorNode === focusNode && anchorOffset === focusOffset;
}
// Get the start position and end position of the selected text under Ie
function getIEOffsets(node) {
var selection = document.selection;
var selectedRange = selection.createRange();
var selectedLength = selectedRange.text.length;
// Duplicate selection so we can move range without breaking user selection.
var fromStart = selectedRange.duplicate();
fromStart.moveToElementText(node);
fromStart.setEndPoint('EndToStart', selectedRange);
var startOffset = fromStart.text.length;
var endOffset = startOffset + selectedLength;
return {
start: startOffset,
end: endOffset
};
}
// Get the start and end position of the selected text in modern browsers
function getModernOffsets(node) {
var selection = window.getSelection && window.getSelection();
if (!selection || selection.rangeCount === 0) {
return null;
}
var anchorNode = selection.anchorNode;
var anchorOffset = selection.anchorOffset;
var focusNode = selection.focusNode;
var focusOffset = selection.focusOffset;
var currentRange = selection.getRangeAt(0);
// In Firefox, range.startContainer and range.endContainer can be "anonymous
// divs", e.g. the up/down buttons on an <input type="number">. Anonymous
// divs do not seem to expose properties, triggering a "Permission denied
// error" if any of its properties are accessed. The only seemingly possible
// way to avoid erroring is to access a property that typically works for
// non-anonymous divs and catch any error that may otherwise arise. See
// https://bugzilla.mozilla.org/show_bug.cgi?id=208427
try {
/* eslint-disable no-unused-expressions */
currentRange.startContainer.nodeType;
currentRange.endContainer.nodeType;
/* eslint-enable no-unused-expressions */
} catch (e) {
return null;
}
// If the node and offset values are the same, the selection is collapsed.
// `Selection.isCollapsed` is available natively, but IE sometimes gets
// this value wrong.
var isSelectionCollapsed = isCollapsed(selection.anchorNode, selection.anchorOffset, selection.focusNode, selection.focusOffset);
var rangeLength = isSelectionCollapsed ? 0 : currentRange.toString().length;
var tempRange = currentRange.cloneRange();
tempRange.selectNodeContents(node);
tempRange.setEnd(currentRange.startContainer, currentRange.startOffset);
var isTempRangeCollapsed = isCollapsed(tempRange.startContainer, tempRange.startOffset, tempRange.endContainer, tempRange.endOffset);
var start = isTempRangeCollapsed ? 0 : tempRange.toString().length;
var end = start + rangeLength;
// Detect whether the selection is backward.
var detectionRange = document.createRange();
detectionRange.setStart(anchorNode, anchorOffset);
detectionRange.setEnd(focusNode, focusOffset);
var isBackward = detectionRange.collapsed;
return {
start: isBackward ? end : start,
end: isBackward ? start : end
};
}
// Select text for node node under ie
function setIEOffsets(node, offsets) {
var range = document.selection.createRange().duplicate();
was start, end;
if (offsets.end === undefined) {
start = offsets.start;
end = start;
} else if (offsets.start > offsets.end) {
start = offsets.end;
end = offsets.start;
} else {
start = offsets.start;
end = offsets.end;
}
range.moveToElementText(node);
range.moveStart('character', start);
range.setEndPoint('EndToStart', range);
range.moveEnd('character', end - start);
range.select();
}
// Modern browsers select text for node node
function setModernOffsets(node, offsets) {
if (!window.getSelection) {
return;
}
var selection = window.getSelection();
var length = node[getTextContentAccessor()].length;
var start = Math.min(offsets.start, length);
var end = offsets.end === undefined ? start : Math.min(offsets.end, length);
// IE 11 uses modern selection, but doesn't support the extend method.
// Flip backward selections, so we can set with a single range.
if (!selection.extend && start > end) {
var temp = end;
end = start;
start = temp;
}
var startMarker = getNodeForCharacterOffset (node, start);
var endMarker = getNodeForCharacterOffset(node, end);
if (startMarker && endMarker) {
var range = document.createRange();
range.setStart (startMarker.node, startMarker.offset);
selection.removeAllRanges();
if (start > end) {
selection.addRange(range);
selection.extend(endMarker.node, endMarker.offset);
} else {
range.setEnd(endMarker.node, endMarker.offset);
selection.addRange(range);
}
}
}
var useIEOffsets = ExecutionEnvironment.canUseDOM && 'selection' in document && !('getSelection' in window);
// ？？？
var ReactDOMSelection = {
// Get the {start,end} of the selected text of the node
getOffsets: useIEOffsets ? getIEOffsets : getModernOffsets,
// Set the selected text of the node
setOffsets: useIEOffsets ? setIEOffsets : setModernOffsets
};
module.exports = ReactDOMSelection;
ReactInputSelection.js
'use strict';
// Get or set the selected text of all nodes
var ReactDOMSelection = require('./ReactDOMSelection');
// containsNode(outerNode,innerNode), to determine whether the outerNode node contains innerNode
var containsNode = require('fbjs/lib/containsNode');
// focusNode(node), make the node node get the focus
var focusNode = require('fbjs/lib/focusNode');
// getActiveElement(), the element that gets the focus
var getActiveElement = require('fbjs/lib/getActiveElement');
function isInDocument (node) {
return containsNode(document.documentElement, node);
}
// Determine whether the input box has the ability to select text, set or get the selected text of the input box
var ReactInputSelection = {
// Determine whether the elem element has a text selection function
hasSelectionCapabilities: function (elem) {
var nodeName = elem && elem.nodeName && elem.nodeName.toLowerCase();
return nodeName && (nodeName === 'input' && elem.type === 'text' || nodeName === 'textarea' || elem.contentEditable === 'true');
},
// Get the element that has the focus and the selection of the text
getSelectionInformation: function () {
var focusedElem = getActiveElement();
return {
focusedElem: focusedElem,
selectionRange: ReactInputSelection.hasSelectionCapabilities(focusedElem) ? ReactInputSelection.getSelection(focusedElem) : null
};
},
// With prioritySelectionInformation={focusedElem,selectionRange} data, select the node and specific copy
restoreSelection: function (priorSelectionInformation) {
var curFocusedElem = getActiveElement ();
var priorFocusedElem = priorSelectionInformation.focusedElem;
var priorSelectionRange = priorSelectionInformation.selectionRange;
if (curFocusedElem! == priorFocusedElem && isInDocument (priorFocusedElem))
if (ReactInputSelection.hasSelectionCapabilities(priorFocusedElem)) {
ReactInputSelection.setSelection(priorFocusedElem, priorSelectionRange);
}
focusNode(priorFocusedElem);
}
},
// Get the selected text of the input box, text box and contentEditable node, the return value is in the form of {start,end}
getSelection: function (input) {
var selection;
// Modern browser input box, text box selection text
if ('selectionStart' in input) {
selection = {
start: input.selectionStart,
end: input.selectionEnd
};
// The selection text of the IE8 input box
} else if (document.selection && input.nodeName && input.nodeName.toLowerCase() === 'input') {
var range = document.selection.createRange();
if (range.parentElement() === input) {
selection = {
start: -range.moveStart('character', -input.value.length),
end: -range.moveEnd('character', -input.value.length)
};
}
// The selected text of the contentEditable node, and the text box under the old IE version
} else {
selection = ReactDOMSelection.getOffsets(input);
}
return selection || { start: 0, end: 0 };
},
// Set the selected text of the input box input according to offsets={start,end}
setSelection: function (input, offsets) {
var start = offsets.start;
var end = offsets.end;
if (end === undefined) {
end = start;
}
if ('selectionStart' in input) {
input.selectionStart = start;
input.selectionEnd = Math.min(end, input.value.length);
} else if (document.selection && input.nodeName && input.nodeName.toLowerCase() === 'input') {
var range = input.createTextRange();
range.collapse(true);
range.moveStart('character', start);
range.moveEnd('character', end - start);
range.select();
} else {
ReactDOMSelection.setOffsets(input, offsets);
}
}
};
module.exports = ReactInputSelection;