Migrating editor into cleaner code

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
-          onDropAccepted={this.onDropAccepted}
-          disableClick={true}
-          multiple={false}
-          accept={'image/*'}
-          className={styles.container}
-        >
-          <Codemirror
-            value={this.props.text}
-            onChange={this.onChange}
-            options={options}
-            ref="editor"
-          />
-        </Dropzone>
-      </div>
+      <Dropzone
+        onDropAccepted={this.onDropAccepted}
+        disableClick={true}
+        multiple={false}
+        accept={'image/*'}
+        className={styles.container}
+      >
+        <Codemirror
+          value={this.props.text}
+          onChange={this.onChange}
+          options={options}
+          ref="editor"
+        />
+      </Dropzone>
     );
   }
 }

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;