diff --git a/packages/xod-client/src/core/styles/components/CodeMirror.scss b/packages/xod-client/src/core/styles/components/CodeMirror.scss index 2f797471..04e4dc5e 100644 --- a/packages/xod-client/src/core/styles/components/CodeMirror.scss +++ b/packages/xod-client/src/core/styles/components/CodeMirror.scss @@ -416,42 +416,47 @@ span.CodeMirror-selectedtext { background: none; } font-size: $font-size-m; font-weight: 400; } -.cm-s-xod .CodeMirror-gutters { - background: $blackberry-shadow; - color: $emerald; - border: none; -} -.cm-s-xod .CodeMirror-guttermarker, .cm-s-xod .CodeMirror-guttermarker-subtle, .cm-s-xod .CodeMirror-linenumber { color: $emerald; } -.cm-s-xod .CodeMirror-cursor { border-left: 1px solid $white; } -.cm-s-xod div.CodeMirror-selected { background: rgba(255, 255, 255, 0.15); } -.cm-s-xod.CodeMirror-focused div.CodeMirror-selected { background: rgba(255, 255, 255, 0.10); } -.cm-s-xod .CodeMirror-line::selection, .cm-s-xod .CodeMirror-line > span::selection, .cm-s-xod .CodeMirror-line > span > span::selection { background: rgba(255, 255, 255, 0.10); } -.cm-s-xod .CodeMirror-line::-moz-selection, .cm-s-xod .CodeMirror-line > span::-moz-selection, .cm-s-xod .CodeMirror-line > span > span::-moz-selection { background: rgba(255, 255, 255, 0.10); } +.cm-s-xod { + .CodeMirror-gutters { + background: $blackberry-shadow; + color: $emerald; + border: none; + } + .CodeMirror-guttermarker, .CodeMirror-guttermarker-subtle, .CodeMirror-linenumber { color: $emerald; } + .CodeMirror-cursor { border-left: 1px solid $white; } + div.CodeMirror-selected { background: rgba(255, 255, 255, 0.15); } + .cm-s-xod.CodeMirror-focused div.CodeMirror-selected { background: rgba(255, 255, 255, 0.10); } + .CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: rgba(255, 255, 255, 0.10); } + .CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: rgba(255, 255, 255, 0.10); } -.cm-s-xod .CodeMirror-activeline-background { background: rgba(0, 0, 0, 0); } -.cm-s-xod .cm-keyword { color: #E67CDC; } -.cm-s-xod .cm-operator { color: $chalk-bright; } -.cm-s-xod .cm-variable-2 { color: $apricot-light; } -.cm-s-xod .cm-variable-3, .cm-s-xod .cm-type { color: $apricot-light; } -.cm-s-xod .cm-builtin { color: $blueberry; } -.cm-s-xod .cm-atom { color: $red-bright; } -.cm-s-xod .cm-number { color: $red-bright; } -.cm-s-xod .cm-def { color: $blueberry; } -.cm-s-xod .cm-string { color: $apricot-light; } -.cm-s-xod .cm-string-2 { color: $apricot-light; } -.cm-s-xod .cm-comment { color: $light-grey-bright; } -.cm-s-xod .cm-variable { color: $chalk; } -.cm-s-xod .cm-tag { color: $emerald-light; } -.cm-s-xod .cm-meta { color: $emerald; } -.cm-s-xod .cm-attribute { color: $blueberry; } -.cm-s-xod .cm-property { color: $blueberry; } -.cm-s-xod .cm-qualifier { color: $apricot-light; } -.cm-s-xod .cm-variable-3, .cm-s-xod .cm-type { color: $apricot-light; } -.cm-s-xod .cm-error { - color: $white; - background-color: $red; -} -.cm-s-xod .CodeMirror-matchingbracket { - text-decoration: underline; - color: white !important; + .CodeMirror-activeline-background { background: rgba(0, 0, 0, 0); } + .cm-keyword { color: #E67CDC; } + .cm-operator { color: $chalk-bright; } + .cm-variable-2 { color: $apricot-light; } + .cm-variable-3, .cm-type { color: $apricot-light; } + .cm-builtin { color: $blueberry; } + .cm-atom { color: $red-bright; } + .cm-number { color: $red-bright; } + .cm-def { color: $blueberry; } + .cm-string { color: $apricot-light; } + .cm-string-2 { color: $apricot-light; } + .cm-comment { color: $light-grey-bright; } + .cm-variable { color: $chalk; } + .cm-tag { color: $emerald-light; } + .cm-meta { color: $emerald; } + .cm-attribute { color: $blueberry; } + .cm-property { color: $blueberry; } + .cm-qualifier { color: $apricot-light; } + .cm-variable-3, .cm-type { color: $apricot-light; } + .cm-error { + color: $white; + background-color: $red; + } + .cm-trailingspace { + border-bottom: 1px dotted $red; + } + .CodeMirror-matchingbracket { + text-decoration: underline; + color: white !important; + } } diff --git a/packages/xod-client/src/editor/codemirrorXodMode.js b/packages/xod-client/src/editor/codemirrorXodMode.js index eeb06210..79de98d4 100644 --- a/packages/xod-client/src/editor/codemirrorXodMode.js +++ b/packages/xod-client/src/editor/codemirrorXodMode.js @@ -3,6 +3,10 @@ import 'codemirror/addon/mode/simple'; import 'codemirror/addon/mode/overlay'; import 'codemirror/mode/clike/clike'; +import 'codemirror/addon/edit/closebrackets'; +import 'codemirror/addon/edit/trailingspace'; +import 'codemirror/addon/comment/comment'; + import { getTokens } from 'xod-arduino'; (() => { @@ -18,4 +22,34 @@ import { getTokens } from 'xod-arduino'; ); }); CodeMirror.defineMIME('text/x-c++xod', 'xodCpp'); + + const maybeClearLines = (cm, event) => { + if (event.keyCode !== 13) return; + const cursor = cm.getCursor(); + if (cursor.line <= 0) return; + + for ( + let ln = cursor.line; + !/\S/.test(cm.getLine(ln)); + ln-- // eslint-disable-line no-plusplus + ) { + cm.replaceRange( + '', + new CodeMirror.Pos(ln, 0), + new CodeMirror.Pos(ln, cm.getLine(ln).length) + ); + } + }; + + CodeMirror.defineOption('autoClearEmptyLines', false, (cm, value) => { + /* eslint-disable no-param-reassign */ + if (value && !cm.state.clearEmptyLines) { + cm.state.clearEmptyLines = { prev: cm.getCursor() }; + cm.on('keydown', maybeClearLines); + } else if (!value && cm.state.clearEmptyLines) { + cm.off('keydown', maybeClearLines); + cm.state.clearEmptyLines = null; + } + /* eslint-enable no-param-reassign */ + }); })(); diff --git a/packages/xod-client/src/editor/components/CppImplementationEditor.jsx b/packages/xod-client/src/editor/components/CppImplementationEditor.jsx index c815f992..112c2d5b 100644 --- a/packages/xod-client/src/editor/components/CppImplementationEditor.jsx +++ b/packages/xod-client/src/editor/components/CppImplementationEditor.jsx @@ -40,7 +40,12 @@ const CppImplementationEditor = ({ } }, 'Shift-Tab': CM => CM.indentSelection('subtract'), + 'Ctrl-/': 'toggleComment', + 'Cmd-/': 'toggleComment', }, + showTrailingSpace: true, + autoCloseBrackets: true, + autoClearEmptyLines: true, }; if (codeMirror && !refreshed) {