diff --git a/client/modules/IDE/components/Editor.jsx b/client/modules/IDE/components/Editor.jsx index 585f3772..f7940d4b 100644 --- a/client/modules/IDE/components/Editor.jsx +++ b/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, diff --git a/client/styles/components/_editor.scss b/client/styles/components/_editor.scss index ad455a00..cf2a744b 100644 --- a/client/styles/components/_editor.scss +++ b/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%; diff --git a/webpack.config.dev.js b/webpack.config.dev.js index acb9f5e0..5f5e2626 100644 --- a/webpack.config.dev.js +++ b/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'