Code folding (#382)

This commit is contained in:
Zach Rispoli 2017-07-17 16:07:59 -04:00
parent 8e1a65daed
commit 87de91016b
3 changed files with 35 additions and 1 deletions

View file

@ -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,

View file

@ -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%;

View file

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