Skip to content

Support iframes (nested browsing contexts) in selection event handling #9184

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
acusti wants to merge 24 commits into from
Closed

Support iframes (nested browsing contexts) in selection event handling #9184

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
e1d4110
Use event target doc as getActiveElement context
acusti Oct 24, 2017
ed0cc8a
Use node’s window and document when possible
acusti Oct 30, 2017
8f11b2c
Make getting/setting selection check iframe contents
acusti Oct 4, 2016
83cfb55
Add tests for ReactInputSelection
acusti Nov 1, 2017
374d525
Adapt restoreSelection to work for all activeElements
acusti Oct 10, 2016
f6f9e35
Tests for getting / restoring selections across iframes
acusti Oct 11, 2016
6ac703f
Add guards for Firefox and Safari compatibility
acusti Mar 15, 2017
cec8c3f
Prettier
acusti Nov 1, 2017
0163795
Update test file header
acusti Nov 1, 2017
d777546
Avoid causing focus/blur issues from restoreSelection
acusti Nov 1, 2017
7c59a77
Add early return for restoring selection common case
acusti Nov 1, 2017
131357e
Merge remote-tracking branch 'upstream/master' into iframes
acusti Nov 3, 2017
2d4ac46
Prefer active element as element with selection
acusti Nov 16, 2017
5755556
Merge branch 'master' into iframes
acusti Nov 16, 2017
b3998eb
Prettier
acusti Nov 16, 2017
174375c
Prevent restoreSelection overwriting active element
acusti Nov 17, 2017
39a9589
Code review-based cleanup and improvements
acusti Nov 17, 2017
82443f7
Detect all valid selection-capable input types
acusti Nov 19, 2017
b25279d
Merge branch 'master' into iframes
acusti Nov 19, 2017
026e8f0
Merge branch 'master' into iframes
acusti Nov 28, 2017
689d7c1
Merge branch 'master' into iframes
acusti Dec 30, 2017
074ff51
Guard against null (based on failing test)
acusti Dec 30, 2017
0744710
Linting (var :arrow_right: const)
acusti Dec 31, 2017
c71601b
Merge branch 'master' into iframes
acusti Jan 7, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Use node’s window and document when possible
  • Loading branch information
@acusti
acusti committed Nov 1, 2017
commit ed0cc8a5febf3540687476bd35ff70fb90025982
14 changes: 10 additions & 4 deletions packages/react-dom/src/client/ReactDOMSelection.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -153,11 +157,13 @@ function getModernOffsetsFromPoints(
* @param {object} offsets
*/
function setModernOffsets(node, offsets) {
if (!window.getSelection) {
var doc = node.ownerDocument || document;
Copy link
Contributor

@nhunzaker nhunzaker Nov 3, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When is ownerDocument ever undefined?

Copy link
Contributor Author

@acusti acusti Nov 4, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

According to the MDN page about the Node interface:

Node.ownerDocument returns the Document that this node belongs to. If no document is associated with it, returns null.

That doesn’t refer to a node that isn’t in the DOM, which will still have a reference to the ownerDocument where it originated (via document.createElement). In my experience, ownerDocument is only null for Document nodes themselves, which matches what MDN says on the page specifically about Node.ownerDocument:

If this property is used on a node that is itself a document, the result is null.

So now that you mention it, this check could be updated to handle Document specifically, maybe like var doc = node.nodeType === 9 ? node : node.ownerDocument;

However, maybe ownerDocument could also be null if, for example, you had a reference to a node from a document that has since been destroyed (an iframe element that got removed from the DOM and garbage collected, for example)? I’m not sure. Hence the simplified fallback to the global document whenever ownerDocument isn’t truthy.

Copy link
Contributor

@nhunzaker nhunzaker Nov 16, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cool. Thank you. That was extremely helpful!


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);
Expand All @@ -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();

Expand Down
22 changes: 14 additions & 8 deletions packages/react-dom/src/events/SelectEventPlugin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,14 +71,20 @@ function getSelection(node) {
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,
};
}
}
}

Expand Down
8 changes: 5 additions & 3 deletions packages/react-dom/src/events/SyntheticClipboardEvent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
},
};
Copy link
Contributor

@nhunzaker nhunzaker Nov 16, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What does clipboard data have to do with selection?

Copy link
Contributor Author

@acusti acusti Nov 17, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nothing to do with selection; this is just another part of the codebase that relies on the global window object rather than the window object relative to the DOM node being used. That said, I just looked it up, and window.clipboardData is an IE-only API and one where it seems like the code being executed should only try to look up it’s own window.clipboardData (because of browser permissions / security settings), so I’m going to revert this set of changes.

Copy link
Contributor

@nhunzaker nhunzaker Nov 17, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah still, do you think it's worth landing? What do you think about sending this out in a separate PR?

Copy link
Contributor Author

@acusti acusti Nov 17, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don’t know really know anything about clipboard APIs in IE, but based on a quick google search, my hunch is that this change wouldn’t actually be for the better. There’s some mentions about browser settings and issues with clipboardData not being accessible across different browsing contexts, so keeping it hardcoded to window.clipboardData might actually be correct.

But I’d be happy to open a separate PR with it if someone would be able to figure that all out.


Expand Down