Customizing styles of hints. Highlighting active line. Shortcut comments

Frontend Angular 4/.angular-cli.json

@@ -23,6 +23,7 @@
                 "../node_modules/font-awesome/css/font-awesome.css",
                 "styles/app.scss",
                 "styles/console.css",
+                "styles/hints.css",
                 "../node_modules/tippy.js/dist/tippy.css",
                 "../node_modules/codemirror/lib/codemirror.css",
                 "../node_modules/codemirror/addon/hint/show-hint.css",

Frontend Angular 4/src/app/layout/matefun/codemirror/hint_words.js

+// English words
+
+let EN_default_words = [
+  'squareroot', 'rgb', 'rect', 'circ', 'line', 'poli', 'join', 'color', 'move', 'rotate', 'scale', 'toFig', 'line3D', 'sphere', 'cylinder', 'cube', 'ring', 'scale3D', 'range', 'first', 'rest', 'A'
+]
+
+var EN_keywords = [
+  "include"
+  ,"set","in"
+  ,"if", "or" 
+  ,"isEmpty"
+];
+
+let EN_types = [
+  "Red", "Green", "Blue", "Black","White","Gray","Yellow","FigEmpty", "[]"
+  ,"R", "Fig", "Fig3D", "Color", "color3D", "join3D", "rotate3D", "move3D"
+]
+
+let EN_functions = [
+  "abs", "acos", "acosh", "all", "and", "any", "appendFile", "asTypeOf",
+  "asin", "asinh", "atan", "atan2", "atanh", "break", "catch", "ceiling",
+  "compare", "concat", "concatMap", "const", "cos", "cosh", "curry",
+  "cycle", "decodeFloat", "div", "divMod", "drop", "dropWhile", "either",
+  "elem", "encodeFloat", "enumFrom", "enumFromThen", "enumFromThenTo",
+  "enumFromTo", "error", "even", "exp", "exponent", "fail", "filter",
+  "flip", "floatDigits", "floatRadix", "floatRange", "floor", "fmap",
+  "foldl", "foldl1", "foldr", "foldr1", "fromEnum", "fromInteger",
+  "fromIntegral", "fromRational", "fst", "gcd", "getChar", "getContents",
+  "getLine", "head", "id", "init", "interact", "ioError", "isDenormalized",
+  "isIEEE", "isInfinite", "isNaN", "isNegativeZero", "iterate", "last",
+  "lcm", "length", "lex", "lines", "log", "logBase", "lookup", "map",
+  "mapM", "mapM_", "max", "maxBound", "maximum", "maybe", "min", "minBound",
+  "minimum", "mod", "negate", "not", "notElem", "null", "odd", "or",
+  "otherwise", "pi", "pred", "print", "product", "properFraction",
+  "putChar", "putStr", "putStrLn", "quot", "quotRem", "read", "readFile",
+  "readIO", "readList", "readLn", "readParen", "reads", "readsPrec",
+  "realToFrac", "recip", "rem", "repeat", "replicate", "return", "reverse",
+  "round", "scaleFloat", "scanl", "scanl1", "scanr", "scanr1", "seq",
+  "sequence", "sequence_", "show", "showChar", "showList", "showParen",
+  "showString", "shows", "showsPrec", "significand", "signum", "sin",
+  "sinh", "snd", "span", "splitAt", "sqrt", "subtract", "succ", "sum",
+  "tail", "take", "takeWhile", "tan", "tanh", "toEnum", "toInteger",
+  "toRational", "truncate", "uncurry", "undefined", "unlines", "until",
+  "unwords", "unzip", "unzip3", "userError", "words", "writeFile", "zip",
+  "zip3", "zipWith", "zipWith3"
+]
+
+// Spanish words
+
+let ES_default_words = [
+  'red', 'sen', 'raizcuad', 'rgb', 'rect', 'circ', 'linea', 'poli', 'juntar', 'color', 'mover', 'rotar', 'escalar', 'aFig', 'linea3D', 'esfera', 'cilindro', 'cubo', 'anillo', 'juntar3D', 'color3D', 'mover3D', 'rotar3D', 'escalar3D', 'rango', 'primero', 'resto', 'A'
+]
+
+var ES_keywords = [
+  "incluir"
+  ,"conj","en"
+  ,"si", "o" 
+  ,"esVacia"
+];
+
+let ES_types = [
+  "Rojo", "Verde", "Azul", "Negro","Blanco", "Gris","Amarillo", "FigVacia", "[]"
+  ,"R", "Fig", "Color"
+]
+
+let ES_functions = [
+  "abs", "acos", "acosh", "all", "and", "any", "appendFile", "asTypeOf",
+  "asin", "asinh", "atan", "atan2", "atanh", "break", "catch", "ceiling",
+  "compare", "concat", "concatMap", "const", "cos", "cosh", "curry",
+  "cycle", "decodeFloat", "div", "divMod", "drop", "dropWhile", "either",
+  "elem", "encodeFloat", "enumFrom", "enumFromThen", "enumFromThenTo",
+  "enumFromTo", "error", "even", "exp", "exponent", "fail", "filter",
+  "flip", "floatDigits", "floatRadix", "floatRange", "floor", "fmap",
+  "foldl", "foldl1", "foldr", "foldr1", "fromEnum", "fromInteger",
+  "fromIntegral", "fromRational", "fst", "gcd", "getChar", "getContents",
+  "getLine", "head", "id", "init", "interact", "ioError", "isDenormalized",
+  "isIEEE", "isInfinite", "isNaN", "isNegativeZero", "iterate", "last",
+  "lcm", "length", "lex", "lines", "log", "logBase", "lookup", "map",
+  "mapM", "mapM_", "max", "maxBound", "maximum", "maybe", "min", "minBound",
+  "minimum", "mod", "negate", "not", "notElem", "null", "odd", "or",
+  "otherwise", "pi", "pred", "print", "product", "properFraction",
+  "putChar", "putStr", "putStrLn", "quot", "quotRem", "read", "readFile",
+  "readIO", "readList", "readLn", "readParen", "reads", "readsPrec",
+  "realToFrac", "recip", "rem", "repeat", "replicate", "return", "reverse",
+  "round", "scaleFloat", "scanl", "scanl1", "scanr", "scanr1", "seq",
+  "sequence", "sequence_", "show", "showChar", "showList", "showParen",
+  "showString", "shows", "showsPrec", "significand", "signum", "sin",
+  "sinh", "snd", "span", "splitAt", "sqrt", "subtract", "succ", "sum",
+  "tail", "take", "takeWhile", "tan", "tanh", "toEnum", "toInteger",
+  "toRational", "truncate", "uncurry", "undefined", "unlines", "until",
+  "unwords", "unzip", "unzip3", "userError", "words", "writeFile", "zip",
+  "zip3", "zipWith", "zipWith3"
+]
+
+module.exports = {
+  EN_words: function() {
+     return EN_default_words.concat(EN_keywords).concat(EN_types).concat(EN_functions);
+  },
+  ES_words: function() {
+    return ES_default_words.concat(ES_keywords).concat(ES_types).concat(ES_functions);
+ }
+}

Frontend Angular 4/src/app/layout/matefun/codemirror/matefun-mode-EN.js

@@ -25,7 +25,7 @@
     var specialRE = /[(),;[\]`{}]/;
   var whiteCharRE = /[ \t\v\f]/; // newlines are handled in tokenizer
 
-  var defualt_words = [];
+  const hintWords = require('./hint_words');
 
   var anyWord = CodeMirror.hint.anyword;
   CodeMirror.hint.anyword = function(cm) {
@@ -39,7 +39,7 @@
     }
     var inner = anyWord(cm, { word: /[\w$\-\_]+/ }) || {from: from, to: to, list: []};
 
-    var filtered_words = defualt_words.filter(w => w.indexOf(term) === 0);
+    var filtered_words = hintWords.EN_words().filter(w => w.indexOf(term) === 0);
 
     for(var i= 0; i < filtered_words.length; i++){
       if (inner.list.indexOf(filtered_words[i]) === -1)

Frontend Angular 4/src/app/layout/matefun/codemirror/matefun-mode-ES.js

@@ -25,6 +25,30 @@
     var specialRE = /[(),;[\]`{}]/;
   var whiteCharRE = /[ \t\v\f]/; // newlines are handled in tokenizer
 
+  const hintWords = require('./hint_words');
+
+  var anyWord = CodeMirror.hint.anyword;
+  CodeMirror.hint.anyword = function(cm) {
+    var cur = cm.getCursor(), token = cm.getTokenAt(cur)
+    var term, from = CodeMirror.Pos(cur.line, token.start), to = cur
+    if (token.start < cur.ch && /[\w\-\_]/.test(token.string.charAt(cur.ch - token.start - 1))) {
+      term = token.string.substr(0, cur.ch - token.start)
+    } else {
+      term = ""
+      from = cur
+    }
+    var inner = anyWord(cm, { word: /[\w$\-\_]+/ }) || {from: from, to: to, list: []};
+
+    var filtered_words = hintWords.ES_words().filter(w => w.indexOf(term) === 0);
+
+    for(var i= 0; i < filtered_words.length; i++){
+      if (inner.list.indexOf(filtered_words[i]) === -1)
+        inner.list.push(filtered_words[i]);
+    }
+
+    return inner;
+  };
+
   function normal(source, setState) {
     if (source.eatWhile(whiteCharRE)) {
       return null;

Frontend Angular 4/src/app/layout/matefun/matefun.component.ts

@@ -39,6 +39,8 @@ import 'codemirror/addon/search/search';
 import 'codemirror/addon/search/matchesonscrollbar';
 import 'codemirror/addon/search/jump-to-line';
 import 'codemirror/addon/edit/matchbrackets';
+import 'codemirror/addon/selection/active-line';
+import 'codemirror/addon/comment/comment.js';
 
 import './codemirror/matefun-mode-ES.js'
 import './codemirror/matefun-mode-EN.js'
@@ -81,6 +83,7 @@ export class MateFunComponent {
         lineNumbers: true,
         lineWrapping : true,
         matchBrackets: true,
+        styleActiveLine: true,
         extraKeys: {"Ctrl-Space": "autocomplete"},
         mode: {
             name: "matefun-EN", 
@@ -414,6 +417,7 @@ export class MateFunComponent {
     }
 
     archivoModificado(event){
+        if (!event.ctrlKey && !event.shiftKey && !event.altKey){
             if (/^[a-zA-Z\-\_]$/.test(event.key))
                 this.codemirror.instance.showHint(event);
             if(this.copiaNombreArchivo!=this.archivo.nombre || this.copiaContenidoArchivo != this.archivo.contenido){
@@ -422,6 +426,9 @@ export class MateFunComponent {
                 this.modificado = false;
             }
         }
+        if (event.ctrlKey && event.shiftKey && event.key == 'K')
+            this.codemirror.instance.toggleComment();
+    }
 
     guardarArchivo(){
         var regex = /^[A-Z]/

Frontend Angular 4/src/styles/hints.css

+.CodeMirror-hints {
+  position: absolute;
+  z-index: 10;
+  overflow: hidden;
+  list-style: none;
+  
+  margin: 0;
+  padding: 2px;
+  box-shadow: 2px 3px 5px rgba(0,0,0,.2);
+  border-radius: 3px;
+  border: 1px solid rgb(43, 43, 43) !important;
+  background: black !important;
+  font-size: 90%;
+  font-family: monospace;
+  
+  max-height: 20em;
+  overflow-y: auto;
+}
+
+.CodeMirror-hint {
+  margin: 0;
+  padding: 0 4px;
+  border-radius: 2px;
+  white-space: pre;
+  color: white !important;
+  cursor: pointer;
+}
+
+li.CodeMirror-hint-active {
+  background: rgb(21, 117, 226) !important;
+  color: white;
+}