Temporary fixes to code mirror editor

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>
     );

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;
   }
 }

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 */

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>
     );
   }

src/utils/base-styles.scss

@@ -18,9 +18,3 @@ html, body {
 a {
   color: #0C77F8;
 }
-
-:global {
-  .Codemirror {
-    height: auto;
-  }
-}