From e8bbc1f4d1d7b4387d8a1b17ecab48f338d9ccc4 Mon Sep 17 00:00:00 2001
From: Jori Lallo <jtlallo@gmail.com>
Date: Sun, 15 May 2016 15:54:38 -0500
Subject: [PATCH] Temporary fixes to code mirror editor

---
 src/Components/MarkdownEditor/MarkdownEditor.js   | 4 ++--
 src/Components/MarkdownEditor/MarkdownEditor.scss | 7 ++++++-
 src/components/MarkdownEditor/codemirror.scss     | 8 +++-----
 src/scenes/Editor/Editor.js                       | 4 ++--
 src/utils/base-styles.scss                        | 6 ------
 5 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/src/Components/MarkdownEditor/MarkdownEditor.js b/src/Components/MarkdownEditor/MarkdownEditor.js
index 3b7fbb0a4..dc0ce436e 100644
--- a/src/Components/MarkdownEditor/MarkdownEditor.js
+++ b/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',
@@ -104,7 +104,6 @@ class MarkdownAtlas extends React.Component {
     // http://codepen.io/lubelski/pen/fnGae
     // TODO:
     // - Emojify
-    // -
     return (
       <Dropzone
         onDropAccepted={this.onDropAccepted}
@@ -118,6 +117,7 @@ class MarkdownAtlas extends React.Component {
           onChange={this.onChange}
           options={options}
           ref="editor"
+          className={styles.codeMirrorContainer}
         />
       </Dropzone>
     );
diff --git a/src/Components/MarkdownEditor/MarkdownEditor.scss b/src/Components/MarkdownEditor/MarkdownEditor.scss
index 5c57851a3..5ff16acf9 100644
--- a/src/Components/MarkdownEditor/MarkdownEditor.scss
+++ b/src/Components/MarkdownEditor/MarkdownEditor.scss
@@ -11,9 +11,14 @@
   max-width: 50em;
 }
 
+.codeMirrorContainer {
+  display: flex;
+  flex: 1;
+}
+
 @media all and (max-width: 2000px) and (min-width: 960px) {
   .container {
-    margin-top: 48px;
+    // margin-top: 48px;
     font-size: 1.1em;
   }
 }
diff --git a/src/components/MarkdownEditor/codemirror.scss b/src/components/MarkdownEditor/codemirror.scss
index 399e885d7..39947fae7 100644
--- a/src/components/MarkdownEditor/codemirror.scss
+++ b/src/components/MarkdownEditor/codemirror.scss
@@ -11,14 +11,12 @@
 :global {
   /* Custom styling */
   .cm-s-atlas.CodeMirror {
-    background: #ffffff;
+    background: #fff;
     color: #202020;
     font-family: 'Atlas Typewriter', 'Cousine', 'Monaco', monospace;
     font-weight: 300;
-    height: auto;
-  }
-  .cm-s-atlas div.CodeMirror-selected {
-    background: #90CAF9;
+    height: auto; // This will break layout for some reason. TODO: investigate
+    width: 100%;
   }
 
   /* Disable ondrag cursor for file uploads */
diff --git a/src/scenes/Editor/Editor.js b/src/scenes/Editor/Editor.js
index acfcadd2e..0be9184a5 100644
--- a/src/scenes/Editor/Editor.js
+++ b/src/scenes/Editor/Editor.js
@@ -36,13 +36,13 @@ class Editor extends Component {
         )}
         title={ this.props.title }
       >
-        <Flex flex={ true } align="center">
+
           <MarkdownEditor
             onChange={ this.props.updateText }
             text={ this.props.text }
             replaceText={this.props.replaceText}
           />
-        </Flex>
+
       </Layout>
     );
   }
diff --git a/src/utils/base-styles.scss b/src/utils/base-styles.scss
index a5c9427d4..672393a6c 100644
--- a/src/utils/base-styles.scss
+++ b/src/utils/base-styles.scss
@@ -18,9 +18,3 @@ html, body {
 a {
   color: #0C77F8;
 }
-
-:global {
-  .Codemirror {
-    height: auto;
-  }
-}
\ No newline at end of file