r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

Merge branch 'feature-code-folding' of https://github.com/zrispo/p5.js-web-editor into zrispo-feature-code-folding

Browse source
This commit is contained in:
Cassie Tarakajian 2017-08-01 13:48:49 -04:00
commit 273fc08b19
2 changed files with 39 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
client/modules/IDE/components/Editor.jsx
View file

@ -7,6 +7,11 @@ 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/searchcursor';
@ -60,7 +65,9 @@ class Editor extends React.Component {
inputStyle: 'contenteditable',
lineWrapping: false,
fixedGutter: false,
gutters: ['CodeMirror-lint-markers'],
foldGutter: true,
foldOptions: { widget: '\u2026' },
gutters: ['CodeMirror-foldgutter'],
keyMap: 'sublime',
highlightSelectionMatches: true, // highlight current search match
lint: {
@ -83,6 +90,7 @@ class Editor extends React.Component {
}
});
this._cm.setOption('extraKeys', {
[`${metaKey}-Enter`]: () => null,
[`Shift-${metaKey}-Enter`]: () => null,

30
client/styles/vendors/_codemirror.scss vendored
View file

@ -336,3 +336,33 @@ div.CodeMirror-dragcursors {
/* Help users use markselection to safely style text background */
span.CodeMirror-selectedtext { background: none; }
/* CODE FOLDING (FOLDGUTTER.JS) */
.CodeMirror-foldmarker {
text-shadow: -1px 0 #ed225d, 0 1px #ed225d, 1px 0 #ed225d, 0 -1px #ed225d;
color: #FFF;
/* background-color: rgba(237, 34, 93, 0.42); */
/* border-radius: 3px; */
font-weight: bold;
font-family: arial;
line-height: .3;
cursor: pointer;
opacity: 0.75;
}
.CodeMirror-foldgutter {
width: 2.7em;
}
.CodeMirror-foldgutter-open,
.CodeMirror-foldgutter-folded {
cursor: pointer;
padding-bottom: 0.4em;
text-align: right;
line-height: 1.0;
}
.CodeMirror-foldgutter-open:after {
content: "\25BE";
}
.CodeMirror-foldgutter-folded:after {
content: "\25B8";
}