lexgui 0.1.13 → 0.1.15

package/build/components/codeeditor.js

@@ -29,6 +29,10 @@ function firstNonspaceIndex(str) {
     return str.search(/\S|$/);
 }
 
+function deleteElement(el) {
+    if(el) el.remove();
+}
+
 let ASYNC_ENABLED = true;
 
 function doAsync( fn, ms ) {
@@ -106,9 +110,6 @@ class CodeEditor {
 
         CodeEditor.__instances.push( this );
 
-        this.disable_edition = options.disable_edition ?? false;
-
-        this.skip_info = options.skip_info;
         this.base_area = area;
         this.area = new LX.Area( { className: "lexcodeeditor", height: "auto", no_append: true } );
 
@@ -129,14 +130,21 @@ class CodeEditor {
         this.root.tabIndex = -1;
         area.attach( this.root );
 
-        this.root.addEventListener( 'keydown', this.processKey.bind(this), true);
+        this.skipCodeInfo = options.skip_info ?? false;
+        this.disableEdition = options.disable_edition ?? false;
+
+        if( !this.disableEdition )
+        {
+            this.root.addEventListener( 'keydown', this.processKey.bind(this), true);
+            this.root.addEventListener( 'focus', this.processFocus.bind(this, true) );
+            this.root.addEventListener( 'focusout', this.processFocus.bind(this, false) );
+        }
+       
         this.root.addEventListener( 'mousedown', this.processMouse.bind(this) );
         this.root.addEventListener( 'mouseup', this.processMouse.bind(this) );
         this.root.addEventListener( 'mousemove', this.processMouse.bind(this) );
         this.root.addEventListener( 'click', this.processMouse.bind(this) );
         this.root.addEventListener( 'contextmenu', this.processMouse.bind(this) );
-        this.root.addEventListener( 'focus', this.processFocus.bind(this, true) );
-        this.root.addEventListener( 'focusout', this.processFocus.bind(this, false) );
 
         // Cursors and selection
 
@@ -195,50 +203,100 @@ class CodeEditor {
         this.tabSpaces = 4;
         this.maxUndoSteps = 16;
         this.lineHeight = 20;
+        this.defaultSingleLineCommentToken = "//";
         this.charWidth = 8; //this.measureChar();
         this._lastTime = null;
 
-        this.languages = [
-            'Plain Text', 'JavaScript', 'CSS', 'GLSL', 'WGSL', 'JSON', 'XML' 
-        ];
+        this.pairKeys = {
+            "\"": "\"",
+            "'": "'",
+            "(": ")",
+            "{": "}",
+            "[": "]"
+        };
+
+        this.stringKeys = { // adding @ because some words are always true in (e.g. constructor..)
+            "@\"": "\"", 
+            "@'": "'"
+        };
+
+        // Scan tokens..
+        setInterval( this.scanWordSuggestions.bind(this), 2000 );
+
+        this.languages = {
+            'Plain Text': { },
+            'JavaScript': { },
+            'C++': { },
+            'CSS': { },
+            'GLSL': { },
+            'WGSL': { },
+            'JSON': { },
+            'XML': { },
+            'Python': { },
+            'Batch': { blockComments: false, singleLineCommentToken: '::' }
+        };
+
         this.specialKeys = [
             'Backspace', 'Enter', 'ArrowUp', 'ArrowDown', 
             'ArrowRight', 'ArrowLeft', 'Delete', 'Home',
             'End', 'Tab', 'Escape'
         ];
         this.keywords = {
-            'JavaScript': ['var', 'let', 'const', 'this', 'in', 'of', 'true', 'false', 'new', 'function', 'NaN', 'static', 'class', 'constructor', 'null', 'typeof', 'debugger'],
+            'JavaScript': ['var', 'let', 'const', 'this', 'in', 'of', 'true', 'false', 'new', 'function', 'NaN', 'static', 'class', 'constructor', 'null', 'typeof', 'debugger', 'abstract',
+                          'arguments', 'extends', 'instanceof'],
+            'C++': ['int', 'float', 'double', 'bool', 'char', 'wchar_t', 'const', 'static_cast', 'dynamic_cast', 'new', 'delete', 'void', 'true', 'false', 'auto', 'struct', 'typedef', 'nullptr', 
+                    'NULL', 'unsigned'],
             'GLSL': ['true', 'false', 'function', 'int', 'float', 'vec2', 'vec3', 'vec4', 'mat2x2', 'mat3x3', 'mat4x4', 'struct'],
             'CSS': ['body', 'html', 'canvas', 'div', 'input', 'span', '.'],
             'WGSL': ['var', 'let', 'true', 'false', 'fn', 'bool', 'u32', 'i32', 'f16', 'f32', 'vec2f', 'vec3f', 'vec4f', 'mat2x2f', 'mat3x3f', 'mat4x4f', 'array', 'atomic', 'struct',
                     'sampler', 'sampler_comparison', 'texture_depth_2d', 'texture_depth_2d_array', 'texture_depth_cube', 'texture_depth_cube_array', 'texture_depth_multisampled_2d',
                     'texture_external', 'texture_1d', 'texture_2d', 'texture_2d_array', 'texture_3d', 'texture_cube', 'texture_cube_array', 'texture_storage_1d', 'texture_storage_2d',
-                    'texture_storage_2d_array', 'texture_storage_3d']
+                    'texture_storage_2d_array', 'texture_storage_3d'],
+            'Python': ['False', 'def', 'None', 'True', 'in', 'is', 'and', 'lambda', 'nonlocal', 'not', 'or'],
+            'Batch': ['set', 'SET', 'echo', 'ECHO', 'off', 'OFF', 'del', 'DEL', 'defined', 'DEFINED', 'setlocal', 'SETLOCAL', 'enabledelayedexpansion', 'ENABLEDELAYEDEXPANSION', 'driverquery', 
+                      'DRIVERQUERY', 'print', 'PRINT']
         };
         this.utils = { // These ones don't have hightlight, used as suggestions to autocomplete only...
             'JavaScript': ['querySelector', 'body', 'addEventListener', 'removeEventListener', 'remove', 'sort', 'keys', 'filter', 'isNaN', 'parseFloat', 'parseInt', 'EPSILON', 'isFinite',
-                          'bind', 'prototype', 'length', 'assign', 'entries', 'values', 'concat', 'substring', 'substr', 'splice', 'slice', 'buffer', 'appendChild', 'createElement'],
-            'WGSL': ['textureSample']
+                          'bind', 'prototype', 'length', 'assign', 'entries', 'values', 'concat', 'substring', 'substr', 'splice', 'slice', 'buffer', 'appendChild', 'createElement', 'prompt',
+                          'alert'],
+            'WGSL': ['textureSample'],
+            'Python': ['abs', 'all', 'any', 'ascii', 'bin', 'bool', 'bytearray', 'bytes', 'callable', 'chr', 'classmethod', 'compile', 'complex', 'delattr', 'dict', 'dir', 'divmod', 
+                      'enumerate', 'eval', 'exec', 'filter', 'float', 'format', 'frozenset', 'getattr', 'globals', 'hasattr', 'hash', 'help', 'hex', 'id', 'input', 'int', 'isinstance',
+                      'issubclass', 'iter', 'len', 'list', 'locals', 'map', 'max', 'memoryview', 'min', 'next', 'object', 'oct', 'open', 'ord', 'pow', 'print', 'property', 'range', 'repr', 
+                      'reversed', 'round', 'set', 'setattr', 'slice', 'sorted', 'staticmethod', 'str', 'sum', 'super', 'tuple', 'type', 'vars', 'zip']
         };
         this.types = {
-            'JavaScript': ['Object', 'String', 'Function', 'Boolean', 'Symbol', 'Error', 'Number']
+            'JavaScript': ['Object', 'String', 'Function', 'Boolean', 'Symbol', 'Error', 'Number', 'TextEncoder', 'TextDecoder'],
+            'Python': ['int', 'type', 'float', 'map', 'list', 'ArithmeticError', 'AssertionError', 'AttributeError', 'Exception', 'EOFError', 'FloatingPointError', 'GeneratorExit', 
+                      'ImportError', 'IndentationError', 'IndexError', 'KeyError', 'KeyboardInterrupt', 'LookupError', 'MemoryError', 'NameError', 'NotImplementedError', 'OSError',
+                      'OverflowError', 'ReferenceError', 'RuntimeError', 'StopIteration', 'SyntaxError', 'TabError', 'SystemError', 'SystemExit', 'TypeError', 'UnboundLocalError', 
+                      'UnicodeError', 'UnicodeEncodeError', 'UnicodeDecodeError', 'UnicodeTranslateError', 'ValueError', 'ZeroDivisionError' ],
+            'C++': ['uint8_t', 'uint16_t', 'uint32_t']
         };
         this.builtin = {
-            'JavaScript': ['document', 'console', 'window', 'navigator'],
-            'CSS': ['*', '!important']
+            'JavaScript': ['document', 'console', 'window', 'navigator', 'performance'],
+            'CSS': ['*', '!important'],
+            'C++': ['vector', 'list', 'map']
         };
         this.statementsAndDeclarations = {
-            'JavaScript': ['for', 'if', 'else', 'case', 'switch', 'return', 'while', 'continue', 'break', 'do', 'import',
-                            'from', 'throw', 'async', 'try', 'catch'],
+            'JavaScript': ['for', 'if', 'else', 'case', 'switch', 'return', 'while', 'continue', 'break', 'do', 'import', 'from', 'throw', 'async', 'try', 'catch', 'await'],
+            'C++': ['std', 'for', 'if', 'else', 'return', 'continue', 'break', 'case', 'switch', 'while', 'glm'],
             'GLSL': ['for', 'if', 'else', 'return', 'continue', 'break'],
-            'WGSL': ['const','for', 'if', 'else', 'return', 'continue', 'break', 'storage', 'read', 'uniform']
+            'WGSL': ['const','for', 'if', 'else', 'return', 'continue', 'break', 'storage', 'read', 'uniform'],
+            'Python': ['if', 'raise', 'del', 'import', 'return', 'elif', 'try', 'else', 'while', 'as', 'except', 'with', 'assert', 'finally', 'yield', 'break', 'for', 'class', 'continue', 
+                      'global', 'pass'],
+            'Batch': ['if', 'IF', 'for', 'FOR', 'in', 'IN', 'do', 'DO', 'call', 'CALL', 'goto', 'GOTO', 'exit', 'EXIT']
         };
         this.symbols = {
             'JavaScript': ['<', '>', '[', ']', '{', '}', '(', ')', ';', '=', '|', '||', '&', '&&', '?', '??'],
+            'C++': ['<', '>', '[', ']', '{', '}', '(', ')', ';', '=', '|', '||', '&', '&&', '?', '::'],
             'JSON': ['[', ']', '{', '}', '(', ')'],
             'GLSL': ['[', ']', '{', '}', '(', ')'],
             'WGSL': ['[', ']', '{', '}', '(', ')', '->'],
-            'CSS': ['{', '}', '(', ')', '*']
+            'CSS': ['{', '}', '(', ')', '*'],
+            'Python': ['<', '>', '[', ']', '(', ')', '='],
+            'Batch': ['[', ']', '(', ')', '%'],
         };
 
         // Action keys
@@ -323,7 +381,7 @@ class CodeEditor {
 
             this.resetCursorPos( CodeEditor.CURSOR_LEFT );
             if(idx > 0) this.cursorToString(cursor, prestring);
-            this._refreshCodeInfo(cursor.line + 1, cursor.position);
+            this._refreshCodeInfo(cursor.line, cursor.position);
             this.code.scrollLeft = 0;
 
             if( e.shiftKey && !e.cancelShift )
@@ -335,7 +393,7 @@ class CodeEditor {
                 this.startSelection(cursor);
                 var string = this.code.lines[ln].substring(idx, last_pos);
                 this.selection.selectInline(idx, cursor.line, this.measureString(string));
-            } else
+            } else if( !e.keepSelection )
                 this.endSelection();
         });
 
@@ -411,7 +469,7 @@ class CodeEditor {
 
                     var letter = this.getCharAtPos( cursor );
                     if(!letter) {
-                        this.selection.toX = (this.code.lines[cursor.line].length - 1);
+                        this.selection.toX = this.code.lines[cursor.line].length;
                         this.cursorToPosition(cursor, this.selection.toX);
                     }
                     
@@ -517,13 +575,16 @@ class CodeEditor {
                     }
                 }
                 else if( cursor.line > 0 ) {
-
+                    
+                    if( e.shiftKey ) {
+                        if(!this.selection) this.startSelection(cursor);
+                    }
+                        
                     this.lineUp( cursor );
                     this.resetCursorPos( CodeEditor.CURSOR_LEFT );
                     this.cursorToPosition( cursor, this.code.lines[cursor.line].length );
 
                     if( e.shiftKey ) {
-                        if(!this.selection) this.startSelection(cursor);
                         this.selection.toX = cursor.position;
                         this.selection.toY--;
                         this.processSelection(null, true);
@@ -582,17 +643,22 @@ class CodeEditor {
                 }
                 else if( this.code.lines[ cursor.line + 1 ] !== undefined ) {
                     
+                    if( e.shiftKey ) {
+                        if(!this.selection) this.startSelection(cursor);
+                        e.cancelShift = true;
+                        e.keepSelection = true;
+                    }
+
                     this.lineDown( cursor );
-                    e.cancelShift = true;
                     this.actions['Home'].callback(cursor.line, cursor, e);
-                    this.hideAutoCompleteBox();
-
+                    
                     if( e.shiftKey ) {
-                        if(!this.selection) this.startSelection(cursor);
                         this.selection.toX = cursor.position;
                         this.selection.toY++;
                         this.processSelection(null, true);
                     }
+
+                    this.hideAutoCompleteBox();
                 }
             }
         });
@@ -621,7 +687,7 @@ class CodeEditor {
     }
 
     // This can be used to empty all text...
-    setText( text = "" ) {
+    setText( text = "", lang ) {
 
         let new_lines = text.split('\n');
         this.code.lines = [].concat(new_lines);
@@ -632,6 +698,11 @@ class CodeEditor {
         this.cursorToLine(cursor, new_lines.length); // Already substracted 1
         this.cursorToPosition(cursor, lastLine.length);
         this.processLines();
+
+        if( lang )
+        {
+            this._changeLanguage( lang );
+        }
     }
 
     appendText( text ) {
@@ -703,8 +774,9 @@ class CodeEditor {
             this.addTab(name, true, title);
             text = text.replaceAll('\r', '');
             this.code.lines = text.split('\n');
-            this.processLines();
             this._refreshCodeInfo();
+            this._changeLanguageFromExtension( LX.getExtension(name) );
+            this.processLines();
         };
 
         if(file.constructor == String)
@@ -713,7 +785,6 @@ class CodeEditor {
             LX.request({ url: filename, success: text => {
 
                 const name = filename.substring(filename.lastIndexOf('/') + 1);
-                this._changeLanguageFromExtension( LX.getExtension(name) );
                 inner_add_tab( text, name, filename );
             } });
         }
@@ -722,7 +793,6 @@ class CodeEditor {
             const fr = new FileReader();
             fr.readAsText( file );
             fr.onload = e => { 
-                this._changeLanguageFromExtension( LX.getExtension(file.name) );
                 const text = e.currentTarget.result;
                 inner_add_tab( text, file.name );
             };
@@ -742,6 +812,8 @@ class CodeEditor {
     }
 
     _changeLanguage( lang ) {
+
+        this.code.lang = lang;
         this.highlight = lang;
         this._refreshCodeInfo();
         this.processLines();
@@ -749,14 +821,21 @@ class CodeEditor {
 
     _changeLanguageFromExtension( ext ) {
         
+        if( !ext )
+        return this._changeLanguage( this.code.lang );
+
         switch(ext.toLowerCase())
         {
             case 'js': return this._changeLanguage('JavaScript');
+            case 'cpp': return this._changeLanguage('C++');
+            case 'h': return this._changeLanguage('C++');
             case 'glsl': return this._changeLanguage('GLSL');
             case 'css': return this._changeLanguage('CSS');
             case 'json': return this._changeLanguage('JSON');
             case 'xml': return this._changeLanguage('XML');
             case 'wgsl': return this._changeLanguage('WGSL');
+            case 'py': return this._changeLanguage('Python');
+            case 'bat': return this._changeLanguage('Batch');
             case 'txt': 
             default:
                 this._changeLanguage('Plain Text');
@@ -765,23 +844,23 @@ class CodeEditor {
 
     _createPanelInfo() {
         
-        if( !this.skip_info )
+        if( !this.skipCodeInfo )
         {
             let panel = new LX.Panel({ className: "lexcodetabinfo", width: "calc(100%)", height: "auto" });
             panel.ln = 0;
             panel.col = 0;
 
             this._refreshCodeInfo = (ln = panel.ln, col = panel.col) => {
-                panel.ln = ln;
-                panel.col = col;
+                panel.ln = ln + 1;
+                panel.col = col + 1;
                 panel.clear();
                 panel.sameLine();
                 panel.addLabel(this.code.title, { float: 'right' });
-                panel.addLabel("Ln " + ln, { width: "64px" });
-                panel.addLabel("Col " + col, { width: "64px" });
+                panel.addLabel("Ln " + panel.ln, { width: "64px" });
+                panel.addLabel("Col " + panel.col, { width: "64px" });
                 panel.addButton("<b>{ }</b>", this.highlight, (value, event) => {
                     LX.addContextMenu( "Language", event, m => {
-                        for( const lang of this.languages )
+                        for( const lang of Object.keys(this.languages) )
                             m.add( lang, this._changeLanguage.bind(this) );
                     });
                 }, { width: "25%", nameWidth: "15%" });
@@ -829,6 +908,7 @@ class CodeEditor {
         let code = document.createElement('div');
         code.className = 'code';
         code.lines = [""];
+        code.lang = "Plain Text";
         code.cursorState = {};
         code.undoSteps = [];
         code.tabName = name;
@@ -882,7 +962,7 @@ class CodeEditor {
             this.restoreCursor(cursor, this.code.cursorState);    
             this.endSelection();
             this._changeLanguageFromExtension( LX.getExtension(tabname) );
-            this._refreshCodeInfo(cursor.line + 1, cursor.position);
+            this._refreshCodeInfo(cursor.line, cursor.position);
 
             // Restore scroll
             this.gutter.scrollTop = this.code.scrollTop;
@@ -1012,15 +1092,18 @@ class CodeEditor {
                 return;
 
             LX.addContextMenu( null, e, m => {
-                m.add( "Format/JSON", () => { 
-                    let json = this.toJSONFormat(this.getText());
-                    this.code.lines = json.split("\n"); 
-                    this.processLines();
-                } );
-                m.add( "" )
-                m.add( "Cut", () => {  this._cutContent(); } );
                 m.add( "Copy", () => {  this._copyContent(); } );
-                m.add( "Paste", () => {  this._pasteContent(); } );
+                if( !this.disableEdition )
+                {
+                    m.add( "Cut", () => {  this._cutContent(); } );
+                    m.add( "Paste", () => {  this._pasteContent(); } );
+                    m.add( "" );
+                    m.add( "Format/JSON", () => { 
+                        let json = this.toJSONFormat(this.getText());
+                        this.code.lines = json.split("\n"); 
+                        this.processLines();
+                    } );
+                }
             });
 
             this.canOpenContextMenu = false;
@@ -1048,7 +1131,7 @@ class CodeEditor {
         this.hideAutoCompleteBox();
         
         if(!skip_refresh) 
-            this._refreshCodeInfo( ln + 1, cursor.position );
+            this._refreshCodeInfo( ln, cursor.position );
     }
 
     processSelection( e, keep_range ) {
@@ -1078,7 +1161,7 @@ class CodeEditor {
         if( deltaY >= 0 )
         {
             while( deltaY < (this.selections.childElementCount - 1) )            
-                this.selections.lastChild.remove();
+                deleteElement( this.selections.lastChild );
 
             for(let i = fromY; i <= toY; i++){
 
@@ -1121,7 +1204,7 @@ class CodeEditor {
         else // Selection goes up...
         {
             while( Math.abs(deltaY) < (this.selections.childElementCount - 1) )            
-                this.selections.firstChild.remove();
+                deleteElement( this.selections.firstChild );
 
             for(let i = toY; i <= fromY; i++){
 
@@ -1303,36 +1386,33 @@ class CodeEditor {
             lidx = cursor.line; // Update this, since it's from the old code
         }
 
-        // Append key 
+        // Append key
 
-        this.code.lines[lidx] = [
-            this.code.lines[lidx].slice(0, cursor.position), 
-            key, 
-            this.code.lines[lidx].slice(cursor.position)
-        ].join('');
+        const isPairKey = (Object.values( this.pairKeys ).indexOf( key ) > -1) && !this.wasKeyPaired;
+        const sameKeyNext = isPairKey && (this.code.lines[lidx][cursor.position] === key);
+
+        if( !sameKeyNext )
+        {
+            this.code.lines[lidx] = [
+                this.code.lines[lidx].slice(0, cursor.position), 
+                key, 
+                this.code.lines[lidx].slice(cursor.position)
+            ].join('');
+        }
 
         this.cursorToRight( key );
 
         //  Some custom cases for auto key pair (), {}, "", '', ...
-
-        const pairKeys = ["\"", "'", "(", "{"];
-        if( pairKeys.indexOf( key ) > -1 && !this.wasKeyPaired )
+        
+        const keyMustPair = (this.pairKeys[ key ] !== undefined);
+        if( keyMustPair && !this.wasKeyPaired )
         {
-            // Find pair key
-            let pair = key;
-            switch(key)
-            {
-                case "'":
-                case "\"":
-                    break;
-                case "(": pair = ")"; break;
-                case "{": pair = "}"; break;
-            }
-
             // Make sure to detect later that the key is paired automatically to avoid loops...
             this.wasKeyPaired = true;
 
-            this.root.dispatchEvent(new KeyboardEvent('keydown', { 'key': pair }));
+            if(sameKeyNext) return;
+
+            this.root.dispatchEvent(new KeyboardEvent('keydown', { 'key': this.pairKeys[ key ] }));
             this.cursorToLeft( key, cursor );
             return;
         }
@@ -1424,68 +1504,143 @@ class CodeEditor {
         };
     }
 
-    processLines( from ) {
+    scanWordSuggestions() {
 
-        if( !from )
-        {
-            this.gutter.innerHTML = "";
-            this.code.innerHTML = "";
-            this.code.tokens = {};
-        }
+        this.code.tokens = {};
 
-        for( let i = from ?? 0; i < this.code.lines.length; ++i )
+        for( let i = 0; i < this.code.lines.length; ++i )
         {
-            this.processLine( i );
+            const linestring = this.code.lines[ i ];
+            const tokens = this._getTokensFromString( linestring, true );
+            tokens.forEach( t => this.code.tokens[ t ] = 1 );
         }
+    }
 
-        // Clean up...
-        if( from )
+    processLines( from ) {
+
+        // const start = performance.now();
+
+        this.gutter.innerHTML = "";
+        this.code.innerHTML = "";
+
+        for( let i = 0; i < this.code.lines.length; ++i )
         {
-            while( this.code.lines.length != this.gutter.children.length )            
-                this.gutter.lastChild.remove();
-            while( this.code.lines.length != this.code.children.length )            
-                this.code.lastChild.remove();
+            this.processLine( i, true );
         }
 
+        // console.log( performance.now() - start );
     }
 
-    processLine( linenum ) {
+    processLine( linenum, force ) {
 
-        delete this._building_string; // multi-line strings not supported by now
+        delete this._buildingString; // multi-line strings not supported by now
         
         // It's allowed to process only 1 line to optimize
         let linestring = this.code.lines[ linenum ];
-        var _lines = this.code.querySelectorAll('pre');
-        var pre = null, single_update = false;
-        if( _lines[linenum] ) {
-            pre = _lines[linenum];
-            single_update = true;
-        }
-        
-        if(!pre)
+
+        var pre = document.createElement('pre');
+        pre.dataset['linenum'] = linenum;
+
+        // Line gutter
+        var linenumspan = document.createElement('span');
+        linenumspan.innerHTML = (linenum + 1);
+
+        if( force )
         {
-            var pre = document.createElement('pre');
-            pre.dataset['linenum'] = linenum;
-            this.code.appendChild(pre);
-        }
-        else
+            this.gutter.appendChild(linenumspan);
+            this.code.appendChild( pre );
+        } else
         {
-            pre.children[0].remove(); // Remove token list
+            deleteElement( this.gutter.childNodes[ linenum ] );
+            deleteElement( this.code.childNodes[ linenum ] );
+            this.gutter.insertChildAtIndex( linenumspan, linenum );
+            this.code.insertChildAtIndex( pre, linenum );
         }
 
         var linespan = document.createElement('span');
         pre.appendChild(linespan);
 
+        const tokensToEvaluate = this._getTokensFromString( linestring );
+
+        let line_inner_html = "";
+
+        // Process all tokens
+        for( var i = 0; i < tokensToEvaluate.length; ++i )
+        {
+            let it = i - 1;
+            let prev = tokensToEvaluate[it];
+            while( prev == ' ' ) {
+                it--;
+                prev = tokensToEvaluate[it];
+            }
+            
+            it = i + 1;
+            let next = tokensToEvaluate[it];
+            while( next == ' ' || next == '"') {
+                it++;
+                next = tokensToEvaluate[it];
+            }
+            
+            let token = tokensToEvaluate[i];
+
+            if( this.languages[ this.highlight ].blockComments ?? true )
+            {
+                if( token.substr(0, 2) == '/*' )
+                    this._buildingBlockComment = true;
+                if( token.substr(token.length - 2) == '*/' )
+                    delete this._buildingBlockComment;
+            }
+
+            line_inner_html += this.evaluateToken(token, prev, next);
+        }
+
+        linespan.innerHTML = line_inner_html;
+    }
+
+    _processTokens( tokens, offset = 0 ) {
+
+        if( this.highlight == 'C++' )
+        {
+            var idx = tokens.slice(offset).findIndex( (value, index) => this.isNumber(value) );
+            if( idx > -1 )
+            {
+                idx += offset; // Add offset to compute within the whole array of tokens
+                let data = tokens[idx] + tokens[++idx];
+                while( this.isNumber( data ) )
+                {
+                    tokens[ idx - 1 ] += tokens[ idx ];
+                    tokens.splice( idx, 1 );
+                    data += tokens[idx];
+                }
+                // Scan for numbers again
+                return this._processTokens( tokens, idx );
+            }
+        }
+
+        return tokens;
+    }
+
+    _getTokensFromString( linestring, skipNonWords ) {
+
         // Check if line comment
-        const is_comment = linestring.split('//');
+        const singleLineCommentToken = this.languages[ this.highlight ].singleLineCommentToken ?? this.defaultSingleLineCommentToken;
+        const is_comment = linestring.split(singleLineCommentToken);
         linestring = ( is_comment.length > 1 ) ? is_comment[0] : linestring;
 
         const tokens = linestring.split(' ').join('¬ ¬').split('¬'); // trick to split without losing spaces
-        const to_process = []; // store in a temp array so we know prev and next tokens...
+        let tokensToEvaluate = []; // store in a temp array so we know prev and next tokens...
 
         for( let t of tokens )
         {
-            let iter = t.matchAll(/[\[\](){}<>.,;:"']/g);
+            if( !t.length || (skipNonWords && ( t.includes('"') || t.length < 3 )) )
+                continue;
+
+            if( t == ' ' ) {
+                tokensToEvaluate.push( t );
+                continue;
+            }
+
+            let iter = t.matchAll(/(::|[\[\](){}<>.,;:"'])/g);
             let subtokens = iter.next();
             if( subtokens.value )
             {
@@ -1493,56 +1648,23 @@ class CodeEditor {
                 while( subtokens.value != undefined )
                 {
                     const _pt = t.substring(idx, subtokens.value.index);
-                    to_process.push( _pt );
-                    to_process.push( subtokens.value[0] );
-                    idx = subtokens.value.index + 1;
+                    if( _pt.length ) tokensToEvaluate.push( _pt );
+                    tokensToEvaluate.push( subtokens.value[0] );
+                    idx = subtokens.value.index + subtokens.value[0].length;
                     subtokens = iter.next();
                     if(!subtokens.value) {
                         const _at = t.substring(idx);
-                        to_process.push( _at );
+                        if( _at.length ) tokensToEvaluate.push( _at );
                     }
                 }
             }
-            else
-                to_process.push( t );
+            else tokensToEvaluate.push( t );
         }
 
-        if( is_comment.length > 1 )
-            to_process.push( "//" + is_comment[1] );
-
-        // Process all tokens
-        for( var i = 0; i < to_process.length; ++i )
-        {
-            let it = i - 1;
-            let prev = to_process[it];
-            while( prev == '' || prev == ' ' ) {
-                it--;
-                prev = to_process[it];
-            }
+        if( is_comment.length > 1 && !skipNonWords )
+            tokensToEvaluate.push( singleLineCommentToken + is_comment[1] );
 
-            it = i + 1;
-            let next = to_process[it];
-            while( next == '' || next == ' ' || next == '"') {
-                it++;
-                next = to_process[it];
-            }
-            
-            let token = to_process[i];
-            if( token.substr(0, 2) == '/*' )
-                this._building_block_comment = true;
-            if( token.substr(token.length - 2) == '*/' )
-                delete this._building_block_comment;
-            
-            this.processToken(token, linespan, prev, next);
-        }
-
-        // add line gutter
-        if(!single_update)
-        {
-            var linenumspan = document.createElement('span');
-            linenumspan.innerHTML = (linenum + 1);
-            this.gutter.appendChild(linenumspan);
-        }
+        return this._processTokens( tokensToEvaluate );
     }
 
     _mustHightlightWord( token, kindArray ) {
@@ -1550,88 +1672,97 @@ class CodeEditor {
         return kindArray[this.highlight] && kindArray[this.highlight].indexOf(token) > -1;
     }
 
-    processToken(token, linespan, prev, next) {
+    evaluateToken( token, prev, next ) {
 
-        let sString = false;
-        let highlight = this.highlight.replace(/\s/g, '').toLowerCase();
+        let stringEnded = false;
+        let highlight = this.highlight.replace(/\s/g, '').replaceAll("+", "p").toLowerCase();
+        let inner_html = "", token_classname = "";
+
+        const singleLineCommentToken = this.languages[ this.highlight ].singleLineCommentToken ?? this.defaultSingleLineCommentToken;
+        const usesBlockComments = this.languages[ this.highlight ].blockComments ?? true;
+        const customStringKeys = Object.assign( {}, this.stringKeys );
+
+        if( highlight == 'cpp' && prev && prev.includes('#') ) // preprocessor code..
+        {
+            customStringKeys['@<'] = '>';
+        }
 
-        if(token == '"' || token == "'")
+        // Manage strings
+        if( this._buildingString != undefined )
         {
-            sString = (this._building_string == token); // stop string if i was building it
-            this._building_string = this._building_string ? this._building_string : token;
+            const idx = Object.values(customStringKeys).indexOf( token );
+            stringEnded = (idx > -1) && (idx == Object.values(customStringKeys).indexOf( customStringKeys[ '@' + this._buildingString ] ));
+        } 
+        else if( customStringKeys[ '@' + token ] )
+        {   
+            // Start new string
+            this._buildingString = token;
         }
 
         if(token == ' ')
         {
-            linespan.innerHTML += token;
+            inner_html += token;
         }
         else
         {
-            var span = document.createElement('span');
-            span.innerHTML = token;
-
-            if( this._building_block_comment )
-                span.classList.add("cm-com");
+            if( this._buildingBlockComment != undefined )
+                token_classname += "cm-com";
             
-            else if( this._building_string  )
-                span.classList.add("cm-str");
+            else if( this._buildingString != undefined )
+                token_classname += "cm-str";
             
             else if( this._mustHightlightWord( token, this.keywords ) )
-                span.classList.add("cm-kwd");
+                token_classname += "cm-kwd";
 
             else if( this._mustHightlightWord( token, this.builtin ) )
-                span.classList.add("cm-bln");
+                token_classname += "cm-bln";
 
             else if( this._mustHightlightWord( token, this.statementsAndDeclarations ) )
-                span.classList.add("cm-std");
+                token_classname += "cm-std";
 
-                else if( this._mustHightlightWord( token, this.symbols ) )
-                span.classList.add("cm-sym");
+            else if( this._mustHightlightWord( token, this.symbols ) )
+                token_classname += "cm-sym";
 
-            else if( token.substr(0, 2) == '//' )
-                span.classList.add("cm-com");
+            else if( token.substr(0, 2) == singleLineCommentToken )
+                token_classname += "cm-com";
 
-            else if( token.substr(0, 2) == '/*' )
-                span.classList.add("cm-com");
+            else if( usesBlockComments && token.substr(0, 2) == '/*' )
+                token_classname += "cm-com";
 
-            else if( token.substr(token.length - 2) == '*/' )
-                span.classList.add("cm-com");
+            else if( usesBlockComments && token.substr(token.length - 2) == '*/' )
+                token_classname += "cm-com";
 
             else if(  this.isNumber(token) || this.isNumber( token.replace(/[px]|[em]|%/g,'') ) )
-                span.classList.add("cm-dec");
+                token_classname += "cm-dec";
 
             else if( this.isCSSClass(token, prev, next) )
-                span.classList.add("cm-kwd");
+                token_classname += "cm-kwd";
 
-            else if ( this.isType(token, prev, next) ) {
-                span.classList.add("cm-typ");
-                this.code.tokens[ token ] = CodeEditor.WORD_TYPE_CLASS;
-            }
+            else if ( this.isType(token, prev, next) )
+                token_classname += "cm-typ";
 
-            else if ( token[0] != '@' && next == '(' ) {
-                span.classList.add("cm-mtd");
-                this.code.tokens[ token ] = CodeEditor.WORD_TYPE_METHOD;
-            }
+            else if ( token[0] != '@' && next == '(' )
+                token_classname += "cm-mtd";
+
+            else if ( highlight == 'cpp' && token.includes('#') ) // C++ preprocessor
+                token_classname += "cm-ppc";
+
+            else if ( highlight == 'cpp' && prev != 'WDWD:' && next == '::' ) // C++ Class
+                token_classname += "cm-typ";
 
             else if ( highlight == 'css' && prev == ':' && (next == ';' || next == '!important') ) // CSS value
-                span.classList.add("cm-str");
+                token_classname += "cm-str";
 
             else if ( highlight == 'css' && prev == undefined && next == ':' ) // CSS attribute
-                span.classList.add("cm-typ");
-            else {
-
-                if( token.length > 1 )
-                {
-                    // Store in token map to show later as autocomplete suggestions
-                    this.code.tokens[ token ] = -1;
-                }
-            }
+                token_classname += "cm-typ";
 
-            span.classList.add(highlight);
-            linespan.appendChild(span);
+            token_classname += " " + highlight;
+            inner_html += "<span class=' " + token_classname + "'>" + token + "</span>";
         }
 
-        if(sString) delete this._building_string;
+        if(stringEnded) delete this._buildingString;
+
+        return inner_html;
     }
 
     isCSSClass( token, prev, next ) {
@@ -1639,7 +1770,16 @@ class CodeEditor {
     }
 
     isNumber( token ) {
-        return token.length && !Number.isNaN(+token);
+
+        if(this.highlight == 'C++')
+        {
+            if( token.lastChar == 'f' )
+                return this.isNumber( token.substring(0, token.length - 1) )
+            else if( token.lastChar == 'u' )
+                return !(token.includes('.')) && this.isNumber( token.substring(0, token.length - 1) );
+        }
+        
+        return token.length && token != ' ' && !Number.isNaN(+token);
     }
 
     isType( token, prev, next ) {
@@ -1652,6 +1792,10 @@ class CodeEditor {
         {
             return (prev == 'class' && next == '{') || (prev == 'new' && next == '(');
         }
+        else if( this.highlight == 'C++' )
+        {
+            return (prev == 'class' && next == '{') || (prev == 'struct' && next == '{');
+        }
         else if ( this.highlight == 'WGSL' )
         {
             const is_kwd = (this.keywords[this.highlight] && this.keywords[this.highlight].indexOf(token) == -1);
@@ -1667,7 +1811,7 @@ class CodeEditor {
         if( !this.selection || (this.selection.fromY != this.selection.toY) )
         return false;
         
-        const _lastLeft = cursor._left;
+        this.selection.invertIfNecessary();
 
         // Insert first..
         this.code.lines[lidx] = [
@@ -1752,8 +1896,10 @@ class CodeEditor {
 
     deleteSelection( cursor ) {
 
-        if(this.disable_edition) 
+        // I think it's not necessary but... 
+        if(this.disableEdition) 
             return;
+
         // Some selections don't depend on mouse up..
         if(this.selection) this.selection.invertIfNecessary();
 
@@ -1796,7 +1942,7 @@ class CodeEditor {
         cursor.style.left = "calc(" + (cursor._left - this.getScrollLeft()) + "px + " + this.xPadding + ")";
         cursor.position++;
         this.restartBlink();
-        this._refreshCodeInfo( cursor.line + 1, cursor.position );
+        this._refreshCodeInfo( cursor.line, cursor.position );
 
         // Add horizontal scroll
 
@@ -1817,7 +1963,7 @@ class CodeEditor {
         cursor.position--;
         cursor.position = Math.max(cursor.position, 0);
         this.restartBlink();
-        this._refreshCodeInfo( cursor.line + 1, cursor.position );
+        this._refreshCodeInfo( cursor.line, cursor.position );
 
         doAsync(() => {
             var first_char = (this.code.scrollLeft / this.charWidth)|0;
@@ -1837,7 +1983,7 @@ class CodeEditor {
         if(resetLeft)
             this.resetCursorPos( CodeEditor.CURSOR_LEFT, cursor );
 
-        this._refreshCodeInfo( cursor.line + 1, cursor.position );
+        this._refreshCodeInfo( cursor.line, cursor.position );
 
         doAsync(() => {
             var first_line = (this.code.scrollTop / this.lineHeight)|0;
@@ -1856,7 +2002,7 @@ class CodeEditor {
         if(resetLeft)
             this.resetCursorPos( CodeEditor.CURSOR_LEFT, cursor );
 
-        this._refreshCodeInfo( cursor.line + 1, cursor.position );
+        this._refreshCodeInfo( cursor.line, cursor.position );
 
         doAsync(() => {
             var last_line = ((this.code.scrollTop  + this.code.offsetHeight) / this.lineHeight)|0;
@@ -1970,7 +2116,7 @@ class CodeEditor {
         const words = this.code.lines[col];
 
         const is_char = (char) => {
-            const exceptions = ['_'];
+            const exceptions = ['_', '#', '!'];
             const code = char.charCodeAt(0);
             return (exceptions.indexOf(char) > - 1) || (code > 47 && code < 58) || (code > 64 && code < 91) || (code > 96 && code < 123);
         }
@@ -1998,7 +2144,7 @@ class CodeEditor {
         test.innerHTML = char;
         document.body.appendChild(test);
         var rect = test.getBoundingClientRect();
-        test.remove();
+        deleteElement( test );
         const bb = [Math.floor(rect.width), Math.floor(rect.height)];
         return get_bb ? bb : bb[0];
     }
@@ -2073,10 +2219,10 @@ class CodeEditor {
         );
 
         // Add words in current tab plus remove current word
-        // suggestions = suggestions.concat( Object.keys(this.code.tokens).filter( a => a != word ) );
+        suggestions = suggestions.concat( Object.keys(this.code.tokens).filter( a => a != word ) );
 
-        // Remove single chars and duplicates...        
-        suggestions = suggestions.filter( (value, index) => value.length > 1 && suggestions.indexOf(value) === index );
+        // Remove 1/2 char words and duplicates...        
+        suggestions = suggestions.filter( (value, index) => value.length > 2 && suggestions.indexOf(value) === index );
 
         // Order...
         suggestions = suggestions.sort( (a, b) => a.localeCompare(b) );