gcg/static-cms
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use react-frame-component for preview pane

Browse Source 
This fixes the preview pane not working in Firefox
This commit is contained in:
Benaiah Mischenko 2017-05-03 15:33:02 -07:00 committed by David Calavera
parent c086dca143
commit ab47c3c8b3
3 changed files with 33 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -135,6 +135,7 @@
"react-autosuggest": "^7.0.1", "react-autosuggest": "^7.0.1",
"react-datetime": "^2.6.0", "react-datetime": "^2.6.0",
"react-dom": "^15.1.0", "react-dom": "^15.1.0",
"react-frame-component": "^1.0.3",
"react-hot-loader": "^3.0.0-beta.2", "react-hot-loader": "^3.0.0-beta.2",
"react-immutable-proptypes": "^2.1.0", "react-immutable-proptypes": "^2.1.0",
"react-lazy-load": "^3.0.3", "react-lazy-load": "^3.0.3",

67
src/components/PreviewPane/PreviewPane.js
View File

@ -1,7 +1,7 @@
import React, { PropTypes } from 'react'; import React, { PropTypes } from 'react';
import ReactDOM from 'react-dom';
import { List, Map } from 'immutable'; import { List, Map } from 'immutable';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import Frame from 'react-frame-component';
import { ScrollSyncPane } from '../ScrollSync'; import { ScrollSyncPane } from '../ScrollSync';
import registry from '../../lib/registry'; import registry from '../../lib/registry';
import { resolveWidget } from '../Widgets'; import { resolveWidget } from '../Widgets';
@ -12,10 +12,6 @@ import styles from './PreviewPane.css';
export default class PreviewPane extends React.Component { export default class PreviewPane extends React.Component {
componentDidUpdate() {
this.renderPreview();
}
getWidget = (field, value, props) => { getWidget = (field, value, props) => {
const { fieldsMetaData, getAsset } = props; const { fieldsMetaData, getAsset } = props;
const widget = resolveWidget(field.get('widget')); const widget = resolveWidget(field.get('widget'));
@ -66,7 +62,7 @@ export default class PreviewPane extends React.Component {
const widgets = nestedFields && Map(nestedFields.map((f, i) => [f.get('name'), <div key={i}>{this.getWidget(f, val, this.props)}</div>])); const widgets = nestedFields && Map(nestedFields.map((f, i) => [f.get('name'), <div key={i}>{this.getWidget(f, val, this.props)}</div>]));
return Map({ data: val, widgets }); return Map({ data: val, widgets });
}); });
} };
return Map({ return Map({
data: value, data: value,
@ -74,27 +70,7 @@ export default class PreviewPane extends React.Component {
}); });
}; };
handleIframeRef = (ref) => { render() {
if (ref) {
registry.getPreviewStyles().forEach((style) => {
const linkEl = document.createElement('link');
linkEl.setAttribute('rel', 'stylesheet');
linkEl.setAttribute('href', style);
ref.contentDocument.head.appendChild(linkEl);
});
const base = document.createElement('base');
base.setAttribute('target', '_blank');
ref.contentDocument.head.appendChild(base);
this.previewEl = document.createElement('div');
this.iframeBody = ref.contentDocument.body;
this.iframeBody.appendChild(this.previewEl);
this.renderPreview();
}
};
renderPreview() {
const { entry, collection } = this.props; const { entry, collection } = this.props;
if (!entry || !entry.get('data')) return; if (!entry || !entry.get('data')) return;
const component = registry.getPreviewTemplate(selectTemplateName(collection, entry.get('slug'))) || Preview; const component = registry.getPreviewTemplate(selectTemplateName(collection, entry.get('slug'))) || Preview;
@ -107,22 +83,35 @@ export default class PreviewPane extends React.Component {
widgetsFor: this.widgetsFor, widgetsFor: this.widgetsFor,
}; };
// We need to use this API in order to pass context to the iframe const styleEls = registry.getPreviewStyles()
ReactDOM.unstable_renderSubtreeIntoContainer( .map(style => <link href={style} type="text/css" rel="stylesheet" />);
this,
<ScrollSyncPane attachTo={this.iframeBody}>
{React.createElement(component, previewProps)}
</ScrollSyncPane>
, this.previewEl);
}
render() {
const { collection } = this.props;
if (!collection) { if (!collection) {
return null; return <Frame className={styles.frame} head={styleEl} />;
} }
return <iframe className={styles.frame} ref={this.handleIframeRef} />; // We need to create a lightweight component here so that we can
// access the context within the Frame. This allows us to attach
// the ScrollSyncPane to the body.
const PreviewContent = (props, { document: iFrameDocument }) => (
<ScrollSyncPane attachTo={iFrameDocument.scrollingElement}>
{React.createElement(component, previewProps)}
</ScrollSyncPane>);
PreviewContent.contextTypes = {
document: PropTypes.any,
};
return (<Frame
className={styles.frame}
head={styleEls}
initialContent={`
<!DOCTYPE html>
<html>
<head><base target="_blank"/></head>
<body><div></div></body>
</html>`}
><PreviewContent /></Frame>);
} }
} }

4
yarn.lock
View File

@ -6934,6 +6934,10 @@ react-dom@^15.1.0:
object-assign "^4.1.0" object-assign "^4.1.0"
prop-types "~15.5.7" prop-types "~15.5.7"
react-frame-component@^1.0.3:
version "1.0.3"
resolved "https://registry.yarnpkg.com/react-frame-component/-/react-frame-component-1.0.3.tgz#00a5deea81671927ea973954a0d8eb19ecc339de"
react-fuzzy@^0.2.3: react-fuzzy@^0.2.3:
version "0.2.3" version "0.2.3"
resolved "https://registry.yarnpkg.com/react-fuzzy/-/react-fuzzy-0.2.3.tgz#4fa08729524cd491e2b589509e8d2de7e3adfb9e" resolved "https://registry.yarnpkg.com/react-fuzzy/-/react-fuzzy-0.2.3.tgz#4fa08729524cd491e2b589509e8d2de7e3adfb9e"