lexgui 0.1.18 → 0.1.20

package/build/components/codeeditor.js

@@ -30,7 +30,7 @@ function firstNonspaceIndex( str ) {
 }
 
 function deleteElement( el ) {
-    if(el) el.remove();
+    if( el ) el.remove();
 }
 
 let ASYNC_ENABLED = true;
@@ -59,11 +59,25 @@ class CodeSelection {
         return this.fromY === this.toY;
     }
 
+    samePosition() {
+        return this.fromX === this.toX;
+    }
+
+    isEmpty() {
+        return this.sameLine() && this.samePosition();
+    }
+
     invertIfNecessary() {
-        if(this.fromX > this.toX)
-            swapElements(this, 'fromX', 'toX');
-        if(this.fromY > this.toY)
-            swapElements(this, 'fromY', 'toY');
+        // if( this.fromX > this.toX )
+        if( this.fromY > this.toY )
+        {
+            swapElements( this, 'fromX', 'toX' );
+            swapElements( this, 'fromY', 'toY' );
+        } 
+        else if( this.sameLine() && this.fromX > this.toX )
+        {
+            swapElements( this, 'fromX', 'toX' );
+        }
     }
 
     selectInline( x, y, width ) {
@@ -82,6 +96,9 @@ class CodeSelection {
         domEl.style.left = "calc(" + domEl._left + "px + " + this.editor.xPadding + ")";
         domEl.style.width = width + "px";
         this.editor.selections.appendChild(domEl);
+
+        // Hide active line background
+        this.editor.code.childNodes.forEach( e => e.classList.remove( 'active-line' ) );
     }
 };
 
@@ -154,6 +171,10 @@ class CodeEditor {
     static CURSOR_LEFT  = 1;
     static CURSOR_TOP   = 2;
 
+    static SELECTION_X      = 1;
+    static SELECTION_Y      = 2
+    static SELECTION_X_Y    = CodeEditor.SELECTION_X | CodeEditor.SELECTION_Y;
+
     static KEEP_VISIBLE_LINES   = 1;
     static UPDATE_VISIBLE_LINES = 2;
 
@@ -170,11 +191,74 @@ class CodeEditor {
         window.editor = this;
 
         CodeEditor.__instances.push( this );
+        
+        // File explorer
+        if( options.file_explorer ?? false )
+        {
+            var [explorerArea, codeArea] = area.split({ sizes:["15%","85%"] });
+            explorerArea.setLimitBox( 180, 20, 512 );
+            this.explorerArea = explorerArea;
+
+            let panel = new LX.Panel();
+
+            panel.addTitle( "EXPLORER" );
+
+            let sceneData = {
+                'id': 'WORKSPACE',
+                'skipVisibility': true,
+                'children': []
+            };
+        
+            this.explorer = panel.addTree( null, sceneData, { 
+                filter: false,
+                rename: false,
+                skip_default_icon: true,
+                onevent: (event) => { 
+                    switch(event.type) {
+                        // case LX.TreeEvent.NODE_SELECTED:
+                        //     if( !this.tabs.tabDOMs[ event.node.id ] ) break;
+                        case LX.TreeEvent.NODE_DBLCLICKED:
+                            this.loadTab( event.node.id );
+                            break;
+                        case LX.TreeEvent.NODE_DELETED: 
+                            this.tabs.delete( event.node.id );
+                            delete this.loadedTabs[ event.node.id ];
+                            break;
+                        // case LX.TreeEvent.NODE_CONTEXTMENU: 
+                        //     LX.addContextMenu( event.multiple ? "Selected Nodes" : event.node.id, event.value, m => {
+                        //          
+                        //     });
+                        //     break;
+                        // case LX.TreeEvent.NODE_DRAGGED: 
+                        //     console.log(event.node.id + " is now child of " + event.value.id); 
+                        //     break;
+                    }
+                }
+            });    
+
+            this.addExplorerItem = function( item ) 
+            {
+                if( !this.explorer.data.children.find( (value, index) => value.id === item.id ) )
+                    this.explorer.data.children.push( item );
+            };
+
+            explorerArea.attach( panel );
+
+            // Update area
+            area = codeArea;
+        }
 
         this.base_area = area;
         this.area = new LX.Area( { className: "lexcodeeditor", height: "auto", no_append: true } );
 
-        this.tabs = this.area.addTabs( { onclose: (name) => delete this.openedTabs[ name ] } );
+        this.tabs = this.area.addTabs( { onclose: (name) => {
+            delete this.openedTabs[ name ];
+            if( Object.keys( this.openedTabs ).length < 2 )
+            {
+                clearInterval( this.blinker );
+                this.cursors.classList.remove( 'show' );
+            }
+        } } );
         this.tabs.root.addEventListener( 'dblclick', (e) => {
             if( options.allow_add_scripts ?? true ) {
                 e.preventDefault();
@@ -208,6 +292,9 @@ class CodeEditor {
         this.root.addEventListener( 'click', this.processMouse.bind(this) );
         this.root.addEventListener( 'contextmenu', this.processMouse.bind(this) );
 
+        // Add mouseup event to document as well to detect when selections end
+        document.body.addEventListener( 'mouseup', this._onMouseUp.bind(this) );
+
         // Cursors and selection
 
         this.cursors = document.createElement( 'div' );
@@ -230,13 +317,32 @@ class CodeEditor {
             cursor.style.left = this.xPadding;
             cursor._top = 0;
             cursor.style.top = cursor._top + "px";
-            cursor.position = 0;
+            cursor._position = 0;
             cursor._line = 0;
             cursor.print = (function() { console.log( this.line, this.position ) }).bind( cursor );
 
+            Object.defineProperty( this, 'line', {
+                get: (v) => { return cursor.line }
+            } );
+
+            Object.defineProperty( this, 'position', {
+                get: (v) => { return cursor.position }
+            } );
+
             Object.defineProperty( cursor, 'line', {
                 get: (v) => { return this._line },
-                set: (v) => { this._line = v; }
+                set: (v) => { 
+                    this._line = v;
+                    this._setActiveLine( v );
+                }
+            } );
+
+            Object.defineProperty( cursor, 'position', {
+                get: (v) => { return this._position },
+                set: (v) => { 
+                    this._position = v;
+                    this._updateDataInfoPanel( "@cursor-pos", "Col " + v );
+                }
             } );
 
             this.cursors.appendChild( cursor );
@@ -337,14 +443,15 @@ class CodeEditor {
 
         this.state = {
             focused: false,
-            selectingText: false
+            selectingText: false,
+            activeLine: null
         }
 
         // Code
 
         this.useAutoComplete = options.autocomplete ?? true;
         this.highlight = options.highlight ?? 'Plain Text';
-        this.onsave = options.onsave ?? ((code) => {  });
+        this.onsave = options.onsave ?? ((code) => { console.log( code, "save" ) });
         this.onrun = options.onrun ?? ((code) => { this.runScript(code) });
         this.actions = {};
         this.cursorBlinkRate = 550;
@@ -352,7 +459,7 @@ class CodeEditor {
         this.maxUndoSteps = 16;
         this.lineHeight = 20;
         this.defaultSingleLineCommentToken = "//";
-        this.charWidth = 8; //this.measureChar();
+        this.charWidth = 7; //this._measureChar();
         this._lastTime = null;
 
         this.pairKeys = {
@@ -372,17 +479,18 @@ class CodeEditor {
         // setInterval( this.scanWordSuggestions.bind( this ), 2000 );
 
         this.languages = {
-            'Plain Text': { },
-            'JavaScript': { },
-            'C++': { },
-            'CSS': { },
-            'GLSL': { },
-            'WGSL': { },
-            'JSON': { },
-            'XML': { },
-            'Python': { singleLineCommentToken: '#' },
-            'HTML': { },
-            'Batch': { blockComments: false, singleLineCommentToken: '::' }
+            'Plain Text': { ext: 'txt' },
+            'JavaScript': { ext: 'js' },
+            'C++': { ext: 'cpp' },
+            'CSS': { ext: 'css' },
+            'GLSL': { ext: 'glsl' },
+            'WGSL': { ext: 'wgsl' },
+            'JSON': { ext: 'json' },
+            'XML': { ext: 'xml' },
+            'Rust': { ext: 'rs' },
+            'Python': { ext: 'py', singleLineCommentToken: '#' },
+            'HTML': { ext: 'html' },
+            'Batch': { ext: 'bat', blockComments: false, singleLineCommentToken: '::' }
         };
 
         this.specialKeys = [
@@ -395,7 +503,7 @@ class CodeEditor {
             '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'],
+                    'NULL', 'unsigned', 'namespace'],
             'JSON': ['true', 'false'],
             'GLSL': ['true', 'false', 'function', 'int', 'float', 'vec2', 'vec3', 'vec4', 'mat2x2', 'mat3x3', 'mat4x4', 'struct'],
             'CSS': ['body', 'html', 'canvas', 'div', 'input', 'span', '.'],
@@ -403,6 +511,8 @@ class CodeEditor {
                     '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'],
+            'Rust': ['as', 'const', 'crate', 'enum', 'extern', 'false', 'fn', 'impl', 'in', 'let', 'mod', 'move', 'mut', 'pub', 'ref', 'self', 'Self', 'static', 'struct', 'super', 'trait', 'true', 
+                     'type', 'unsafe', 'use', 'where', 'abstract', 'become', 'box', 'final', 'macro', 'override', 'priv', 'typeof', 'unsized', 'virtual'],
             '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'],
@@ -420,6 +530,7 @@ class CodeEditor {
         };
         this.types = {
             'JavaScript': ['Object', 'String', 'Function', 'Boolean', 'Symbol', 'Error', 'Number', 'TextEncoder', 'TextDecoder'],
+            'Rust': ['u128'],
             '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', 
@@ -434,9 +545,10 @@ class CodeEditor {
         };
         this.statementsAndDeclarations = {
             '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', 'spdlog'],
+            'C++': ['std', 'for', 'if', 'else', 'return', 'continue', 'break', 'case', 'switch', 'while', 'using', 'glm', 'spdlog'],
             'GLSL': ['for', 'if', 'else', 'return', 'continue', 'break'],
             'WGSL': ['const','for', 'if', 'else', 'return', 'continue', 'break', 'storage', 'read', 'uniform'],
+            'Rust': ['break', 'else', 'continue', 'for', 'if', 'loop', 'match', 'return', 'while', 'do', 'yield'],
             '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']
@@ -448,6 +560,7 @@ class CodeEditor {
             'GLSL': ['[', ']', '{', '}', '(', ')'],
             'WGSL': ['[', ']', '{', '}', '(', ')', '->'],
             'CSS': ['{', '}', '(', ')', '*'],
+            'Rust': ['<', '>', '[', ']', '(', ')', '='],
             'Python': ['<', '>', '[', ']', '(', ')', '='],
             'Batch': ['[', ']', '(', ')', '%'],
             'HTML': ['<', '>', '/']
@@ -475,7 +588,7 @@ class CodeEditor {
             if( this.selection ) {
                 this.deleteSelection( cursor );
                 // Remove entire line when selecting with triple click
-                if(this.code.lines[ ln ] != undefined && !this.code.lines[ ln ].length) 
+                if( this._tripleClickSelection ) 
                 {
                     this.actions['Backspace'].callback( ln, cursor, e );
                     this.lineDown( cursor, true );
@@ -547,7 +660,6 @@ class CodeEditor {
 
             this.resetCursorPos( CodeEditor.CURSOR_LEFT );
             if(idx > 0) this.cursorToString( cursor, prestring );
-            this._refreshCodeInfo( cursor.line, cursor.position );
             this.setScrollLeft( 0 );
 
             if( e.shiftKey && !e.cancelShift )
@@ -563,7 +675,7 @@ class CodeEditor {
                     this.selection.selectInline( idx, cursor.line, this.measureString( string ) );
                 else
                 {
-                    this.processSelection();
+                    this.processSelection( e );
                 }
             } else if( !e.keepSelection )
                 this.endSelection();
@@ -571,7 +683,7 @@ class CodeEditor {
 
         this.action( 'End', false, ( ln, cursor, e ) => {
             
-            if( e.shiftKey || e._shiftKey ) {
+            if( ( e.shiftKey || e._shiftKey ) && !e.cancelShift ) {
                 
                 var string = this.code.lines[ ln ].substring( cursor.position );
                 if( !this.selection )
@@ -582,9 +694,9 @@ class CodeEditor {
                 {
                     this.resetCursorPos( CodeEditor.CURSOR_LEFT );
                     this.cursorToString( cursor, this.code.lines[ ln ] );            
-                    this.processSelection();
+                    this.processSelection( e );
                 }
-            } else 
+            } else if( !e.keepSelection )
                 this.endSelection();
 
             this.resetCursorPos( CodeEditor.CURSOR_LEFT );
@@ -643,16 +755,14 @@ class CodeEditor {
                     if( !this.selection )
                         this.startSelection( cursor );
 
-                    this.selection.toY = ( this.selection.toY > 0 ) ? ( this.selection.toY - 1 ) : 0;
-                    this.cursorToLine( cursor, this.selection.toY );
+                    this.lineUp();
 
                     var letter = this.getCharAtPos( cursor );
                     if( !letter ) {
-                        this.selection.toX = this.code.lines[ cursor.line ].length;
-                        this.cursorToPosition( cursor, this.selection.toX );
+                        this.cursorToPosition( cursor, this.code.lines[ cursor.line ].length );
                     }
                     
-                    this.processSelection( null, true );
+                    this.processSelection( e, false );
 
                 } else {
                     this.endSelection();
@@ -665,7 +775,7 @@ class CodeEditor {
             // Move up autocomplete selection
             else
             {
-                this.moveArrowSelectedAutoComplete('up');
+                this._moveArrowSelectedAutoComplete('up');
             }
         });
 
@@ -678,16 +788,14 @@ class CodeEditor {
                     if( !this.selection )
                         this.startSelection( cursor );
 
-                    this.selection.toY = this.selection.toY < this.code.lines.length - 1 ? this.selection.toY + 1 : this.code.lines.length - 1;
-                    this.cursorToLine( cursor, this.selection.toY );
+                    this.lineDown( cursor );
                     
                     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.cursorToPosition( cursor, Math.max(this.code.lines[ cursor.line ].length - 1, 0) );
                     }
 
-                    this.processSelection( null, true );
+                    this.processSelection( e );
                 } else {
     
                     if( this.code.lines[ ln + 1 ] == undefined ) 
@@ -702,12 +810,16 @@ class CodeEditor {
             // Move down autocomplete selection
             else
             {
-                this.moveArrowSelectedAutoComplete('down');
+                this._moveArrowSelectedAutoComplete('down');
             }
         });
 
         this.action( 'ArrowLeft', false, ( ln, cursor, e ) => {
 
+            // Nothing to do..
+            if( cursor.line == 0 && cursor.position == 0 )
+            return;
+
             if( e.metaKey ) { // Apple devices (Command)
                 e.preventDefault();
                 this.actions[ 'Home' ].callback( ln, cursor, e );
@@ -715,29 +827,29 @@ class CodeEditor {
             else if( e.ctrlKey ) {
                 // Get next word
                 const [word, from, to] = this.getWordAtPos( cursor, -1 );
-                var diff = Math.max(cursor.position - from, 1);
-                var substr = word.substr(0, diff);
+                // If no length, we change line..
+                if( !word.length && this.lineUp( cursor, true ) ) {
+                    e.cancelShift = true;
+                    e.keepSelection = true;
+                    this.actions[ 'End' ].callback( cursor.line, cursor, e );
+                    delete e.cancelShift;
+                    delete e.keepSelection;
+                }
+                var diff = Math.max( cursor.position - from, 1 );
+                var substr = word.substr( 0, diff );
                 // Selections...
                 if( e.shiftKey ) { if( !this.selection ) this.startSelection( cursor ); }
                 else this.endSelection();
-                this.cursorToString(cursor, substr, true);
-                if( e.shiftKey ) this.processSelection();
+                this.cursorToString( cursor, substr, true );
+                if( e.shiftKey ) this.processSelection( e, false, true );
             }
             else {
                 var letter = this.getCharAtPos( cursor, -1 );
                 if( letter ) {
                     if( e.shiftKey ) {
                         if( !this.selection ) this.startSelection( cursor );
-                        if( ( ( cursor.position - 1 ) < this.selection.fromX ) && this.selection.sameLine() )
-                            this.selection.fromX--;
-                        else if( ( cursor.position - 1 ) == this.selection.fromX && this.selection.sameLine() ) {
-                            this.cursorToLeft( letter, cursor );
-                            this.endSelection();
-                            return;
-                        }
-                        else this.selection.toX--;
                         this.cursorToLeft( letter, cursor );
-                        this.processSelection( null, true );
+                        this.processSelection( e, false, CodeEditor.SELECTION_X );
                     }
                     else {
                         if( !this.selection ) {
@@ -756,55 +868,48 @@ class CodeEditor {
                 }
                 else if( cursor.line > 0 ) {
                     
-                    if( e.shiftKey ) {
-                        if( !this.selection ) this.startSelection( cursor );
-                    }
+                    if( e.shiftKey && !this.selection ) this.startSelection( cursor );
                         
                     this.lineUp( cursor );
+
+                    e.cancelShift = e.keepSelection = true;
                     this.actions[ 'End' ].callback( cursor.line, cursor, e );
+                    delete e.cancelShift; delete e.keepSelection;
 
-                    if( e.shiftKey ) {
-                        this.selection.toX = cursor.position;
-                        this.selection.toY--;
-                        this.processSelection( null, true );
-                    }
+                    if( e.shiftKey ) this.processSelection( e, false );
                 }
             }
         });
 
         this.action( 'ArrowRight', false, ( ln, cursor, e ) => {
 
+            // Nothing to do..
+            if( cursor.line == this.code.lines.length - 1 && 
+                cursor.position == this.code.lines[ cursor.line - 1 ].length )
+            return;
+
             if( e.metaKey ) { // Apple devices (Command)
                 e.preventDefault();
                 this.actions[ 'End' ].callback( ln, cursor );
             } else if( e.ctrlKey ) {
                 // Get next word
                 const [ word, from, to ] = this.getWordAtPos( cursor );
+                // If no length, we change line..
+                if( !word.length ) this.lineDown( cursor, true );
                 var diff = cursor.position - from;
                 var substr = word.substr( diff );
                 // Selections...
                 if( e.shiftKey ) { if( !this.selection ) this.startSelection( cursor ); }
                 else this.endSelection();
                 this.cursorToString( cursor, substr);
-                if( e.shiftKey ) this.processSelection();
+                if( e.shiftKey ) this.processSelection( e );
             } else {
                 var letter = this.getCharAtPos( cursor );
                 if( letter ) {
                     if( e.shiftKey ) {
                         if( !this.selection ) this.startSelection( cursor );
-                        var keep_range = false;
-                        if( cursor.position == this.selection.fromX ) {
-                            if( ( cursor.position + 1 ) == this.selection.toX && this.selection.sameLine() ) {
-                                this.cursorToRight( letter, cursor );
-                                this.endSelection();
-                                return;
-                            } else if( cursor.position < this.selection.toX ) {
-                                this.selection.fromX++;
-                                keep_range = true;
-                            } else this.selection.toX++;
-                        }
                         this.cursorToRight( letter, cursor );
-                        this.processSelection( null, keep_range );
+                        this.processSelection( e, false, CodeEditor.SELECTION_X );
                     }else{
                         if( !this.selection ) {
                             this.cursorToRight( letter, cursor );
@@ -825,18 +930,11 @@ class CodeEditor {
                     
                     if( e.shiftKey ) {
                         if( !this.selection ) this.startSelection( cursor );
-                        e.cancelShift = true;
-                        e.keepSelection = true;
                     }
 
-                    this.lineDown( cursor );
-                    this.actions['Home'].callback( cursor.line, cursor, e );
+                    this.lineDown( cursor, true );
                     
-                    if( e.shiftKey ) {
-                        this.selection.toX = cursor.position;
-                        this.selection.toY++;
-                        this.processSelection( null, true );
-                    }
+                    if( e.shiftKey ) this.processSelection( e, false );
 
                     this.hideAutoCompleteBox();
                 }
@@ -845,6 +943,7 @@ class CodeEditor {
 
         // Default code tab
     
+        this.loadedTabs = { };
         this.openedTabs = { };
         
         if( options.allow_add_scripts ?? true )
@@ -855,6 +954,28 @@ class CodeEditor {
         // Create inspector panel
         let panel = this._createPanelInfo();
         if( panel ) area.attach( panel );
+
+        const fontUrl = "https://raw.githubusercontent.com/jxarco/lexgui.js/master/" + "/data/CommitMono-400-Regular.otf";
+        const commitMono = new FontFace(
+            "CommitMono",
+            `url(${ fontUrl })`,
+            {
+                style: "normal",
+                weight: "400",
+                display: "swap"
+            }
+        );
+        
+        // Add to the document.fonts (FontFaceSet)
+        document.fonts.add(commitMono);
+
+        // Load the font
+        commitMono.load();
+
+        // Wait until the fonts are all loaded
+        document.fonts.ready.then(() => {
+            console.log("commitMono loaded")
+        });
     }
 
     static getInstances()
@@ -862,6 +983,26 @@ class CodeEditor {
         return CodeEditor.__instances;
     }
 
+    // This received key inputs from the entire document...
+    onKeyPressed( e ) {
+        
+        // Toggle visibility of the file explorer
+        if( e.key == 'b' && e.ctrlKey && this.explorer )
+        {
+            this.explorerArea.root.classList.toggle( "hidden" );
+            if( this._lastBaseareaWidth )
+            {
+                this.base_area.root.style.width = this._lastBaseareaWidth;
+                delete this._lastBaseareaWidth;
+
+            } else
+            {
+                this._lastBaseareaWidth = this.base_area.root.style.width;
+                this.base_area.root.style.width = "100%";
+            }
+        }
+    }
+
     getText( min ) {
         return this.code.lines.join(min ? ' ' : '\n');
     }
@@ -951,11 +1092,22 @@ class CodeEditor {
     loadFile( file ) {
 
         const inner_add_tab = ( text, name, title ) => {
-            const existing = this.addTab(name, true, title);
-            if( !existing )
+
+            // Set current text and language
+            const lines = text.replaceAll( '\r', '' ).split( '\n' );
+
+            // Add item in the explorer if used
+            if( this.explorer )
+            {
+                this._storedLines = this._storedLines ?? {};
+                this._storedLines[ name ] = lines;
+                this.addExplorerItem( { 'id': name, 'skipVisibility': true, 'icon': this._getFileIcon( name ) } );
+                this.explorer.frefresh( name );
+            }
+            else
             {
-                text = text.replaceAll( '\r', '' );
-                this.code.lines = text.split( '\n' );
+                this.addTab(name, true, title);
+                this.code.lines = lines;
                 this._changeLanguageFromExtension( LX.getExtension( name ) );
             }
         };
@@ -1011,8 +1163,37 @@ class CodeEditor {
 
         this.code.language = lang;
         this.highlight = lang;
-        this._refreshCodeInfo();
+        this._updateDataInfoPanel( "@highlight", lang );
         this.processLines();
+
+        const ext = this.languages[ lang ].ext;
+        const icon = this._getFileIcon( null, ext );
+
+        // Update tab icon
+        {
+            const tab = this.tabs.tabDOMs[ this.code.tabName ];
+            tab.firstChild.remove();
+            console.assert( tab != undefined );
+            var iconEl;
+            if( icon.includes( 'fa-' ) )
+            {
+                iconEl = document.createElement( 'i' );
+                iconEl.className = icon;
+            } else {
+                iconEl = document.createElement( 'img' );
+                iconEl.src = "https://raw.githubusercontent.com/jxarco/lexgui.js/master/" + icon;
+            }
+            tab.prepend( iconEl );
+        }
+
+        // Update explorer icon
+        if( this.explorer )
+        {
+            const item = this.explorer.data.children.filter( (v) => v.id === this.code.tabName )[ 0 ];
+            console.assert( item != undefined );
+            item.icon = icon;
+            this.explorer.frefresh( this.code.tabName );
+        }
     }
 
     _changeLanguageFromExtension( ext ) {
@@ -1020,23 +1201,13 @@ class CodeEditor {
         if( !ext )
         return this._changeLanguage( this.code.language );
 
-        switch( ext.toLowerCase() )
+        for( let l in this.languages )
         {
-            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 'html': return this._changeLanguage( 'HTML' );
-            case 'txt': 
-            default:
-                this._changeLanguage( 'Plain Text' );
+            if( this.languages[l].ext == ext )
+                return this._changeLanguage( l );
         }
+
+        this._changeLanguage( 'Plain Text' );
     }
 
     _createPanelInfo() {
@@ -1044,34 +1215,23 @@ class CodeEditor {
         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 + 1;
-                panel.col = col + 1;
-                panel.clear();
-                panel.sameLine();
-                panel.addLabel( this.code.title, { float: 'right' });
-                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 Object.keys(this.languages) )
-                            m.add( lang, this._changeLanguage.bind(this) );
-                    });
-                }, { width: "25%", nameWidth: "15%" });
-                panel.endLine();
-            };
 
-            this._refreshCodeInfo();
+            panel.sameLine();
+            panel.addLabel( this.code.title, { float: 'right', signal: "@tab-name" });
+            panel.addLabel( "Ln " + 1, { width: "64px", signal: "@cursor-line" });
+            panel.addLabel( "Col " + 1, { width: "64px", signal: "@cursor-pos" });
+            panel.addButton( "<b>{ }</b>", this.highlight, ( value, event ) => {
+                LX.addContextMenu( "Language", event, m => {
+                    for( const lang of Object.keys(this.languages) )
+                        m.add( lang, this._changeLanguage.bind(this) );
+                });
+            }, { width: "25%", nameWidth: "15%", signal: "@highlight" });
+            panel.endLine();
 
             return panel;
         }
         else
         {
-            this._refreshCodeInfo = () => {};
-
             doAsync( () => {
 
                 // Change css a little bit...
@@ -1083,24 +1243,72 @@ class CodeEditor {
         }
     }
 
+    _getFileIcon( name, extension ) {
+
+        const isNewTabButton = name ? ( name === '+' ) : false;
+        const ext = extension ?? LX.getExtension( name );
+        return ext == 'html' ? "fa-solid fa-code orange" : 
+            ext == 'css' ? "fa-solid fa-hashtag dodgerblue" : 
+            ext == 'xml' ? "fa-solid fa-rss orange" : 
+            ext == 'bat' ? "fa-brands fa-windows lightblue" : 
+            [ 'js', 'py', 'json', 'cpp', 'rs' ].indexOf( ext ) > -1 ? "images/" + ext + ".png" : 
+            !isNewTabButton ? "fa-solid fa-align-left gray" : undefined;
+    }
+
     _onNewTab( e ) {
 
         this.processFocus(false);
 
         LX.addContextMenu( null, e, m => {
             m.add( "Create", this.addTab.bind( this, "unnamed.js", true ) );
-            m.add( "Load", this.loadTab.bind( this, "unnamed.js", true ) );
+            m.add( "Load", this.loadTabFromFile.bind( this, "unnamed.js", true ) );
         });
     }
 
-    addTab( name, selected, title ) {
-        
-        if(this.openedTabs[ name ])
+    _onSelectTab( isNewTabButton, event, name,  ) {
+
+        if( isNewTabButton )
         {
-            this.tabs.select( this.code.tabName );
-            return true;
+            this._onNewTab( event );
+            return;
         }
 
+        var cursor = cursor ?? this.cursors.children[ 0 ];
+        this.saveCursor( cursor, this.code.cursorState );    
+
+        this.code = this.loadedTabs[ name ];
+        this.restoreCursor( cursor, this.code.cursorState );    
+
+        this.endSelection();
+        this._changeLanguageFromExtension( LX.getExtension( name ) );
+        this._updateDataInfoPanel( "@tab-name", name );
+    }
+
+    _onContextMenuTab( isNewTabButton, event, name,  ) {
+        
+        if( isNewTabButton )
+        return;
+
+        LX.addContextMenu( null, event, m => {
+            m.add( "Close", () => { this.tabs.delete( name ) } );
+            m.add( "" );
+            m.add( "Rename", () => { console.warn( "TODO" )} );
+        });
+    }
+
+    addTab( name, selected, title ) {
+        
+        // If already loaded, set new name...
+        const repeats = Object.keys( editor.loadedTabs ).slice( 1 ).reduce( ( v, key ) => {
+            const noRepeatName = key.replace( /[_\d+]/g, '');
+            return v + ( noRepeatName == name );
+        }, 0 );
+
+        if( repeats > 0 )
+            name = name.split( '.' ).join( '_' + repeats + '.' );
+
+        const isNewTabButton = ( name === '+' );
+
         // Create code content
         let code = document.createElement( 'div' );
         code.className = 'code';
@@ -1129,34 +1337,25 @@ class CodeEditor {
                 this.loadFile( e.dataTransfer.files[ i ] );
         });
 
+        this.loadedTabs[ name ] = code;
         this.openedTabs[ name ] = code;
+        
+        const tabIcon = this._getFileIcon( name );
 
-        const ext = LX.getExtension( name );
+        if( this.explorer && !isNewTabButton )
+        {
+            this.addExplorerItem( { 'id': name, 'skipVisibility': true, 'icon': tabIcon } );
+            this.explorer.frefresh( name );
+        }
 
-        this.tabs.add(name, code, { 
+        this.tabs.add( name, code, { 
             selected: selected, 
-            fixed: (name === '+') , 
+            fixed: isNewTabButton, 
             title: code.title, 
-            icon:   ext == 'html' ? "fa-solid fa-code orange" : 
-                    ext == 'js' ? "images/js.png" :
-                    ext == 'py' ? "images/py.png" : undefined, 
-            onSelect: (e, tabname) => {
-
-                if(tabname == '+')
-                {
-                    this._onNewTab( e );
-                    return;
-                }
-
-                var cursor = cursor ?? this.cursors.children[ 0 ];
-                this.saveCursor( cursor, this.code.cursorState );    
-                this.code = this.openedTabs[ tabname ];
-                this.restoreCursor( cursor, this.code.cursorState );    
-                this.endSelection();
-                this._changeLanguageFromExtension( LX.getExtension( tabname ) );
-                this._refreshCodeInfo( cursor.line, cursor.position );
-            }
-        });
+            icon: tabIcon, 
+            onSelect: this._onSelectTab.bind( this, isNewTabButton ),
+            onContextMenu: this._onContextMenuTab.bind( this, isNewTabButton )
+        } );
 
         // Move into the sizer..
         this.codeSizer.appendChild( code );
@@ -1168,11 +1367,66 @@ class CodeEditor {
             this.code = code;  
             this.resetCursorPos( CodeEditor.CURSOR_LEFT | CodeEditor.CURSOR_TOP );
             this.processLines();
-            doAsync( () => this._refreshCodeInfo( 0, 0 ), 50 );
         }
+
+        this._updateDataInfoPanel( "@tab-name", name );
+
+        // Bc it could be overrided..
+        return name;
     }
 
-    loadTab() {
+    loadTab( name ) {
+
+        // Already open...
+        if( this.openedTabs[ name ] )
+        {
+            this.tabs.select( name );
+            return;
+        }
+
+        let code = this.loadedTabs[ name ]
+
+        if( !code )
+        {
+            this.addTab( name, true );
+            // Unload lines from file...
+            if( this._storedLines[ name ] )
+            {
+                this.code.lines = this._storedLines[ name ];
+                delete this._storedLines[ name ];
+            }
+            this._changeLanguageFromExtension( LX.getExtension( name ) );
+            return;
+        }
+
+        this.openedTabs[ name ] = code;
+        
+        const isNewTabButton = ( name === '+' );
+        const tabIcon = this._getFileIcon( name );
+
+        this.tabs.add(name, code, { 
+            selected: true, 
+            fixed: isNewTabButton, 
+            title: code.title, 
+            icon: tabIcon, 
+            onSelect: this._onSelectTab.bind( this, isNewTabButton ),
+            onContextMenu: this._onContextMenuTab.bind( this, isNewTabButton )
+        });
+
+        // Move into the sizer..
+        this.codeSizer.appendChild( code );
+        
+        this.endSelection();
+
+        // Select as current...
+        this.code = code;  
+        this.resetCursorPos( CodeEditor.CURSOR_LEFT | CodeEditor.CURSOR_TOP );
+        this.processLines();
+        this._changeLanguageFromExtension( LX.getExtension( name ) );
+        this._updateDataInfoPanel( "@tab-name", tabname );
+    }
+
+    loadTabFromFile() {
         const input = document.createElement( 'input' );
         input.type = 'file';
         document.body.appendChild( input );
@@ -1191,7 +1445,7 @@ class CodeEditor {
             this.restartBlink();
         else {
             clearInterval( this.blinker );
-            this.cursors.classList.remove('show');
+            this.cursors.classList.remove( 'show' );
         }
     }
 
@@ -1216,7 +1470,7 @@ class CodeEditor {
             // Left click only...
             if( e.button === 2 )
             {
-                this.processClick(e);
+                this.processClick( e );
 
                 this.canOpenContextMenu = !this.selection;
 
@@ -1236,21 +1490,13 @@ class CodeEditor {
         
         else if( e.type == 'mouseup' )
         {
-            if( (LX.getTime() - this.lastMouseDown) < 300 ) {
-                this.state.selectingText = false;
-                this.processClick(e);
-                this.endSelection();
-            }
-
-            if(this.selection) this.selection.invertIfNecessary();
-
-            this.state.selectingText = false;
+            this._onMouseUp( e );
         }
 
         else if( e.type == 'mousemove' )
         {
             if( this.state.selectingText )
-                this.processSelection(e);
+                this.processSelection( e );
         }
 
         else if ( e.type == 'click' ) // trip
@@ -1270,6 +1516,7 @@ class CodeEditor {
                     this.resetCursorPos( CodeEditor.CURSOR_LEFT );
                     e._shiftKey = true;
                     this.actions['End'].callback(cursor.line, cursor, e);
+                    this._tripleClickSelection = true;
                     break;
             }
         }
@@ -1300,7 +1547,24 @@ class CodeEditor {
         }
     }
 
-    processClick( e, skip_refresh = false ) {
+    _onMouseUp( e ) {
+
+        if( (LX.getTime() - this.lastMouseDown) < 300 ) {
+            this.state.selectingText = false;
+            this.processClick( e );
+            this.endSelection();
+        }
+
+        if( this.selection )
+        {
+            this.selection.invertIfNecessary();
+        }
+
+        this.state.selectingText = false;
+        delete this._lastSelectionKeyDir;
+    }
+
+    processClick( e ) {
 
         var cursor = this.cursors.children[ 0 ];
         var code_rect = this.codeScroller.getBoundingClientRect();
@@ -1317,24 +1581,51 @@ class CodeEditor {
         this.cursorToPosition( cursor, string.length );
 
         this.hideAutoCompleteBox();
-        
-        if( !skip_refresh ) 
-            this._refreshCodeInfo( ln, cursor.position );
     }
 
-    processSelection( e, keep_range ) {
+    processSelection( e, keep_range, flags = CodeEditor.SELECTION_X_Y ) {
 
         var cursor = this.cursors.children[ 0 ];
+        const isMouseEvent = e && ( e.constructor == MouseEvent );
 
-        if( e ) this.processClick( e, true );
+        if( isMouseEvent ) this.processClick( e );
         if( !this.selection )
             this.startSelection( cursor );
 
+        // Hide active line background
+        this.code.childNodes.forEach( e => e.classList.remove( 'active-line' ) );
+
         // Update selection
-        if(!keep_range)
+        if( !keep_range )
+        {
+            let ccw = true;
+
+            // Check if we must change ccw or not ... (not with mouse)
+            if( !isMouseEvent && this.line >= this.selection.fromY && 
+                (this.line == this.selection.fromY ? this.position >= this.selection.fromX : true) )
+            {
+                ccw = ( e && this._lastSelectionKeyDir && ( e.key == 'ArrowRight' || e.key == 'ArrowDown' || e.key == 'End' ) );
+            }
+
+            if( ccw )
+            {
+                if( flags & CodeEditor.SELECTION_X ) this.selection.fromX = cursor.position;
+                if( flags & CodeEditor.SELECTION_Y ) this.selection.fromY = cursor.line;
+            }
+            else
+            {
+                if( flags & CodeEditor.SELECTION_X ) this.selection.toX = cursor.position;
+                if( flags & CodeEditor.SELECTION_Y ) this.selection.toY = cursor.line;
+            }
+
+            this._lastSelectionKeyDir = ccw;
+        }
+
+        // Only leave if not a mouse selection...
+        if( !isMouseEvent && this.selection.isEmpty() )
         {
-            this.selection.toX = cursor.position;
-            this.selection.toY = cursor.line;
+            this.endSelection();
+            return;
         }
 
         this.selection.chars = 0;
@@ -1477,9 +1768,10 @@ class CodeEditor {
                 const nlines = this.code.lines.length - 1;
                 this.selection.toX = this.code.lines[ nlines ].length;
                 this.selection.toY = nlines;
-                this.processSelection( null, true );
                 this.cursorToPosition( cursor, this.selection.toX );
                 this.cursorToLine( cursor, this.selection.toY );
+                this.processSelection( null, true );
+                this.hideAutoCompleteBox();
                 break;
             case 'c': // copy
                 this._copyContent();
@@ -1489,6 +1781,7 @@ class CodeEditor {
                 this.code.lines.splice( lidx, 0, this.code.lines[ lidx ] );
                 this.lineDown( cursor );
                 this.processLines();
+                this.hideAutoCompleteBox();
                 return;
             case 's': // save
                 e.preventDefault();
@@ -1499,14 +1792,15 @@ class CodeEditor {
                 return;
             case 'x': // cut line
                 this._cutContent();
+                this.hideAutoCompleteBox();
                 return;
             case 'z': // undo
                 if(!this.code.undoSteps.length)
                     return;
                 const step = this.code.undoSteps.pop();
                 this.code.lines = step.lines;
-                this.restoreCursor( cursor, step.cursor );
                 this.processLines();
+                this.restoreCursor( cursor, step.cursor );
                 return;
             }
         }
@@ -1521,6 +1815,7 @@ class CodeEditor {
                 this.lineUp();
                 this.processLine( lidx - 1 );
                 this.processLine( lidx );
+                this.hideAutoCompleteBox();
                 return;
             case 'ArrowDown':
                 if(this.code.lines[ lidx + 1 ] == undefined)
@@ -1529,6 +1824,7 @@ class CodeEditor {
                 this.lineDown();
                 this.processLine( lidx );
                 this.processLine( lidx + 1 );
+                this.hideAutoCompleteBox();
                 return;
             }
         }
@@ -1561,7 +1857,7 @@ class CodeEditor {
         const enclosableKeys = ["\"", "'", "(", "{"];
         if( enclosableKeys.indexOf( key ) > -1 )
         {
-            if( this._encloseSelectedWordWithKey(key, lidx, cursor) ) 
+            if( this._encloseSelectedWordWithKey( key, lidx, cursor ) ) 
                 return;
         }
 
@@ -1570,8 +1866,8 @@ class CodeEditor {
 
         if( this.selection )
         {
-            this.actions['Backspace'].callback(lidx, cursor, e);
-            lidx = cursor.line; // Update this, since it's from the old code
+            this.actions['Backspace'].callback( lidx, cursor, e );
+            lidx = cursor.line;
         }
 
         // Append key
@@ -1668,11 +1964,15 @@ class CodeEditor {
         let lidx = cursor.line;
         let text_to_cut = "";
 
+        this._addUndoStep( cursor );
+
         if( !this.selection ) {
             text_to_cut = "\n" + this.code.lines[ cursor.line ];
             this.code.lines.splice( lidx, 1 );
             this.processLines();
             this.resetCursorPos( CodeEditor.CURSOR_LEFT );
+            if( this.code.lines[ lidx ] == undefined )
+                this.lineUp();
         }
         else {
             
@@ -1735,7 +2035,6 @@ class CodeEditor {
         
         const start = performance.now();
 
-        var gutter_html = "";
         var code_html = "";
         
         // Reset all lines content
@@ -1761,16 +2060,11 @@ class CodeEditor {
         // Process visible lines
         for( let i = this.visibleLinesViewport.x; i < this.visibleLinesViewport.y; ++i )
         {
-            gutter_html += "<span>" + (i + 1) + "</span>";
             code_html += this.processLine( i, true );
         }
         
         this.code.innerHTML = code_html;
             
-        // console.log("RANGE:", this.visibleLinesViewport);
-        // console.log( "Num lines processed:",  (this.visibleLinesViewport.y - this.visibleLinesViewport.x), performance.now() - start );
-        // console.log("--------------------------------------------");
-
         // Update scroll data
         this.codeScroller.scrollTop = lastScrollTop;
         this.code.style.top = ( this.visibleLinesViewport.x * this.lineHeight ) + "px";
@@ -1779,10 +2073,8 @@ class CodeEditor {
         if( this.selection )
             this.processSelection( null, true );
 
-        // Clear tmp vars
-        delete this._buildingString; 
-        delete this._pendingString;
-
+        this._clearTmpVariables();
+        this._setActiveLine();
         this.resize();
     }
 
@@ -1793,7 +2085,10 @@ class CodeEditor {
 
         const UPDATE_LINE = ( html ) => {
             if( !force ) // Single line update
+            {
                 this.code.childNodes[ local_line_num ].innerHTML = gutter_line + html;
+                this._clearTmpVariables();
+            }
             else // Update all lines at once
                 return "<pre>" + ( gutter_line + html ) + "</pre>";
         }
@@ -1847,8 +2142,6 @@ class CodeEditor {
             {
                 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, (i == tokensToEvaluate.length - 1) );
@@ -1859,7 +2152,7 @@ class CodeEditor {
 
     _processTokens( tokens, offset = 0 ) {
 
-        if( this.highlight == 'C++' )
+        if( this.highlight == 'C++' || this.highlight == 'CSS' )
         {
             var idx = tokens.slice( offset ).findIndex( ( value, index ) => this.isNumber( value ) );
             if( idx > -1 )
@@ -1915,8 +2208,6 @@ class CodeEditor {
             linestring = ogLine.substring( 0, hasCommentIdx );
         }
 
-        // const usesBlockComments = this.languages[ this.highlight ].blockComments ?? true;
-
         let tokensToEvaluate = []; // store in a temp array so we know prev and next tokens...
 
         const pushToken = function( t ) {
@@ -1925,7 +2216,7 @@ class CodeEditor {
             tokensToEvaluate.push( t );
         };
 
-        let iter = linestring.matchAll(/(::|[\[\](){}<>.,;:*"'%@!/= ])/g);
+        let iter = linestring.matchAll(/(\*\/|\/\*|::|[\[\](){}<>.,;:*"'%@!/= ])/g);
         let subtokens = iter.next();
         if( subtokens.value )
         {
@@ -1945,26 +2236,6 @@ class CodeEditor {
         }
         else tokensToEvaluate.push( linestring );
 
-        // if( usesBlockComments )
-        // {
-        //     var block = false;
-
-        //     if( t.includes('/*') )
-        //     {
-        //         const idx = t.indexOf( '/*' );
-        //         tokensToEvaluate.push( t.substring( 0, idx ), '/*', t.substring( idx + 2 ) );
-        //         block |= true;
-        //     }
-        //     else if( t.includes('*/') )
-        //     {
-        //         const idx = t.indexOf( '*/' );
-        //         tokensToEvaluate.push( t.substring( 0, idx ), '*/', t.substring( idx + 2 ) );
-        //         block |= true;
-        //     }
-
-        //     if( block ) continue;
-        // }
-
         if( hasCommentIdx != undefined )
         {
             pushToken( ogLine.substring( hasCommentIdx ) );
@@ -2001,6 +2272,8 @@ class CodeEditor {
             this._buildingString = token;
         }
 
+        const usesBlockComments = this.languages[ this.highlight ].blockComments ?? true;
+
         if(token == ' ')
         {
             if( this._buildingString != undefined )
@@ -2013,7 +2286,6 @@ class CodeEditor {
         else
         {
             const singleLineCommentToken = this.languages[ this.highlight ].singleLineCommentToken ?? this.defaultSingleLineCommentToken;
-            const usesBlockComments = this.languages[ this.highlight ].blockComments ?? true;
             
             let token_classname = "";
             let discardToken = false;
@@ -2039,12 +2311,6 @@ class CodeEditor {
             else if( token.substr( 0, singleLineCommentToken.length ) == singleLineCommentToken )
                 token_classname = "cm-com";
 
-            else if( usesBlockComments && token.substr( 0, 2 ) == '/*' )
-                token_classname = "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,'') ) )
                 token_classname = "cm-dec";
 
@@ -2076,6 +2342,11 @@ class CodeEditor {
                 token_classname = "cm-mtd";
 
 
+            if( usesBlockComments && this._buildingBlockComment && token.substr( 0, 2 ) == '*/' )
+            {
+                delete this._buildingBlockComment;
+            }
+
             // We finished constructing a string
             if( this._buildingString && ( this._stringEnded || isLastToken ) )
             {
@@ -2131,6 +2402,12 @@ class CodeEditor {
             else if( token.lastChar == 'u' )
                 return !(token.includes('.')) && this.isNumber( token.substring(0, token.length - 1) );
         }
+
+        else if(this.highlight == 'CSS')
+        {
+            if( token.lastChar == '%' )
+                return this.isNumber( token.substring(0, token.length - 1) )
+        }
         
         return token.length && token != ' ' && !Number.isNaN(+token);
     }
@@ -2208,31 +2485,43 @@ class CodeEditor {
     lineUp( cursor, resetLeft ) {
 
         cursor = cursor ?? this.cursors.children[ 0 ];
+
+        if( this.code.lines[ cursor.line - 1 ] == undefined ) 
+            return false;
+
         cursor.line--;
         cursor.line = Math.max( 0, cursor.line );
         this.cursorToTop( cursor, resetLeft );
+
+        return true;
     }
 
     lineDown( cursor, resetLeft ) {
 
         cursor = cursor ?? this.cursors.children[ 0 ];
+        
+        if( this.code.lines[ cursor.line + 1 ] == undefined ) 
+            return false;
+    
         cursor.line++;
         this.cursorToBottom( cursor, resetLeft );
+
+        return true;
     }
 
     restartBlink() {
 
         if( !this.code ) return;
 
-        clearInterval(this.blinker);
-        this.cursors.classList.add('show');
+        clearInterval( this.blinker );
+        this.cursors.classList.add( 'show' );
 
-        if (this.cursorBlinkRate > 0)
+        if( this.cursorBlinkRate > 0 )
             this.blinker = setInterval(() => {
-                this.cursors.classList.toggle('show');
+                this.cursors.classList.toggle( 'show' );
             }, this.cursorBlinkRate);
-        else if (this.cursorBlinkRate < 0)
-            this.cursors.classList.remove('show');
+        else if( this.cursorBlinkRate < 0 )
+            this.cursors.classList.remove( 'show' );
     }
 
     startSelection( cursor ) {
@@ -2241,10 +2530,10 @@ class CodeEditor {
         this.selections.innerHTML = "";
 
         // Show elements
-        this.selections.classList.add('show');
+        this.selections.classList.add( 'show' );
 
         // Create new selection instance
-        this.selection = new CodeSelection(this, cursor.position, cursor.line);
+        this.selection = new CodeSelection( this, cursor.position, cursor.line );
     }
 
     deleteSelection( cursor ) {
@@ -2261,7 +2550,7 @@ class CodeEditor {
 
         // Get linear start index
         let index = 0;
-        for(let i = 0; i <= this.selection.fromY; i++)
+        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; 
@@ -2274,18 +2563,17 @@ class CodeEditor {
         
         this.cursorToLine( cursor, this.selection.fromY, true );
         this.cursorToPosition( cursor, this.selection.fromX );
-        
         this.endSelection();
-
         this.processLines();
-        this._refreshCodeInfo( cursor.line, cursor.position );
     }
 
     endSelection() {
 
-        this.selections.classList.remove('show');
+        this.selections.classList.remove( 'show' );
         this.selections.innerHTML = "";
         delete this.selection;
+        delete this._tripleClickSelection;
+        delete this._lastSelectionKeyDir;
     }
 
     cursorToRight( key, cursor ) {
@@ -2297,7 +2585,6 @@ class CodeEditor {
         cursor.position++;
 
         this.restartBlink();
-        this._refreshCodeInfo( cursor.line, cursor.position );
 
         // Add horizontal scroll
 
@@ -2310,7 +2597,7 @@ class CodeEditor {
 
     cursorToLeft( key, cursor ) {
 
-        if(!key) return;
+        if( !key ) return;
         cursor = cursor ?? this.cursors.children[ 0 ];
         cursor._left -= this.charWidth;
         cursor._left = Math.max( cursor._left, 0 );
@@ -2318,7 +2605,6 @@ class CodeEditor {
         cursor.position--;
         cursor.position = Math.max( cursor.position, 0 );
         this.restartBlink();
-        this._refreshCodeInfo( cursor.line, cursor.position );
 
         // Add horizontal scroll
 
@@ -2340,8 +2626,6 @@ class CodeEditor {
         if(resetLeft)
             this.resetCursorPos( CodeEditor.CURSOR_LEFT, cursor );
 
-        this._refreshCodeInfo( cursor.line, cursor.position );
-
         doAsync(() => {
             var first_line = ( this.getScrollTop() / this.lineHeight )|0;
             if( (cursor.line - 1) < first_line )
@@ -2359,8 +2643,6 @@ class CodeEditor {
         if(resetLeft)
             this.resetCursorPos( CodeEditor.CURSOR_LEFT, cursor );
 
-        this._refreshCodeInfo( cursor.line, cursor.position );
-
         doAsync(() => {
             var last_line = ( ( this.codeScroller.offsetHeight + this.getScrollTop() ) / this.lineHeight )|0;
             if( cursor.line >= last_line )
@@ -2370,9 +2652,10 @@ class CodeEditor {
 
     cursorToString( cursor, text, reverse ) {
 
+        if( !text.length ) return;
         cursor = cursor ?? this.cursors.children[ 0 ];
         for( let char of text ) 
-            reverse ? this.cursorToLeft(char) : this.cursorToRight(char);
+            reverse ? this.cursorToLeft( char ) : this.cursorToRight( char );
     }
 
     cursorToPosition( cursor, position ) {
@@ -2387,7 +2670,7 @@ class CodeEditor {
         cursor.line = line;
         cursor._top = this.lineHeight * line;
         cursor.style.top = cursor._top + "px";
-        if(resetLeft) this.resetCursorPos( CodeEditor.CURSOR_LEFT, cursor );
+        if( resetLeft ) this.resetCursorPos( CodeEditor.CURSOR_LEFT, cursor );
     }
 
     saveCursor( cursor, state = {} ) {
@@ -2396,7 +2679,7 @@ class CodeEditor {
         state.top = cursor._top;
         state.left = cursor._left;
         state.line = cursor.line;
-        state.charPos = cursor.position;
+        state.position = cursor.position;
         return state;
     }
 
@@ -2407,9 +2690,9 @@ class CodeEditor {
         cursor.position = state.position ?? 0;
 
         cursor._left = state.left ?? 0;
-        cursor.style.left = "calc(" + (cursor._left - this.getScrollLeft()) + "px + " + this.xPadding + ")";
+        cursor.style.left = "calc(" + ( cursor._left - this.getScrollLeft() ) + "px + " + this.xPadding + ")";
         cursor._top = state.top ?? 0;
-        cursor.style.top = "calc(" + (cursor._top - this.getScrollTop()) + "px)";
+        cursor.style.top = "calc(" + ( cursor._top - this.getScrollTop() ) + "px)";
     }
 
     resetCursorPos( flag, cursor ) {
@@ -2419,14 +2702,14 @@ class CodeEditor {
         if( flag & CodeEditor.CURSOR_LEFT )
         {
             cursor._left = 0;
-            cursor.style.left = "calc(" + (-this.getScrollLeft()) + "px + " + this.xPadding + ")";
+            cursor.style.left = "calc(" + ( -this.getScrollLeft() ) + "px + " + this.xPadding + ")";
             cursor.position = 0;
         }
 
         if( flag & CodeEditor.CURSOR_TOP )
         {
             cursor._top = 0;
-            cursor.style.top = (cursor._top - this.getScrollTop()) + "px";
+            cursor.style.top = ( -this.getScrollTop() ) + "px";
             cursor.line = 0;
         }
     }
@@ -2434,14 +2717,14 @@ class CodeEditor {
     addSpaceTabs(n) {
         
         for( var i = 0; i < n; ++i ) {
-            this.actions['Tab'].callback();
+            this.actions[ 'Tab' ].callback();
         }
     }
 
     addSpaces(n) {
         
         for( var i = 0; i < n; ++i ) {
-            this.root.dispatchEvent(new CustomEvent('keydown', {'detail': {
+            this.root.dispatchEvent( new CustomEvent( 'keydown', { 'detail': {
                 skip_undo: true,
                 key: ' '
             }}));
@@ -2450,26 +2733,26 @@ class CodeEditor {
 
     getScrollLeft() {
         
-        if(!this.codeScroller) return 0;
+        if( !this.codeScroller ) return 0;
         return this.codeScroller.scrollLeft;
     }
 
     getScrollTop() {
         
-        if(!this.codeScroller) return 0;
+        if( !this.codeScroller ) return 0;
         return this.codeScroller.scrollTop;
     }
 
     setScrollLeft( value ) {
         
-        if(!this.codeScroller) return;
+        if( !this.codeScroller ) return;
         this.codeScroller.scrollLeft = value;
         this.setScrollBarValue( 'horizontal', 0 );
     }
 
     setScrollTop( value ) {
         
-        if(!this.codeScroller) return;
+        if( !this.codeScroller ) return;
         this.codeScroller.scrollTop = value;
         this.setScrollBarValue( 'vertical' );
     }
@@ -2601,46 +2884,70 @@ class CodeEditor {
     getCharAtPos( cursor, offset = 0 ) {
         
         cursor = cursor ?? this.cursors.children[ 0 ];
-        return this.code.lines[ cursor.line ][cursor.position + offset];
+        return this.code.lines[ cursor.line ][ cursor.position + offset ];
     }
 
-    getWordAtPos( cursor, offset = 0 ) {
+    getWordAtPos( cursor, loffset = 0, roffset ) {
         
+        roffset = roffset ?? loffset;
         cursor = cursor ?? this.cursors.children[ 0 ];
         const col = cursor.line;
-        const words = this.code.lines[col];
+        const words = this.code.lines[ col ];
 
-        const is_char = (char) => {
-            const exceptions = ['_', '#', '!'];
-            const code = char.charCodeAt(0);
-            return (exceptions.indexOf(char) > - 1) || (code > 47 && code < 58) || (code > 64 && code < 91) || (code > 96 && code < 123);
+        const is_char = char => {
+            const exceptions = [ '_', '#', '!' ];
+            const code = char.charCodeAt( 0 );
+            return (exceptions.indexOf( char ) > - 1) || (code > 47 && code < 58) || (code > 64 && code < 91) || (code > 96 && code < 123);
         }
 
-        let it = cursor.position + offset;
+        let from = cursor.position + roffset;
+        let to = cursor.position + loffset;
+
+        // Check left ...
+
+        while( words[ from ] && is_char( words[ from ] ) )
+            from--;
 
-        while( words[it] && is_char(words[it]) )
-            it--;
+        from++;
 
-        const from = it + 1;
-        it = cursor.position + offset;
+        // Check right ...
 
-        while( words[it] && is_char(words[it]) )
-            it++;
+        while( words[ to ] && is_char( words[ to ] ) )
+            to++;
 
-        const to = it;
+        // Skip spaces ...
 
-        return [words.substring( from, to ), from, to];
+        let word = words.substring( from, to );
+        if( word == ' ' )
+        {
+            if( loffset < 0 )
+            {
+                while( words[ from - 1 ] != undefined && words[ from - 1 ] == ' ' )
+                    from--;
+                to++;
+                word = words.substring( from, to + 1 );
+            }
+            else
+            {
+                while( words[ to ] != undefined && words[ to ] == ' ' )
+                    to++;
+                from--;
+                word = words.substring( from, to );
+            }
+        } 
+        
+        return [ word, from, to ];
     }
 
-    measureChar( char = "a", get_bb = false ) {
+    _measureChar( char = "a", get_bb = false ) {
         
-        var test = document.createElement("pre");
+        var test = document.createElement( "pre" );
         test.className = "codechar";
         test.innerHTML = char;
-        document.body.appendChild(test);
+        document.body.appendChild( test );
         var rect = test.getBoundingClientRect();
         deleteElement( test );
-        const bb = [Math.floor(rect.width), Math.floor(rect.height)];
+        const bb = [ Math.floor( rect.width ), Math.floor( rect.height ) ];
         return get_bb ? bb : bb[ 0 ];
     }
 
@@ -2651,44 +2958,46 @@ class CodeEditor {
 
     runScript( code ) {
 
-        var script = document.createElement('script');
+        var script = document.createElement( 'script' );
         script.type = 'module';
         script.innerHTML = code;
         // script.src = url[ i ] + ( version ? "?version=" + version : "" );
         script.async = false;
         // script.onload = function(e) { };
-        document.getElementsByTagName('head')[ 0 ].appendChild(script);
+        document.getElementsByTagName( 'head' )[ 0 ].appendChild( script );
     }
 
     toJSONFormat( text ) {
 
-        let params = text.split(":");
+        let params = text.split( ':' );
 
         for(let i = 0; i < params.length; i++) {
-            let key = params[ i ].split(',');
-            if(key.length > 1) {
-                if(key[key.length-1].includes("]"))
+            let key = params[ i ].split( ',' );
+            if( key.length > 1 )
+            {
+                if( key[ key.length - 1 ].includes( ']' ))
                     continue;
-                key = key[key.length-1];
+                key = key[ key.length - 1 ];
             }
-            else if(key[ 0 ].includes("}"))
+            else if( key[ 0 ].includes( '}' ) )
                 continue;
             else
                 key = key[ 0 ];
-            key = key.replaceAll(/[{}\n\r]/g,"").replaceAll(" ","")
-            if(key[ 0 ] != '"' && key[key.length - 1] != '"') {
-                params[ i ] = params[ i ].replace(key, '"' + key + '"');
+            key = key.replaceAll( /[{}\n\r]/g, '' ).replaceAll( ' ', '' )
+            if( key[ 0 ] != '"' && key[ key.length - 1 ] != '"')
+            {
+                params[ i ] = params[ i ].replace( key, '"' + key + '"' );
             }
         }
 
-        text = params.join(':');
+        text = params.join( ':' );
 
         try {
-            let json = JSON.parse(text);
-            return JSON.stringify(json, undefined, 4);
+            let json = JSON.parse( text );
+            return JSON.stringify( json, undefined, 4 );
         }
-        catch(e) {
-            alert("Invalid JSON format");
+        catch( e ) {
+            alert( "Invalid JSON format" );
             return;	
         }
     }
@@ -2728,10 +3037,10 @@ class CodeEditor {
             if( !s.toLowerCase().includes(word.toLowerCase()) )
             continue;
 
-            var pre = document.createElement('pre');
+            var pre = document.createElement( 'pre' );
             this.autocomplete.appendChild(pre);
 
-            var icon = document.createElement('a');
+            var icon = document.createElement( 'a' );
             
             if( this._mustHightlightWord( s, this.utils ) )
                 icon.className = "fa fa-cube";
@@ -2784,7 +3093,7 @@ class CodeEditor {
     hideAutoCompleteBox() {
 
         this.isAutoCompleteActive = false;
-        this.autocomplete.classList.remove('show');
+        this.autocomplete.classList.remove( 'show' );
     }
 
     autoCompleteWord( cursor, suggestion ) {
@@ -2792,7 +3101,7 @@ class CodeEditor {
         if( !this.isAutoCompleteActive )
         return;
 
-        let [suggestedWord, idx] = this.getSelectedAutoComplete();
+        let [suggestedWord, idx] = this._getSelectedAutoComplete();
         suggestedWord = suggestion ?? suggestedWord;
 
         const [word, start, end] = this.getWordAtPos( cursor, -1 );
@@ -2807,7 +3116,7 @@ class CodeEditor {
         this.hideAutoCompleteBox();
     }
 
-    getSelectedAutoComplete() {
+    _getSelectedAutoComplete() {
         
         if( !this.isAutoCompleteActive )
         return;
@@ -2826,12 +3135,12 @@ class CodeEditor {
         }
     }
 
-    moveArrowSelectedAutoComplete( dir ) {
+    _moveArrowSelectedAutoComplete( dir ) {
 
         if( !this.isAutoCompleteActive )
         return;
 
-        const [word, idx] = this.getSelectedAutoComplete();
+        const [word, idx] = this._getSelectedAutoComplete();
         const offset = dir == 'down' ? 1 : -1;
 
         if( dir == 'down' ) {
@@ -2840,12 +3149,51 @@ class CodeEditor {
             if( (idx + offset) < 0 ) return;
         }
 
-        this.autocomplete.scrollTop += offset * 18;
+        this.autocomplete.scrollTop += offset * 20;
 
         // Remove selected from the current word and add it to the next one
         this.autocomplete.childNodes[ idx ].classList.remove('selected');
         this.autocomplete.childNodes[ idx + offset ].classList.add('selected');
     }
+
+    _updateDataInfoPanel( signal, value ) {
+
+        if( !this.skipCodeInfo )
+        {
+            LX.emit( signal, value );
+        }
+    }
+
+    _setActiveLine( number ) {
+
+        number = number ?? this.state.activeLine;
+
+        this._updateDataInfoPanel( "@cursor-line", "Ln " + ( number + 1 ) );
+
+        const old_local = this.toLocalLine( this.state.activeLine );
+        let line = this.code.childNodes[ old_local ];
+
+        if( !line )
+        return;
+
+        line.classList.remove( 'active-line' );
+
+        // Set new active
+        {
+            this.state.activeLine = number;
+
+            const new_local = this.toLocalLine( number );
+            line = this.code.childNodes[ new_local ];
+            if( line ) line.classList.add( 'active-line' );
+        }
+    }
+
+    _clearTmpVariables() {
+
+        delete this._buildingString; 
+        delete this._pendingString;
+        delete this._buildingBlockComment;
+    }
 }
 
 LX.CodeEditor = CodeEditor;