add widgetsFor helper

This allows individual widgets to be accessed
from preview templates that handle lists

example/index.html

@@ -110,8 +110,24 @@
       }
     });
 
+    var AuthorsPreview = createClass({
+      render: function() {
+        return h('div', {},
+          h('h1', {}, 'Authors'),
+          this.props.widgetsFor('authors').map(function(author, index) {
+            return h('div', {key: index},
+              h('hr', {}),
+              h('strong', {}, author.getIn(['data', 'name'])),
+              author.getIn(['widgets', 'description'])
+            );
+          })
+        );
+      }
+    });
+
     CMS.registerPreviewTemplate("posts", PostPreview);
     CMS.registerPreviewTemplate("general", GeneralPreview);
+    CMS.registerPreviewTemplate("authors", AuthorsPreview);
     CMS.registerPreviewStyle("/example.css");
     CMS.registerEditorComponent({
       id: "youtube",

src/components/PreviewPane/PreviewPane.js

@@ -1,5 +1,6 @@
 import React, { PropTypes } from 'react';
 import ReactDOM from 'react-dom';
+import { Map } from 'immutable';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { ScrollSyncPane } from '../ScrollSync';
 import registry from '../../lib/registry';
@@ -50,6 +51,28 @@ export default class PreviewPane extends React.Component {
     });
   };
 
+  widgetsFor = (name) => {
+    const { fields, entry, getAsset } = this.props;
+    const field = fields && fields.find(f => f.get('name') === name);
+    const nestedFields = field && field.get('fields');
+    const values = entry.getIn(['data', field.get('name')]);
+
+    const widgetFor = (field, value) => {
+      const widget = resolveWidget(field.get('widget'));
+      return (<div key={field.get('name')}>{React.createElement(widget.preview, {
+        key: field.get('name'),
+        value: value && value.get(field.get('name')),
+        field,
+        getAsset,
+      })}</div>);
+    };
+
+    return values ? values.map((value, index) => {
+      const widgets = nestedFields && Map(nestedFields.map(f => [f.get('name'), widgetFor(f, value)]));
+      return Map({ data: value, widgets });
+    }) : null;
+  };
+
   handleIframeRef = (ref) => {
     if (ref) {
       registry.getPreviewStyles().forEach((style) => {
@@ -80,7 +103,9 @@ export default class PreviewPane extends React.Component {
     const previewProps = {
       ...this.props,
       widgetFor: this.widgetFor,
+      widgetsFor: this.widgetsFor,
     };
+
     // We need to use this API in order to pass context to the iframe
     ReactDOM.unstable_renderSubtreeIntoContainer(
       this,