Code folding (#382)

client/modules/IDE/components/Editor.jsx

@@ -7,9 +7,15 @@ import 'codemirror/addon/lint/lint';
 import 'codemirror/addon/lint/javascript-lint';
 import 'codemirror/addon/lint/css-lint';
 import 'codemirror/addon/lint/html-lint';
+import 'codemirror/addon/fold/brace-fold';
+import 'codemirror/addon/fold/comment-fold';
+import 'codemirror/addon/fold/foldcode';
+import 'codemirror/addon/fold/foldgutter';
+import 'codemirror/addon/fold/indent-fold';
 import 'codemirror/addon/comment/comment';
 import 'codemirror/keymap/sublime';
 import 'codemirror/addon/search/jump-to-line';
+import 'codemirror/addon/fold/foldgutter.css';
 import { JSHINT } from 'jshint';
 import { CSSLint } from 'csslint';
 import { HTMLHint } from 'htmlhint';
@@ -49,7 +55,8 @@ class Editor extends React.Component {
       inputStyle: 'contenteditable',
       lineWrapping: false,
       fixedGutter: false,
-      gutters: ['CodeMirror-lint-markers'],
+      foldGutter: true,
+      gutters: [/* 'CodeMirror-lint-markers', 'CodeMirror-linenumbers', */'CodeMirror-foldgutter'],
       keyMap: 'sublime',
       lint: {
         onUpdateLinting: debounce((annotations) => {
@@ -71,6 +78,7 @@ class Editor extends React.Component {
       }
     });
 
+
     this._cm.setOption('extraKeys', {
       'Cmd-Enter': () => null,
       'Shift-Cmd-Enter': () => null,

client/styles/components/_editor.scss

@@ -27,6 +27,18 @@
 	padding-left: #{5 / $base-font-size}rem;
 }
 
+.CodeMirror-activeline-background {
+  background-color: rgba(0,0,0,0.025) !important;
+}
+.CodeMirror-linebackground {
+  
+}
+
+.line-runtime-error {
+  background-color: #ffaaaa !important;
+  border-radius: 5px;
+}
+
 .CodeMirror-gutter-wrapper {
   right: 100%;
   top: 0;
@@ -80,6 +92,16 @@
   width: #{48 / $base-font-size}rem;
 }
 
+.CodeMirror-guttermarker-subtle {
+  
+}
+.CodeMirror-foldgutter-folded {
+  
+}
+.CodeMirror-foldgutter-open {
+  
+}
+
 .editor-holder {
   height: calc(100% - #{29 / $base-font-size}rem);
   width: 100%;

webpack.config.dev.js

@@ -56,6 +56,10 @@ module.exports = {
         test: /\.scss$/,
         loaders: ['style', 'css', 'sass']
       },
+      { 
+        test: /\.css$/, 
+        loader: "style-loader!css-loader" 
+      },
       {
         test: /\.(svg|mp3)$/,
         loader: 'file'