lexgui 0.1.12 → 0.1.14

package/build/components/codeeditor.js

@@ -102,11 +102,10 @@ class CodeEditor {
 
     constructor( area, options = {} ) {
 
-        CodeEditor.__instances.push( this );
+        window.editor = this;
 
-        this.disable_edition = options.disable_edition ?? false;
+        CodeEditor.__instances.push( this );
 
-        this.skip_info = options.skip_info;
         this.base_area = area;
         this.area = new LX.Area( { className: "lexcodeeditor", height: "auto", no_append: true } );
 
@@ -127,14 +126,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
 
@@ -160,6 +166,7 @@ class CodeEditor {
             cursor.style.top = "4px";
             cursor.position = 0;
             cursor.line = 0;
+            cursor.print = (function() { console.log( this.line, this.position ) }).bind(cursor);
             this.cursors.appendChild(cursor);
         }
 
@@ -192,11 +199,22 @@ class CodeEditor {
         this.tabSpaces = 4;
         this.maxUndoSteps = 16;
         this.lineHeight = 20;
-        this.charWidth = 8;//this.measureChar();
+        this.charWidth = 8; //this.measureChar();
         this._lastTime = null;
 
+        this.pairKeys = {
+            "\"": "\"",
+            "'": "'",
+            "(": ")",
+            "{": "}",
+            "[": "]"
+        };
+
+        // Scan tokens..
+        setInterval( this.scanWordSuggestions.bind(this), 2000 );
+
         this.languages = [
-            'Plain Text', 'JavaScript', 'CSS', 'GLSL', 'WGSL', 'JSON', 'XML' 
+            'Plain Text', 'JavaScript', 'C++', 'CSS', 'GLSL', 'WGSL', 'JSON', 'XML', 'Python'
         ];
         this.specialKeys = [
             'Backspace', 'Enter', 'ArrowUp', 'ArrowDown', 
@@ -204,43 +222,54 @@ class CodeEditor {
             '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', 'bool', 'const', 'static_cast', 'dynamic_cast', 'new', 'delete', 'void', 'true', 'false', 'auto', 'struct', 'typedef'],
             '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'],
-            'JSON': []
+            'Python': ['False', 'def', 'None', 'True', 'in', 'is', 'and', 'lambda', 'nonlocal', 'not', 'or']
+        };
+        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', '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.utils = {
-            'JavaScript': ['querySelector', 'body', 'addEventListener', 'removeEventListener', 'remove', 'sort', 'filter', 'isNaN', 'parseFloat', 'parseInt'],
-            'GLSL': [],
-            'CSS': [],
-            'WGSL': [],
-            'JSON': []
+        this.types = {
+            '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' ]
         };
         this.builtin = {
-            'JavaScript': ['document', 'console', 'window', 'navigator', 'Object', 'Function', 'Boolean', 'Symbol', 'Error'],
+            'JavaScript': ['document', 'console', 'window', 'navigator', 'performance'],
             'CSS': ['*', '!important'],
-            'GLSL': [],
-            'WGSL': [],
-            'JSON': []
+            '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'],
-            'JSON': [],
-            'CSS': []
+            'Python': ['if', 'raise', 'del', 'import', 'return', 'elif', 'try', 'else', 'while', 'as', 'except', 'with', 'assert', 'finally', 'yield', 'break', 'for', 'class', 'continue', 'global', 'pass']
         };
         this.symbols = {
             'JavaScript': ['<', '>', '[', ']', '{', '}', '(', ')', ';', '=', '|', '||', '&', '&&', '?', '??'],
+            'C++': ['<', '>', '[', ']', '{', '}', '(', ')', ';', '=', '|', '||', '&', '&&', '?', '::'],
             'JSON': ['[', ']', '{', '}', '(', ')'],
             'GLSL': ['[', ']', '{', '}', '(', ')'],
             'WGSL': ['[', ']', '{', '}', '(', ')', '->'],
-            'CSS': ['{', '}', '(', ')', '*']
+            'CSS': ['{', '}', '(', ')', '*'],
+            'Python': ['<', '>', '[', ']', '(', ')', '=']
         };
 
         // Action keys
@@ -265,6 +294,8 @@ class CodeEditor {
                     this.code.lines[ln] = sliceChar( this.code.lines[ln], cursor.position - 1 );
                     this.cursorToLeft( letter );
                     this.processLine(ln);
+                    if( this.useAutoComplete )
+                        this.showAutoCompleteBox( 'foo', cursor );
                 } 
                 else if(this.code.lines[ln - 1] != undefined) {
                     this.lineUp();
@@ -323,19 +354,20 @@ 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 )
-            return;
-        
-            // Get last selection range
-            if(this.selection) 
+            if( e.shiftKey && !e.cancelShift )
+            {
+                // Get last selection range
+                if(this.selection) 
                 last_pos += this.selection.chars;
 
-            this.startSelection(cursor);
-            var string = this.code.lines[ln].substring(idx, last_pos);
-            this.selection.selectInline(idx, cursor.line, this.measureString(string));
+                this.startSelection(cursor);
+                var string = this.code.lines[ln].substring(idx, last_pos);
+                this.selection.selectInline(idx, cursor.line, this.measureString(string));
+            } else
+                this.endSelection();
         });
 
         this.action('End', false, ( ln, cursor, e ) => {
@@ -346,7 +378,8 @@ class CodeEditor {
                 if(!this.selection)
                     this.startSelection(cursor);
                 this.selection.selectInline(cursor.position, cursor.line, this.measureString(string));
-            }
+            } else 
+                this.endSelection();
 
             this.resetCursorPos( CodeEditor.CURSOR_LEFT );
             this.cursorToString( cursor, this.code.lines[ln] );
@@ -403,11 +436,18 @@ class CodeEditor {
                 if( e.shiftKey ) {
                     if(!this.selection)
                         this.startSelection(cursor);
-                    this.selection.fromX = cursor.position;
-                    this.selection.toY = this.selection.toY > 0 ? this.selection.toY - 1 : 0;
-                    this.processSelection(null, true);
-                    this.cursorToPosition(cursor, this.selection.fromX);
+
+                    this.selection.toY = (this.selection.toY > 0) ? (this.selection.toY - 1) : 0;
                     this.cursorToLine(cursor, this.selection.toY);
+
+                    var letter = this.getCharAtPos( cursor );
+                    if(!letter) {
+                        this.selection.toX = (this.code.lines[cursor.line].length - 1);
+                        this.cursorToPosition(cursor, this.selection.toX);
+                    }
+                    
+                    this.processSelection(null, true);
+
                 } else {
                     this.endSelection();
                     this.lineUp();
@@ -431,11 +471,17 @@ class CodeEditor {
                 if( e.shiftKey ) {
                     if(!this.selection)
                         this.startSelection(cursor);
-                    this.selection.toX = cursor.position;
+
                     this.selection.toY = this.selection.toY < this.code.lines.length - 1 ? this.selection.toY + 1 : this.code.lines.length - 1;
-                    this.processSelection(null, true);
-                    this.cursorToPosition(cursor, this.selection.toX);
                     this.cursorToLine(cursor, this.selection.toY);
+                    
+                    var letter = this.getCharAtPos( cursor );
+                    if(!letter) {
+                        this.selection.toX = Math.max(this.code.lines[cursor.line].length - 1, 0);
+                        this.cursorToPosition(cursor, this.selection.toX);
+                    }
+
+                    this.processSelection(null, true);
                 } else {
     
                     if( this.code.lines[ ln + 1 ] == undefined ) 
@@ -487,7 +533,11 @@ class CodeEditor {
                         this.processSelection(null, true);
                     }
                     else {
-                        if(!this.selection) this.cursorToLeft( letter, cursor );
+                        if(!this.selection) {
+                            this.cursorToLeft( letter, cursor );
+                            if( this.useAutoComplete && this.isAutoCompleteActive )
+                                this.showAutoCompleteBox( 'foo', cursor );
+                        }
                         else {
                             this.selection.invertIfNecessary();
                             this.resetCursorPos( CodeEditor.CURSOR_LEFT | CodeEditor.CURSOR_TOP );
@@ -546,7 +596,11 @@ class CodeEditor {
                         this.cursorToRight( letter, cursor );
                         this.processSelection(null, keep_range);
                     }else{
-                        if(!this.selection) this.cursorToRight( letter, cursor );
+                        if(!this.selection) {
+                            this.cursorToRight( letter, cursor );
+                            if( this.useAutoComplete && this.isAutoCompleteActive )
+                                this.showAutoCompleteBox( 'foo', cursor );
+                        }
                         else 
                         {
                             this.selection.invertIfNecessary();
@@ -562,6 +616,7 @@ class CodeEditor {
                     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);
@@ -728,11 +783,14 @@ class CodeEditor {
         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 'txt': 
             default:
                 this._changeLanguage('Plain Text');
@@ -741,20 +799,20 @@ 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 )
@@ -858,7 +916,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;
@@ -918,10 +976,26 @@ class CodeEditor {
         {
             if( mouse_pos[0] > this.code.scrollWidth || mouse_pos[1] > this.code.scrollHeight )
                 return; // Scrollbar click
+
+            // Left click only...
+            if( e.button === 2 )
+            {
+                this.processClick(e);
+
+                this.canOpenContextMenu = !this.selection;
+
+                if( this.selection )
+                {
+                    this.canOpenContextMenu |= (cursor.line >= this.selection.fromY && cursor.line <= this.selection.toY 
+                                                && cursor.position >= this.selection.fromX && cursor.position <= this.selection.toX);
+                    if( this.canOpenContextMenu )
+                        return;
+                }
+            }
+
             this.lastMouseDown = LX.getTime();
             this.state.selectingText = true;
             this.endSelection();
-            return;
         }
         
         else if( e.type == 'mouseup' )
@@ -964,15 +1038,29 @@ class CodeEditor {
             }
         }
 
-        else if ( e.type == 'contextmenu' ) {
-            e.preventDefault()
-            LX.addContextMenu( "Format code", e, m => {
-                m.add( "JSON", () => { 
-                    let json = this.toJSONFormat(this.getText());
-                    this.code.lines = json.split("\n"); 
-                    this.processLines();
-                } );
+        else if ( e.type == 'contextmenu' )
+        {
+            e.preventDefault();
+
+            if( !this.canOpenContextMenu )
+                return;
+
+            LX.addContextMenu( null, e, m => {
+                m.add( "Copy", () => {  this._copyContent(); } );
+                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;
         }
     }
 
@@ -997,7 +1085,7 @@ class CodeEditor {
         this.hideAutoCompleteBox();
         
         if(!skip_refresh) 
-            this._refreshCodeInfo( ln + 1, cursor.position );
+            this._refreshCodeInfo( ln, cursor.position );
     }
 
     processSelection( e, keep_range ) {
@@ -1143,27 +1231,7 @@ class CodeEditor {
                 this.cursorToLine(cursor, this.selection.toY);
                 break;
             case 'c': // copy
-                let text_to_copy = "";
-                if( !this.selection ) {
-                    text_to_copy = "\n" + this.code.lines[cursor.line];
-                }
-                else {
-                    const separator = "_NEWLINE_";
-                    let code = this.code.lines.join(separator);
-
-                    // Get linear start index
-                    let index = 0;
-                    
-                    for(let i = 0; i <= this.selection.fromY; i++)
-                        index += (i == this.selection.fromY ? this.selection.fromX : this.code.lines[i].length);
-
-                    index += this.selection.fromY * separator.length; 
-                    const num_chars = this.selection.chars + (this.selection.toY - this.selection.fromY) * separator.length;
-                    const text = code.substr(index, num_chars);
-                    const lines = text.split(separator);
-                    text_to_copy = lines.join('\n');
-                }
-                navigator.clipboard.writeText(text_to_copy).then(() => console.log("Successfully copied"), (err) => console.error("Error"));
+                this._copyContent();
                 return;
             case 'd': // duplicate line
                 e.preventDefault();
@@ -1176,13 +1244,10 @@ class CodeEditor {
                 this.onsave( this.getText() );
                 return;
             case 'v': // paste
-                let text = await navigator.clipboard.readText();
-                this.appendText(text);
+                this._pasteContent();
                 return;
             case 'x': // cut line
-                const to_copy = this.code.lines.splice(lidx, 1)[0];
-                this.processLines(lidx);
-                navigator.clipboard.writeText(to_copy + '\n');
+                this._cutContent();
                 return;
             case 'z': // undo
                 if(!this.code.undoSteps.length)
@@ -1272,27 +1337,43 @@ class CodeEditor {
         if( this.selection )
         {
             this.actions['Backspace'].callback(lidx, cursor, e);
+            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);
 
-        this.cursorToRight( key );
+        if( !sameKeyNext )
+        {
+            this.code.lines[lidx] = [
+                this.code.lines[lidx].slice(0, cursor.position), 
+                key, 
+                this.code.lines[lidx].slice(cursor.position)
+            ].join('');
+        }
 
-        // Other special char cases...
+        this.cursorToRight( key );
 
-        if( key == '{' )
+        //  Some custom cases for auto key pair (), {}, "", '', ...
+        
+        const keyMustPair = (this.pairKeys[ key ] !== undefined);
+        if( keyMustPair && !this.wasKeyPaired )
         {
-            this.root.dispatchEvent(new KeyboardEvent('keydown', {'key': '}'}));
+            // Make sure to detect later that the key is paired automatically to avoid loops...
+            this.wasKeyPaired = true;
+
+            if(sameKeyNext) return;
+
+            this.root.dispatchEvent(new KeyboardEvent('keydown', { 'key': this.pairKeys[ key ] }));
             this.cursorToLeft( key, cursor );
-            return; // It will be processed with the above event
+            return;
         }
 
+        // Once here we can pair keys again
+        delete this.wasKeyPaired;
+
         // Update only the current line, since it's only an appended key
         this.processLine( lidx );
 
@@ -1302,6 +1383,73 @@ class CodeEditor {
             this.showAutoCompleteBox( key, cursor );
     }
 
+    async _pasteContent() {
+        let text = await navigator.clipboard.readText();
+        this.appendText(text);
+    }
+
+    async _copyContent() {
+
+        let cursor = this.cursors.children[0];
+        let text_to_copy = "";
+
+        if( !this.selection ) {
+            text_to_copy = "\n" + this.code.lines[cursor.line];
+        }
+        else {
+            const separator = "_NEWLINE_";
+            let code = this.code.lines.join(separator);
+
+            // Get linear start index
+            let index = 0;
+            
+            for(let i = 0; i <= this.selection.fromY; i++)
+                index += (i == this.selection.fromY ? this.selection.fromX : this.code.lines[i].length);
+
+            index += this.selection.fromY * separator.length; 
+            const num_chars = this.selection.chars + (this.selection.toY - this.selection.fromY) * separator.length;
+            const text = code.substr(index, num_chars);
+            const lines = text.split(separator);
+            text_to_copy = lines.join('\n');
+        }
+
+        navigator.clipboard.writeText(text_to_copy).then(() => console.log("Successfully copied"), (err) => console.error("Error"));
+    }
+
+    async _cutContent() {
+
+        let cursor = this.cursors.children[0];
+        let lidx = cursor.line;
+        let text_to_cut = "";
+
+        if( !this.selection ) {
+            text_to_cut = "\n" + this.code.lines[cursor.line];
+            this.code.lines.splice(lidx, 1);
+            this.processLines(lidx);
+            this.resetCursorPos( CodeEditor.CURSOR_LEFT );
+        }
+        else {
+            const separator = "_NEWLINE_";
+            let code = this.code.lines.join(separator);
+
+            // Get linear start index
+            let index = 0;
+            
+            for(let i = 0; i <= this.selection.fromY; i++)
+                index += (i == this.selection.fromY ? this.selection.fromX : this.code.lines[i].length);
+
+            index += this.selection.fromY * separator.length; 
+            const num_chars = this.selection.chars + (this.selection.toY - this.selection.fromY) * separator.length;
+            const text = code.substr(index, num_chars);
+            const lines = text.split(separator);
+            text_to_cut = lines.join('\n');
+
+            this.deleteSelection( cursor );
+        }
+
+        navigator.clipboard.writeText(text_to_cut).then(() => console.log("Successfully cut"), (err) => console.error("Error"));
+    }
+
     action( key, deleteSelection, fn ) {
 
         this.actions[ key ] = {
@@ -1310,58 +1458,103 @@ 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 ) {
+
+        // if(!force)
+        // {
+        //     this.processLines();
+        //     return;
+        // }
 
         delete this._building_string; // 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
+            this.gutter.childNodes[ linenum ].remove();
+            this.code.childNodes[ linenum ].remove();
+            this.gutter.insertChildAtIndex( linenumspan, linenum );
+            this.code.insertChildAtIndex( pre, linenum );
         }
 
         var linespan = document.createElement('span');
         pre.appendChild(linespan);
 
+        const to_process = this._getTokensFromString( linestring );
+
+        let line_inner_html = "";
+
+        // Process all tokens
+        for( var i = 0; i < to_process.length; ++i )
+        {
+            let it = i - 1;
+            let prev = to_process[it];
+            while( prev == ' ' ) {
+                it--;
+                prev = to_process[it];
+            }
+            
+            it = i + 1;
+            let next = to_process[it];
+            while( 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;
+            
+            line_inner_html += this.processToken(token, prev, next);
+        }
+
+        linespan.innerHTML = line_inner_html;
+    }
+
+    _getTokensFromString( linestring, skipNonWords ) {
+
         // Check if line comment
         const is_comment = linestring.split('//');
         linestring = ( is_comment.length > 1 ) ? is_comment[0] : linestring;
@@ -1371,7 +1564,15 @@ class CodeEditor {
 
         for( let t of tokens )
         {
-            let iter = t.matchAll(/[\[\](){}<>.,;:"']/g);
+            if( !t.length || (skipNonWords && ( t.includes('"') || t.length < 3 )) )
+                continue;
+
+            if( t == ' ' ) {
+                to_process.push( t );
+                continue;
+            }
+
+            let iter = t.matchAll(/(::|[\[\](){}<>.,;:"'])/g);
             let subtokens = iter.next();
             if( subtokens.value )
             {
@@ -1379,62 +1580,35 @@ class CodeEditor {
                 while( subtokens.value != undefined )
                 {
                     const _pt = t.substring(idx, subtokens.value.index);
-                    to_process.push( _pt );
+                    if( _pt.length ) to_process.push( _pt );
                     to_process.push( subtokens.value[0] );
-                    idx = subtokens.value.index + 1;
+                    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 ) to_process.push( _at );
                     }
                 }
             }
-            else
-                to_process.push( t );
+            else to_process.push( t );
         }
 
-        if( is_comment.length > 1 )
+        if( is_comment.length > 1 && !skipNonWords )
             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];
-            }
-
-            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);
-        }
+        return to_process;
+    }
 
-        // add line gutter
-        if(!single_update)
-        {
-            var linenumspan = document.createElement('span');
-            linenumspan.innerHTML = (linenum + 1);
-            this.gutter.appendChild(linenumspan);
-        }
+    _mustHightlightWord( token, kindArray ) {
+
+        return kindArray[this.highlight] && kindArray[this.highlight].indexOf(token) > -1;
     }
 
-    processToken(token, linespan, prev, next) {
+    processToken(token, prev, next) {
 
         let sString = false;
-        let highlight = this.highlight.replace(/\s/g, '').toLowerCase();
+        let highlight = this.highlight.replace(/\s/g, '').replaceAll("+", "p").toLowerCase();
+        let inner_html = "", token_classname = "";
 
         if(token == '"' || token == "'")
         {
@@ -1444,75 +1618,68 @@ class CodeEditor {
 
         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");
+                token_classname += "cm-com";
             
             else if( this._building_string  )
-                span.classList.add("cm-str");
+                token_classname += "cm-str";
             
-            else if( this.keywords[this.highlight] && this.keywords[this.highlight].indexOf(token) > -1 )
-                span.classList.add("cm-kwd");
+            else if( this._mustHightlightWord( token, this.keywords ) )
+                token_classname += "cm-kwd";
 
-            else if( this.builtin[this.highlight] && this.builtin[this.highlight].indexOf(token) > -1 )
-                span.classList.add("cm-bln");
+            else if( this._mustHightlightWord( token, this.builtin ) )
+                token_classname += "cm-bln";
 
-            else if( this.statementsAndDeclarations[this.highlight] && this.statementsAndDeclarations[this.highlight].indexOf(token) > -1 )
-                span.classList.add("cm-std");
+            else if( this._mustHightlightWord( token, this.statementsAndDeclarations ) )
+                token_classname += "cm-std";
 
-            else if( this.symbols[this.highlight] && this.symbols[this.highlight].indexOf(token) > -1 )
-                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");
+                token_classname += "cm-com";
 
             else if( token.substr(0, 2) == '/*' )
-                span.classList.add("cm-com");
+                token_classname += "cm-com";
 
             else if( token.substr(token.length - 2) == '*/' )
-                span.classList.add("cm-com");
+                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;
+
+        return inner_html;
     }
 
     isCSSClass( token, prev, next ) {
@@ -1525,6 +1692,10 @@ class CodeEditor {
 
     isType( token, prev, next ) {
         
+        // Common case
+        if( this._mustHightlightWord( token, this.types ) )
+            return true;
+
         if( this.highlight == 'JavaScript' )
         {
             return (prev == 'class' && next == '{') || (prev == 'new' && next == '(');
@@ -1543,7 +1714,7 @@ class CodeEditor {
 
         if( !this.selection || (this.selection.fromY != this.selection.toY) )
         return false;
-                                    
+        
         const _lastLeft = cursor._left;
 
         // Insert first..
@@ -1554,8 +1725,7 @@ class CodeEditor {
         ].join('');
 
         // Go to the end of the word
-        this.cursorToString(cursor, 
-            this.code.lines[lidx].slice(this.selection.fromX, this.selection.toX + 1));
+        this.cursorToPosition(cursor, this.selection.toX + 1);
 
         // Change next key?
         switch(key)
@@ -1630,8 +1800,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();
 
@@ -1674,7 +1846,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
 
@@ -1695,7 +1867,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;
@@ -1715,7 +1887,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;
@@ -1734,7 +1906,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;
@@ -1942,14 +2114,19 @@ class CodeEditor {
         let suggestions = [];
 
         // Add language special keys...
-        suggestions = suggestions.concat( this.keywords[ this.highlight ] );
-        suggestions = suggestions.concat( this.statementsAndDeclarations[ this.highlight ] );
-        suggestions = suggestions.concat( this.builtin[ this.highlight ] );
-        suggestions = suggestions.concat( this.utils[ this.highlight ] );
+        suggestions = suggestions.concat(   
+            this.builtin[ this.highlight ] ?? [],
+            this.keywords[ this.highlight ] ?? [],
+            this.statementsAndDeclarations[ this.highlight ] ?? [],
+            this.types[ this.highlight ] ?? [],
+            this.utils[ this.highlight ] ?? []
+        );
+
+        // Add words in current tab plus remove current 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) );
@@ -1962,6 +2139,17 @@ class CodeEditor {
             var pre = document.createElement('pre');
             this.autocomplete.appendChild(pre);
 
+            var icon = document.createElement('a');
+            
+            if( this._mustHightlightWord( s, this.utils ) )
+                icon.className = "fa fa-cube";
+            else if( this._mustHightlightWord( s, this.types ) )
+                icon.className = "fa fa-code";
+            else
+                icon.className = "fa fa-font";
+
+            pre.appendChild(icon);
+
             pre.addEventListener( 'click', () => {
                 this.autoCompleteWord( cursor, s );
             } ); 
@@ -2042,13 +2230,13 @@ class CodeEditor {
                 for( let childSpan of child.childNodes )
                     word += childSpan.innerHTML;
 
-                return [word, i ]; // Get text of the span inside the 'pre' element
+                return [ word, i ]; // Get text of the span inside the 'pre' element
             }
         }
     }
 
     moveArrowSelectedAutoComplete( dir ) {
-        
+
         if( !this.isAutoCompleteActive )
         return;
 
@@ -2061,7 +2249,7 @@ class CodeEditor {
             if( (idx + offset) < 0 ) return;
         }
 
-        this.autocomplete.scrollTop += offset * 20;
+        this.autocomplete.scrollTop += offset * 18;
 
         // Remove selected from the current word and add it to the next one
         this.autocomplete.childNodes[ idx ].classList.remove('selected');