Support for YAML content

src/components/ControlPane.js

@@ -1,14 +1,14 @@
 import React, { PropTypes } from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import Widgets from './Widgets';
+import {resolveWidget} from './Widgets';
 
 export default class ControlPane extends React.Component {
   controlFor(field) {
     const { entry, getMedia, onChange, onAddMedia, onRemoveMedia } = this.props;
-    const widget = Widgets[field.get('widget')] || Widgets._unknown;
+    const widget = resolveWidget(field.get('widget'));
     return <div className="cms-control">
       <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)),

src/components/EntryEditor.css

@@ -0,0 +1,10 @@
+.container {
+  display: flex
+}
+.controlPane {
+  width: 50%;
+  padding: 0 10px;
+}
+.previewPane {
+  width: 50%;
+}

src/components/EntryEditor.js

@@ -2,13 +2,14 @@ import React, { PropTypes } from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ControlPane from './ControlPane';
 import PreviewPane from './PreviewPane';
+import styles from './EntryEditor.css';
 
 export default function EntryEditor({ collection, entry, getMedia, onChange, onAddMedia, onRemoveMedia, onPersist }) {
   return <div>
     <h1>Entry in {collection.get('label')}</h1>
     <h2>{entry && entry.get('title')}</h2>
-    <div className="cms-container" style={styles.container}>
-      <div className="cms-control-pane" style={styles.controlPane}>
+    <div className={styles.container}>
+      <div className={styles.controlPane}>
         <ControlPane
             collection={collection}
             entry={entry}
@@ -18,7 +19,7 @@ export default function EntryEditor({ collection, entry, getMedia, onChange, onA
             onRemoveMedia={onRemoveMedia}
         />
       </div>
-      <div className="cms-preview-pane" style={styles.pane}>
+      <div className={styles.previewPane}>
         <PreviewPane collection={collection} entry={entry} getMedia={getMedia} />
       </div>
     </div>
@@ -26,20 +27,6 @@ export default function EntryEditor({ collection, entry, getMedia, onChange, onA
   </div>;
 }
 
-const styles = {
-  container: {
-    display: 'flex'
-  },
-  controlPane: {
-    width: '50%',
-    paddingLeft: '10px',
-    paddingRight: '10px'
-  },
-  pane: {
-    width: '50%'
-  }
-};
-
 EntryEditor.propTypes = {
   collection: ImmutablePropTypes.map.isRequired,
   entry: ImmutablePropTypes.map.isRequired,

src/components/EntryListing.js

@@ -60,7 +60,8 @@ export default class EntryListing extends React.Component {
 
   cardFor(collection, entry, link) {
     //const { entry, getMedia, onChange, onAddMedia, onRemoveMedia } = this.props;
-    const card = Cards[collection.getIn(['card', 'type'])] || Cards._unknown;
+    const cartType = collection.getIn(['card', 'type']) || 'alltype';
+    const card = Cards[cartType] || Cards._unknown;
     return React.createElement(card, {
       key: entry.get('slug'),
       collection: collection,

src/components/PreviewPane.js

@@ -1,15 +1,15 @@
 import React, { PropTypes } from 'react';
 import { render } from 'react-dom';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import { getPreviewTemplate, getPreviewStyles } from '../lib/registry';
-import Widgets from './Widgets';
+import registry from '../lib/registry';
+import { resolveWidget } from './Widgets';
 import styles from './PreviewPane.css';
 
 class Preview extends React.Component {
   previewFor(field) {
     const { entry, getMedia } = this.props;
-    const widget = Widgets[field.get('widget')] || Widgets._unknown;
-    return React.createElement(widget.Preview, {
+    const widget = resolveWidget(field.get('widget'));
+    return React.createElement(widget.preview, {
       field: field,
       value: entry.getIn(['data', field.get('name')]),
       getMedia: getMedia,
@@ -46,8 +46,8 @@ export default class PreviewPane extends React.Component {
   widgetFor(name) {
     const { collection, entry, getMedia } = this.props;
     const field  = collection.get('fields').find((field) => field.get('name') === name);
-    const widget = Widgets[field.get('widget')] || Widgets._unknown;
-    return React.createElement(widget.Preview, {
+    const widget = resolveWidget(field.get('widget'));
+    return React.createElement(widget.preview, {
       field: field,
       value: entry.getIn(['data', field.get('name')]),
       getMedia: getMedia,
@@ -56,14 +56,14 @@ export default class PreviewPane extends React.Component {
 
   renderPreview() {
     const props = Object.assign({}, this.props, {widgetFor: this.widgetFor});
-    const component = getPreviewTemplate(props.collection.get('name')) || Preview;
+    const component = registry.getPreviewTemplate(props.collection.get('name')) || Preview;
 
     render(React.createElement(component, props), this.previewEl);
   }
 
   handleIframeRef(ref) {
     if (ref) {
-      getPreviewStyles().forEach((style) => {
+      registry.getPreviewStyles().forEach((style) => {
         const linkEl = document.createElement('link');
         linkEl.setAttribute('rel', 'stylesheet');
         linkEl.setAttribute('href', style);
@@ -79,7 +79,7 @@ export default class PreviewPane extends React.Component {
     const { collection } = this.props;
     if (!collection) { return null; }
 
-    return <iframe className={styles.frame} ref={this.handleIframeRef}></iframe>
+    return <iframe className={styles.frame} ref={this.handleIframeRef}></iframe>;
   }
 }
 

src/components/Widgets.js

@@ -1,3 +1,4 @@
+import registry from '../lib/registry';
 import UnknownControl from './Widgets/UnknownControl';
 import UnknownPreview from './Widgets/UnknownPreview';
 import StringControl from './Widgets/StringControl';
@@ -6,25 +7,15 @@ import MarkdownControl from './Widgets/MarkdownControl';
 import MarkdownPreview from './Widgets/MarkdownPreview';
 import ImageControl from './Widgets/ImageControl';
 import ImagePreview from './Widgets/ImagePreview';
+import DateTimeControl from './Widgets/DateTimeControl';
+import DateTimePreview from './Widgets/DateTimePreview';
 
+registry.registerWidget('string', StringControl, StringPreview);
+registry.registerWidget('markdown', MarkdownControl, MarkdownPreview);
+registry.registerWidget('image', ImageControl, ImagePreview);
+registry.registerWidget('datetime', DateTimeControl, DateTimePreview);
+registry.registerWidget('_unknown', UnknownControl, UnknownPreview);
 
-const Widgets = {
-  _unknown: {
-    Control: UnknownControl,
-    Preview: UnknownPreview
-  },
-  string: {
-    Control: StringControl,
-    Preview: StringPreview
-  },
-  markdown: {
-    Control: MarkdownControl,
-    Preview: MarkdownPreview
-  },
-  image: {
-    Control: ImageControl,
-    Preview: ImagePreview
-  }
-};
-
-export default Widgets;
+export function resolveWidget(name) {
+  return registry.getWidget(name) || registry.getWidget('_unknown');
+}