Migrating editor into cleaner code

src/components/Editor/Editor.js

@@ -1,60 +0,0 @@
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-
-import MarkdownEditor from '../../components/MarkdownEditor';
-
-import {
-  updateText,
-  replaceText,
-} from '../../actions';
-
-import constants from '../../constants';
-
-import styles from './Editor.scss';
-
-class Editor extends Component {
-  static propTypes = {
-    editMarkdown: React.PropTypes.func.isRequired,
-    text: React.PropTypes.string,
-    replaceText: React.PropTypes.func.isRequired,
-    showHistorySidebar: React.PropTypes.bool.isRequired,
-  }
-
-  render() {
-    return (
-      <div className={styles.container}>
-        <div className={ styles.markdown }>
-          <MarkdownEditor
-            onChange={this.props.editMarkdown}
-            text={this.props.text}
-            replaceText={this.props.replaceText}
-          />
-        </div>
-      </div>
-    );
-  }
-}
-
-const mapStateToProps = (state) => {
-  return {
-    text: state.text.text,
-    editor: state.editor,
-    showHistorySidebar: state.historySidebar.visible,
-    revisions: state.text.revisions,
-  };
-};
-
-const mapDispatchToProps = (dispatch) => {
-  return {
-    editMarkdown: (text) => {
-      dispatch(updateText(text, 'markdown'));
-    },
-  };
-};
-
-Editor = connect(
-  mapStateToProps,
-  mapDispatchToProps,
-)(Editor);
-
-export default Editor;

src/components/Editor/Editor.scss

@@ -1,16 +0,0 @@
-.container {
-  display: flex;
-  padding-top: 48px;
-}
-
-.panel {
-  width: 50%;
-}
-
-.fullscreen {
-  width: 100%;
-}
-
-.markdown {
-  background-color: #ffffff;
-}

src/components/Editor/index.js

@@ -1,2 +0,0 @@
-import Editor from './Editor';
-export default Editor;

src/components/Flex.js

@@ -24,7 +24,7 @@ Flex.defaultProps = {
 };
 
 Flex.propTypes = {
-  children: React.PropTypes.arrayOf(React.PropTypes.node).isRequired,
+  children: React.PropTypes.node.isRequired,
   direction: React.PropTypes.string,
   justify: React.PropTypes.string,
   align: React.PropTypes.string,

src/components/Layout/Layout.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import _truncate from 'lodash/truncate';
 import { connect } from 'react-redux';
 import Link from 'react-router/lib/Link';
 
@@ -9,8 +10,8 @@ import styles from './Layout.scss';
 
 class Layout extends React.Component {
   static propTypes = {
-    actions: React.PropTypes.arrayOf(React.PropTypes.node),
-    title: React.PropTypes.node,
+    actions: React.PropTypes.node,
+    title: React.PropTypes.string,
   }
 
   render() {
@@ -21,7 +22,11 @@ class Layout extends React.Component {
             <Link to="/">{ this.props.teamName }</Link>
           </div>
           <Flex align="center" className={ styles.title }>
-            { this.props.title }
+            { this.props.title ? (
+              <span title={this.props.title}>{ _truncate(this.props.title, 60) }</span>
+            ) : (
+              <span className={ styles.untitled }>Untitled document</span>
+            )}
           </Flex>
           <Flex direction="row">
             <Flex align="center" className={ styles.actions }>

src/components/Layout/Layout.scss

@@ -41,3 +41,7 @@
   text-decoration: none;
   margin-right: 15px;
 }
+
+.untitled {
+  color: #ccc;
+}