Support iframes (nested browsing contexts) in selection event handling for React 16

packages/react-dom/src/client/ReactDOM.js

@@ -31,7 +31,6 @@ var invariant = require('fbjs/lib/invariant');
 
 var ReactDOMComponentTree = require('./ReactDOMComponentTree');
 var ReactDOMFiberComponent = require('./ReactDOMFiberComponent');
-var ReactInputSelection = require('./ReactInputSelection');
 var ReactBrowserEventEmitter = require('../events/ReactBrowserEventEmitter');
 var DOMNamespaces = require('../shared/DOMNamespaces');
 var {
@@ -116,7 +115,6 @@ type HostContextProd = string;
 type HostContext = HostContextDev | HostContextProd;
 
 let eventsEnabled: ?boolean = null;
-let selectionInformation: ?mixed = null;
 
 /**
  * True if the supplied DOM node is a valid node element.
@@ -219,13 +217,10 @@ var DOMRenderer = ReactFiberReconciler({
 
   prepareForCommit(): void {
     eventsEnabled = ReactBrowserEventEmitter.isEnabled();
-    selectionInformation = ReactInputSelection.getSelectionInformation();
     ReactBrowserEventEmitter.setEnabled(false);
   },
 
   resetAfterCommit(): void {
-    ReactInputSelection.restoreSelection(selectionInformation);
-    selectionInformation = null;
     ReactBrowserEventEmitter.setEnabled(eventsEnabled);
     eventsEnabled = null;
   },

packages/react-dom/src/client/ReactDOMSelection.js

@@ -16,7 +16,11 @@ var {TEXT_NODE} = require('../shared/HTMLNodeType');
  * @return {?object}
  */
 function getModernOffsets(outerNode) {
-  var selection = window.getSelection && window.getSelection();
+  var win = window;
+  if (outerNode.ownerDocument && outerNode.ownerDocument.defaultView) {
+    win = outerNode.ownerDocument.defaultView;
+  }
+  var selection = win.getSelection && win.getSelection();
 
   if (!selection || selection.rangeCount === 0) {
     return null;
@@ -153,11 +157,13 @@ function getModernOffsetsFromPoints(
  * @param {object} offsets
  */
 function setModernOffsets(node, offsets) {
-  if (!window.getSelection) {
+  var doc = node.ownerDocument || document;
+
+  if (!doc.defaultView.getSelection) {
     return;
   }
 
-  var selection = window.getSelection();
+  var selection = doc.defaultView.getSelection();
   var length = node[getTextContentAccessor()].length;
   var start = Math.min(offsets.start, length);
   var end = offsets.end === undefined ? start : Math.min(offsets.end, length);
@@ -183,7 +189,7 @@ function setModernOffsets(node, offsets) {
     ) {
       return;
     }
-    var range = document.createRange();
+    var range = doc.createRange();
     range.setStart(startMarker.node, startMarker.offset);
     selection.removeAllRanges();
 

packages/react-dom/src/events/SelectEventPlugin.js

@@ -16,7 +16,6 @@ var shallowEqual = require('fbjs/lib/shallowEqual');
 
 var ReactBrowserEventEmitter = require('./ReactBrowserEventEmitter');
 var ReactDOMComponentTree = require('../client/ReactDOMComponentTree');
-var ReactInputSelection = require('../client/ReactInputSelection');
 var {DOCUMENT_NODE} = require('../shared/HTMLNodeType');
 
 var skipSelectionChangeEvent =
@@ -53,6 +52,22 @@ var mouseDown = false;
 var isListeningToAllDependencies =
   ReactBrowserEventEmitter.isListeningToAllDependencies;
 
+/**
+ * Determine if a node can have a selection associated with it.
+ *
+ * @param {DOMElement} node
+ * @return {boolean} True if the node can have a selection.
+ */
+function hasSelectionCapabilities(node) {
+  var nodeName = node && node.nodeName && node.nodeName.toLowerCase();
+  return (
+    nodeName &&
+    ((nodeName === 'input' && node.type === 'text') ||
+      nodeName === 'textarea' ||
+      node.contentEditable === 'true')
+  );
+}
+
 /**
  * Get an object which is a unique representation of the current selection.
  *
@@ -63,40 +78,49 @@ var isListeningToAllDependencies =
  * @return {object}
  */
 function getSelection(node) {
-  if (
-    'selectionStart' in node &&
-    ReactInputSelection.hasSelectionCapabilities(node)
-  ) {
+  if ('selectionStart' in node && hasSelectionCapabilities(node)) {
     return {
       start: node.selectionStart,
       end: node.selectionEnd,
     };
-  } else if (window.getSelection) {
-    var selection = window.getSelection();
-    return {
-      anchorNode: selection.anchorNode,
-      anchorOffset: selection.anchorOffset,
-      focusNode: selection.focusNode,
-      focusOffset: selection.focusOffset,
-    };
+  } else {
+    var win = window;
+    if (node.ownerDocument && node.ownerDocument.defaultView) {
+      win = node.ownerDocument.defaultView;
+    }
+    if (win.getSelection) {
+      var selection = win.getSelection();
+      return {
+        anchorNode: selection.anchorNode,
+        anchorOffset: selection.anchorOffset,
+        focusNode: selection.focusNode,
+        focusOffset: selection.focusOffset,
+      };
+    }
   }
 }
 
 /**
  * Poll selection to see whether it's changed.
  *
  * @param {object} nativeEvent
+ * @param {object} nativeEventTarget
  * @return {?SyntheticEvent}
  */
 function constructSelectEvent(nativeEvent, nativeEventTarget) {
   // Ensure we have the right element, and that the user is not dragging a
   // selection (this matches native `select` event behavior). In HTML5, select
   // fires only on input and textarea thus if there's no focused element we
   // won't dispatch.
+  var doc =
+    nativeEventTarget.ownerDocument ||
+    nativeEventTarget.document ||
+    nativeEventTarget;
+
   if (
     mouseDown ||
     activeElement == null ||
-    activeElement !== getActiveElement()
+    activeElement !== getActiveElement(doc)
   ) {
     return null;
   }

packages/react-dom/src/events/SyntheticClipboardEvent.js

@@ -15,9 +15,11 @@ var SyntheticEvent = require('events/SyntheticEvent');
  */
 var ClipboardEventInterface = {
   clipboardData: function(event) {
-    return 'clipboardData' in event
-      ? event.clipboardData
-      : window.clipboardData;
+    if ('clipboardData' in event) {
+      return event.clipboardData;
+    }
+    var doc = (event.target && event.target.ownerDocument) || document;
+    return doc.defaultView.clipboardData;
   },
 };