Migrating editor into cleaner code

package.json

@@ -90,6 +90,7 @@
     "react-redux": "^4.4.0",
     "react-router": "^2.0.0",
     "react-router-redux": "^4.0.4",
+    "rebass": "^0.2.6",
     "redux": "^3.3.1",
     "redux-logger": "^2.6.1",
     "redux-persist": "3.0.3",

src/Actions/index.js

@@ -1,43 +0,0 @@
-import keyMirror from 'fbjs/lib/keyMirror';
-
-/*
- * Action types
- */
-
-export const UPDATE_TEXT = 'UPDATE_TEXT';
-export const TOGGLE_EDITORS = 'TOGGLE_EDITORS';
-export const ADD_REVISION = 'ADD_REVISION';
-export const REPLACE_TEXT= 'REPLACE_TEXT';
-
-export const SLACK_AUTH_PENDING = 'SLACK_AUTH_PENDING';
-export const SLACK_AUTH_SUCCESS = 'SLACK_AUTH_SUCCESS';
-export const SLACK_AUTH_FAILURE = 'SLACK_AUTH_FAILURE';
-
-/*
- * Other Constants
- */
-
-export const ActiveEditors = keyMirror({
-  MARKDOWN: null,
-  TEXT: null,
-});
-
-/*
- * Action creators
- */
-
-export function updateText(text, editor) {
-  return { type: UPDATE_TEXT, text, editor };
-}
-
-export function toggleEditors(toggledEditor) {
-  return { type: TOGGLE_EDITORS, toggledEditor };
-}
-
-export function addRevision(createdAt) {
-  return { type: ADD_REVISION, createdAt };
-}
-
-export function replaceText(originalText, replacedText) {
-  return { type: REPLACE_TEXT, originalText, replacedText };
-}

src/Components/Header/Header.js

@@ -1,30 +0,0 @@
-import React from 'react';
-
-import styles from './Header.scss';
-import classNames from 'classnames/bind';
-const cx = classNames.bind(styles);
-
-const Header = ({
-                toggleEditors,
-              }) => {
-  return (
-    <div className={ styles.header }>
-      <div className={ styles.headerItem }><i>Beautiful</i> Atlas</div>
-      <div
-        className={ cx('headerItem', 'editorToggle') }
-        style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}
-      >
-        <div>
-          <span className={ styles.textIcon }>Aa</span>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-Header.propTypes = {
-  activeEditors: React.PropTypes.array.isRequired,
-  toggleEditors: React.PropTypes.func.isRequired,
-};
-
-export default Header;

src/Components/Header/Header.scss

@@ -1,61 +0,0 @@
-.header {
-  display: flex;
-  width: 100%;
-  height: 42px;
-  position: fixed;
-  z-index: 9999;
-
-  justify-content: space-between;
-
-  background-color: #111;
-  color: #fff;
-
-  i {
-    color: #fff;
-    font-family: serif;
-  }
-
-  .headerItem {
-    width: 150px;
-    padding: 12px 22px;
-
-    font-size: 15px;
-    font-weight: 300;
-    font-family: "Atlas Grotesk", "Helvetica Neue", sans-serif;
-    text-align: center;
-
-    &:first-child {
-      text-align: left;
-    }
-
-    &:last-child {
-      text-align: right;
-    }
-  }
-
-  .editorToggle div {
-    margin-right: 12px;
-    cursor: pointer;
-    opacity: 0.4;
-    color: #fff;
-
-    &.active {
-      opacity: 1;
-    }
-
-    &:first-child {
-      margin-top: 2px;
-      margin-right: 15px;
-    }
-
-    &:last-child {
-      margin-top: -2px;
-    }
-  }
-
-  .textIcon {
-    font-family: Times, serif;
-    font-size: 20px;
-
-  }
-}

src/Components/Header/index.js

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

src/Components/MarkdownEditor/MarkdownEditor.js

@@ -93,7 +93,7 @@ class MarkdownAtlas extends React.Component {
       mode: 'gfm',
       matchBrackets: true,
       lineWrapping: true,
-      viewportMargin: Infinity,
+      // viewportMargin: Infinity,
       theme: 'atlas',
       extraKeys: {
         Enter: 'newlineAndIndentContinueMarkdownList',
@@ -106,22 +106,20 @@ class MarkdownAtlas extends React.Component {
     // - Emojify
     // -
     return (
-      <div>
+      <Dropzone
-        <Dropzone
+        onDropAccepted={this.onDropAccepted}
-          onDropAccepted={this.onDropAccepted}
+        disableClick={true}
-          disableClick={true}
+        multiple={false}
-          multiple={false}
+        accept={'image/*'}
-          accept={'image/*'}
+        className={styles.container}
-          className={styles.container}
+      >
-        >
+        <Codemirror
-          <Codemirror
+          value={this.props.text}
-            value={this.props.text}
+          onChange={this.onChange}
-            onChange={this.onChange}
+          options={options}
-            options={options}
+          ref="editor"
-            ref="editor"
+        />
-          />
+      </Dropzone>
-        </Dropzone>
-      </div>
     );
   }
 }

src/Components/MarkdownEditor/MarkdownEditor.scss

@@ -1,4 +1,7 @@
 .container {
+  display: flex;
+  flex: 1;
+
   font-weight: 400;
   font-size: 1em;
   line-height: 1.5em;
@@ -9,5 +12,14 @@
 }
 
 @media all and (max-width: 2000px) and (min-width: 960px) {
-  .container {font-size: 1.1em}
+  .container {
+    margin-top: 48px;
+    font-size: 1.1em;
+  }
+}
+
+@media all and (max-width: 960px) {
+  .container {
+    font-size: 0.9em;
+  }
 }

src/Components/TextEditor/TextEditor.js

@@ -1,52 +0,0 @@
-import React from 'react';
-import Editor from 'react-medium-editor';
-import marked from 'marked';
-
-require('medium-editor/dist/css/medium-editor.css');
-require('medium-editor/dist/css/themes/default.css');
-import styles from './TextEditor.scss';
-
-class TextEditor extends React.Component {
-  static propTypes = {
-    text: React.PropTypes.string,
-    onChange: React.PropTypes.func,
-  }
-
-  onChange = (newText) => {
-    if (newText !== this.props.text) {
-      this.props.onChange(newText);
-    }
-  }
-
-  render = () => {
-    return (
-      <div className={ styles.container }>
-        <div></div>
-        <Editor
-          options={{
-            toolbar: {
-              buttons: [
-                'bold',
-                'italic',
-                'underline',
-                'anchor',
-                'unorderedlist',
-                'orderedlist',
-                'h1',
-                'h2',
-                'h3',
-                'quote',
-              ],
-            },
-            placeholder: false,
-          }}
-          text={marked(this.props.text)}
-          onChange={ this.onChange }
-          className={ styles.editor }
-        />
-      </div>
-    );
-  }
-}
-
-export default TextEditor;

src/Components/TextEditor/TextEditor.scss

@@ -1,19 +0,0 @@
-.container {
-  font-weight: 400;
-  font-size: 1em;
-  line-height: 1.5em;
-
-  margin: 0 auto;
-  padding: 2em 3em;
-  max-width: 50em;
-}
-
-.editor {
-  outline: none;
-
-  font-family: 'Atlas Grotesk', 'Helvetica Neue', sans-serif;
-}
-
-@media all and (max-width: 2000px) and (min-width: 960px) {
-  .container {font-size: 1.1em}
-}

src/Components/TextEditor/index.js

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

src/Reducers/index.js

@@ -1,118 +1,13 @@
-import _xor from 'lodash/xor';
-import _last from 'lodash/last';
 import { combineReducers } from 'redux';
 
-import {
-  UPDATE_TEXT,
-  TOGGLE_EDITORS,
-  TOGGLE_HISTORY_SIDEBAR,
-  ADD_REVISION,
-  REPLACE_TEXT,
-  ActiveEditors
-} from '../actions';
-
-const activeEditors = (state = [ActiveEditors.MARKDOWN, ActiveEditors.TEXT], action) => {
-  switch (action.type) {
-    case TOGGLE_EDITORS: {
-      // TODO: A rewrite would be nice
-      const newState = _xor(state, [action.toggledEditor]);
-      if (newState.length > 0) {
-        return newState;
-      } else {
-        return _xor([ActiveEditors.MARKDOWN, ActiveEditors.TEXT], [action.toggledEditor]);
-      }
-    }
-    default:
-      return state;
-  }
-};
-
-const historySidebar = (state = { visible: false }, action) => {
-  switch (action.type) {
-    case TOGGLE_HISTORY_SIDEBAR: {
-      return {
-        ...state,
-        visible: !state.visible,
-      };
-    }
-    default:
-      return state;
-  }
-};
-
-const defaultTest = `# Welcome to Beautiful Atlas
-
-This is just a small preview here's what you can do:
-
-- Write markdown or rich text, you choose
-- Dont' worry about saving
-- One document for now
-- More to come
-`
-
-const textDefaultState = {
-  text: defaultTest,
-  revisions: [],
-  unsavedChanges: false,
-};
-
-const text = (state = textDefaultState, action) => {
-  const lastRevision = _last(state.revisions);
-
-  switch (action.type) {
-    case UPDATE_TEXT: {
-      let unsavedChanges = false;
-      if (lastRevision && lastRevision.text !== state.text) {
-        unsavedChanges = true;
-      }
-      return {
-        ...state,
-        unsavedChanges,
-        text: action.text,
-      };
-    }
-    case ADD_REVISION: {
-      // Create new revision if it differs from the previous one
-      if (!lastRevision || lastRevision.text !== state.text) {
-        const lastId = lastRevision ? lastRevision.id : 0;
-        return {
-          ...state,
-          revisions: [
-            ...state.revisions,
-            {
-              id: lastId + 1,
-              text: state.text,
-              created_at: action.createdAt,
-            },
-          ],
-          unsavedChanges: false,
-        };
-      } else {
-        return state;
-      }
-    }
-    case REPLACE_TEXT: {
-      const newText = state.text.replace(action.originalText, action.replacedText);
-
-      return {
-        ...state,
-        text: newText,
-      };
-    }
-    default:
-      return state;
-  }
-};
-
-import team from './team';
-import user from './user';
 import atlases from './atlases';
+import team from './team';
+import editor from './editor';
+import user from './user';
 
 export default combineReducers({
-  activeEditors,
-  historySidebar,
-  text,
-  user,
-  team,
   atlases,
+  team,
+  editor,
+  user,
 });

src/actions/EditorActions.js

@@ -1,5 +1,9 @@
 import makeActionCreator from '../utils/actions';
 
-export const TOGGLE_PREVIEW = 'TOGGLE_PREVIEW';
+// export const TOGGLE_PREVIEW = 'TOGGLE_PREVIEW';
+export const UPDATE_TEXT = 'UPDATE_TEXT';
+export const REPLACE_TEXT = 'REPLACE_TEXT';
 
-const togglePreview = makeActionCreator(TOGGLE_PREVIEW);
+// export const togglePreview = makeActionCreator(TOGGLE_PREVIEW);
+export const updateText = makeActionCreator(UPDATE_TEXT, 'text');
+export const replaceText = makeActionCreator(REPLACE_TEXT, 'originalText', 'replacedText');

src/assets/styles/codemirror.css

@@ -0,0 +1,340 @@
+:global {
+  /* BASICS */
+
+  .CodeMirror {
+    /* Set height, width, borders, and global font properties here */
+    font-family: monospace;
+    height: 300px;
+    color: black;
+  }
+
+  /* PADDING */
+
+  .CodeMirror-lines {
+    padding: 4px 0; /* Vertical padding around content */
+  }
+  .CodeMirror pre {
+    padding: 0 4px; /* Horizontal padding of content */
+  }
+
+  .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
+    background-color: white; /* The little square between H and V scrollbars */
+  }
+
+  /* GUTTER */
+
+  .CodeMirror-gutters {
+    border-right: 1px solid #ddd;
+    background-color: #f7f7f7;
+    white-space: nowrap;
+  }
+  .CodeMirror-linenumbers {}
+  .CodeMirror-linenumber {
+    padding: 0 3px 0 5px;
+    min-width: 20px;
+    text-align: right;
+    color: #999;
+    white-space: nowrap;
+  }
+
+  .CodeMirror-guttermarker { color: black; }
+  .CodeMirror-guttermarker-subtle { color: #999; }
+
+  /* CURSOR */
+
+  .CodeMirror-cursor {
+    border-left: 1px solid black;
+    border-right: none;
+    width: 0;
+  }
+  /* Shown when moving in bi-directional text */
+  .CodeMirror div.CodeMirror-secondarycursor {
+    border-left: 1px solid silver;
+  }
+  .cm-fat-cursor .CodeMirror-cursor {
+    width: auto;
+    border: 0;
+    background: #7e7;
+  }
+  .cm-fat-cursor div.CodeMirror-cursors {
+    z-index: 1;
+  }
+
+  .cm-animate-fat-cursor {
+    width: auto;
+    border: 0;
+    -webkit-animation: blink 1.06s steps(1) infinite;
+    -moz-animation: blink 1.06s steps(1) infinite;
+    animation: blink 1.06s steps(1) infinite;
+    background-color: #7e7;
+  }
+  @-moz-keyframes blink {
+    0% {}
+    50% { background-color: transparent; }
+    100% {}
+  }
+  @-webkit-keyframes blink {
+    0% {}
+    50% { background-color: transparent; }
+    100% {}
+  }
+  @keyframes blink {
+    0% {}
+    50% { background-color: transparent; }
+    100% {}
+  }
+
+  /* Can style cursor different in overwrite (non-insert) mode */
+  .CodeMirror-overwrite .CodeMirror-cursor {}
+
+  .cm-tab { display: inline-block; text-decoration: inherit; }
+
+  .CodeMirror-ruler {
+    border-left: 1px solid #ccc;
+    position: absolute;
+  }
+
+  /* DEFAULT THEME */
+
+  .cm-s-default .cm-header {color: blue;}
+  .cm-s-default .cm-quote {color: #090;}
+  .cm-negative {color: #d44;}
+  .cm-positive {color: #292;}
+  .cm-header, .cm-strong {font-weight: bold;}
+  .cm-em {font-style: italic;}
+  .cm-link {text-decoration: underline;}
+  .cm-strikethrough {text-decoration: line-through;}
+
+  .cm-s-default .cm-keyword {color: #708;}
+  .cm-s-default .cm-atom {color: #219;}
+  .cm-s-default .cm-number {color: #164;}
+  .cm-s-default .cm-def {color: #00f;}
+  .cm-s-default .cm-variable,
+  .cm-s-default .cm-punctuation,
+  .cm-s-default .cm-property,
+  .cm-s-default .cm-operator {}
+  .cm-s-default .cm-variable-2 {color: #05a;}
+  .cm-s-default .cm-variable-3 {color: #085;}
+  .cm-s-default .cm-comment {color: #a50;}
+  .cm-s-default .cm-string {color: #a11;}
+  .cm-s-default .cm-string-2 {color: #f50;}
+  .cm-s-default .cm-meta {color: #555;}
+  .cm-s-default .cm-qualifier {color: #555;}
+  .cm-s-default .cm-builtin {color: #30a;}
+  .cm-s-default .cm-bracket {color: #997;}
+  .cm-s-default .cm-tag {color: #170;}
+  .cm-s-default .cm-attribute {color: #00c;}
+  .cm-s-default .cm-hr {color: #999;}
+  .cm-s-default .cm-link {color: #00c;}
+
+  .cm-s-default .cm-error {color: #f00;}
+  .cm-invalidchar {color: #f00;}
+
+  .CodeMirror-composing { border-bottom: 2px solid; }
+
+  /* Default styles for common addons */
+
+  div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;}
+  div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
+  .CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
+  .CodeMirror-activeline-background {background: #e8f2ff;}
+
+  /* STOP */
+
+  /* The rest of this file contains styles related to the mechanics of
+     the editor. You probably shouldn't touch them. */
+
+  .CodeMirror {
+    position: relative;
+    overflow: hidden;
+    background: white;
+  }
+
+  .CodeMirror-scroll {
+    overflow: scroll !important; /* Things will break if this is overridden */
+    /* 30px is the magic margin used to hide the element's real scrollbars */
+    /* See overflow: hidden in .CodeMirror */
+    margin-bottom: -30px; margin-right: -30px;
+    padding-bottom: 30px;
+    height: 100%;
+    outline: none; /* Prevent dragging from highlighting the element */
+    position: relative;
+  }
+  .CodeMirror-sizer {
+    position: relative;
+    border-right: 30px solid transparent;
+  }
+
+  /* The fake, visible scrollbars. Used to force redraw during scrolling
+     before actual scrolling happens, thus preventing shaking and
+     flickering artifacts. */
+  .CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
+    position: absolute;
+    z-index: 6;
+    display: none;
+  }
+  .CodeMirror-vscrollbar {
+    right: 0; top: 0;
+    overflow-x: hidden;
+    overflow-y: scroll;
+  }
+  .CodeMirror-hscrollbar {
+    bottom: 0; left: 0;
+    overflow-y: hidden;
+    overflow-x: scroll;
+  }
+  .CodeMirror-scrollbar-filler {
+    right: 0; bottom: 0;
+  }
+  .CodeMirror-gutter-filler {
+    left: 0; bottom: 0;
+  }
+
+  .CodeMirror-gutters {
+    position: absolute; left: 0; top: 0;
+    min-height: 100%;
+    z-index: 3;
+  }
+  .CodeMirror-gutter {
+    white-space: normal;
+    height: 100%;
+    display: inline-block;
+    vertical-align: top;
+    margin-bottom: -30px;
+    /* Hack to make IE7 behave */
+    *zoom:1;
+    *display:inline;
+  }
+  .CodeMirror-gutter-wrapper {
+    position: absolute;
+    z-index: 4;
+    background: none !important;
+    border: none !important;
+  }
+  .CodeMirror-gutter-background {
+    position: absolute;
+    top: 0; bottom: 0;
+    z-index: 4;
+  }
+  .CodeMirror-gutter-elt {
+    position: absolute;
+    cursor: default;
+    z-index: 4;
+  }
+  .CodeMirror-gutter-wrapper {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+  }
+
+  .CodeMirror-lines {
+    cursor: text;
+    min-height: 1px; /* prevents collapsing before first draw */
+  }
+  .CodeMirror pre {
+    /* Reset some styles that the rest of the page might have set */
+    -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
+    border-width: 0;
+    background: transparent;
+    font-family: inherit;
+    font-size: inherit;
+    margin: 0;
+    white-space: pre;
+    word-wrap: normal;
+    line-height: inherit;
+    color: inherit;
+    z-index: 2;
+    position: relative;
+    overflow: visible;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-font-variant-ligatures: none;
+    font-variant-ligatures: none;
+  }
+  .CodeMirror-wrap pre {
+    word-wrap: break-word;
+    white-space: pre-wrap;
+    word-break: normal;
+  }
+
+  .CodeMirror-linebackground {
+    position: absolute;
+    left: 0; right: 0; top: 0; bottom: 0;
+    z-index: 0;
+  }
+
+  .CodeMirror-linewidget {
+    position: relative;
+    z-index: 2;
+    overflow: auto;
+  }
+
+  .CodeMirror-widget {}
+
+  .CodeMirror-code {
+    outline: none;
+  }
+
+  /* Force content-box sizing for the elements where we expect it */
+  .CodeMirror-scroll,
+  .CodeMirror-sizer,
+  .CodeMirror-gutter,
+  .CodeMirror-gutters,
+  .CodeMirror-linenumber {
+    -moz-box-sizing: content-box;
+    box-sizing: content-box;
+  }
+
+  .CodeMirror-measure {
+    position: absolute;
+    width: 100%;
+    height: 0;
+    overflow: hidden;
+    visibility: hidden;
+  }
+
+  .CodeMirror-cursor { position: absolute; }
+  .CodeMirror-measure pre { position: static; }
+
+  div.CodeMirror-cursors {
+    visibility: hidden;
+    position: relative;
+    z-index: 3;
+  }
+  div.CodeMirror-dragcursors {
+    visibility: visible;
+  }
+
+  .CodeMirror-focused div.CodeMirror-cursors {
+    visibility: visible;
+  }
+
+  .CodeMirror-selected { background: #d9d9d9; }
+  .CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
+  .CodeMirror-crosshair { cursor: crosshair; }
+  .CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }
+  .CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }
+
+  .cm-searching {
+    background: #ffa;
+    background: rgba(255, 255, 0, .4);
+  }
+
+  /* IE7 hack to prevent it from returning funny offsetTops on the spans */
+  .CodeMirror span { *vertical-align: text-bottom; }
+
+  /* Used to force a border model for a node */
+  .cm-force-border { padding-right: .1px; }
+
+  @media print {
+    /* Hide the cursor when printing */
+    .CodeMirror div.CodeMirror-cursors {
+      visibility: hidden;
+    }
+  }
+
+  /* See issue #2901 */
+  .cm-tab-wrap-hack:after { content: ''; }
+
+  /* Help users use markselection to safely style text background */
+  span.CodeMirror-selectedtext { background: none; }
+}

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/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),
+    actions: React.PropTypes.node,
-    title: 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;
+}

src/index.js

@@ -20,7 +20,7 @@ import 'utils/base-styles.scss';
 import 'fonts/atlas/atlas.css';
 
 import Home from 'scenes/Home';
-// import App from 'scenes/App';
+import Editor from 'scenes/Editor';
 import Dashboard from 'scenes/Dashboard';
 import Atlas from 'scenes/Atlas';
 import SlackAuth from 'scenes/SlackAuth';
@@ -50,6 +50,7 @@ persistStore(store, {
 
           <Route path="/dashboard" component={ Dashboard } onEnter={ requireAuth } />
           <Route path="/atlas/:id" component={ Atlas } onEnter={ requireAuth } />
+          <Route path="/atlas/:id/new" component={ Editor } onEnter={ requireAuth } />
 
           <Route path="/editor" component={Dashboard} onEnter={ requireAuth } />
 

src/reducers/EditorReducer.js

@@ -1,62 +0,0 @@
-const defaultTest = `# Welcome to Beautiful Atlas
-
-This is just a small preview here's what you can do:
-
-- Write markdown or rich text, you choose
-- Dont' worry about saving
-- One document for now
-- More to come
-`
-
-const state = {
-  previousTest: null,
-  text: null,
-  unsavedChanges: false,
-};
-
-const text = (state = state, action) => {
-
-  switch (action.type) {
-    case UPDATE_TEXT: {
-      let unsavedChanges = false;
-      if (lastRevision && lastRevision.text !== state.text) {
-        unsavedChanges = true;
-      }
-      return {
-        ...state,
-        unsavedChanges,
-        text: action.text,
-      };
-    }
-    case ADD_REVISION: {
-      // Create new revision if it differs from the previous one
-      if (!lastRevision || lastRevision.text !== state.text) {
-        const lastId = lastRevision ? lastRevision.id : 0;
-        return {
-          ...state,
-          revisions: [
-            ...state.revisions,
-            {
-              id: lastId + 1,
-              text: state.text,
-              created_at: action.createdAt,
-            },
-          ],
-          unsavedChanges: false,
-        };
-      } else {
-        return state;
-      }
-    }
-    case REPLACE_TEXT: {
-      const newText = state.text.replace(action.originalText, action.replacedText);
-
-      return {
-        ...state,
-        text: newText,
-      };
-    }
-    default:
-      return state;
-  }
-};

src/reducers/editor.js

@@ -0,0 +1,54 @@
+import {
+  UPDATE_TEXT,
+  REPLACE_TEXT,
+} from 'actions/EditorActions';
+
+const initialState = {
+  originalText: null,
+  text: null,
+  title: null,
+  unsavedChanges: false,
+};
+
+const parseHeader = (text) => {
+  const firstLine = text.split(/\r?\n/)[0];
+  const match = firstLine.match(/^#+ +(.*)$/);
+
+  if (match) {
+    return match[1];
+  }
+}
+
+const editor = (state = initialState, action) => {
+  switch (action.type) {
+    case UPDATE_TEXT: {
+      const title = parseHeader(action.text);
+
+      console.log(title);
+
+      let unsavedChanges = false;
+      if (state.originalText !== action.text) {
+        unsavedChanges = true;
+      }
+      return {
+        ...state,
+        unsavedChanges,
+        text: action.text,
+        title: title || state.title,
+      };
+    }
+    case REPLACE_TEXT: {
+      const newText = state.text.replace(action.originalText, action.replacedText);
+
+      return {
+        ...state,
+        unsavedChanges: true,
+        text: newText,
+      };
+    }
+    default:
+      return state;
+  }
+};
+
+export default editor;

src/scenes/App/App.js

@@ -1,57 +0,0 @@
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-
-import styles from './App.scss';
-
-import {
-  toggleEditors,
-  addRevision,
- } from '../../actions';
-
-import Header from '../../components/Header';
-import Editor from '../../components/Editor';
-
-class App extends Component {
-  static propTypes = {
-    children: React.PropTypes.element,
-    addRevision: React.PropTypes.func.isRequired,
-    unsavedChanges: React.PropTypes.bool.isRequired,
-  }
-
-  render() {
-    return (
-      <div className={ styles.container }>
-        <Header
-          activeEditors={this.props.activeEditors}
-          addRevision={this.props.addRevision}
-          unsavedChanges={this.props.unsavedChanges}
-        />
-        <div className={ styles.content }>
-          <Editor />
-        </div>
-      </div>
-    );
-  }
-}
-
-const mapStateToProps = (state) => {
-  return {
-    activeEditors: state.activeEditors,
-    unsavedChanges: state.text.unsavedChanges,
-  };
-};
-
-const mapDispatchToProps = (dispatch) => {
-  return {
-    addRevision: () => {
-      dispatch(addRevision());
-    },
-  };
-};
-
-App = connect(
-  mapStateToProps,
-  mapDispatchToProps,
-)(App);
-
-export default App;

src/scenes/App/index.js

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

src/scenes/Atlas/Atlas.js

@@ -47,7 +47,7 @@ class Atlas extends React.Component {
     return (
       <Layout
         actions={(
-          <Link to="/new-document">New document</Link>
+          <Link to={ `/atlas/${data.id}/new` }>New document</Link>
         )}
         title={ data.name }
       >

src/scenes/Editor/Editor.js

@@ -0,0 +1,70 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+
+import {
+  updateText,
+  replaceText,
+} from 'actions/EditorActions';
+
+import styles from './Editor.scss';
+import 'assets/styles/codemirror.css';
+
+import Layout from 'components/Layout';
+import Flex from 'components/Flex';
+import MarkdownEditor from 'components/MarkdownEditor';
+
+import SaveAction from './components/SaveAction';
+import MoreAction from './components/MoreAction';
+
+class Editor extends Component {
+  static propTypes = {
+    updateText: React.PropTypes.func.isRequired,
+    replaceText: React.PropTypes.func.isRequired,
+    text: React.PropTypes.string,
+    title: React.PropTypes.string,
+  }
+
+  render() {
+    return (
+      <Layout
+        actions={(
+          <Flex direction="row" align="center">
+            <SaveAction />
+            <MoreAction />
+          </Flex>
+        )}
+        title={ this.props.title }
+      >
+        <Flex flex={ true } align="center">
+          <MarkdownEditor
+            onChange={ this.props.updateText }
+            text={ this.props.text }
+            replaceText={this.props.replaceText}
+          />
+        </Flex>
+      </Layout>
+    );
+  }
+}
+
+const mapStateToProps = (state) => {
+  return {
+    text: state.editor.text,
+    title: state.editor.title,
+  };
+};
+
+const mapDispatchToProps = (dispatch) => {
+  return bindActionCreators({
+    updateText,
+    replaceText,
+  }, dispatch)
+};
+
+Editor = connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(Editor);
+
+export default Editor;

src/scenes/Editor/components/MoreAction.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Arrow } from 'rebass';
+
+const MoreAction = (props) => {
+  return (
+    <div>
+      <button>More <Arrow /></button>
+    </div>
+  );
+};
+
+export default MoreAction;

src/scenes/Editor/components/SaveAction.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Arrow } from 'rebass';
+
+const SaveAction = (props) => {
+  return (
+    <div>
+      Save
+    </div>
+  );
+};
+
+export default SaveAction;