-
Notifications
You must be signed in to change notification settings - Fork 47k
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.
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
Minimally support iframes (nested browsing contexts) in selection event handling #12037
Changes from all commits
6940e33
3f3c1d7
b08a270
51be426
3714067
66b8766
75bc65e
5a61b66
f752792
a8fcf05
0003681
fef8519
799ee39
6e3d4b7
d1ad016
3c32963
3f7b5c5
05d8969
a776570
26e9d82
4db5c44
ccf0329
2edf1f8
db02b65
75b9992
0f1de45
95b2aef
d997ba8
e63391c
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,57 @@ | ||
const React = window.React; | ||
const ReactDOM = window.ReactDOM; | ||
|
||
class IframePortal extends React.Component { | ||
iframeRef = null; | ||
|
||
handleRef = ref => { | ||
if (ref !== this.iframeRef) { | ||
this.iframeRef = ref; | ||
if (ref) { | ||
if (ref.contentDocument && this.props.head) { | ||
ref.contentDocument.head.innerHTML = this.props.head; | ||
} | ||
// Re-render must take place in the next tick (Firefox) | ||
setTimeout(() => { | ||
this.forceUpdate(); | ||
}); | ||
} | ||
} | ||
}; | ||
|
||
render() { | ||
const ref = this.iframeRef; | ||
let portal = null; | ||
if (ref && ref.contentDocument) { | ||
portal = ReactDOM.createPortal( | ||
this.props.children, | ||
ref.contentDocument.body | ||
); | ||
} | ||
|
||
return ( | ||
<div> | ||
<iframe | ||
style={{border: 'none', height: this.props.height}} | ||
ref={this.handleRef} | ||
/> | ||
{portal} | ||
</div> | ||
); | ||
} | ||
} | ||
|
||
class IframeSubtree extends React.Component { | ||
warned = false; | ||
render() { | ||
if (!this.warned) { | ||
console.error( | ||
`IFrame has not yet been implemented for React v${React.version}` | ||
); | ||
this.warned = true; | ||
} | ||
return <div>{this.props.children}</div>; | ||
} | ||
} | ||
|
||
export default (ReactDOM.createPortal ? IframePortal : IframeSubtree); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,50 @@ | ||
import TestCase from '../../TestCase'; | ||
import Iframe from '../../Iframe'; | ||
const React = window.React; | ||
|
||
class OnSelectIframe extends React.Component { | ||
state = {count: 0, value: 'Select Me!'}; | ||
|
||
_onSelect = event => { | ||
this.setState(({count}) => ({count: count + 1})); | ||
}; | ||
|
||
_onChange = event => { | ||
this.setState({value: event.target.value}); | ||
}; | ||
|
||
render() { | ||
const {count, value} = this.state; | ||
return ( | ||
<Iframe height={60}> | ||
Selection Event Count: {count} | ||
<input | ||
type="text" | ||
onSelect={this._onSelect} | ||
value={value} | ||
onChange={this._onChange} | ||
/> | ||
</Iframe> | ||
); | ||
} | ||
} | ||
|
||
export default class OnSelectEventTestCase extends React.Component { | ||
render() { | ||
return ( | ||
<TestCase | ||
title="onSelect events within iframes" | ||
description="onSelect events should fire for elements rendered inside iframes"> | ||
<TestCase.Steps> | ||
<li>Highlight some of the text in the input below</li> | ||
<li>Move the cursor around using the arrow keys</li> | ||
</TestCase.Steps> | ||
<TestCase.ExpectedResult> | ||
The displayed count should increase as you highlight or move the | ||
cursor | ||
</TestCase.ExpectedResult> | ||
<OnSelectIframe /> | ||
</TestCase> | ||
); | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,44 @@ | ||
import TestCase from '../../TestCase'; | ||
import Iframe from '../../Iframe'; | ||
const React = window.React; | ||
|
||
export default class ReorderedInputsTestCase extends React.Component { | ||
state = {count: 0}; | ||
|
||
componentDidMount() { | ||
this.interval = setInterval(() => { | ||
this.setState({count: this.state.count + 1}); | ||
}, 2000); | ||
} | ||
|
||
componentWillUnmount() { | ||
clearInterval(this.interval); | ||
} | ||
|
||
renderInputs() { | ||
const inputs = [ | ||
<input key={1} defaultValue="Foo" />, | ||
<input key={2} defaultValue="Bar" />, | ||
]; | ||
if (this.state.count % 2 === 0) { | ||
inputs.reverse(); | ||
} | ||
return inputs; | ||
} | ||
|
||
render() { | ||
return ( | ||
<TestCase title="Reordered input elements in iframes" description=""> | ||
<TestCase.Steps> | ||
<li>The two inputs below swap positions every two seconds</li> | ||
<li>Select the text in either of them</li> | ||
<li>Wait for the swap to occur</li> | ||
</TestCase.Steps> | ||
<TestCase.ExpectedResult> | ||
The selection you made should be maintained | ||
</TestCase.ExpectedResult> | ||
<Iframe height={50}>{this.renderInputs()}</Iframe> | ||
</TestCase> | ||
); | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
import FixtureSet from '../../FixtureSet'; | ||
import ReorderedInputsTestCase from './ReorderedInputsTestCase'; | ||
import OnSelectEventTestCase from './OnSelectEventTestCase'; | ||
const React = window.React; | ||
|
||
export default function SelectionEvents() { | ||
return ( | ||
<FixtureSet | ||
title="Selection Restoration" | ||
description=" | ||
When React commits changes it may perform operations which cause existing | ||
selection state to be lost. This is manually managed by reading the | ||
selection state before commits and then restoring it afterwards. | ||
"> | ||
<ReorderedInputsTestCase /> | ||
<OnSelectEventTestCase /> | ||
</FixtureSet> | ||
); | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,5 @@ | ||
import semver from 'semver'; | ||
|
||
/** | ||
* Take a version from the window query string and load a specific | ||
* version of React. | ||
|
@@ -42,9 +44,11 @@ export default function loadReact() { | |
let version = query.version || 'local'; | ||
|
||
if (version !== 'local') { | ||
const {major, minor, prerelease} = semver(version); | ||
const [preReleaseStage, preReleaseVersion] = prerelease; | ||
// The file structure was updated in 16. This wasn't the case for alphas. | ||
// Load the old module location for anything less than 16 RC | ||
if (parseInt(version, 10) >= 16 && version.indexOf('alpha') < 0) { | ||
if (major >= 16 && !(minor === 0 && preReleaseStage === 'alpha')) { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 👍 |
||
REACT_PATH = | ||
'https://unpkg.com/react@' + version + '/umd/react.development.js'; | ||
DOM_PATH = | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -10,24 +10,8 @@ import getActiveElement from './getActiveElement'; | |
import * as ReactDOMSelection from './ReactDOMSelection'; | ||
import {ELEMENT_NODE, TEXT_NODE} from '../shared/HTMLNodeType'; | ||
|
||
// TODO: this code is originally inlined from fbjs. | ||
// It is likely that we don't actually need all these checks | ||
// for the particular use case in this file. | ||
function isNode(object) { | ||
const doc = object ? object.ownerDocument || object : document; | ||
const defaultView = doc.defaultView || window; | ||
return !!( | ||
object && | ||
(typeof defaultView.Node === 'function' | ||
? object instanceof defaultView.Node | ||
: typeof object === 'object' && | ||
typeof object.nodeType === 'number' && | ||
typeof object.nodeName === 'string') | ||
); | ||
} | ||
|
||
function isTextNode(object) { | ||
return isNode(object) && object.nodeType === TEXT_NODE; | ||
function isTextNode(node) { | ||
return node && node.nodeType === TEXT_NODE; | ||
} | ||
|
||
function containsNode(outerNode, innerNode) { | ||
|
@@ -49,7 +33,27 @@ function containsNode(outerNode, innerNode) { | |
} | ||
|
||
function isInDocument(node) { | ||
return containsNode(document.documentElement, node); | ||
return ( | ||
node && | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Why do we need to check if There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The value that gets passed in comes from There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. We don't use There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @gaearon We can update export default function getActiveElement(doc: ?Document): Element {
doc = doc || document;
try {
return doc.activeElement || doc.body;
} catch (e) {
return doc.body;
}
} But strictly speaking, flow will still complain that export default function getActiveElement(doc: ?Document): Element {
doc = doc || document;
const body = doc.body || doc.createElement('body');
try {
return doc.activeElement || body;
} catch (e) {
return body;
}
} Do you have a preferred approach? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I want to lean towards the first, but I keep reasoning out of it in favor of the second. Body could be null, and it really it should never happen. But I've been surprised too much before :). With the second example, do you need a try/catch? Also: do you anticipate any problems with code downstream working with a document body that isn't attached? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @nhunzaker No try/catch needed for the second example, and the ReactInputSelection plugin won’t have any issues; the code is already setup to handle detached DOM elements for a case where the active element becomes detached between when it is first read and cached and after React finishes committing an update. The second option has grown on me; I suggested it thinking it was silly, but now feel like it’s pretty reasonable. If we go with that one, should we add a comment explaining that document.body can be null? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Let's go with it 👍 |
||
node.ownerDocument && | ||
containsNode(node.ownerDocument.documentElement, node) | ||
); | ||
} | ||
|
||
function getActiveElementDeep() { | ||
let win = window; | ||
let element = getActiveElement(); | ||
while (element instanceof win.HTMLIFrameElement) { | ||
// Accessing the contentDocument of a HTMLIframeElement can cause the browser | ||
// to throw, e.g. if it has a cross-origin src attribute | ||
try { | ||
win = element.contentDocument.defaultView; | ||
} catch (e) { | ||
return element; | ||
} | ||
element = getActiveElement(win.document); | ||
} | ||
return element; | ||
} | ||
|
||
/** | ||
|
@@ -80,7 +84,7 @@ export function hasSelectionCapabilities(elem) { | |
} | ||
|
||
export function getSelectionInformation() { | ||
const focusedElem = getActiveElement(); | ||
const focusedElem = getActiveElementDeep(); | ||
return { | ||
focusedElem: focusedElem, | ||
selectionRange: hasSelectionCapabilities(focusedElem) | ||
|
@@ -95,7 +99,7 @@ export function getSelectionInformation() { | |
* nodes and place them back in, resulting in focus being lost. | ||
*/ | ||
export function restoreSelection(priorSelectionInformation) { | ||
const curFocusedElem = getActiveElement(); | ||
const curFocusedElem = getActiveElementDeep(); | ||
const priorFocusedElem = priorSelectionInformation.focusedElem; | ||
const priorSelectionRange = priorSelectionInformation.selectionRange; | ||
if (curFocusedElem !== priorFocusedElem && isInDocument(priorFocusedElem)) { | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍