Merge pull request #3972 from weseek/imprv/codemirror

Imprv/codemirror

CHANGES.md

@@ -2,6 +2,8 @@
 
 ## v4.2.21-RC
 
+* Improvement: Headers style on built-in editor
+* Improvement: Codemirror is now scrollable one editor height of empty space into view at the bottom of the editor
 * Improvement: Upgrade mongodb driver to fix [NODE-2784](https://jira.mongodb.org/browse/NODE-2784)
 * Support: Upgrade libs
     * connect-mongo

src/client/js/components/PageEditor/CodeMirrorEditor.jsx

@@ -47,6 +47,7 @@ require('codemirror/addon/search/searchcursor');
 require('codemirror/addon/search/match-highlighter');
 require('codemirror/addon/selection/active-line');
 require('codemirror/addon/scroll/annotatescrollbar');
+require('codemirror/addon/scroll/scrollpastend');
 require('codemirror/addon/fold/foldcode');
 require('codemirror/addon/fold/foldgutter');
 require('codemirror/addon/fold/foldgutter.css');
@@ -845,6 +846,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
             tabSize: 4,
             indentUnit: this.props.indentSize,
             lineWrapping: true,
+            scrollPastEnd: true,
             autoRefresh: { force: true }, // force option is enabled by autorefresh.ext.js -- Yuki Takei
             autoCloseTags: true,
             placeholder,

src/client/styles/scss/_on-edit.scss

@@ -187,17 +187,6 @@ body.on-edit {
     .page-editor-editor-container {
       border-right: 1px solid transparent;
 
-      // override CodeMirror styles
-      .CodeMirror {
-        .cm-matchhighlight {
-          background-color: cyan;
-        }
-
-        .CodeMirror-selection-highlight-scrollbar {
-          background-color: darkcyan;
-        }
-      }
-
       // add icon on cursor
       .markdown-table-activated,
       .markdown-link-activated {
@@ -313,11 +302,6 @@ body.on-edit {
   }
 }
 
-// overwrite .CodeMirror pre
-.CodeMirror pre.CodeMirror-line {
-  font-family: $font-family-monospace;
-}
-
 // overwrite .CodeMirror-hints
 .CodeMirror-hints {
   max-height: 30em !important;
@@ -342,11 +326,6 @@ body.on-edit {
   }
 }
 
-// overwrite .CodeMirror-placeholder
-.CodeMirror pre.CodeMirror-placeholder {
-  color: $text-muted;
-}
-
 #tag-edit-button-tooltip {
   .tooltip-inner {
     color: black;

src/client/styles/scss/_override-codemirror.scss

@@ -0,0 +1,36 @@
+.CodeMirror {
+  .cm-header-1 {
+    font-size: 1.8em;
+  }
+  .cm-header-2 {
+    font-size: 1.4em;
+  }
+  .cm-header-3 {
+    font-size: 1.2em;
+  }
+  .cm-header-4 {
+    font-size: 1.1em;
+  }
+  .cm-header-5 {
+    font-size: 1.05em;
+  }
+
+  .cm-matchhighlight {
+    color: $gray-900;
+    background-color: cyan;
+  }
+
+  .CodeMirror-selection-highlight-scrollbar {
+    background-color: darkcyan;
+  }
+
+  // overwrite .CodeMirror-placeholder
+  pre.CodeMirror-placeholder {
+    color: $text-muted;
+  }
+
+  // overwrite .CodeMirror pre
+  pre.CodeMirror-line {
+    font-family: $font-family-monospace;
+  }
+}

src/client/styles/scss/style-app.scss

@@ -10,6 +10,9 @@
 // override bootstrap
 @import 'override-bootstrap';
 
+// override codemirror
+@import 'override-codemirror';
+
 // override react-bootstrap-typeahead styles
 @import 'override-rbt';