Fixed MarkdownEditor outgrow etc

src/Components/MarkdownEditor/MarkdownEditor.js

@@ -6,6 +6,8 @@ import 'codemirror/addon/edit/continuelist';
 import 'codemirror/addon/display/placeholder.js';
 import Dropzone from 'react-dropzone';
 
+import ClickablePadding from './components/ClickablePadding';
+
 import styles from './MarkdownEditor.scss';
 import './codemirror.scss';
 
@@ -85,8 +87,20 @@ class MarkdownAtlas extends React.Component {
     });
   }
 
+  onPaddingTopClick = () => {
+    const cm = this.getEditorInstance();
+    console.log(cm)
+    cm.setCursor(0, 0);
+    cm.focus();
+  }
+
+  onPaddingBottomClick = () => {
+    const cm = this.getEditorInstance();
+    cm.setCursor(cm.lineCount(), 0);
+    cm.focus();
+  }
+
   render = () => {
-    // https://github.com/jbt/markdown-editor/blob/master/index.html
     const options = {
       readOnly: false,
       lineNumbers: false,
@@ -112,6 +126,7 @@ class MarkdownAtlas extends React.Component {
         accept={'image/*'}
         className={styles.container}
       >
+        <ClickablePadding onClick={ this.onPaddingTopClick } />
         <Codemirror
           value={this.props.text}
           onChange={this.onChange}
@@ -119,6 +134,7 @@ class MarkdownAtlas extends React.Component {
           ref="editor"
           className={styles.codeMirrorContainer}
         />
+        <ClickablePadding onClick={ this.onPaddingBottomClick } />
       </Dropzone>
     );
   }

src/Components/MarkdownEditor/MarkdownEditor.scss

@@ -1,18 +1,18 @@
 .container {
   display: flex;
   flex: 1;
+  flex-direction: column;
 
   font-weight: 400;
   font-size: 1em;
   line-height: 1.5em;
 
-  padding: 2em 3em;
+  padding: 0 3em;
   max-width: 50em;
 }
 
 .codeMirrorContainer {
-  display: flex;
-  flex: 1;
+  width: 100%;
 }
 
 @media all and (max-width: 2000px) and (min-width: 960px) {

src/components/Layout/Layout.js

@@ -6,17 +6,20 @@ import HeaderMenu from './components/HeaderMenu';
 import Flex from 'components/Flex';
 
 import styles from './Layout.scss';
+import classNames from 'classnames/bind';
+const cx = classNames.bind(styles);
 
 class Layout extends React.Component {
   static propTypes = {
     actions: React.PropTypes.node,
     title: React.PropTypes.node,
+    fixed: React.PropTypes.bool,
   }
 
   render() {
     return (
       <div className={ styles.container }>
-        <div className={ styles.header }>
+        <div className={ cx(styles.header, { fixed: this.props.fixed }) }>
           <div className={ styles.teamName }>
             <Link to="/">{ this.props.teamName }</Link>
           </div>

src/components/Layout/Layout.scss

@@ -8,6 +8,15 @@
   width: 100%;
 }
 
+.fixed {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 900;
+  background: #fff;
+}
+
 .header {
   display: flex;
   justify-content: space-between;

src/components/Layout/components/Title/Title.js

@@ -35,4 +35,4 @@ Title.propTypes = {
   placeholder: React.PropTypes.string,
 }
 
-export default Title;
+export default Title;

src/components/MarkdownEditor/components/ClickablePadding/ClickablePadding.js

@@ -0,0 +1,18 @@
+import React from 'react';
+
+const styles = {
+  paddingTop: "100px",
+  cursor: "text",
+};
+
+const ClickablePadding = (props) => {
+  return (
+    <div style={ styles } onClick={ props.onClick }>&nbsp;</div>
+  )
+};
+
+ClickablePadding.propTypes = {
+  onClick: React.PropTypes.func,
+};
+
+export default ClickablePadding;

src/components/MarkdownEditor/components/ClickablePadding/index.js

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

src/scenes/Editor/Editor.js

@@ -44,6 +44,7 @@ class Editor extends Component {
           </Flex>
         )}
         title={ title }
+        fixed={ true }
       >
         <MarkdownEditor
           onChange={ this.props.updateText }