Implemented scroll sync from control pane to the preview pane.

src/components/ControlPanel/ControlPane.js

@@ -1,23 +1,26 @@
-import React, { PropTypes } from 'react';
+import React, { Component, PropTypes } from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { resolveWidget } from '../Widgets';
 import styles from './ControlPane.css';
 
-export default class ControlPane extends React.Component {
+export default class ControlPane extends Component {
+
   controlFor(field) {
     const { entry, getMedia, onChange, onAddMedia, onRemoveMedia } = this.props;
     const widget = resolveWidget(field.get('widget'));
     return (
       <div className={styles.control}>
         <label className={styles.label}>{field.get('label')}</label>
-        {React.createElement(widget.control, {
+        {
+          React.createElement(widget.control, {
             field: field,
             value: entry.getIn(['data', field.get('name')]),
             onChange: (value) => onChange(entry.setIn(['data', field.get('name')], value)),
             onAddMedia: onAddMedia,
             onRemoveMedia: onRemoveMedia,
             getMedia: getMedia
-        })}
+          })
+        }
       </div>
     );
   }

src/components/EntryEditor/EntryEditor.js

@@ -1,16 +1,37 @@
-import React, { PropTypes } from 'react';
+import React, { Component, PropTypes } from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ControlPane from '../ControlPanel/ControlPane';
 import PreviewPane from '../PreviewPane';
 import styles from './EntryEditor.css';
 
-export default function EntryEditor(props) {
+export default class EntryEditor extends Component {
-  const { collection, entry, getMedia, onChange, onAddMedia, onRemoveMedia, onPersist } = props;
+
+  state = {
+    scrollTop: 0,
+    scrollHeight: 0,
+    offsetHeight: 0,
+  }
+
+  handleControlPaneScroll = evt => {
+    const { scrollTop, scrollHeight, offsetHeight } = evt.target;
+    this.setState({
+      scrollTop,
+      scrollHeight,
+      offsetHeight,
+    });
+  }
+
+  render() {
+    const { collection, entry, getMedia, onChange, onAddMedia, onRemoveMedia, onPersist } = this.props;
+    const { scrollTop, scrollHeight, offsetHeight } = this.state;
 
     return (
       <div className={styles.root}>
         <div className={styles.container}>
-        <div className={styles.controlPane}>
+          <div
+            className={styles.controlPane}
+            onScroll={this.handleControlPaneScroll}
+          >
             <ControlPane
               collection={collection}
               entry={entry}
@@ -25,6 +46,9 @@ export default function EntryEditor(props) {
               collection={collection}
               entry={entry}
               getMedia={getMedia}
+              scrollTop={scrollTop}
+              scrollHeight={scrollHeight}
+              offsetHeight={offsetHeight}
             />
           </div>
         </div>
@@ -34,6 +58,7 @@ export default function EntryEditor(props) {
       </div>
     );
   }
+}
 
 EntryEditor.propTypes = {
   collection: ImmutablePropTypes.map.isRequired,

src/components/PreviewPane.js

@@ -6,6 +6,7 @@ import { resolveWidget } from './Widgets';
 import styles from './PreviewPane.css';
 
 class Preview extends React.Component {
+
   previewFor(field) {
     const { entry, getMedia } = this.props;
     const widget = resolveWidget(field.get('widget'));
@@ -18,10 +19,20 @@ class Preview extends React.Component {
 
   render() {
     const { collection } = this.props;
-    if (!collection) { return null; }
+    if (!collection) {
+      return null;
+    }
 
     return <div>
-      {collection.get('fields').map((field) => <div key={field.get('name')}>{this.previewFor(field)}</div>)}
+      {
+        collection.get('fields').map(field => (
+          <div
+            key={field.get('name')}
+          >
+            {this.previewFor(field)}
+          </div>
+        ))
+      }
     </div>;
   }
 }
@@ -33,17 +44,20 @@ Preview.propTypes = {
 };
 
 export default class PreviewPane extends React.Component {
-  constructor(props) {
+
-    super(props);
+  componentDidUpdate(prevProps) {
-    this.handleIframeRef = this.handleIframeRef.bind(this);
+    // Update scroll position of the iframe
-    this.widgetFor = this.widgetFor.bind(this);
+    const { scrollTop, scrollHeight, offsetHeight, ...rest } = this.props;
+    const frameHeight = this.iframeBody.scrollHeight - offsetHeight;
+    this.iframeBody.scrollTop = frameHeight * scrollTop / (scrollHeight - offsetHeight);
+
+    // We don't want to re-render on scroll
+    if (prevProps.collection !== this.props.collection || prevProps.entry !== this.props.entry) {
+      this.renderPreview(rest);
+    }
   }
 
-  componentDidUpdate() {
+  widgetFor = name => {
-    this.renderPreview();
-  }
-
-  widgetFor(name) {
     const { collection, entry, getMedia } = this.props;
     const field = collection.get('fields').find((field) => field.get('name') === name);
     const widget = resolveWidget(field.get('widget'));
@@ -54,14 +68,16 @@ export default class PreviewPane extends React.Component {
     });
   }
 
-  renderPreview() {
+  renderPreview(props) {
-    const props = Object.assign({}, this.props, { widgetFor: this.widgetFor });
     const component = registry.getPreviewTemplate(props.collection.get('name')) || Preview;
-
+    const previewProps = {
-    render(React.createElement(component, props), this.previewEl);
+      ...props,
+      widgetFor: this.widgetFor
+    };
+    render(React.createElement(component, previewProps), this.previewEl);
   }
 
-  handleIframeRef(ref) {
+  handleIframeRef = ref => {
     if (ref) {
       registry.getPreviewStyles().forEach((style) => {
         const linkEl = document.createElement('link');
@@ -70,14 +86,17 @@ export default class PreviewPane extends React.Component {
         ref.contentDocument.head.appendChild(linkEl);
       });
       this.previewEl = document.createElement('div');
-      ref.contentDocument.body.appendChild(this.previewEl);
+      this.iframeBody = ref.contentDocument.body;
-      this.renderPreview();
+      this.iframeBody.appendChild(this.previewEl);
+      this.renderPreview(this.props);
     }
   }
 
   render() {
     const { collection } = this.props;
-    if (!collection) { return null; }
+    if (!collection) {
+      return null;
+    }
 
     return <iframe className={styles.frame} ref={this.handleIframeRef}></iframe>;
   }
@@ -87,4 +106,7 @@ PreviewPane.propTypes = {
   collection: ImmutablePropTypes.map.isRequired,
   entry: ImmutablePropTypes.map.isRequired,
   getMedia: PropTypes.func.isRequired,
+  scrollTop: PropTypes.number,
+  scrollHeight: PropTypes.number,
+  offsetHeight: PropTypes.number,
 };