Maor UI polish for editing with live preview

package.json

@@ -68,7 +68,6 @@
   "dependencies": {
     "bricks.js": "^1.7.0",
     "fuzzy": "^0.1.1",
-    "html-to-react": "^1.0.0",
     "js-base64": "^2.1.9",
     "json-loader": "^0.5.4",
     "localforage": "^1.4.2",

src/components/ControlPane.js

@@ -23,7 +23,7 @@ export default class ControlPane extends React.Component {
     const { collection } = this.props;
     if (!collection) { return null; }
     return <div>
-      {collection.get('fields').map((field) => <div key={field.get('name')}>{this.controlFor(field)}</div>)}
+      {collection.get('fields').map((field) => <div key={field.get('name')} className="cms-widget">{this.controlFor(field)}</div>)}
     </div>;
   }
 }

src/components/EntryEditor.css

@@ -1,9 +1,24 @@
+.entryEditor {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
 .container {
-  display: flex
+  display: flex;
+  height: 100%;
+}
+.footer {
+  background: #fff;
+  height: 45px;
+  border-top: 1px solid #e8eae8;
+  padding: 10px 20px;
 }
 .controlPane {
   width: 50%;
-  padding: 0 10px;
+  max-height: 100%;
+  overflow: auto;
+  padding: 0 20px;
+  border-right: 1px solid #e8eae8;
 }
 .previewPane {
   width: 50%;

src/components/EntryEditor.js

@@ -4,27 +4,57 @@ 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={styles.container}>
-      <div className={styles.controlPane}>
-        <ControlPane
-            collection={collection}
-            entry={entry}
-            getMedia={getMedia}
-            onChange={onChange}
-            onAddMedia={onAddMedia}
-            onRemoveMedia={onRemoveMedia}
-        />
+export default class EntryEditor extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+    this.handleResize = this.handleResize.bind(this);
+  }
+
+  componentDidMount() {
+    this.calculateHeight();
+    window.addEventListener('resize', this.handleResize, false);
+  }
+
+  componengWillUnmount() {
+    window.removeEventListener('resize', this.handleResize);
+  }
+
+  handleResize() {
+    this.calculateHeight();
+  }
+
+  calculateHeight() {
+    const height = window.innerHeight - 54;
+    console.log('setting height to %s', height);
+    this.setState({height});
+  }
+
+  render() {
+    const { collection, entry, getMedia, onChange, onAddMedia, onRemoveMedia, onPersist } = this.props;
+    const {height} = this.state;
+
+    return <div className={styles.entryEditor} style={{height}}>
+      <div className={styles.container}>
+        <div className={styles.controlPane}>
+          <ControlPane
+              collection={collection}
+              entry={entry}
+              getMedia={getMedia}
+              onChange={onChange}
+              onAddMedia={onAddMedia}
+              onRemoveMedia={onRemoveMedia}
+          />
+        </div>
+        <div className={styles.previewPane}>
+          <PreviewPane collection={collection} entry={entry} getMedia={getMedia} />
+        </div>
       </div>
-      <div className={styles.previewPane}>
-        <PreviewPane collection={collection} entry={entry} getMedia={getMedia} />
+      <div className={styles.footer}>
+        <button onClick={onPersist}>Save</button>
       </div>
-    </div>
-    <button onClick={onPersist}>Save</button>
-  </div>;
+    </div>;
+  }
 }
 
 EntryEditor.propTypes = {

src/components/Widgets.js

@@ -3,6 +3,8 @@ import UnknownControl from './Widgets/UnknownControl';
 import UnknownPreview from './Widgets/UnknownPreview';
 import StringControl from './Widgets/StringControl';
 import StringPreview from './Widgets/StringPreview';
+import TextControl from './Widgets/TextControl';
+import TextPreview from './Widgets/TextPreview';
 import MarkdownControl from './Widgets/MarkdownControl';
 import MarkdownPreview from './Widgets/MarkdownPreview';
 import ImageControl from './Widgets/ImageControl';
@@ -11,6 +13,7 @@ import DateTimeControl from './Widgets/DateTimeControl';
 import DateTimePreview from './Widgets/DateTimePreview';
 
 registry.registerWidget('string', StringControl, StringPreview);
+registry.registerWidget('text', TextControl, TextPreview);
 registry.registerWidget('markdown', MarkdownControl, MarkdownPreview);
 registry.registerWidget('image', ImageControl, ImagePreview);
 registry.registerWidget('datetime', DateTimeControl, DateTimePreview);

src/components/Widgets/DateTimeControl.js

@@ -18,5 +18,5 @@ export default class DateTimeControl extends React.Component {
 
 DateTimeControl.propTypes = {
   onChange: PropTypes.func.isRequired,
-  value: PropTypes.node,
+  value: PropTypes.object,
 };

src/components/Widgets/MarkdownControl.js

@@ -1,4 +1,5 @@
 import React, { PropTypes } from 'react';
+import registry from '../../lib/registry';
 import RawEditor from './MarkdownControlElements/RawEditor';
 import VisualEditor from './MarkdownControlElements/VisualEditor';
 import { processEditorPlugins } from './richText';
@@ -13,7 +14,8 @@ class MarkdownControl extends React.Component {
   }
 
   componentWillMount() {
-    processEditorPlugins(this.context.plugins.editor);
+    this.useRawEditor();
+    processEditorPlugins(registry.getEditorComponents());
   }
 
   useVisualEditor() {
@@ -28,8 +30,8 @@ class MarkdownControl extends React.Component {
     const { editor, onChange, onAddMedia, getMedia, value } = this.props;
     if (editor.get('useVisualMode')) {
       return (
-        <div>
-          <button onClick={this.useRawEditor}>Switch to Raw Editor</button>
+        <div className='cms-editor-visual'>
+          {null && <button onClick={this.useRawEditor}>Switch to Raw Editor</button>}
           <VisualEditor
               onChange={onChange}
               onAddMedia={onAddMedia}
@@ -41,8 +43,8 @@ class MarkdownControl extends React.Component {
       );
     } else {
       return (
-        <div>
-          <button onClick={this.useVisualEditor}>Switch to Visual Editor</button>
+        <div className='cms-editor-raw'>
+          {null && <button onClick={this.useVisualEditor}>Switch to Visual Editor</button>}
           <RawEditor
               onChange={onChange}
               onAddMedia={onAddMedia}

src/components/Widgets/MarkdownControlElements/plugins.js

@@ -16,23 +16,6 @@ const EditorComponent = Record({
   toPreview: function(attributes) { return 'Plugin'; }
 });
 
-function CMS() {
-  this.registerEditorComponent = (config) => {
-    const configObj = new EditorComponent({
-      id: config.id || config.label.replace(/[^A-Z0-9]+/ig, '_'),
-      label: config.label,
-      icon: config.icon,
-      fields: config.fields,
-      pattern: config.pattern,
-      fromBlock: _.isFunction(config.fromBlock) ? config.fromBlock.bind(null) : null,
-      toBlock: _.isFunction(config.toBlock) ? config.toBlock.bind(null) : null,
-      toPreview: _.isFunction(config.toPreview) ? config.toPreview.bind(null) : config.toBlock.bind(null)
-    });
-
-    plugins.editor = plugins.editor.push(configObj);
-  };
-}
-
 
 class Plugin extends Component {
   getChildContext() {
@@ -51,8 +34,18 @@ Plugin.childContextTypes = {
   plugins: PropTypes.object
 };
 
+export function newEditorPlugin(config) {
+  const configObj = new EditorComponent({
+    id: config.id || config.label.replace(/[^A-Z0-9]+/ig, '_'),
+    label: config.label,
+    icon: config.icon,
+    fields: config.fields,
+    pattern: config.pattern,
+    fromBlock: _.isFunction(config.fromBlock) ? config.fromBlock.bind(null) : null,
+    toBlock: _.isFunction(config.toBlock) ? config.toBlock.bind(null) : null,
+    toPreview: _.isFunction(config.toPreview) ? config.toPreview.bind(null) : config.toBlock.bind(null)
+  });
 
-export const initPluginAPI = () => {
-  window.CMS = new CMS();
-  return Plugin;
-};
+
+  return configObj;
+}

src/components/Widgets/TextControl.js

@@ -0,0 +1,37 @@
+import React, { PropTypes } from 'react';
+
+export default class StringControl extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleChange = this.handleChange.bind(this);
+    this.handleRef = this.handleRef.bind(this);
+  }
+
+  componentDidMount() {
+    this.updateHeight();
+  }
+
+  handleChange(e) {
+    this.props.onChange(e.target.value);
+    this.updateHeight();
+  }
+
+  updateHeight() {
+    if (this.element.scrollHeight > this.element.clientHeight) {
+      this.element.style.height = this.element.scrollHeight + 'px';
+    }
+  }
+
+  handleRef(ref) {
+    this.element = ref;
+  }
+
+  render() {
+    return <textarea ref={this.handleRef} value={this.props.value || ''} onChange={this.handleChange}/>;
+  }
+}
+
+StringControl.propTypes = {
+  onChange: PropTypes.func.isRequired,
+  value: PropTypes.node,
+};

src/components/Widgets/TextPreview.js

@@ -0,0 +1,4 @@
+import StringPreview from './StringPreview';
+
+export default class TextPreview extends StringPreview {
+}

src/components/Widgets/richText.js

@@ -48,8 +48,6 @@ function processEditorPlugins(plugins) {
           <div className="plugin_fields" contentEditable={false}>
             { plugin.fields.map(field => `${field.label}: “${node.data.get(field.name)}”`) }
           </div>
-
-
         </div>
       );
     };

src/containers/App.css

@@ -1,43 +1,3 @@
-.alignable {
-  margin: 0px auto;
-}
-
-@media (max-width: 749px) and (min-width: 495px) {
-  .alignable {
-    width: 495px;
-  }
-}
-
-@media (max-width: 1004px) and (min-width: 750px) {
-  .alignable {
-    width: 750px;
-  }
-}
-
-@media (max-width: 1259px) and (min-width: 1005px) {
-  .alignable {
-    width: 1005px;
-  }
-}
-
-@media (max-width: 1514px) and (min-width: 1260px) {
-  .alignable {
-    width: 1260px;
-  }
-}
-
-@media (max-width: 1769px) and (min-width: 1515px) {
-  .alignable {
-    width: 1515px;
-  }
-}
-
-@media (min-width: 1770px) {
-  .alignable {
-    width: 1770px;
-  }
-}
-
 .main {
-  padding-top: 60px;
+  padding-top: 54px;
 }

src/containers/CollectionPage.css

@@ -0,0 +1,39 @@
+.alignable {
+  margin: 0px auto;
+}
+
+@media (max-width: 749px) and (min-width: 495px) {
+  .alignable {
+    width: 495px;
+  }
+}
+
+@media (max-width: 1004px) and (min-width: 750px) {
+  .alignable {
+    width: 750px;
+  }
+}
+
+@media (max-width: 1259px) and (min-width: 1005px) {
+  .alignable {
+    width: 1005px;
+  }
+}
+
+@media (max-width: 1514px) and (min-width: 1260px) {
+  .alignable {
+    width: 1260px;
+  }
+}
+
+@media (max-width: 1769px) and (min-width: 1515px) {
+  .alignable {
+    width: 1515px;
+  }
+}
+
+@media (min-width: 1770px) {
+  .alignable {
+    width: 1770px;
+  }
+}

src/containers/CollectionPage.js

@@ -4,6 +4,7 @@ import { connect } from 'react-redux';
 import { loadEntries } from '../actions/entries';
 import { selectEntries } from '../reducers';
 import EntryListing from '../components/EntryListing';
+import styles from './CollectionPage.css';
 
 class DashboardPage extends React.Component {
   componentDidMount() {
@@ -27,7 +28,7 @@ class DashboardPage extends React.Component {
       return <h1>No collections defined in your config.yml</h1>;
     }
 
-    return <div>
+    return <div className={styles.alignable}>
       {entries ? <EntryListing collection={collection} entries={entries}/> : 'Loading entries...'}
     </div>;
   }

src/index.css

@@ -43,12 +43,6 @@ h1{
     font-size: 25px;
 }
 
-input{
-  width:100%;
-  padding:3px;
-  font-size:14px;
-  margin-bottom:10px;
-}
 header input{
   margin-bottom:0;
 }
@@ -61,6 +55,59 @@ button{
   cursor: pointer;
 }
 
+:global {
+  & .cms-widget {
+    border-bottom: 1px solid #e8eae8;
+    position: relative;
+  }
+  & .cms-widget:after {
+    content: '';
+    position: absolute;
+    left: 42px;
+    bottom: -7px;
+    width: 12px;
+    height: 12px;
+    background-color: #f2f5f4;
+    -webkit-transform: rotate(45deg);
+    transform: rotate(45deg);
+    z-index: 1;
+    border-right: 1px solid #e8eae8;
+    border-bottom: 1px solid #e8eae8;
+  }
+  & .cms-widget:last-child {
+    border-bottom: none;
+  }
+  & .cms-widget:last-child:after {
+    display: none;
+  }
+  & .cms-control {
+    color: #7c8382;
+    position: relative;
+    padding: 20px 0;
+    & label {
+      color: #AAB0AF;
+      font-size: 12px;
+      margin-bottom: 18px;
+    }
+    & input,
+    & textarea,
+    & select,
+    & .cms-editor-raw {
+      font-family: monospace;
+      display: block;
+      width: 100%;
+      padding: 0;
+      margin: 0;
+      border: none;
+      outline: 0;
+      box-shadow: none;
+      background: 0 0;
+      font-size: 18px;
+      color: #7c8382;
+    }
+  }
+}
+
 :global {
   & .rdt {
     position: relative;

src/index.js

@@ -6,7 +6,6 @@ import registry from './lib/registry';
 import configureStore from './store/configureStore';
 import routes from './routing/routes';
 import history, { syncHistory } from './routing/history';
-import { initPluginAPI } from './plugins';
 import 'file?name=index.html!../example/index.html';
 import './index.css';
 
@@ -15,19 +14,15 @@ const store = configureStore();
 // Create an enhanced history that syncs navigation events with the store
 syncHistory(store);
 
-const Plugin = initPluginAPI();
-
 const el = document.createElement('div');
 el.id = 'root';
 document.body.appendChild(el);
 
 render((
   <Provider store={store}>
-    <Plugin>
-      <Router history={history}>
-        {routes}
-      </Router>
-    </Plugin>
+    <Router history={history}>
+      {routes}
+    </Router>
   </Provider>
 ), el);
 

src/lib/registry.js

@@ -1,7 +1,11 @@
+import {List} from 'immutable';
+import {newEditorPlugin} from '../components/Widgets/MarkdownControlElements/plugins';
+
 const _registry = {
   templates: {},
   previewStyles: [],
-  widgets: {}
+  widgets: {},
+  editorComponents: List([])
 };
 
 export default {
@@ -22,5 +26,11 @@ export default {
   },
   getWidget(name) {
     return _registry.widgets[name];
+  },
+  registerEditorComponent(component) {
+    _registry.editorComponents = _registry.editorComponents.push(newEditorPlugin(component));
+  },
+  getEditorComponents() {
+    return _registry.editorComponents;
   }
 };