tweak(xod-client): tweak CodeMirror with some addons: toggle comment, showing trailing spaces and auto clearing trailing spaces on empty lines (no issue)

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;
+  }
 }

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 */
+  });
 })();

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) {