Maor UI polish for editing with live preview

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

@@ -0,0 +1,51 @@
+import { Component, PropTypes, Children } from 'react';
+import { List, Record } from 'immutable';
+import _ from 'lodash';
+
+const plugins = { editor: List() };
+
+const catchesNothing = /.^/;
+const EditorComponent = Record({
+  id: null,
+  label: 'unnamed component',
+  icon: 'exclamation-triangle',
+  fields: [],
+  pattern: catchesNothing,
+  fromBlock: function(match) { return {}; },
+  toBlock: function(attributes) { return 'Plugin'; },
+  toPreview: function(attributes) { return 'Plugin'; }
+});
+
+
+class Plugin extends Component {
+  getChildContext() {
+    return { plugins: plugins };
+  }
+
+  render() {
+    return Children.only(this.props.children);
+  }
+}
+
+Plugin.propTypes = {
+  children: PropTypes.element.isRequired
+};
+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)
+  });
+
+
+  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>
       );
     };