lexgui 0.7.1 → 0.7.3

package/build/extensions/codeeditor.js

@@ -6,26 +6,13 @@ if(!LX) {
 
 LX.extensions.push( 'CodeEditor' );
 
-function swapElements( obj, a, b ) {
-    [obj[a], obj[b]] = [obj[b], obj[a]];
-}
-
-function swapArrayElements( array, id0, id1 ) {
-    [array[id0], array[id1]] = [array[id1], array[id0]];
-};
-
-function sliceChars( str, idx, n = 1 ) {
-    return str.substr(0, idx) + str.substr(idx + n);
-}
-
-function firstNonspaceIndex( str ) {
-    const index = str.search(/\S|$/)
-    return index < str.length ? index : -1;
-}
-
-function strReverse( str ) {
-    return str.split( "" ).reverse().join( "" );
-}
+function swapElements( obj, a, b ) { [obj[a], obj[b]] = [obj[b], obj[a]]; }
+function swapArrayElements( array, id0, id1 ) { [array[id0], array[id1]] = [array[id1], array[id0]]; };
+function sliceChars( str, idx, n = 1 ) { return str.substr(0, idx) + str.substr(idx + n); }
+function firstNonspaceIndex( str ) { const index = str.search(/\S|$/); return index < str.length ? index : -1; }
+function strReverse( str ) { return str.split( "" ).reverse().join( "" ); }
+function isLetter( c ){ return /[a-zA-Z]/.test( c ); };
+function isSymbol( c ){ return /[^\w\s]/.test( c ); };
 
 function indexOfFrom( str, reg, from, reverse ) {
 
@@ -46,13 +33,13 @@ function indexOfFrom( str, reg, from, reverse ) {
     }
 }
 
-let ASYNC_ENABLED = true;
-
-function doAsync( fn, ms ) {
-    if( ASYNC_ENABLED )
-        setTimeout( fn, ms ?? 0 );
-    else
-        fn();
+function codeScopesEqual( a, b ) {
+    if( a.length !== b.length ) return false;
+    for( let i = 0; i < a.length; i++ )
+    {
+        if( a[ i ].type !== b[ i ].type ) return false;
+    }
+    return true;
 }
 
 class CodeSelection {
@@ -104,7 +91,6 @@ class CodeSelection {
 
         var domEl = document.createElement( 'div' );
         domEl.className = this.className;
-
         domEl._top = y * this.editor.lineHeight;
         domEl.style.top = domEl._top + "px";
         domEl._left = x * this.editor.charWidth;
@@ -156,6 +142,9 @@ class ScrollBar {
     static SCROLLBAR_VERTICAL       = 1;
     static SCROLLBAR_HORIZONTAL     = 2;
 
+    static SCROLLBAR_VERTICAL_WIDTH = 10;
+    static SCROLLBAR_HORIZONTAL_HEIGHT = 10;
+
     constructor( editor, type ) {
 
         this.editor = editor;
@@ -213,6 +202,80 @@ class ScrollBar {
 
 }
 
+/* Highlight rules
+- test: function that receives a context object and returns true or false
+- className: class to apply if test is true
+- action: optional function to execute if test is true, receives context and editor as parameter
+- discard: optional boolean, if true the token is discarded, action value is returned
+        to "ctx.discardToken" and no class is applied
+*/
+
+const HighlightRules = {
+
+    common: [
+        { test: ctx => ctx.inBlockComment, className: "cm-com" },
+        { test: ctx => ctx.inString, action: (ctx, editor) => editor._appendStringToken( ctx.token ), discard: true },
+        { test: ctx => ctx.token.substr( 0, ctx.singleLineCommentToken.length ) == ctx.singleLineCommentToken, className: "cm-com" },
+        { test: (ctx, editor) => editor._isKeyword( ctx ), className: "cm-kwd" },
+        { test: (ctx, editor) => editor._mustHightlightWord( ctx.token, CodeEditor.builtIn, ctx.lang ) && ( ctx.lang.tags ?? false ? ( editor._enclosedByTokens( ctx.token, ctx.tokenIndex, '<', '>' ) ) : true ), className: "cm-bln" },
+        { test: (ctx, editor) => editor._mustHightlightWord( ctx.token, CodeEditor.statements, ctx.lang ), className: "cm-std" },
+        { test: (ctx, editor) => editor._mustHightlightWord( ctx.token, CodeEditor.symbols, ctx.lang ), className: "cm-sym" },
+        { test: (ctx, editor) => editor._mustHightlightWord( ctx.token, CodeEditor.types, ctx.lang ), className: "cm-typ" },
+        { test: (ctx, editor) => editor._isNumber( ctx.token ) || editor._isNumber( ctx.token.replace(/[px]|[em]|%/g,'') ), className: "cm-dec" },
+        { test: ctx => ctx.lang.usePreprocessor && ctx.token.includes( '#' ), className: "cm-ppc" },
+    ],
+
+    javascript: [
+        { test: ctx => (ctx.prev === 'class' && ctx.next === '{') , className: "cm-typ" },
+    ],
+
+    typescript: [
+        { test: ctx => ctx.scope && (ctx.token !== ',' && ctx.scope.type == "enum"), className: "cm-enu" },
+        { test: ctx => (ctx.prev === ':' && ctx.next !== undefined && isLetter(ctx.token) ) || (ctx.prev === 'interface' && ctx.next === '{') || (ctx.prev === 'enum' && ctx.next === '{'), className: "cm-typ" },
+        { test: ctx => (ctx.prev === 'class' && ctx.next === '{') || (ctx.prev === 'class' && ctx.next === '<') || (ctx.prev === 'new' && ctx.next === '(') || (ctx.prev === 'new' && ctx.next === '<'), className: "cm-typ" },
+        { test: (ctx, editor) => ctx.token !== ',' && editor._enclosedByTokens( ctx.token, ctx.tokenIndex, '<', '>' ), className: "cm-typ" },
+    ],
+
+    cpp: [
+        { test: ctx => ctx.scope && (ctx.token !== ',' && ctx.scope.type == "enum"), className: "cm-enu" },
+        { test: ctx => ctx.isEnumValueSymbol( ctx.token ), className: "cm-enu" },
+        { test: ctx => (ctx.prev === 'class' && ctx.next === '{') || (ctx.prev === 'struct' && ctx.next === '{'), className: "cm-typ" },
+        { test: ctx => ctx.prev === "<" && (ctx.next === ">" || ctx.next === "*"), className: "cm-typ" }, // Defining template type in C++
+        { test: ctx => ctx.next === "::" || (ctx.prev === "::" && ctx.next !== "("), className: "cm-typ" }, // C++ Class
+        { test: ctx => ctx.isClassSymbol( ctx.token ) || ctx.isStructSymbol( ctx.token ), className: "cm-typ" },
+    ],
+
+    wgsl: [
+        { test: ctx => ctx.prev === '>' && (!ctx.next || ctx.next === '{'), className: "cm-typ" }, // Function return type
+        { test: ctx => (ctx.prev === ':' && ctx.next !== undefined) || (ctx.prev === 'struct' && ctx.next === '{'), className: "cm-typ" },
+        { test: (ctx, editor) => ctx.token !== ',' && editor._enclosedByTokens( ctx.token, ctx.tokenIndex, '<', '>' ), className: "cm-typ" },
+    ],
+
+    css: [
+        { test: ctx => ( ctx.prev == '.' || ctx.prev == '::' || ( ctx.prev == ':' && ctx.next == '{' ) || ( ctx.token[ 0 ] == '#' && ctx.prev != ':' ) ), className: "cm-kwd" },
+        { test: ctx => ctx.prev === ':' && (ctx.next === ';' || ctx.next === '!important'), className: "cm-str" }, // CSS value
+        { test: ctx => ( ctx.prev === undefined || ctx.prev === '{' || ctx.prev === ';' ) && ctx.next === ":", className: "cm-typ" }, // CSS attribute
+        { test: ctx => ctx.prev === "(" && ctx.next === ")" && ctx.token.startsWith( "--" ), className: "cm-typ" }, // CSS vars
+    ],
+
+    batch: [
+        { test: ctx => ctx.token === '@' || ctx.prev === ':' || ctx.prev === '@', className: "cm-kwd" }
+    ],
+
+    markdown: [
+        { test: ctx => ctx.isFirstToken && ctx.token.replaceAll('#', '').length != ctx.token.length, action: (ctx, editor) => editor._markdownHeader = true, className: "cm-kwd" }
+    ],
+
+    php: [
+        { test: ctx => ctx.token.startsWith( '$' ), className: "cm-var" },
+        { test: ctx => (ctx.prev === 'class' && (ctx.next === '{' || ctx.next === 'implements') ) || (ctx.prev === 'enum'), className: "cm-typ" },
+    ],
+
+    post_common: [
+        { test: ctx => isLetter(ctx.token) && (ctx.token[ 0 ] != '@') && (ctx.token[ 0 ] != ',') && (ctx.next === '('), className: "cm-mtd" }
+    ],
+};
+
 /**
  * @class CodeEditor
  */
@@ -238,8 +301,13 @@ class CodeEditor {
     static CODE_MIN_FONT_SIZE = 9;
     static CODE_MAX_FONT_SIZE = 22;
 
+    static LINE_GUTTER_WIDTH = 48;
     static LINE_GUTTER_WIDTH = 48;
 
+    static RESIZE_SCROLLBAR_H = 1;
+    static RESIZE_SCROLLBAR_V = 2;
+    static RESIZE_SCROLLBAR_H_V = CodeEditor.RESIZE_SCROLLBAR_H | CodeEditor.RESIZE_SCROLLBAR_V;
+
     /**
      * @param {*} options
      * name:
@@ -255,11 +323,17 @@ class CodeEditor {
 
         CodeEditor.__instances.push( this );
 
+        this.skipInfo = options.skipInfo ?? false;
+        this.disableEdition = options.disableEdition ?? false;
+        this.skipTabs = options.skipTabs ?? false;
+        this.useFileExplorer = ( options.fileExplorer ?? false ) && !this.skipTabs;
+        this.useAutoComplete = options.autocomplete ?? true;
+
         // File explorer
-        if( options.fileExplorer ?? false )
+        if( this.useFileExplorer )
         {
-            var [ explorerArea, codeArea ] = area.split({ sizes:[ "15%","85%" ] });
-            explorerArea.setLimitBox( 180, 20, 512 );
+            let [ explorerArea, editorArea ] = area.split({ sizes:[ "15%","85%" ] });
+            // explorerArea.setLimitBox( 180, 20, 512 );
             this.explorerArea = explorerArea;
 
             let panel = new LX.Panel();
@@ -310,35 +384,73 @@ class CodeEditor {
             explorerArea.attach( panel );
 
             // Update area
-            area = codeArea;
+            area = editorArea;
         }
 
-        this.base_area = area;
+        this.baseArea = area;
         this.area = new LX.Area( { className: "lexcodeeditor", height: "100%", skipAppend: true } );
 
-        this.skipInfo = options.skipInfo ?? false;
-        this.disableEdition = options.disableEdition ?? false;
+        if( !this.skipTabs )
+        {
+            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._tabStorage = {};
-        this.tabs = this.area.addTabs( { onclose: (name) => {
-            delete this.openedTabs[ name ];
-            if( Object.keys( this.openedTabs ).length < 2 )
+            if( !this.disableEdition )
             {
-                clearInterval( this.blinker );
-                this.cursors.classList.remove( 'show' );
+                this.tabs.root.addEventListener( 'dblclick', (e) => {
+                    if( options.allowAddScripts ?? true )
+                    {
+                        e.preventDefault();
+                        this.addTab( "unnamed.js", true );
+                    }
+                } );
             }
-        } } );
 
-        if( !this.disableEdition )
+            this.codeArea = this.tabs.area;
+        }
+        else
         {
-            this.tabs.root.addEventListener( 'dblclick', (e) => {
-                if( options.allowAddScripts ?? true ) {
-                    e.preventDefault();
-                    this.addTab("unnamed.js", true);
+            this.codeArea = new LX.Area( { skipAppend: true } );
+            this.area.attach( this.codeArea );
+            this._loadFileButton = LX.makeElement( "button",
+                "grid absolute self-center z-100 p-3 rounded-full bg-secondary hover:bg-tertiary cursor-pointer border",
+                LX.makeIcon( "FolderOpen" ).innerHTML,
+                this.area,
+                {
+                    bottom: "8px"
                 }
+            );
+            this._loadFileButton.addEventListener( "click", e => {
+
+                const dropdownOptions = [];
+
+                for( const [ key, value ] of [ ...Object.entries( this.loadedTabs ).slice( 1 ), ...Object.entries( this._tabStorage ) ] )
+                {
+                    const icon = this._getFileIcon( key );
+                    const classes = icon ? icon.split( ' ' ) : [];
+                    dropdownOptions.push( {
+                        name: key,
+                        icon: classes[ 0 ],
+                        svgClass: classes.slice( 0 ).join( ' ' ),
+                        callback: (v) => {
+                            this.loadCode( v );
+                        }
+                    } );
+                }
+
+                new LX.DropdownMenu( this._loadFileButton, dropdownOptions, { side: "top", align: "center" });
+
             } );
         }
 
+        this.codeArea.root.classList.add( 'lexcodearea' );
+
         // Full editor
         area.root.classList.add('codebasearea');
 
@@ -354,9 +466,6 @@ class CodeEditor {
             attributeFilter: ['class', 'style'],
         });
 
-        // Code area
-        this.tabs.area.root.classList.add( 'codetabsarea' );
-
         this.root = this.area.root;
         this.root.tabIndex = -1;
         area.attach( this.root );
@@ -385,12 +494,12 @@ class CodeEditor {
 
         this.cursors = document.createElement( 'div' );
         this.cursors.className = 'cursors';
-        this.tabs.area.attach( this.cursors );
+        this.codeArea.attach( this.cursors );
 
         this.searchResultSelections = document.createElement( 'div' );
         this.searchResultSelections.id = 'search-selections';
         this.searchResultSelections.className = 'selections';
-        this.tabs.area.attach( this.searchResultSelections );
+        this.codeArea.attach( this.searchResultSelections );
 
         // Store here selections per cursor
         this.selections = {};
@@ -403,7 +512,7 @@ class CodeEditor {
 
         // Scroll stuff
         {
-            this.codeScroller = this.tabs.area.root;
+            this.codeScroller = this.codeArea.root;
             this.firstLineInViewport = 0;
             this.lineScrollMargin = new LX.vec2( 20, 20 ); // [ mUp, mDown ]
 
@@ -428,12 +537,14 @@ class CodeEditor {
                     {
                         if( this.visibleLinesViewport.y < (this.code.lines.length - 1) )
                         {
-                            const totalLinesInViewport = ((this.codeScroller.offsetHeight - 36) / this.lineHeight)|0;
+                            const totalLinesInViewport = ( ( this.codeScroller.offsetHeight ) / this.lineHeight )|0;
                             const scrollDownBoundary =
                                 ( Math.max( this.visibleLinesViewport.y - totalLinesInViewport, 0 ) - 1 ) * this.lineHeight;
 
                             if( scrollTop >= scrollDownBoundary )
+                            {
                                 this.processLines( CodeEditor.UPDATE_VISIBLE_LINES );
+                            }
                         }
                     }
                     // Scroll up...
@@ -441,7 +552,9 @@ class CodeEditor {
                     {
                         const scrollUpBoundary = parseInt( this.code.style.top );
                         if( scrollTop < scrollUpBoundary )
+                        {
                             this.processLines( CodeEditor.UPDATE_VISIBLE_LINES );
+                        }
                     }
 
                     lastScrollTopValue = scrollTop;
@@ -451,9 +564,13 @@ class CodeEditor {
                     if( e.ctrlKey )
                     {
                         e.preventDefault();
+                        e.stopPropagation();
                         ( e.deltaY > 0.0 ? this._decreaseFontSize() : this._increaseFontSize() );
                     }
-                    else
+                } );
+
+                this.codeScroller.addEventListener( 'wheel', e => {
+                    if( !e.ctrlKey )
                     {
                         const dX = ( e.deltaY > 0.0 ? 10.0 : -10.0 ) * ( e.shiftKey ? 1.0 : 0.0 );
                         if( dX != 0.0 ) this.setScrollBarValue( 'horizontal', dX );
@@ -462,50 +579,47 @@ class CodeEditor {
             }
         }
 
-        // This is only the container, line numbers are in the same line div
+        // Line numbers and scrollbars
         {
+            // This is only the container, line numbers are in the same line div
             this.gutter = document.createElement( 'div' );
             this.gutter.className = "lexcodegutter";
             area.attach( this.gutter );
-        }
 
-        // Add custom vertical scroll bar
-        {
+            // Add custom vertical scroll bar
             this.vScrollbar = new ScrollBar( this, ScrollBar.SCROLLBAR_VERTICAL );
             area.attach( this.vScrollbar.root );
-        }
 
-        // Add custom horizontal scroll bar
-        {
+            // Add custom horizontal scroll bar
             this.hScrollbar = new ScrollBar( this, ScrollBar.SCROLLBAR_HORIZONTAL );
             area.attach( this.hScrollbar.root );
         }
 
+        // Add autocomplete, search boxes (IF edition enabled)
         if( !this.disableEdition )
         {
             // Add autocomplete box
             {
-                var box = document.createElement( 'div' );
+                const box = document.createElement( 'div' );
                 box.className = "autocomplete";
                 this.autocomplete = box;
-                this.tabs.area.attach( box );
-
+                this.codeArea.attach( box );
                 this.isAutoCompleteActive = false;
             }
 
             // Add search box
             {
-                var box = document.createElement( 'div' );
+                const box = document.createElement( 'div' );
                 box.className = "searchbox";
 
-                var searchPanel = new LX.Panel();
+                const searchPanel = new LX.Panel();
                 box.appendChild( searchPanel.root );
 
                 searchPanel.sameLine( 4 );
                 searchPanel.addText( null, "", null, { placeholder: "Find" } );
-                searchPanel.addButton( null, "up", () => this.search( null, true ), { icon: "ArrowUp" } );
-                searchPanel.addButton( null, "down", () => this.search(), { icon: "ArrowDown" } );
-                searchPanel.addButton( null, "x", this.hideSearchBox.bind( this ), { icon: "X" } );
+                searchPanel.addButton( null, "up", () => this.search( null, true ), { icon: "ArrowUp", title: "Previous Match", tooltip: true } );
+                searchPanel.addButton( null, "down", () => this.search(), { icon: "ArrowDown", title: "Next Match", tooltip: true } );
+                searchPanel.addButton( null, "x", this.hideSearchBox.bind( this ), { icon: "X", title: "Close", tooltip: true } );
 
                 box.querySelector( 'input' ).addEventListener( 'keyup', e => {
                     if( e.key == 'Escape' ) this.hideSearchBox();
@@ -513,7 +627,7 @@ class CodeEditor {
                 } );
 
                 this.searchbox = box;
-                this.tabs.area.attach( box );
+                this.codeArea.attach( box );
             }
 
             // Add search LINE box
@@ -535,7 +649,7 @@ class CodeEditor {
                 } );
 
                 this.searchlinebox = box;
-                this.tabs.area.attach( box );
+                this.codeArea.attach( box );
             }
         }
 
@@ -546,7 +660,9 @@ class CodeEditor {
 
             // Append all childs
             while( this.codeScroller.firstChild )
+            {
                 this.codeSizer.appendChild( this.codeScroller.firstChild );
+            }
 
             this.codeScroller.appendChild( this.codeSizer );
         }
@@ -562,7 +678,6 @@ class CodeEditor {
 
         // Code
 
-        this.useAutoComplete = options.autocomplete ?? true;
         this.highlight = options.highlight ?? 'Plain Text';
         this.onsave = options.onsave ?? ((code) => { console.log( code, "save" ) });
         this.onrun = options.onrun ?? ((code) => { this.runScript(code) });
@@ -575,6 +690,7 @@ class CodeEditor {
         this.defaultSingleLineCommentToken = '//';
         this.defaultBlockCommentTokens = [ '/*', '*/' ];
         this._lastTime = null;
+        this._tabStorage = {};
 
         this.pairKeys = {
             "\"": "\"",
@@ -592,24 +708,6 @@ class CodeEditor {
         // Scan tokens..
         // setInterval( this.scanWordSuggestions.bind( this ), 2000 );
 
-        this.languages = {
-            'Plain Text': { ext: 'txt', blockComments: false, singleLineComments: false },
-            'JavaScript': { ext: 'js' },
-            'C': { ext: [ 'c', 'h' ] },
-            'C++': { ext: [ 'cpp', 'hpp' ] },
-            'CSS': { ext: 'css' },
-            'CMake': { ext: 'cmake', singleLineCommentToken: '#', blockComments: false, ignoreCase: true },
-            'GLSL': { ext: 'glsl' },
-            'WGSL': { ext: 'wgsl' },
-            'JSON': { ext: 'json', blockComments: false, singleLineComments: false },
-            'XML': { ext: 'xml', tags: true },
-            'Rust': { ext: 'rs' },
-            'Python': { ext: 'py', singleLineCommentToken: '#' },
-            'HTML': { ext: 'html', tags: true, singleLineComments: false, blockCommentsTokens: [ '<!--', '-->' ] },
-            'Batch': { ext: 'bat', blockComments: false, singleLineCommentToken: '::' },
-            'Markdown': { ext: 'md', blockComments: false, singleLineCommentToken: '::', tags: true }
-        };
-
         this.specialKeys = [
             'Backspace', 'Enter', 'ArrowUp', 'ArrowDown',
             'ArrowRight', 'ArrowLeft', 'Delete', 'Home',
@@ -622,476 +720,485 @@ class CodeEditor {
 
         if( !CodeEditor._staticReady )
         {
-            for( let lang in CodeEditor.keywords ) CodeEditor.keywords[lang] = CodeEditor.keywords[lang].reduce((a, v) => ({ ...a, [v]: true}), {});
-            for( let lang in CodeEditor.utils ) CodeEditor.utils[lang] = CodeEditor.utils[lang].reduce((a, v) => ({ ...a, [v]: true}), {});
-            for( let lang in CodeEditor.types ) CodeEditor.types[lang] = CodeEditor.types[lang].reduce((a, v) => ({ ...a, [v]: true}), {});
-            for( let lang in CodeEditor.builtIn ) CodeEditor.builtIn[lang] = CodeEditor.builtIn[lang].reduce((a, v) => ({ ...a, [v]: true}), {});
-            for( let lang in CodeEditor.statementsAndDeclarations ) CodeEditor.statementsAndDeclarations[lang] = CodeEditor.statementsAndDeclarations[lang].reduce((a, v) => ({ ...a, [v]: true}), {});
-            for( let lang in CodeEditor.symbols ) CodeEditor.symbols[lang] = CodeEditor.symbols[lang].reduce((a, v) => ({ ...a, [v]: true}), {});
+            for( let lang in CodeEditor.keywords ) CodeEditor.keywords[lang] = new Set( CodeEditor.keywords[lang] );
+            for( let lang in CodeEditor.utils ) CodeEditor.utils[lang] = new Set( CodeEditor.utils[lang] );
+            for( let lang in CodeEditor.types ) CodeEditor.types[lang] = new Set( CodeEditor.types[lang] );
+            for( let lang in CodeEditor.builtIn ) CodeEditor.builtIn[lang] = new Set( CodeEditor.builtIn[lang] );
+            for( let lang in CodeEditor.statements ) CodeEditor.statements[lang] = new Set( CodeEditor.statements[lang] );
+            for( let lang in CodeEditor.symbols ) CodeEditor.symbols[lang] = new Set( CodeEditor.symbols[lang] );
 
             CodeEditor._staticReady = true;
         }
 
         // Action keys
+        {
+            this.action( 'Escape', false, ( ln, cursor, e ) => {
+                if( this.hideAutoCompleteBox() )
+                    return;
+                if( this.hideSearchBox() )
+                    return;
+                // Remove selections and cursors
+                this.endSelection();
+                this._removeSecondaryCursors();
+            });
 
-        this.action( 'Escape', false, ( ln, cursor, e ) => {
-            if( this.hideAutoCompleteBox() )
-                return;
-            if( this.hideSearchBox() )
-                return;
-            // Remove selections and cursors
-            this.endSelection();
-            this._removeSecondaryCursors();
-        });
-
-        this.action( 'Backspace', false, ( ln, cursor, e ) => {
+            this.action( 'Backspace', false, ( ln, cursor, e ) => {
 
-            this._addUndoStep( cursor );
+                this._addUndoStep( cursor );
 
-            if( cursor.selection ) {
-                this.deleteSelection( cursor );
-                // Remove entire line when selecting with triple click
-                if( this._tripleClickSelection )
+                if( cursor.selection )
                 {
-                    this.actions['Backspace'].callback( ln, cursor, e );
-                    this.lineDown( cursor, true );
+                    this.deleteSelection( cursor );
+                    // Remove entire line when selecting with triple click
+                    if( this._tripleClickSelection )
+                    {
+                        this.actions['Backspace'].callback( ln, cursor, e );
+                        this.lineDown( cursor, true );
+                    }
                 }
-            }
-            else {
+                else {
 
-                var letter = this.getCharAtPos( cursor, -1 );
-                if( letter ) {
-
-                    var deleteFromPosition = cursor.position - 1;
-                    var numCharsDeleted = 1;
-
-                    // Delete full word
-                    if( e.shiftKey )
+                    var letter = this.getCharAtPos( cursor, -1 );
+                    if( letter )
                     {
-                        const [word, from, to] = this.getWordAtPos( cursor, -1 );
+                        var deleteFromPosition = cursor.position - 1;
+                        var numCharsDeleted = 1;
 
-                        if( word.length > 1 )
+                        // Delete full word
+                        if( e.shiftKey )
                         {
-                            deleteFromPosition = from;
-                            numCharsDeleted = word.length;
+                            const [word, from, to] = this.getWordAtPos( cursor, -1 );
+
+                            if( word.length > 1 )
+                            {
+                                deleteFromPosition = from;
+                                numCharsDeleted = word.length;
+                            }
                         }
-                    }
 
-                    this.code.lines[ ln ] = sliceChars( this.code.lines[ ln ], deleteFromPosition, numCharsDeleted );
-                    this.processLine( ln );
+                        this.code.lines[ ln ] = sliceChars( this.code.lines[ ln ], deleteFromPosition, numCharsDeleted );
+                        this.processLine( ln );
 
-                    this.cursorToPosition( cursor, deleteFromPosition );
+                        this.cursorToPosition( cursor, deleteFromPosition );
 
-                    if( this.useAutoComplete )
+                        if( this.useAutoComplete )
+                        {
+                            this.showAutoCompleteBox( 'foo', cursor );
+                        }
+                    }
+                    else if( this.code.lines[ ln - 1 ] != undefined )
                     {
-                        this.showAutoCompleteBox( 'foo', cursor );
+                        this.lineUp( cursor );
+                        e.cancelShift = true;
+                        this.actions[ 'End' ].callback( cursor.line, cursor, e );
+                        // Move line on top
+                        this.code.lines[ ln - 1 ] += this.code.lines[ ln ];
+                        this.code.lines.splice( ln, 1 );
+                        this.processLines();
                     }
                 }
-                else if( this.code.lines[ ln - 1 ] != undefined ) {
-
-                    this.lineUp( cursor );
-                    e.cancelShift = true;
-                    this.actions[ 'End' ].callback( cursor.line, cursor, e );
-                    // Move line on top
-                    this.code.lines[ ln - 1 ] += this.code.lines[ ln ];
-                    this.code.lines.splice( ln, 1 );
-                    this.processLines();
-                }
-            }
-        });
 
-        this.action( 'Delete', false, ( ln, cursor, e ) => {
-
-            this._addUndoStep( cursor );
-
-            if( cursor.selection ) {
-                // Use 'Backspace' as it's the same callback...
-                this.actions['Backspace'].callback( ln, cursor, e );
-            }
-            else
-            {
-                var letter = this.getCharAtPos( cursor );
-                if( letter ) {
-                    this.code.lines[ ln ] = sliceChars( this.code.lines[ ln ], cursor.position );
-                    this.processLine( ln );
-                }
-                else if( this.code.lines[ ln + 1 ] != undefined ) {
-                    this.code.lines[ ln ] += this.code.lines[ ln + 1 ];
-                    this.code.lines.splice( ln + 1, 1 );
-                    this.processLines();
-                }
-            }
-        });
+                this.resizeIfNecessary( cursor, true );
+            });
 
-        this.action( 'Tab', true, ( ln, cursor, e ) => {
+            this.action( 'Delete', false, ( ln, cursor, e ) => {
 
-            if( this._skipTabs )
-            {
-                this._skipTabs--;
-                if( !this._skipTabs )
-                    delete this._skipTabs;
-            }
-            else if( this.isAutoCompleteActive )
-            {
-                this.autoCompleteWord();
-            }
-            else
-            {
                 this._addUndoStep( cursor );
 
-                if( e && e.shiftKey )
+                if( cursor.selection )
                 {
-                    this._removeSpaces( cursor );
+                    // Use 'Backspace' as it's the same callback...
+                    this.actions['Backspace'].callback( ln, cursor, e );
                 }
                 else
                 {
-                    const indentSpaces = this.tabSpaces - (cursor.position % this.tabSpaces);
-                    this._addSpaces( indentSpaces );
+                    var letter = this.getCharAtPos( cursor );
+                    if( letter )
+                    {
+                        this.code.lines[ ln ] = sliceChars( this.code.lines[ ln ], cursor.position );
+                        this.processLine( ln );
+                    }
+                    else if( this.code.lines[ ln + 1 ] != undefined )
+                    {
+                        this.code.lines[ ln ] += this.code.lines[ ln + 1 ];
+                        this.code.lines.splice( ln + 1, 1 );
+                        this.processLines();
+                    }
                 }
-            }
-        }, "shiftKey");
-
-        this.action( 'Home', false, ( ln, cursor, e ) => {
-
-            let idx = firstNonspaceIndex( this.code.lines[ ln ] );
 
-            // We already are in the first non space index...
-            if( idx == cursor.position ) idx = 0;
-
-            const prestring = this.code.lines[ ln ].substring( 0, idx );
-            let lastX = cursor.position;
-
-            this.resetCursorPos( CodeEditor.CURSOR_LEFT, cursor );
-            if( idx > 0 )
-            {
-                this.cursorToString( cursor, prestring );
-            }
-            else
-            {
-                // No spaces, start from char 0
-                idx = 0;
-            }
-
-            this.setScrollLeft( 0 );
-            this.mergeCursors( ln );
+                this.resizeIfNecessary( cursor, true );
+            });
 
-            if( e.shiftKey && !e.cancelShift )
-            {
-                // Get last selection range
-                if( cursor.selection )
-                {
-                    lastX += cursor.selection.chars;
-                }
+            this.action( 'Tab', true, ( ln, cursor, e ) => {
 
-                if( !cursor.selection )
+                if( this._skipTabs )
                 {
-                    this.startSelection( cursor );
+                    this._skipTabs--;
+                    if( !this._skipTabs )
+                        delete this._skipTabs;
                 }
-
-                var string = this.code.lines[ ln ].substring( idx, lastX );
-                if( cursor.selection.sameLine() )
+                else if( this.isAutoCompleteActive )
                 {
-                    cursor.selection.selectInline( cursor, idx, cursor.line, this.measureString( string ) );
+                    this.autoCompleteWord();
                 }
                 else
                 {
-                    this._processSelection( cursor, e );
+                    this._addUndoStep( cursor );
+
+                    if( e && e.shiftKey )
+                    {
+                        this._removeSpaces( cursor );
+                    }
+                    else
+                    {
+                        const indentSpaces = this.tabSpaces - (cursor.position % this.tabSpaces);
+                        this._addSpaces( indentSpaces );
+                    }
                 }
-            } else if( !e.keepSelection )
-                this.endSelection();
-        });
+            }, "shiftKey");
 
-        this.action( 'End', false, ( ln, cursor, e ) => {
+            this.action( 'Home', false, ( ln, cursor, e ) => {
 
-            if( ( e.shiftKey || e._shiftKey ) && !e.cancelShift ) {
+                let idx = firstNonspaceIndex( this.code.lines[ ln ] );
 
-                var string = this.code.lines[ ln ].substring( cursor.position );
-                if( !cursor.selection )
-                    this.startSelection( cursor );
-                if( cursor.selection.sameLine() )
-                    cursor.selection.selectInline( cursor, cursor.position, cursor.line, this.measureString( string ));
+                // We already are in the first non space index...
+                if( idx == cursor.position ) idx = 0;
+
+                const prestring = this.code.lines[ ln ].substring( 0, idx );
+                let lastX = cursor.position;
+
+                this.resetCursorPos( CodeEditor.CURSOR_LEFT, cursor );
+                if( idx > 0 )
+                {
+                    this.cursorToString( cursor, prestring );
+                }
                 else
                 {
-                    this.resetCursorPos( CodeEditor.CURSOR_LEFT, cursor );
-                    this.cursorToString( cursor, this.code.lines[ ln ] );
-                    this._processSelection( cursor, e );
+                    // No spaces, start from char 0
+                    idx = 0;
                 }
-            } else if( !e.keepSelection )
-                this.endSelection();
-
-            this.resetCursorPos( CodeEditor.CURSOR_LEFT, cursor );
-            this.cursorToString( cursor, this.code.lines[ ln ] );
-
-            var viewportSizeX = ( this.codeScroller.clientWidth + this.getScrollLeft() ) - CodeEditor.LINE_GUTTER_WIDTH; // Gutter offset
-            if( ( cursor.position * this.charWidth ) >= viewportSizeX )
-                this.setScrollLeft( this.code.lines[ ln ].length * this.charWidth );
 
-            // Merge cursors
-            this.mergeCursors( ln );
-        });
+                this.setScrollLeft( 0 );
+                this.mergeCursors( ln );
 
-        this.action( 'Enter', true, ( ln, cursor, e ) => {
+                if( e.shiftKey && !e.cancelShift )
+                {
+                    // Get last selection range
+                    if( cursor.selection )
+                    {
+                        lastX += cursor.selection.chars;
+                    }
 
-            // Add word
-            if( this.isAutoCompleteActive )
-            {
-                this.autoCompleteWord();
-                return;
-            }
+                    if( !cursor.selection )
+                    {
+                        this.startSelection( cursor );
+                    }
 
-            if( e.ctrlKey )
-            {
-                this.onrun( this.getText() );
-                return;
-            }
+                    var string = this.code.lines[ ln ].substring( idx, lastX );
+                    if( cursor.selection.sameLine() )
+                    {
+                        cursor.selection.selectInline( cursor, idx, cursor.line, this.measureString( string ) );
+                    }
+                    else
+                    {
+                        this._processSelection( cursor, e );
+                    }
+                } else if( !e.keepSelection )
+                    this.endSelection();
+            });
 
-            this._addUndoStep( cursor, true );
+            this.action( 'End', false, ( ln, cursor, e ) => {
 
-            var _c0 = this.getCharAtPos( cursor, -1 );
-            var _c1 = this.getCharAtPos( cursor );
+                if( ( e.shiftKey || e._shiftKey ) && !e.cancelShift ) {
 
-            this.code.lines.splice( cursor.line + 1, 0, "" );
-            this.code.lines[cursor.line + 1] = this.code.lines[ ln ].substr( cursor.position ); // new line (below)
-            this.code.lines[ ln ] = this.code.lines[ ln ].substr( 0, cursor.position ); // line above
+                    var string = this.code.lines[ ln ].substring( cursor.position );
+                    if( !cursor.selection )
+                        this.startSelection( cursor );
+                    if( cursor.selection.sameLine() )
+                        cursor.selection.selectInline( cursor, cursor.position, cursor.line, this.measureString( string ));
+                    else
+                    {
+                        this.resetCursorPos( CodeEditor.CURSOR_LEFT, cursor );
+                        this.cursorToString( cursor, this.code.lines[ ln ] );
+                        this._processSelection( cursor, e );
+                    }
+                } else if( !e.keepSelection )
+                    this.endSelection();
 
-            this.lineDown( cursor, true );
+                this.resetCursorPos( CodeEditor.CURSOR_LEFT, cursor );
+                this.cursorToString( cursor, this.code.lines[ ln ] );
 
-            // Check indentation
-            var spaces = firstNonspaceIndex( this.code.lines[ ln ]);
-            var tabs = Math.floor( spaces / this.tabSpaces );
+                var viewportSizeX = ( this.codeScroller.clientWidth + this.getScrollLeft() ) - CodeEditor.LINE_GUTTER_WIDTH; // Gutter offset
+                if( ( cursor.position * this.charWidth ) >= viewportSizeX )
+                    this.setScrollLeft( this.code.lines[ ln ].length * this.charWidth );
 
-            if( _c0 == '{' && _c1 == '}' ) {
-                this.code.lines.splice( cursor.line, 0, "" );
-                this._addSpaceTabs( cursor, tabs + 1 );
-                this.code.lines[ cursor.line + 1 ] = " ".repeat(spaces) + this.code.lines[ cursor.line + 1 ];
-            } else {
-                this._addSpaceTabs( cursor, tabs );
-            }
+                // Merge cursors
+                this.mergeCursors( ln );
+            });
 
-            this.processLines();
-        });
+            this.action( 'Enter', true, ( ln, cursor, e ) => {
 
-        this.action( 'ArrowUp', false, ( ln, cursor, e ) => {
+                // Add word
+                if( this.isAutoCompleteActive )
+                {
+                    this.autoCompleteWord();
+                    return;
+                }
 
-            // Move cursor..
-            if( !this.isAutoCompleteActive )
-            {
-                if( e.shiftKey ) {
-                    if( !cursor.selection )
-                        this.startSelection( cursor );
+                if( e.ctrlKey )
+                {
+                    this.onrun( this.getText() );
+                    return;
+                }
 
-                    this.lineUp( cursor );
+                this._addUndoStep( cursor, true );
 
-                    var letter = this.getCharAtPos( cursor );
-                    if( !letter ) {
-                        this.cursorToPosition( cursor, this.code.lines[ cursor.line ].length );
-                    }
+                var _c0 = this.getCharAtPos( cursor, -1 );
+                var _c1 = this.getCharAtPos( cursor );
 
-                    this._processSelection( cursor, e, false );
+                this.code.lines.splice( cursor.line + 1, 0, "" );
+                this.code.lines[cursor.line + 1] = this.code.lines[ ln ].substr( cursor.position ); // new line (below)
+                this.code.lines[ ln ] = this.code.lines[ ln ].substr( 0, cursor.position ); // line above
 
-                } else {
-                    this.endSelection();
-                    this.lineUp( cursor );
-                    // Go to end of line if out of line
-                    var letter = this.getCharAtPos( cursor );
-                    if( !letter ) this.actions['End'].callback( cursor.line, cursor, e );
-                }
-            }
-            // Move up autocomplete selection
-            else
-            {
-                this._moveArrowSelectedAutoComplete('up');
-            }
-        });
+                this.lineDown( cursor, true );
 
-        this.action( 'ArrowDown', false, ( ln, cursor, e ) => {
+                // Check indentation
+                var spaces = firstNonspaceIndex( this.code.lines[ ln ]);
+                var tabs = Math.floor( spaces / this.tabSpaces );
 
-            // Move cursor..
-            if( !this.isAutoCompleteActive )
-            {
-                if( e.shiftKey ) {
-                    if( !cursor.selection )
-                        this.startSelection( cursor );
+                if( _c0 == '{' && _c1 == '}' ) {
+                    this.code.lines.splice( cursor.line, 0, "" );
+                    this._addSpaceTabs( cursor, tabs + 1 );
+                    this.code.lines[ cursor.line + 1 ] = " ".repeat(spaces) + this.code.lines[ cursor.line + 1 ];
                 } else {
-                    this.endSelection();
+                    this._addSpaceTabs( cursor, tabs );
                 }
 
-                const canGoDown = this.lineDown( cursor );
-                const letter = this.getCharAtPos( cursor );
+                this.processLines();
+            });
 
-                // Go to end of line if out of range
-                if( !letter || !canGoDown ) {
-                    this.cursorToPosition( cursor, Math.max(this.code.lines[ cursor.line ].length, 0) );
-                }
+            this.action( 'ArrowUp', false, ( ln, cursor, e ) => {
 
-                if( e.shiftKey ) {
-                    this._processSelection( cursor, e );
-                }
-            }
-            // Move down autocomplete selection
-            else
-            {
-                this._moveArrowSelectedAutoComplete('down');
-            }
-        });
+                // Move cursor..
+                if( !this.isAutoCompleteActive )
+                {
+                    if( e.shiftKey ) {
+                        if( !cursor.selection )
+                            this.startSelection( cursor );
 
-        this.action( 'ArrowLeft', false, ( ln, cursor, e ) => {
+                        this.lineUp( cursor );
 
-            // Nothing to do..
-            if( cursor.line == 0 && cursor.position == 0 )
-            return;
+                        var letter = this.getCharAtPos( cursor );
+                        if( !letter ) {
+                            this.cursorToPosition( cursor, this.code.lines[ cursor.line ].length );
+                        }
 
-            if( e.metaKey ) { // Apple devices (Command)
-                e.preventDefault();
-                this.actions[ 'Home' ].callback( ln, cursor, e );
-            }
-            else if( e.ctrlKey ) {
-                // Get next word
-                const [word, from, to] = this.getWordAtPos( cursor, -1 );
-                // If no length, we change line..
-                if( !word.length && this.lineUp( cursor, true ) ) {
-                    const cS = e.cancelShift, kS = e.keepSelection;
-                    e.cancelShift = true;
-                    e.keepSelection = true;
-                    this.actions[ 'End' ].callback( cursor.line, cursor, e );
-                    e.cancelShift = cS;
-                    e.keepSelection = kS;
-                }
-                var diff = Math.max( cursor.position - from, 1 );
-                var substr = word.substr( 0, diff );
+                        this._processSelection( cursor, e, false );
 
-                // Selections...
-                if( e.shiftKey ) {
-                    if( !cursor.selection )
-                    this.startSelection( cursor );
+                    } else {
+                        this.endSelection();
+                        this.lineUp( cursor );
+                        // Go to end of line if out of line
+                        var letter = this.getCharAtPos( cursor );
+                        if( !letter ) this.actions['End'].callback( cursor.line, cursor, e );
+                    }
                 }
+                // Move up autocomplete selection
                 else
-                    this.endSelection();
+                {
+                    this._moveArrowSelectedAutoComplete('up');
+                }
+            });
 
-                this.cursorToString( cursor, substr, true );
+            this.action( 'ArrowDown', false, ( ln, cursor, e ) => {
 
-                if( e.shiftKey )
-                    this._processSelection( cursor, e );
-            }
-            else {
-                var letter = this.getCharAtPos( cursor, -1 );
-                if( letter ) {
+                // Move cursor..
+                if( !this.isAutoCompleteActive )
+                {
                     if( e.shiftKey ) {
-                        if( !cursor.selection ) this.startSelection( cursor );
-                        this.cursorToLeft( letter, cursor );
-                        this._processSelection( cursor, e, false, CodeEditor.SELECTION_X );
-                    }
-                    else {
-                        if( !cursor.selection ) {
-                            this.cursorToLeft( letter, cursor );
-                            if( this.useAutoComplete && this.isAutoCompleteActive )
-                                this.showAutoCompleteBox( 'foo', cursor );
-                        }
-                        else {
-                            cursor.selection.invertIfNecessary();
-                            this.resetCursorPos( CodeEditor.CURSOR_LEFT_TOP, cursor );
-                            this.cursorToLine( cursor, cursor.selection.fromY, true );
-                            this.cursorToPosition( cursor, cursor.selection.fromX );
-                            this.endSelection();
-                        }
+                        if( !cursor.selection )
+                            this.startSelection( cursor );
+                    } else {
+                        this.endSelection();
                     }
-                }
-                else if( cursor.line > 0 ) {
 
-                    if( e.shiftKey && !cursor.selection ) this.startSelection( cursor );
+                    const canGoDown = this.lineDown( cursor );
+                    const letter = this.getCharAtPos( cursor );
 
-                    this.lineUp( cursor );
+                    // Go to end of line if out of range
+                    if( !letter || !canGoDown ) {
+                        this.cursorToPosition( cursor, Math.max(this.code.lines[ cursor.line ].length, 0) );
+                    }
 
-                    e.cancelShift = e.keepSelection = true;
-                    this.actions[ 'End' ].callback( cursor.line, cursor, e );
-                    delete e.cancelShift; delete e.keepSelection;
+                    if( e.shiftKey ) {
+                        this._processSelection( cursor, e );
+                    }
+                }
+                // Move down autocomplete selection
+                else
+                {
+                    this._moveArrowSelectedAutoComplete('down');
+                }
+            });
+
+            this.action( 'ArrowLeft', false, ( ln, cursor, e ) => {
 
-                    if( e.shiftKey ) this._processSelection( cursor, e, false );
+                // 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 );
                 }
-            }
-        });
+                else if( e.ctrlKey ) {
+                    // Get next word
+                    const [word, from, to] = this.getWordAtPos( cursor, -1 );
+                    // If no length, we change line..
+                    if( !word.length && this.lineUp( cursor, true ) ) {
+                        const cS = e.cancelShift, kS = e.keepSelection;
+                        e.cancelShift = true;
+                        e.keepSelection = true;
+                        this.actions[ 'End' ].callback( cursor.line, cursor, e );
+                        e.cancelShift = cS;
+                        e.keepSelection = kS;
+                    }
+                    var diff = Math.max( cursor.position - from, 1 );
+                    var substr = word.substr( 0, diff );
 
-        this.action( 'ArrowRight', false, ( ln, cursor, e ) => {
+                    // Selections...
+                    if( e.shiftKey ) {
+                        if( !cursor.selection )
+                        this.startSelection( cursor );
+                    }
+                    else
+                        this.endSelection();
 
-            // Nothing to do..
-            if( cursor.line == this.code.lines.length - 1 &&
-                cursor.position == this.code.lines[ cursor.line ].length )
-            return;
+                    this.cursorToString( cursor, substr, true );
 
-            if( e.metaKey ) // Apple devices (Command)
-            {
-                e.preventDefault();
-                this.actions[ 'End' ].callback( ln, cursor );
-            }
-            else if( e.ctrlKey ) // Next word
-            {
-                // Get next word
-                const [ word, from, to ] = this.getWordAtPos( cursor );
+                    if( e.shiftKey )
+                        this._processSelection( cursor, e );
+                }
+                else {
+                    var letter = this.getCharAtPos( cursor, -1 );
+                    if( letter ) {
+                        if( e.shiftKey ) {
+                            if( !cursor.selection ) this.startSelection( cursor );
+                            this.cursorToLeft( letter, cursor );
+                            this._processSelection( cursor, e, false, CodeEditor.SELECTION_X );
+                        }
+                        else {
+                            if( !cursor.selection ) {
+                                this.cursorToLeft( letter, cursor );
+                                if( this.useAutoComplete && this.isAutoCompleteActive )
+                                    this.showAutoCompleteBox( 'foo', cursor );
+                            }
+                            else {
+                                cursor.selection.invertIfNecessary();
+                                this.resetCursorPos( CodeEditor.CURSOR_LEFT_TOP, cursor );
+                                this.cursorToLine( cursor, cursor.selection.fromY, true );
+                                this.cursorToPosition( cursor, cursor.selection.fromX );
+                                this.endSelection();
+                            }
+                        }
+                    }
+                    else if( cursor.line > 0 ) {
 
-                // If no length, we change line..
-                if( !word.length ) this.lineDown( cursor, true );
-                var diff = cursor.position - from;
-                var substr = word.substr( diff );
+                        if( e.shiftKey && !cursor.selection ) this.startSelection( cursor );
 
-                // Selections...
-                if( e.shiftKey ) {
-                    if( !cursor.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._processSelection( cursor, e, false );
+                    }
                 }
-                else
-                    this.endSelection();
+            });
 
-                this.cursorToString( cursor, substr );
+            this.action( 'ArrowRight', false, ( ln, cursor, e ) => {
 
-                if( e.shiftKey )
-                    this._processSelection( cursor, e );
-            }
-            else // Next char
-            {
-                var letter = this.getCharAtPos( cursor );
-                if( letter ) {
+                // Nothing to do..
+                if( cursor.line == this.code.lines.length - 1 &&
+                    cursor.position == this.code.lines[ cursor.line ].length )
+                return;
 
-                    // Selecting chars
-                    if( e.shiftKey )
-                    {
+                if( e.metaKey ) // Apple devices (Command)
+                {
+                    e.preventDefault();
+                    this.actions[ 'End' ].callback( ln, cursor );
+                }
+                else if( e.ctrlKey ) // Next word
+                {
+                    // 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( !cursor.selection )
                             this.startSelection( cursor );
-
-                        this.cursorToRight( letter, cursor );
-                        this._processSelection( cursor, e, false, CodeEditor.SELECTION_X );
                     }
                     else
-                    {
-                        if( !cursor.selection ) {
+                        this.endSelection();
+
+                    this.cursorToString( cursor, substr );
+
+                    if( e.shiftKey )
+                        this._processSelection( cursor, e );
+                }
+                else // Next char
+                {
+                    var letter = this.getCharAtPos( cursor );
+                    if( letter ) {
+
+                        // Selecting chars
+                        if( e.shiftKey )
+                        {
+                            if( !cursor.selection )
+                                this.startSelection( cursor );
+
                             this.cursorToRight( letter, cursor );
-                            if( this.useAutoComplete && this.isAutoCompleteActive )
-                                this.showAutoCompleteBox( 'foo', cursor );
+                            this._processSelection( cursor, e, false, CodeEditor.SELECTION_X );
                         }
                         else
                         {
-                            cursor.selection.invertIfNecessary();
-                            this.resetCursorPos( CodeEditor.CURSOR_LEFT_TOP, cursor );
-                            this.cursorToLine( cursor, cursor.selection.toY );
-                            this.cursorToPosition( cursor, cursor.selection.toX );
-                            this.endSelection();
+                            if( !cursor.selection ) {
+                                this.cursorToRight( letter, cursor );
+                                if( this.useAutoComplete && this.isAutoCompleteActive )
+                                    this.showAutoCompleteBox( 'foo', cursor );
+                            }
+                            else
+                            {
+                                cursor.selection.invertIfNecessary();
+                                this.resetCursorPos( CodeEditor.CURSOR_LEFT_TOP, cursor );
+                                this.cursorToLine( cursor, cursor.selection.toY );
+                                this.cursorToPosition( cursor, cursor.selection.toX );
+                                this.endSelection();
+                            }
                         }
                     }
-                }
-                else if( this.code.lines[ cursor.line + 1 ] !== undefined ) {
+                    else if( this.code.lines[ cursor.line + 1 ] !== undefined ) {
 
-                    if( e.shiftKey ) {
-                        if( !cursor.selection ) this.startSelection( cursor );
-                    }
-                    else this.endSelection();
+                        if( e.shiftKey ) {
+                            if( !cursor.selection ) this.startSelection( cursor );
+                        }
+                        else this.endSelection();
 
-                    this.lineDown( cursor, true );
+                        this.lineDown( cursor, true );
 
-                    if( e.shiftKey ) this._processSelection( cursor, e, false );
+                        if( e.shiftKey ) this._processSelection( cursor, e, false );
 
-                    this.hideAutoCompleteBox();
+                        this.hideAutoCompleteBox();
+                    }
                 }
-            }
-        });
+            });
+        }
 
         // Default code tab
 
@@ -1101,15 +1208,44 @@ class CodeEditor {
         const onLoadAll = () => {
             // Create inspector panel when the initial state is complete
             // and we have at least 1 tab opened
-            this.infoPanel = this._createInfoPanel();
-            if( this.infoPanel )
+            this.statusPanel = this._createStatusPanel();
+            if( this.statusPanel )
             {
-                area.attach( this.infoPanel );
+                area.attach( this.statusPanel );
             }
 
             // Wait until the fonts are all loaded
             document.fonts.ready.then(() => {
-                this.charWidth = this._measureChar( "a", true );
+                // Load any font size from local storage
+                const savedFontSize = window.localStorage.getItem( "lexcodeeditor-font-size" );
+                if( savedFontSize )
+                {
+                    this._setFontSize( parseInt( savedFontSize ) );
+                }
+                else // Use default size
+                {
+                    const r = document.querySelector( ':root' );
+                    const s = getComputedStyle( r );
+                    this.fontSize = parseInt( s.getPropertyValue( "--code-editor-font-size" ) );
+                    this.charWidth = this._measureChar( "a", true );
+                }
+
+                LX.emit( "@font-size", this.fontSize );
+
+                // Get final sizes for editor elements based on Tabs and status bar offsets
+                LX.doAsync( () => {
+                    this._verticalTopOffset = this.tabs?.root.getBoundingClientRect().height ?? 0;
+                    this._verticalBottomOffset = this.statusPanel?.root.getBoundingClientRect().height ?? 0;
+                    this._fullVerticalOffset = this._verticalTopOffset + this._verticalBottomOffset;
+
+                    this.gutter.style.marginTop = `${ this._verticalTopOffset }px`;
+                    this.gutter.style.height = `calc(100% - ${ this._fullVerticalOffset }px)`;
+                    this.vScrollbar.root.style.marginTop = `${ this.tabs?.root.getBoundingClientRect().height ?? 0 }px`;
+                    this.vScrollbar.root.style.height = `calc(100% - ${ this._fullVerticalOffset }px)`;
+                    this.hScrollbar.root.style.bottom = `${ this._verticalBottomOffset }px`;
+                    this.codeArea.root.style.height = `calc(100% - ${ this._verticalBottomOffset }px)`;
+                }, 50 );
+
             });
 
             window.editor = this;
@@ -1153,39 +1289,38 @@ class CodeEditor {
     onKeyPressed( e ) {
 
         // Toggle visibility of the file explorer
-        if( e.key == 'b' && e.ctrlKey && this.explorer )
+        if( e.key == 'b' && e.ctrlKey && this.useFileExplorer )
         {
             this.explorerArea.root.classList.toggle( "hidden" );
             if( this._lastBaseareaWidth )
             {
-                this.base_area.root.style.width = this._lastBaseareaWidth;
+                this.baseArea.root.style.width = this._lastBaseareaWidth;
                 delete this._lastBaseareaWidth;
 
             } else
             {
-                this._lastBaseareaWidth = this.base_area.root.style.width;
-                this.base_area.root.style.width = "100%";
+                this._lastBaseareaWidth = this.baseArea.root.style.width;
+                this.baseArea.root.style.width = "100%";
             }
         }
     }
 
     getText( min ) {
-
         return this.code.lines.join( min ? ' ' : '\n' );
     }
 
     // This can be used to empty all text...
     setText( text = "", lang ) {
 
-        let new_lines = text.split( '\n' );
-        this.code.lines = [].concat( new_lines );
+        let newLines = text.split( '\n' );
+        this.code.lines = [].concat( newLines );
 
         this._removeSecondaryCursors();
 
-        let cursor = this._getCurrentCursor( true );
-        let lastLine = new_lines.pop();
+        let cursor = this.getCurrentCursor( true );
+        let lastLine = newLines.pop();
 
-        this.cursorToLine( cursor, new_lines.length ); // Already substracted 1
+        this.cursorToLine( cursor, newLines.length ); // Already substracted 1
         this.cursorToPosition( cursor, lastLine.length );
         this.processLines();
 
@@ -1199,21 +1334,22 @@ class CodeEditor {
 
         let lidx = cursor.line;
 
-        if( cursor.selection ) {
+        if( cursor.selection )
+        {
             this.deleteSelection( cursor );
             lidx = cursor.line;
         }
 
         this.endSelection();
 
-        const new_lines = text.replaceAll( '\r', '' ).split( '\n' );
+        const newLines = text.replaceAll( '\r', '' ).split( '\n' );
 
         // Pasting Multiline...
-        if( new_lines.length != 1 )
+        if( newLines.length != 1 )
         {
-            let num_lines = new_lines.length;
+            let num_lines = newLines.length;
             console.assert( num_lines > 0 );
-            const first_line = new_lines.shift();
+            const first_line = newLines.shift();
             num_lines--;
 
             const remaining = this.code.lines[ lidx ].slice( cursor.position );
@@ -1230,11 +1366,11 @@ class CodeEditor {
 
             let _text = null;
 
-            for( var i = 0; i < new_lines.length; ++i ) {
-                _text = new_lines[ i ];
+            for( var i = 0; i < newLines.length; ++i ) {
+                _text = newLines[ i ];
                 this.cursorToLine( cursor, cursor.line++, true );
                 // Add remaining...
-                if( i == (new_lines.length - 1) )
+                if( i == (newLines.length - 1) )
                     _text += remaining;
                 this.code.lines.splice( 1 + lidx + i, 0, _text );
             }
@@ -1248,24 +1384,26 @@ class CodeEditor {
         {
             this.code.lines[ lidx ] = [
                 this.code.lines[ lidx ].slice( 0, cursor.position ),
-                new_lines[ 0 ],
+                newLines[ 0 ],
                 this.code.lines[ lidx ].slice( cursor.position )
             ].join('');
 
-            this.cursorToPosition( cursor, ( cursor.position + new_lines[ 0 ].length ) );
+            this.cursorToPosition( cursor, ( cursor.position + newLines[ 0 ].length ) );
             this.processLine( lidx );
         }
 
-        this.resize( null, ( scrollWidth, scrollHeight ) => {
+        this.resize( CodeEditor.RESIZE_SCROLLBAR_H_V, null, ( scrollWidth, scrollHeight ) => {
             var viewportSizeX = ( this.codeScroller.clientWidth + this.getScrollLeft() ) - CodeEditor.LINE_GUTTER_WIDTH; // Gutter offset
             if( ( cursor.position * this.charWidth ) >= viewportSizeX )
+            {
                 this.setScrollLeft( this.code.lines[ lidx ].length * this.charWidth );
+            }
         } );
     }
 
     loadFile( file, options = {} ) {
 
-        const inner_add_tab = ( text, name, title ) => {
+        const _innerAddTab = ( text, name, title ) => {
 
             // Remove Carriage Return in some cases and sub tabs using spaces
             text = text.replaceAll( '\r', '' );
@@ -1277,16 +1415,24 @@ class CodeEditor {
 
             // Add item in the explorer if used
 
-            if( this.explorer )
+            if( this.useFileExplorer || this.skipTabs )
             {
                 this._tabStorage[ name ] = {
                     lines: lines,
                     options: options
                 };
 
-                const ext = this.languages[ options.language ] ?. ext;
-                this.addExplorerItem( { id: name, skipVisibility: true, icon: this._getFileIcon( name, ext ) } );
-                this.explorer.innerTree.frefresh( name );
+                const ext = CodeEditor.languages[ options.language ] ?. ext;
+
+                if( this.useFileExplorer )
+                {
+                    this.addExplorerItem( { id: name, skipVisibility: true, icon: this._getFileIcon( name, ext ) } );
+                    this.explorer.innerTree.frefresh( name );
+                }
+                else
+                {
+
+                }
             }
             else
             {
@@ -1311,7 +1457,7 @@ class CodeEditor {
             let filename = file;
             LX.request({ url: filename, success: text => {
                 const name = filename.substring(filename.lastIndexOf( '/' ) + 1);
-                inner_add_tab( text, name, filename );
+                _innerAddTab( text, name, filename );
             } });
         }
         else // File Blob
@@ -1320,82 +1466,11 @@ class CodeEditor {
             fr.readAsText( file );
             fr.onload = e => {
                 const text = e.currentTarget.result;
-                inner_add_tab( text, file.name );
+                _innerAddTab( text, file.name );
             };
         }
     }
 
-    _addCursor( line = 0, position = 0, force, isMain = false ) {
-
-        // If cursor in that position exists, remove it instead..
-        const exists = Array.from( this.cursors.children ).find( v => v.position == position && v.line == line );
-        if( exists && !force )
-        {
-            if( !exists.isMain )
-                exists.remove();
-
-            return;
-        }
-
-        let cursor = document.createElement( 'div' );
-        cursor.name = "cursor" + this.cursors.childElementCount;
-        cursor.className = "cursor";
-        cursor.innerHTML = "&nbsp;";
-        cursor.isMain = isMain;
-        cursor._left = position * this.charWidth;
-        cursor.style.left = "calc( " + cursor._left + "px + " + this.xPadding + " )";
-        cursor._top = line * this.lineHeight;
-        cursor.style.top = cursor._top + "px";
-        cursor._position = position;
-        cursor._line = line;
-        cursor.print = (function() { console.log( this._line, this._position ) }).bind( cursor );
-        cursor.isLast = (function() { return this.cursors.lastChild == cursor; }).bind( this );
-
-        Object.defineProperty( cursor, 'line', {
-            get: (v) => { return cursor._line },
-            set: (v) => {
-                cursor._line = v;
-                if( cursor.isMain ) this._setActiveLine( v );
-            }
-        } );
-
-        Object.defineProperty( cursor, 'position', {
-            get: (v) => { return cursor._position },
-            set: (v) => {
-                cursor._position = v;
-                if( cursor.isMain ) this._updateDataInfoPanel( "@cursor-pos", "Col " + ( v + 1 ) );
-            }
-        } );
-
-        this.cursors.appendChild( cursor );
-
-        return cursor;
-    }
-
-    _getCurrentCursor( removeOthers ) {
-
-        if( removeOthers )
-        {
-            this._removeSecondaryCursors();
-        }
-
-        return this.cursors.children[ 0 ];
-    }
-
-    _removeSecondaryCursors() {
-
-        while( this.cursors.childElementCount > 1 )
-            this.cursors.lastChild.remove();
-    }
-
-    _logCursors() {
-
-        for( let cursor of this.cursors.children )
-        {
-            cursor.print();
-        }
-    }
-
     _addUndoStep( cursor, force, deleteRedo = true )  {
 
         // Only the mainc cursor stores undo steps
@@ -1407,12 +1482,18 @@ class CodeEditor {
 
         if( !force )
         {
-            if( !this._lastTime ) {
+            if( !this._lastTime )
+            {
                 this._lastTime = current;
-            } else {
-                if( ( current - this._lastTime ) > 2000 ){
+            }
+            else
+            {
+                if( ( current - this._lastTime ) > 2000 )
+                {
                     this._lastTime = null;
-                } else {
+                }
+                else
+                {
                     // If time not enough, reset timer
                     this._lastTime = current;
                     return;
@@ -1466,7 +1547,9 @@ class CodeEditor {
 
         // Only the mainc cursor stores redo steps
         if( !cursor.isMain )
+        {
             return;
+        }
 
         this.code.redoSteps.push( {
             lines: LX.deepCopy( this.code.lines ),
@@ -1496,7 +1579,9 @@ class CodeEditor {
 
             // Generate new if needed
             if( !currentCursor )
+            {
                 currentCursor = this._addCursor();
+            }
 
             this.restoreCursor( currentCursor, step.cursors[ i ] );
         }
@@ -1515,10 +1600,11 @@ class CodeEditor {
         this._updateDataInfoPanel( "@highlight", lang );
         this.processLines();
 
-        const ext = langExtension ?? this.languages[ lang ].ext;
+        const ext = langExtension ?? CodeEditor.languages[ lang ].ext;
         const icon = this._getFileIcon( null, ext );
 
         // Update tab icon
+        if( !this.skipTabs )
         {
             const tab = this.tabs.tabDOMs[ this.code.tabName ];
             tab.firstChild.remove();
@@ -1537,7 +1623,7 @@ class CodeEditor {
         }
 
         // Update explorer icon
-        if( this.explorer )
+        if( this.useFileExplorer )
         {
             const item = this.explorer.innerTree.data.children.filter( (v) => v.id === this.code.tabName )[ 0 ];
             console.assert( item != undefined );
@@ -1553,9 +1639,9 @@ class CodeEditor {
             return this._changeLanguage( this.code.language );
         }
 
-        for( let l in this.languages )
+        for( let l in CodeEditor.languages )
         {
-            const langExtension = this.languages[ l ].ext;
+            const langExtension = CodeEditor.languages[ l ].ext;
 
             if( langExtension.constructor == Array )
             {
@@ -1577,103 +1663,150 @@ class CodeEditor {
         this._changeLanguage( 'Plain Text' );
     }
 
-    _createInfoPanel() {
+    _createStatusPanel() {
 
-        if( !this.skipInfo )
+        if( this.skipInfo )
         {
-            let panel = new LX.Panel({ className: "lexcodetabinfo", width: "calc(100%)", height: "auto" });
-
-            panel.sameLine();
-            panel.addLabel( this.code.title, { fit: true, signal: "@tab-name" });
-            panel.addLabel( "Ln " + 1, { fit: true, signal: "@cursor-line" });
-            panel.addLabel( "Col " + 1, { fit: true, signal: "@cursor-pos" });
-            panel.addButton( null, "Spaces: " + this.tabSpaces, ( value, event ) => {
-                LX.addContextMenu( "Spaces", event, m => {
-                    const options = [ 2, 4, 8 ];
-                    for( const n of options )
-                        m.add( n, (v) => {
-                            this.tabSpaces = v;
-                            this.processLines();
-                            this._updateDataInfoPanel( "@tab-spaces", "Spaces: " + this.tabSpaces );
-                        } );
-                });
-            }, { nameWidth: "15%", signal: "@tab-spaces" });
-            panel.addButton( "<b>{ }</b>", this.highlight, ( value, event ) => {
-                LX.addContextMenu( "Language", event, m => {
-                    for( const lang of Object.keys( this.languages ) )
-                    {
-                        m.add( lang, v => {
-                            this._changeLanguage( v, null, true )
-                        } );
-                    }
-                });
-            }, { nameWidth: "15%", signal: "@highlight" });
-            panel.endLine();
-
-            return panel;
+            return;
         }
-        else
-        {
-            doAsync( () => {
 
-                // Change css a little bit...
-                this.gutter.style.height = "calc(100% - 28px)";
-                this.root.querySelectorAll( '.code' ).forEach( e => e.style.height = "calc(100% - 6px)" );
-                this.root.querySelector( '.lexareatabscontent' ).style.height = "calc(100% - 23px)";
-                this.base_area.root.querySelector( '.lexcodescrollbar.vertical' ).style.height = "calc(100% - 27px)";
-                this.tabs.area.root.classList.add( 'no-code-info' );
+        let panel = new LX.Panel({ className: "lexcodetabinfo flex flex-row", height: "auto" });
 
-            }, 100);
+        let leftStatusPanel = new LX.Panel( { id: "FontSizeZoomStatusComponent", height: "auto" } );
+        leftStatusPanel.sameLine();
+
+        if( this.skipTabs )
+        {
+            leftStatusPanel.addButton( null, "ZoomOutButton", this._decreaseFontSize.bind( this ), { icon: "ZoomOut", width: "32px", title: "Zoom Out", tooltip: true } );
         }
+
+        leftStatusPanel.addButton( null, "ZoomOutButton", this._decreaseFontSize.bind( this ), { icon: "ZoomOut", width: "32px", title: "Zoom Out", tooltip: true } );
+        leftStatusPanel.addLabel( this.fontSize ?? 14, { fit: true, signal: "@font-size" });
+        leftStatusPanel.addButton( null, "ZoomInButton", this._increaseFontSize.bind( this ), { icon: "ZoomIn", width: "32px", title: "Zoom In", tooltip: true } );
+        leftStatusPanel.endLine( "justify-start" );
+        panel.attach( leftStatusPanel.root );
+
+        let rightStatusPanel = new LX.Panel( { height: "auto" } );
+        rightStatusPanel.sameLine();
+        rightStatusPanel.addLabel( this.code.title, { id: "EditorFilenameStatusComponent", fit: true, signal: "@tab-name" });
+        rightStatusPanel.addButton( null, "Ln 1, Col 1", this.showSearchLineBox.bind( this ), { id: "EditorSelectionStatusComponent", fit: true, signal: "@cursor-data" });
+        rightStatusPanel.addButton( null, "Spaces: " + this.tabSpaces, ( value, event ) => {
+            LX.addContextMenu( "Spaces", event, m => {
+                const options = [ 2, 4, 8 ];
+                for( const n of options )
+                    m.add( n, (v) => {
+                        this.tabSpaces = v;
+                        this.processLines();
+                        this._updateDataInfoPanel( "@tab-spaces", "Spaces: " + this.tabSpaces );
+                    } );
+            });
+        }, { id: "EditorIndentationStatusComponent", nameWidth: "15%", signal: "@tab-spaces" });
+        rightStatusPanel.addButton( "<b>{ }</b>", this.highlight, ( value, event ) => {
+            LX.addContextMenu( "Language", event, m => {
+                for( const lang of Object.keys( CodeEditor.languages ) )
+                {
+                    m.add( lang, v => {
+                        this._changeLanguage( v, null, true )
+                    } );
+                }
+            });
+        }, { id: "EditorLanguageStatusComponent", nameWidth: "15%", signal: "@highlight" });
+        rightStatusPanel.endLine( "justify-end" );
+        panel.attach( rightStatusPanel.root );
+
+        const itemVisibilityMap = {
+            "Font Size Zoom": true,
+            "Editor Filename": true,
+            "Editor Selection": true,
+            "Editor Indentation": true,
+            "Editor Language": true,
+        };
+
+        panel.root.addEventListener( "contextmenu", (e) => {
+
+            if( e.target && ( e.target.classList.contains( "lexpanel" ) || e.target.classList.contains( "lexinlinecomponents" ) ) )
+            {
+                return;
+            }
+
+            const menuOptions = Object.keys( itemVisibilityMap ).map( ( itemName, idx ) => {
+                const item = {
+                    name: itemName,
+                    icon: "Check",
+                    callback: () => {
+                        itemVisibilityMap[ itemName ] = !itemVisibilityMap[ itemName ];
+                        const b = panel.root.querySelector( `#${ itemName.replaceAll( " ", "" ) }StatusComponent` );
+                        console.assert( b, `${ itemName } has no status button!` );
+                        b.classList.toggle( "hidden", !itemVisibilityMap[ itemName ] );
+                    }
+                }
+                if( !itemVisibilityMap[ itemName ] ) delete item.icon;
+                return item;
+            } );
+            new LX.DropdownMenu( e.target, menuOptions, { side: "top", align: "start" });
+        } );
+
+        return panel;
     }
 
-    _getFileIcon( name, extension ) {
+    _getFileIcon( name, extension, lang ) {
 
         const isNewTabButton = name ? ( name === '+' ) : false;
-
-        if( !extension )
+        if( isNewTabButton )
         {
-            extension = LX.getExtension( name );
+            return;
         }
-        else
-        {
-            const possibleExtensions = [].concat( extension );
 
-            if( name )
+        if( !lang )
+        {
+            if( !extension )
             {
-                const fileExtension = LX.getExtension( name );
-                const idx = possibleExtensions.indexOf( fileExtension );
+                extension = LX.getExtension( name );
+            }
+            else
+            {
+                const possibleExtensions = [].concat( extension );
+
+                if( name )
+                {
+                    const fileExtension = LX.getExtension( name );
+                    const idx = possibleExtensions.indexOf( fileExtension );
 
-                if( idx > -1)
+                    if( idx > -1)
+                    {
+                        extension = possibleExtensions[ idx ];
+                    }
+                }
+                else
                 {
-                    extension = possibleExtensions[ idx ];
+                    extension = possibleExtensions[ 0 ];
                 }
             }
-            else
+
+            for( const [ l, lData ] of Object.entries( CodeEditor.languages ) )
             {
-                extension = possibleExtensions[ 0 ];
+                const extensions = [].concat( lData.ext );
+                if( extensions.includes( extension ) )
+                {
+                    lang = l;
+                    break;
+                }
             }
+
+        }
+
+        const iconPlusClasses = CodeEditor.languages[ lang ]?.icon;
+        if( iconPlusClasses )
+        {
+            return iconPlusClasses[ extension ] ?? iconPlusClasses;
         }
 
-        return extension == "html" ? "Code orange" :
-            extension == "css" ? "Hash dodgerblue" :
-            extension == "xml" ? "Rss orange" :
-            extension == "bat" ? "Windows lightblue" :
-            extension == "json" ? "Braces fg-primary" :
-            extension == "js" ? "Js goldenrod" :
-            extension == "py" ? "Python munsellblue" :
-            extension == "rs" ? "Rust fg-primary" :
-            extension == "md" ? "Markdown fg-primary" :
-            extension == "cpp" ? "CPlusPlus pictonblue" :
-            extension == "hpp" ? "CPlusPlus heliotrope" :
-            extension == "c" ? "C pictonblue" :
-            extension == "h" ? "C heliotrope" :
-            !isNewTabButton ? "AlignLeft gray" : undefined;
+        return "AlignLeft gray";
     }
 
     _onNewTab( e ) {
 
-        this.processFocus(false);
+        this.processFocus( false );
 
         LX.addContextMenu( null, e, m => {
             m.add( "Create", this.addTab.bind( this, "unnamed.js", true, "", { language: "JavaScript" } ) );
@@ -1696,7 +1829,7 @@ class CodeEditor {
 
         this._removeSecondaryCursors();
 
-        var cursor = this._getCurrentCursor( true );
+        var cursor = this.getCurrentCursor( true );
         this.saveCursor( cursor, this.code.cursorState );
         this.code = this.loadedTabs[ name ];
         this.restoreCursor( cursor, this.code.cursorState );
@@ -1720,12 +1853,12 @@ class CodeEditor {
     _onContextMenuTab( isNewTabButton, event, name,  ) {
 
         if( isNewTabButton )
-        return;
+            return;
 
         LX.addContextMenu( null, event, m => {
             m.add( "Close", () => { this.tabs.delete( name ) } );
-            m.add( "" );
-            m.add( "Rename", () => { console.warn( "TODO" )} );
+            // m.add( "" );
+            // m.add( "Rename", () => { console.warn( "TODO" )} );
         });
     }
 
@@ -1752,6 +1885,9 @@ class CodeEditor {
         code.cursorState = {};
         code.undoSteps = [];
         code.redoSteps = [];
+        code.lineScopes = [];
+        code.lineSymbols = [];
+        code.symbolsTable = new Map();
         code.tabName = name;
         code.title = title ?? name;
         code.tokens = {};
@@ -1778,21 +1914,24 @@ class CodeEditor {
 
         const tabIcon = this._getFileIcon( name );
 
-        if( this.explorer && !isNewTabButton )
+        if( this.useFileExplorer && !isNewTabButton )
         {
             this.addExplorerItem( { id: name, skipVisibility: true, icon: tabIcon } );
             this.explorer.innerTree.frefresh( name );
         }
 
-        this.tabs.add( name, code, {
-            selected: selected,
-            fixed: isNewTabButton,
-            title: code.title,
-            icon: tabIcon,
-            onSelect: this._onSelectTab.bind( this, isNewTabButton ),
-            onContextMenu: this._onContextMenuTab.bind( this, isNewTabButton ),
-            allowDelete: true
-        } );
+        if( !this.skipTabs )
+        {
+            this.tabs.add( name, code, {
+                selected: selected,
+                fixed: isNewTabButton,
+                title: code.title,
+                icon: tabIcon,
+                onSelect: this._onSelectTab.bind( this, isNewTabButton ),
+                onContextMenu: this._onContextMenuTab.bind( this, isNewTabButton ),
+                allowDelete: true
+            } );
+        }
 
         // Move into the sizer..
         this.codeSizer.appendChild( code );
@@ -1818,17 +1957,20 @@ class CodeEditor {
         return name;
     }
 
-    loadTab( name ) {
+    loadCode( name ) {
+
+        // Hide all others
+        this.codeSizer.querySelectorAll( ".code" ).forEach( c => c.classList.add( "hidden" ) );
 
         // Already open...
         if( this.openedTabs[ name ] )
         {
-            this.tabs.select( name );
+            let code = this.openedTabs[ name ]
+            code.classList.remove( "hidden" );
             return;
         }
 
         let code = this.loadedTabs[ name ]
-
         if( !code )
         {
             this.addTab( name, true );
@@ -1856,15 +1998,66 @@ class CodeEditor {
 
         this.openedTabs[ name ] = code;
 
-        const isNewTabButton = ( name === '+' );
-        const tabIcon = this._getFileIcon( name );
+        // Move into the sizer..
+        this.codeSizer.appendChild( code );
 
-        this.tabs.add(name, code, {
-            selected: true,
-            fixed: isNewTabButton,
-            title: code.title,
-            icon: tabIcon,
-            onSelect: this._onSelectTab.bind( this, isNewTabButton ),
+        this.endSelection();
+
+        // Select as current...
+        this.code = code;
+        this.resetCursorPos( CodeEditor.CURSOR_LEFT_TOP );
+        this.processLines();
+        this._changeLanguageFromExtension( LX.getExtension( name ) );
+        this._updateDataInfoPanel( "@tab-name", code.tabName );
+    }
+
+    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 storage...
+            const tabData = this._tabStorage[ name ];
+            if( tabData )
+            {
+                this.code.lines = tabData.lines;
+
+                if( tabData.options.language )
+                {
+                    this._changeLanguage( tabData.options.language, null, true );
+                }
+                else
+                {
+                    this._changeLanguageFromExtension( LX.getExtension( name ) );
+                }
+
+                delete this._tabStorage[ 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 ),
             allowDelete: true
         });
@@ -1899,12 +2092,14 @@ class CodeEditor {
     }
 
     loadTabFromFile() {
+
         const input = document.createElement( 'input' );
         input.type = 'file';
         document.body.appendChild( input );
         input.click();
         input.addEventListener('change', e => {
-            if (e.target.files[ 0 ]) {
+            if (e.target.files[ 0 ])
+            {
                 this.loadFile( e.target.files[ 0 ] );
             }
             input.remove();
@@ -1914,8 +2109,11 @@ class CodeEditor {
     processFocus( active ) {
 
         if( active )
+        {
             this.restartBlink();
-        else {
+        }
+        else
+        {
             clearInterval( this.blinker );
             this.cursors.classList.remove( 'show' );
         }
@@ -1923,10 +2121,10 @@ class CodeEditor {
 
     processMouse( e ) {
 
-        if( !e.target.classList.contains('code') && !e.target.classList.contains('codetabsarea') ) return;
+        if( !e.target.classList.contains('code') && !e.target.classList.contains('lexcodearea') ) return;
         if( !this.code ) return;
 
-        var cursor = this._getCurrentCursor();
+        var cursor = this.getCurrentCursor();
         var code_rect = this.code.getBoundingClientRect();
         var mouse_pos = [(e.clientX - code_rect.x), (e.clientY - code_rect.y)];
 
@@ -2021,14 +2219,17 @@ class CodeEditor {
 
     _onMouseUp( e ) {
 
-        if( (LX.getTime() - this.lastMouseDown) < 120 ) {
+        if( ( LX.getTime() - this.lastMouseDown ) < 120 )
+        {
             this.state.selectingText = false;
             this.endSelection();
         }
 
-        const cursor = this._getCurrentCursor();
+        const cursor = this.getCurrentCursor();
         if( cursor.selection )
+        {
             cursor.selection.invertIfNecessary();
+        }
 
         this.state.selectingText = false;
         delete this._lastSelectionKeyDir;
@@ -2036,7 +2237,7 @@ class CodeEditor {
 
     processClick( e ) {
 
-        var cursor = this._getCurrentCursor();
+        var cursor = this.getCurrentCursor();
         var code_rect = this.codeScroller.getBoundingClientRect();
         var position = [( e.clientX - code_rect.x ) + this.getScrollLeft(), (e.clientY - code_rect.y) + this.getScrollTop()];
         var ln = (position[ 1 ] / this.lineHeight)|0;
@@ -2053,7 +2254,6 @@ class CodeEditor {
         {
             // Make sure we only keep the main cursor..
             this._removeSecondaryCursors();
-
             this.cursorToLine( cursor, ln, true );
             this.cursorToPosition( cursor, string.length );
         }
@@ -2067,38 +2267,45 @@ class CodeEditor {
         this.hideAutoCompleteBox();
     }
 
-    updateSelections( e, keep_range, flags = CodeEditor.SELECTION_X_Y ) {
+    updateSelections( e, keepRange, flags = CodeEditor.SELECTION_X_Y ) {
 
         for( let cursor of this.cursors.children )
         {
             if( !cursor.selection )
+            {
                 continue;
+            }
 
-            this._processSelection( cursor, e, keep_range, flags );
+            this._processSelection( cursor, e, keepRange, flags );
         }
     }
 
-    processSelections( e, keep_range, flags = CodeEditor.SELECTION_X_Y ) {
+    processSelections( e, keepRange, flags = CodeEditor.SELECTION_X_Y ) {
 
         for( let cursor of this.cursors.children )
         {
-            this._processSelection( cursor, e, keep_range, flags );
+            this._processSelection( cursor, e, keepRange, flags );
         }
     }
 
-    _processSelection( cursor, e, keep_range, flags = CodeEditor.SELECTION_X_Y ) {
+    _processSelection( cursor, e, keepRange, flags = CodeEditor.SELECTION_X_Y ) {
 
         const isMouseEvent = e && ( e.constructor == MouseEvent );
 
-        if( isMouseEvent ) this.processClick( e );
+        if( isMouseEvent )
+        {
+            this.processClick( e );
+        }
 
         if( !cursor.selection )
+        {
             this.startSelection( cursor );
+        }
 
         this._hideActiveLine();
 
         // Update selection
-        if( !keep_range )
+        if( !keepRange )
         {
             let ccw = true;
 
@@ -2165,19 +2372,19 @@ class CodeEditor {
                 }
 
                 // Compute new width and selection margins
-                let string;
+                let string = "";
 
-                if(sId == 0) // First line 2 cases (single line, multiline)
+                if( sId == 0 ) // First line 2 cases (single line, multiline)
                 {
                     const reverse = fromX > toX;
                     if(deltaY == 0) string = !reverse ? this.code.lines[ i ].substring( fromX, toX ) : this.code.lines[ i ].substring(toX, fromX);
                     else string = this.code.lines[ i ].substr( fromX );
-                    const pixels = (reverse && deltaY == 0 ? toX : fromX) * this.charWidth;
-                    if( isVisible ) domEl.style.left = "calc(" + pixels + "px + " + this.xPadding + ")";
+                    const pixels = ( reverse && deltaY == 0 ? toX : fromX ) * this.charWidth;
+                    if( isVisible ) domEl.style.left = `calc(${ pixels }px + ${ this.xPadding })`;
                 }
                 else
                 {
-                    string = (i == toY) ? this.code.lines[ i ].substring( 0, toX ) : this.code.lines[ i ]; // Last line, any multiple line...
+                    string = ( i == toY ) ? this.code.lines[ i ].substring( 0, toX ) : this.code.lines[ i ]; // Last line, any multiple line...
                     if( isVisible ) domEl.style.left = this.xPadding;
                 }
 
@@ -2186,7 +2393,7 @@ class CodeEditor {
 
                 if( isVisible )
                 {
-                    domEl.style.width = (stringWidth || 8) + "px";
+                    domEl.style.width = ( stringWidth || 8 ) + "px";
                     domEl._top = i * this.lineHeight;
                     domEl.style.top = domEl._top + "px";
                 }
@@ -2207,7 +2414,7 @@ class CodeEditor {
                 {
                     // Make sure that the line selection is generated...
                     domEl = cursorSelections.childNodes[ sId ];
-                    if(!domEl)
+                    if( !domEl )
                     {
                         domEl = document.createElement( 'div' );
                         domEl.className = "lexcodeselection";
@@ -2326,7 +2533,7 @@ class CodeEditor {
 
     _processGlobalKeys( e, key ) {
 
-        let cursor = this._getCurrentCursor();
+        let cursor = this.getCurrentCursor();
 
         if( e.ctrlKey || e.metaKey )
         {
@@ -2394,7 +2601,7 @@ class CodeEditor {
 
     async _processKeyAtCursor( e, key, cursor ) {
 
-        const skip_undo = e.detail.skip_undo ?? false;
+        const skipUndo = e.detail.skipUndo ?? false;
 
         // keys with length > 1 are probably special keys
         if( key.length > 1 && this.specialKeys.indexOf( key ) == -1 )
@@ -2484,7 +2691,7 @@ class CodeEditor {
 
         // Add undo steps
 
-        if( !skip_undo && this.code.lines.length )
+        if( !skipUndo && this.code.lines.length )
         {
             this._addUndoStep( cursor );
         }
@@ -2545,17 +2752,7 @@ class CodeEditor {
         this.processLine( lidx );
 
         // We are out of the viewport and max length is different? Resize scrollbars...
-        const maxLineLength = this.getMaxLineLength();
-        const numViewportChars = Math.floor( ( this.codeScroller.clientWidth - CodeEditor.LINE_GUTTER_WIDTH ) / this.charWidth );
-        if( maxLineLength >= numViewportChars && maxLineLength != this._lastMaxLineLength )
-        {
-            this.resize( maxLineLength, () => {
-                if( cursor.position > numViewportChars )
-                {
-                    this.setScrollLeft( cursor.position * this.charWidth );
-                }
-            } );
-        }
+        this.resizeIfNecessary( cursor );
 
         // Manage autocomplete
 
@@ -2567,6 +2764,8 @@ class CodeEditor {
 
     async _pasteContent( cursor ) {
 
+        const mustDetectLanguage = ( !this.getText().length );
+
         let text = await navigator.clipboard.readText();
 
         // Remove any possible tabs (\t) and add spaces
@@ -2579,9 +2778,19 @@ class CodeEditor {
         const currentScroll = this.getScrollTop();
         const scroll = Math.max( cursor.line * this.lineHeight - this.codeScroller.offsetWidth, 0 );
 
-        if( currentScroll < scroll ) {
+        if( currentScroll < scroll )
+        {
             this.codeScroller.scrollTo( 0, cursor.line * this.lineHeight );
         }
+
+        if( mustDetectLanguage )
+        {
+            const detectedLang = this._detectLanguage( text );
+            if( detectedLang )
+            {
+                this._changeLanguage( detectedLang );
+            }
+        }
     }
 
     async _copyContent( cursor ) {
@@ -2604,7 +2813,9 @@ class CodeEditor {
             let index = 0;
 
             for( let i = 0; i <= cursor.selection.fromY; i++ )
+            {
                 index += ( i == cursor.selection.fromY ? cursor.selection.fromX : this.code.lines[ i ].length );
+            }
 
             index += cursor.selection.fromY * separator.length;
             const num_chars = cursor.selection.chars + ( cursor.selection.toY - cursor.selection.fromY ) * separator.length;
@@ -2680,7 +2891,7 @@ class CodeEditor {
 
         if( cursor.selection )
         {
-            var cursor = this._getCurrentCursor();
+            var cursor = this.getCurrentCursor();
             this._addUndoStep( cursor, true );
 
             const selectedLines = this.code.lines.slice( cursor.selection.fromY, cursor.selection.toY );
@@ -2709,7 +2920,7 @@ class CodeEditor {
 
     _commentLine( cursor, line, minNonspaceIdx ) {
 
-        const lang = this.languages[ this.highlight ];
+        const lang = CodeEditor.languages[ this.highlight ];
 
         if( !( lang.singleLineComments ?? true ))
             return;
@@ -2739,7 +2950,7 @@ class CodeEditor {
 
         if( cursor.selection )
         {
-            var cursor = this._getCurrentCursor();
+            var cursor = this.getCurrentCursor();
             this._addUndoStep( cursor, true );
 
             for( var i = cursor.selection.fromY; i <= cursor.selection.toY; ++i )
@@ -2762,7 +2973,7 @@ class CodeEditor {
 
     _uncommentLine( cursor, line ) {
 
-        const lang = this.languages[ this.highlight ];
+        const lang = CodeEditor.languages[ this.highlight ];
 
         if( !( lang.singleLineComments ?? true ))
             return;
@@ -2793,7 +3004,6 @@ class CodeEditor {
     }
 
     _actionMustDelete( cursor, action, e ) {
-
         return cursor.selection && action.deleteSelection &&
             ( action.eventSkipDelete ? !e[ action.eventSkipDelete ] : true );
     }
@@ -2804,26 +3014,24 @@ class CodeEditor {
 
         for( let i = 0; i < this.code.lines.length; ++i )
         {
-            const linestring = this.code.lines[ i ];
-            const tokens = this._getTokensFromLine( linestring, true );
+            const lineString = this.code.lines[ i ];
+            const tokens = this._getTokensFromLine( lineString, true );
             tokens.forEach( t => this.code.tokens[ t ] = 1 );
         }
     }
 
     toLocalLine( line ) {
-
         const d = Math.max( this.firstLineInViewport - this.lineScrollMargin.x, 0 );
         return Math.min( Math.max( line - d, 0 ), this.code.lines.length - 1 );
     }
 
     getMaxLineLength() {
-
         return Math.max(...this.code.lines.map( v => v.length ));
     }
 
     processLines( mode ) {
 
-        var code_html = "";
+        var htmlCode = "";
         this._blockCommentCache.length = 0;
 
         // Reset all lines content
@@ -2833,7 +3041,7 @@ class CodeEditor {
         const lastScrollTop = this.getScrollTop();
         this.firstLineInViewport = ( mode ?? CodeEditor.KEEP_VISIBLE_LINES ) & CodeEditor.UPDATE_VISIBLE_LINES ?
                                     ( (lastScrollTop / this.lineHeight)|0 ) : this.firstLineInViewport;
-        const totalLinesInViewport = ((this.codeScroller.offsetHeight - 36) / this.lineHeight)|0;
+        const totalLinesInViewport = ( ( this.codeScroller.offsetHeight ) / this.lineHeight )|0;
         this.visibleLinesViewport = new LX.vec2(
             Math.max( this.firstLineInViewport - this.lineScrollMargin.x, 0 ),
             Math.min( this.firstLineInViewport + totalLinesInViewport + this.lineScrollMargin.y, this.code.lines.length )
@@ -2843,16 +3051,20 @@ class CodeEditor {
         {
             const diff = Math.max( this.code.lines.length - this.visibleLinesViewport.y, 0 );
             if( diff <= this.lineScrollMargin.y )
+            {
                 this.visibleLinesViewport.y += diff;
+            }
         }
 
+        this._scopeStack = [ { name: "", type: "global" } ];
+
         // Process visible lines
         for( let i = this.visibleLinesViewport.x; i < this.visibleLinesViewport.y; ++i )
         {
-            code_html += this.processLine( i, true );
+            htmlCode += this.processLine( i, true );
         }
 
-        this.code.innerHTML = code_html;
+        this.code.innerHTML = htmlCode;
 
         // Update scroll data
         this.codeScroller.scrollTop = lastScrollTop;
@@ -2866,37 +3078,34 @@ class CodeEditor {
         this.resize();
     }
 
-    processLine( linenum, force ) {
+    processLine( lineNumber, force, skipPropagation ) {
 
         // Check if we are in block comment sections..
-        if( !force && this._inBlockCommentSection( linenum ) )
+        if( !force && this._inBlockCommentSection( lineNumber ) )
         {
             this.processLines();
             return;
         }
 
-        const lang = this.languages[ this.highlight ];
-        const localLineNum =  this.toLocalLine( linenum );
-        const gutterLineHtml = "<span class='line-gutter'>" + (linenum + 1) + "</span>";
-
-        const UPDATE_LINE = ( html ) => {
-            if( !force ) // Single line update
-            {
-                this.code.childNodes[ localLineNum ].innerHTML = gutterLineHtml + html;
-                this._setActiveLine( linenum );
-                this._clearTmpVariables();
-            }
-            else // Update all lines at once
-                return "<pre>" + ( gutterLineHtml + html ) + "</pre>";
+        if( this._scopeStack )
+        {
+            this.code.lineScopes[ lineNumber ] = [ ...this._scopeStack ];
+        }
+        else
+        {
+            this.code.lineScopes[ lineNumber ] = this.code.lineScopes[ lineNumber ] ?? [];
+            this._scopeStack = [ ...this.code.lineScopes[ lineNumber ] ];
         }
 
+        const lang = CodeEditor.languages[ this.highlight ];
+        const localLineNum =  this.toLocalLine( lineNumber );
+        const lineString = this.code.lines[ lineNumber ];
+
         // multi-line strings not supported by now
         delete this._buildingString;
         delete this._pendingString;
         delete this._markdownHeader;
 
-        let linestring = this.code.lines[ linenum ];
-
         // Single line
         if( !force )
         {
@@ -2907,35 +3116,37 @@ class CodeEditor {
         // Early out check for no highlighting languages
         if( this.highlight == 'Plain Text' )
         {
-            const plainTextHtml = linestring.replaceAll('<', '&lt;').replaceAll('>', '&gt;');
-            return UPDATE_LINE( plainTextHtml );
+            const plainTextHtml = lineString.replaceAll('<', '&lt;').replaceAll('>', '&gt;');
+            return this._updateLine( force, lineNumber, plainTextHtml, skipPropagation );
         }
 
-        this._currentLineNumber = linenum;
-        this._currentLineString = linestring;
-
-        const tokensToEvaluate = this._getTokensFromLine( linestring );
+        this._currentLineNumber = lineNumber;
+        this._currentLineString = lineString;
 
+        const tokensToEvaluate = this._getTokensFromLine( lineString );
         if( !tokensToEvaluate.length )
         {
-            return "<pre><span class='line-gutter'>" + linenum + "</span></pre>";
+            return this._updateLine( force, lineNumber, "", skipPropagation );
         }
 
-        var lineInnerHtml = "";
+        let lineInnerHtml = "";
+        let pushedScope = false;
 
         // Process all tokens
-        for( var i = 0; i < tokensToEvaluate.length; ++i )
+        for( let i = 0; i < tokensToEvaluate.length; ++i )
         {
             let it = i - 1;
             let prev = tokensToEvaluate[ it ];
-            while( prev == ' ' ) {
+            while( prev == ' ' )
+            {
                 it--;
                 prev = tokensToEvaluate[ it ];
             }
 
             it = i + 1;
             let next = tokensToEvaluate[ it ];
-            while( next == ' ' || next == '"' ) {
+            while( next == ' ' || next == '"' )
+            {
                 it++;
                 next = tokensToEvaluate[ it ];
             }
@@ -2946,7 +3157,15 @@ class CodeEditor {
             {
                 const blockCommentsToken = ( lang.blockCommentsTokens ?? this.defaultBlockCommentTokens )[ 0 ];
                 if( token.substr( 0, blockCommentsToken.length ) == blockCommentsToken )
-                    this._buildingBlockComment = linenum;
+                {
+                    this._buildingBlockComment = lineNumber;
+                }
+            }
+
+            // Pop current scope if necessary
+            if( token === "}" && this._scopeStack.length > 1 )
+            {
+                this._scopeStack.pop();
             }
 
             lineInnerHtml += this._evaluateToken( {
@@ -2960,20 +3179,323 @@ class CodeEditor {
                 isLastToken: (i == tokensToEvaluate.length - 1),
                 tokens: tokensToEvaluate
             } );
+
+            if( token !== "{" )
+            {
+                continue;
+            }
+
+            // Store current scopes
+
+            // Get some context about the scope from previous lines
+            let contextTokens = [
+                ...this._getTokensFromLine( this.code.lines[ lineNumber ].substring( 0, lineString.indexOf( token ) ) )
+            ];
+
+            for( let k = 1; k < 50; k++ )
+            {
+                let kLineString = this.code.lines[ lineNumber - k ];
+                if( !kLineString ) break;
+                const closeIdx = kLineString.lastIndexOf( '}' );
+                if( closeIdx > -1 )
+                {
+                    kLineString = kLineString.substr( closeIdx );
+                }
+
+                contextTokens = [ ...this._getTokensFromLine( kLineString ), ...contextTokens ];
+
+                if( kLineString.length !== this.code.lines[ lineNumber - k ] )
+                {
+                    break;
+                }
+            }
+
+            contextTokens = contextTokens.reverse().filter( v => v.length && v != ' ' );
+
+            // Keywords that can open a *named* scope
+            // TODO: Do this per language
+            const scopeKeywords = ["class", "enum", "function", "interface", "type", "struct", "namespace"];
+
+            let scopeType = null; // This is the type of scope (function, class, enum, etc)
+            let scopeName = null;
+
+            for( let i = 0; i < contextTokens.length; i++ )
+            {
+                const t = contextTokens[ i ];
+
+                if ( scopeKeywords.includes( t ) )
+                {
+                    scopeType = t;
+                    scopeName = contextTokens[ i - 1 ];  // usually right before the keyword in reversed array
+                    break;
+                }
+            }
+
+            // Special case: enum type specification `enum Foo : int {`
+            if( scopeType === "enum" && contextTokens.includes( ":" ) )
+            {
+                const colonIndex = contextTokens.indexOf( ":" );
+                scopeName = contextTokens[ colonIndex + 1 ] || scopeName;
+            }
+
+            if( !scopeType )
+            {
+                const parOpenIndex = contextTokens.indexOf( "(" );
+                scopeName = contextTokens[ parOpenIndex + 1 ] || scopeName;
+
+                if( scopeName )
+                {
+                    scopeType = "method";
+                }
+            }
+
+            if( scopeType )
+            {
+                this._scopeStack.push( { name: scopeName ?? "", type: scopeType } );
+            }
+            else
+            {
+                this._scopeStack.push( { name: "", type: "anonymous" } ); // anonymous scope
+            }
+
+            pushedScope = true;
+        }
+
+        const symbols = this._parseLineForSymbols( lineNumber, lineString, tokensToEvaluate, pushedScope );
+        return this._updateLine( force, lineNumber, lineInnerHtml, skipPropagation, symbols );
+    }
+
+    _processExtraLineIfNecessary( lineNumber, oldSymbols ) {
+
+        if( ( (lineNumber + 1) === this.code.lines.length ) || !this.code.lineScopes[ lineNumber + 1 ] )
+        {
+            return;
+        }
+
+        if( !this._scopeStack )
+        {
+            console.warn( "CodeEditor: No scope available" );
+            return;
+        }
+
+        // Only update scope stack if something changed when editing a single line
+        if( codeScopesEqual( this._scopeStack, this.code.lineScopes[ lineNumber + 1 ] ) )
+        {
+            // First check for occurrencies of the old symbols, to reprocess that lines
+
+            for( const sym of oldSymbols )
+            {
+                const tableSymbol = this.code.symbolsTable.get( sym.name );
+                if( tableSymbol === undefined )
+                {
+                    return;
+                }
+
+                for( const occ of tableSymbol )
+                {
+                    if( occ.line === lineNumber )
+                    {
+                        continue;
+                    }
+
+                    this.processLine( occ.line, false, true );
+                }
+            }
+
+            return;
+        }
+
+        this.code.lineScopes[ lineNumber + 1 ] = [ ...this._scopeStack ];
+        this.processLine( lineNumber + 1 );
+    }
+
+    _updateLine( force, lineNumber, html, skipPropagation, symbols = [] ) {
+
+        const gutterLineHtml = `<span class='line-gutter'>${ lineNumber + 1 }</span>`;
+        const oldSymbols = this._updateLineSymbols( lineNumber, symbols );
+        const lineScope = CodeEditor.debugScopes ? this.code.lineScopes[ lineNumber ].map( s => `${ s.type }` ).join( ", " ) : "";
+        const lineSymbols = CodeEditor.debugSymbols ? this.code.lineSymbols[ lineNumber ].map( s => `${ s.name }(${ s.kind })` ).join( ", " ) : "";
+        const debugString = lineScope + ( lineScope.length ? " - " : "" ) + lineSymbols;
+
+        if( !force ) // Single line update
+        {
+            this.code.childNodes[ this.toLocalLine( lineNumber ) ].innerHTML = ( gutterLineHtml + html + debugString );
+
+            if( !skipPropagation )
+            {
+                this._processExtraLineIfNecessary( lineNumber, oldSymbols );
+            }
+
+            this._setActiveLine( lineNumber );
+            this._clearTmpVariables();
+        }
+        else // Update all lines at once
+        {
+
+            return `<pre>${ ( gutterLineHtml + html + debugString ) }</pre>`;
+        }
+    }
+
+    /**
+     * Parses a single line of code and extract declared symbols
+     */
+    _parseLineForSymbols( lineNumber, lineString, tokens, pushedScope ) {
+
+        const scope = this._scopeStack.at( pushedScope ? -2 : -1 );
+
+        if( !scope )
+        {
+            return [];
+        }
+
+        const scopeName = scope.name;
+        const scopeType = scope.type;
+        const symbols = [];
+        const text = lineString.trim();
+
+        // Don't make symbols from preprocessor lines
+        if( text.startsWith( "#" ) )
+        {
+            return [];
+        }
+
+        const topLevelRegexes = [
+            [/^class\s+([A-Za-z0-9_]+)/, "class"],
+            [/^struct\s+([A-Za-z0-9_]+)/, "struct"],
+            [/^enum\s+([A-Za-z0-9_]+)/, "enum"],
+            [/^interface\s+([A-Za-z0-9_]+)/, "interface"],
+            [/^type\s+([A-Za-z0-9_]+)/, "type"],
+            [/^function\s+([A-Za-z0-9_]+)/, "method"],
+            [/^([A-Za-z0-9_]+)\s*=\s*\(?.*\)?\s*=>/, "method"] // arrow functions
+        ];
+
+        {
+            const nativeTypes = CodeEditor.nativeTypes[ this.highlight ];
+            if( nativeTypes )
+            {
+                const nativeTypes = ['int', 'float', 'double', 'bool', 'long', 'short', 'char', 'wchar_t', 'void'];
+                const regex = `^(?:${nativeTypes.join('|')})\\s+([A-Za-z0-9_]+)\s*[\(]+`;
+                topLevelRegexes.push( [ new RegExp( regex ), 'method' ] );
+            }
+
+            const declarationKeywords = CodeEditor.declarationKeywords[ this.highlight ] ?? [ "const", "let", "var" ];
+            const regex = `^(?:${declarationKeywords.join('|')})\\s+([A-Za-z0-9_]+)`;
+            topLevelRegexes.push( [ new RegExp( regex ), 'variable' ] );
+        }
+
+        for( let [ regex, kind ] of topLevelRegexes )
+        {
+            const m = text.match( regex );
+            if( m )
+            {
+                symbols.push( { name: m[ 1 ], kind, scope: scopeName, line: lineNumber } );
+                break;
+            }
+        }
+
+        const usageRegexes = [
+            [/new\s+([A-Za-z0-9_]+)\s*\(/, "constructor-call"],
+            [/this.([A-Za-z_][A-Za-z0-9_]*)\s*\=/, "class-property"],
+        ];
+
+        for( let [ regex, kind ] of usageRegexes )
+        {
+            const m = text.match( regex );
+            if( m )
+            {
+                symbols.push( { name: m[ 1 ], kind, scope: scopeName, line: lineNumber } );
+            }
+        }
+
+        // Stop after matches for top-level declarations and usage symbols
+        if( symbols.length )
+        {
+            return symbols;
+        }
+
+        const nonWhiteSpaceTokens = tokens.filter( t => t.trim().length );
+
+        for( let i = 0; i < nonWhiteSpaceTokens.length; i++ )
+        {
+            const prev = nonWhiteSpaceTokens[ i - 1 ];
+            const token = nonWhiteSpaceTokens[ i ];
+            const next = nonWhiteSpaceTokens[ i + 1 ];
+
+            if( scopeType.startsWith("class") )
+            {
+                if( next === "(" && /^[a-zA-Z_]\w*$/.test( token ) && prev === undefined )
+                {
+                    symbols.push( { name: token, kind: "method", scope: scopeName, line: lineNumber } );
+                }
+            }
+            else if( scopeType.startsWith("enum") )
+            {
+                if( !isSymbol( token ) && !this._isNumber( token ) && !this._mustHightlightWord( token, CodeEditor.statements ) )
+                {
+                    symbols.push({ name: token, kind: "enum_value", scope: scopeName, line: lineNumber });
+                }
+            }
+        }
+
+        return symbols;
+    }
+
+    /**
+     * Updates the symbol table for a single line
+     * - Removes old symbols from that line
+     * - Inserts the new symbols
+     */
+    _updateLineSymbols( lineNumber, newSymbols ) {
+
+        this.code.lineSymbols[ lineNumber ] = this.code.lineSymbols[ lineNumber ] ?? [];
+        const oldSymbols = LX.deepCopy( this.code.lineSymbols[ lineNumber ] );
+
+        // Clean old symbols from current line
+        for( let sym of this.code.lineSymbols[ lineNumber ] )
+        {
+            let array = this.code.symbolsTable.get( sym.name );
+            if( !array )
+            {
+                continue;
+            }
+
+            array = array.filter( s => s.line !== lineNumber );
+
+            if( array.length )
+            {
+                this.code.symbolsTable.set( sym.name, array );
+            }
+            else
+            {
+                this.code.symbolsTable.delete( sym.name );
+            }
         }
 
-        return UPDATE_LINE( lineInnerHtml );
+        // Add new symbols to table
+        for( let sym of newSymbols )
+        {
+            let arr = this.code.symbolsTable.get( sym.name ) ?? [];
+            arr.push(sym);
+            this.code.symbolsTable.set( sym.name, arr );
+        }
+
+        // Keep lineSymbols in sync
+        this.code.lineSymbols[ lineNumber ] = newSymbols;
+
+        return oldSymbols;
     }
 
-    _lineHasComment( linestring ) {
+    _lineHasComment( lineString ) {
 
-        const lang = this.languages[ this.highlight ];
+        const lang = CodeEditor.languages[ this.highlight ];
 
         if( !(lang.singleLineComments ?? true) )
+        {
             return;
+        }
 
         const singleLineCommentToken = lang.singleLineCommentToken ?? this.defaultSingleLineCommentToken;
-        const idx = linestring.indexOf( singleLineCommentToken );
+        const idx = lineString.indexOf( singleLineCommentToken );
 
         if( idx > -1 )
         {
@@ -2982,22 +3504,27 @@ class CodeEditor {
             var err = false;
             err |= stringKeys.some( function(v) {
                 var re = new RegExp( v, "g" );
-                var matches = (linestring.substring( 0, idx ).match( re ) || []);
+                var matches = (lineString.substring( 0, idx ).match( re ) || []);
                 return (matches.length % 2) !== 0;
             } );
             return err ? undefined : idx;
         }
     }
 
-    _getTokensFromLine( linestring, skipNonWords ) {
+    _getTokensFromLine( lineString, skipNonWords ) {
+
+        if( !lineString || !lineString.length )
+        {
+            return [];
+        }
 
         // Check if line comment
-        const ogLine = linestring;
-        const hasCommentIdx = this._lineHasComment( linestring );
+        const ogLine = lineString;
+        const hasCommentIdx = this._lineHasComment( lineString );
 
         if( hasCommentIdx != undefined )
         {
-            linestring = ogLine.substring( 0, hasCommentIdx );
+            lineString = ogLine.substring( 0, hasCommentIdx );
         }
 
         let tokensToEvaluate = []; // store in a temp array so we know prev and next tokens...
@@ -3013,25 +3540,25 @@ class CodeEditor {
             charCounter += t.length;
         };
 
-        let iter = linestring.matchAll(/(<!--|-->|\*\/|\/\*|::|[\[\](){}<>.,;:*"'%@!/= ])/g);
+        let iter = lineString.matchAll(/(<!--|-->|\*\/|\/\*|::|[\[\](){}<>.,;:*"'%@$!/= ])/g);
         let subtokens = iter.next();
         if( subtokens.value )
         {
             let idx = 0;
             while( subtokens.value != undefined )
             {
-                const _pt = linestring.substring(idx, subtokens.value.index);
+                const _pt = lineString.substring(idx, subtokens.value.index);
                 if( _pt.length ) pushToken( _pt );
                 pushToken( subtokens.value[ 0 ] );
                 idx = subtokens.value.index + subtokens.value[ 0 ].length;
                 subtokens = iter.next();
                 if(!subtokens.value) {
-                    const _at = linestring.substring(idx);
+                    const _at = lineString.substring(idx);
                     if( _at.length ) pushToken( _at );
                 }
             }
         }
-        else pushToken( linestring );
+        else pushToken( lineString );
 
         if( hasCommentIdx != undefined )
         {
@@ -3061,16 +3588,47 @@ class CodeEditor {
                 // Scan for numbers again
                 return this._processTokens( tokens, idx );
             }
+
+            const importantIdx = tokens.indexOf( 'important' );
+            if( this.highlight == 'CSS' && importantIdx > -1 && tokens[ importantIdx - 1 ] === '!' )
+            {
+                tokens[ importantIdx - 1 ] = "!important";
+                tokens.splice( importantIdx, 1 );
+            }
+        }
+        else if( this.highlight == 'PHP' )
+        {
+            let offset = 0;
+            let dollarIdx = tokens.indexOf( '$' );
+
+            while( dollarIdx > -1 )
+            {
+                const offsetIdx = dollarIdx + offset;
+
+                if( tokens[ offsetIdx + 1 ] === 'this-' )
+                {
+                    tokens[ offsetIdx ] = "$this";
+                    tokens[ offsetIdx + 1 ] = "-";
+                }
+                else
+                {
+                    tokens[ offsetIdx ] += ( tokens[ offsetIdx + 1 ] ?? "" );
+                    tokens.splice( offsetIdx + 1, 1 );
+                }
+
+                dollarIdx = tokens.slice( offsetIdx ).indexOf( '$' );
+                offset = offsetIdx;
+            }
         }
 
         return tokens;
     }
 
-    _mustHightlightWord( token, kindArray, lang ) {
+    _mustHightlightWord( token, wordCategory, lang ) {
 
         if( !lang )
         {
-            lang = this.languages[ this.highlight ];
+            lang = CodeEditor.languages[ this.highlight ];
         }
 
         let t = token;
@@ -3080,21 +3638,36 @@ class CodeEditor {
             t = t.toLowerCase();
         }
 
-        return kindArray[ this.highlight ] && kindArray[ this.highlight ][ t ] != undefined;
+        return wordCategory[ this.highlight ] && wordCategory[ this.highlight ].has( t );
+    }
+
+    _getTokenHighlighting( ctx, highlight ) {
+
+        const rules = [ ...HighlightRules.common, ...( HighlightRules[ highlight ] || [] ), ...HighlightRules.post_common ];
+
+        for( const rule of rules )
+        {
+            if( !rule.test( ctx, this ) )
+            {
+                continue;
+            }
+
+            const r = rule.action ? rule.action( ctx, this ) : undefined;
+            if( rule.discard ) ctx.discardToken = r;
+            return rule.className;
+        }
+
+        return null;
     }
 
     _evaluateToken( ctxData ) {
 
-        let token        = ctxData.token,
-            prev         = ctxData.prev,
-            next         = ctxData.next,
-            tokenIndex   = ctxData.tokenIndex,
-            isFirstToken = ctxData.isFirstToken,
-            isLastToken  = ctxData.isLastToken;
+        let { token, prev, next, tokenIndex, isFirstToken, isLastToken } = ctxData;
 
-        const lang = this.languages[ this.highlight ],
+        const lang = CodeEditor.languages[ this.highlight ],
               highlight = this.highlight.replace( /\s/g, '' ).replaceAll( "+", "p" ).toLowerCase(),
-              customStringKeys = Object.assign( {}, this.stringKeys );
+              customStringKeys = Object.assign( {}, this.stringKeys ),
+              lineNumber = this._currentLineNumber;
 
         var usePreviousTokenToCheckString = false;
 
@@ -3109,102 +3682,57 @@ class CodeEditor {
             customStringKeys['@['] = ']';
         }
 
-        // Manage strings
-        this._stringEnded = false;
-
-        if( usePreviousTokenToCheckString || ( this._buildingBlockComment === undefined && ( lang.tags ?? false ? ( this._enclosedByTokens( token, tokenIndex, '<', '>' ) ) : true ) ) )
-        {
-            const checkIfStringEnded = t => {
-                const idx = Object.values( customStringKeys ).indexOf( t );
-                this._stringEnded = (idx > -1) && (idx == Object.values(customStringKeys).indexOf( customStringKeys[ '@' + this._buildingString ] ));
-            };
-
-            if( this._buildingString != undefined )
-            {
-                checkIfStringEnded( usePreviousTokenToCheckString ? ctxData.nextWithSpaces : token );
-            }
-            else if( customStringKeys[ '@' + ( usePreviousTokenToCheckString ? ctxData.prevWithSpaces : token ) ] )
-            {
-                // Start new string
-                this._buildingString = ( usePreviousTokenToCheckString ? ctxData.prevWithSpaces : token );
-
-                // Check if string ended in same token using next...
-                if( usePreviousTokenToCheckString )
-                {
-                    checkIfStringEnded( ctxData.nextWithSpaces );
-                }
-            }
-        }
-
-        const usesBlockComments = lang.blockComments ?? true;
-        const blockCommentsTokens = lang.blockCommentsTokens ?? this.defaultBlockCommentTokens;
-        const singleLineCommentToken = lang.singleLineCommentToken ?? this.defaultSingleLineCommentToken;
-
-        let token_classname = "";
-        let discardToken = false;
-
-        if( this._buildingBlockComment != undefined )
-            token_classname = "cm-com";
-
-        else if( this._buildingString != undefined )
-            discardToken = this._appendStringToken( token );
-
-        else if( this._isKeyword( ctxData, lang ) )
-            token_classname = "cm-kwd";
-
-        else if( this._mustHightlightWord( token, CodeEditor.builtIn, lang ) && ( lang.tags ?? false ? ( this._enclosedByTokens( token, tokenIndex, '<', '>' ) ) : true ) )
-            token_classname = "cm-bln";
-
-        else if( this._mustHightlightWord( token, CodeEditor.statementsAndDeclarations, lang ) )
-            token_classname = "cm-std";
-
-        else if( this._mustHightlightWord( token, CodeEditor.symbols, lang ) )
-            token_classname = "cm-sym";
-
-        else if( token.substr( 0, singleLineCommentToken.length ) == singleLineCommentToken )
-            token_classname = "cm-com";
-
-        else if( this._isNumber( token ) || this._isNumber( token.replace(/[px]|[em]|%/g,'') ) )
-            token_classname = "cm-dec";
-
-        else if( this._isCSSClass( ctxData ) )
-            token_classname = "cm-kwd";
-
-        else if ( this._isType( ctxData, lang ) )
-            token_classname = "cm-typ";
-
-        else if ( highlight == 'batch' && ( token == '@' || prev == ':' || prev == '@' ) )
-            token_classname = "cm-kwd";
-
-        else if ( [ 'cpp', 'c', 'wgsl', 'glsl' ].indexOf( highlight ) > -1 && token.includes( '#' ) ) // C++ preprocessor
-            token_classname = "cm-ppc";
-
-        else if ( highlight == 'cpp' && prev == '<' && (next == '>' || next == '*') ) // Defining template type in C++
-            token_classname = "cm-typ";
-
-        else if ( highlight == 'cpp' && (next == '::' || prev == '::' && next != '(' )) // C++ Class
-            token_classname = "cm-typ";
+        // Manage strings
+        this._stringEnded = false;
 
-        else if ( highlight == 'css' && prev == ':' && (next == ';' || next == '!important') ) // CSS value
-            token_classname = "cm-str";
+        if( usePreviousTokenToCheckString || ( this._buildingBlockComment === undefined && ( lang.tags ?? false ? ( this._enclosedByTokens( token, tokenIndex, '<', '>' ) ) : true ) ) )
+        {
+            const _checkIfStringEnded = t => {
+                const idx = Object.values( customStringKeys ).indexOf( t );
+                this._stringEnded = (idx > -1) && (idx == Object.values(customStringKeys).indexOf( customStringKeys[ '@' + this._buildingString ] ));
+            };
 
-        else if ( highlight == 'css' && prev == undefined && next == ':' ) // CSS attribute
-            token_classname = "cm-typ";
+            if( this._buildingString != undefined )
+            {
+                _checkIfStringEnded( usePreviousTokenToCheckString ? ctxData.nextWithSpaces : token );
+            }
+            else if( customStringKeys[ '@' + ( usePreviousTokenToCheckString ? ctxData.prevWithSpaces : token ) ] )
+            {
+                // Start new string
+                this._buildingString = ( usePreviousTokenToCheckString ? ctxData.prevWithSpaces : token );
 
-        else if ( this._markdownHeader || ( highlight == 'markdown' && isFirstToken && token.replaceAll('#', '').length != token.length ) ) // Header
-        {
-            token_classname = "cm-kwd";
-            this._markdownHeader = true;
+                // Check if string ended in same token using next...
+                if( usePreviousTokenToCheckString )
+                {
+                    _checkIfStringEnded( ctxData.nextWithSpaces );
+                }
+            }
         }
 
-        else if ( token[ 0 ] != '@' && token[ 0 ] != ',' && next == '(' )
-            token_classname = "cm-mtd";
+        // Update context data for next tests
+        ctxData.discardToken = false;
+        ctxData.inBlockComment = this._buildingBlockComment;
+        ctxData.markdownHeader = this._markdownHeader;
+        ctxData.inString = this._buildingString;
+        ctxData.singleLineCommentToken = lang.singleLineCommentToken ?? this.defaultSingleLineCommentToken;
+        ctxData.lang = lang;
+        ctxData.scope = this._scopeStack.at( -1 );
 
+        // Add utils functions for the rules
+        ctxData.isVariableSymbol = ( token ) => this.code.symbolsTable.has( token ) && this.code.symbolsTable.get( token )[ 0 ].kind === "variable";
+        ctxData.isEnumValueSymbol = ( token ) => this.code.symbolsTable.has( token ) && this.code.symbolsTable.get( token )[ 0 ].kind === "enum_value";
+        ctxData.isClassSymbol = ( token ) => this.code.symbolsTable.has( token ) && this.code.symbolsTable.get( token )[ 0 ].kind === "class";
+        ctxData.isStructSymbol = ( token ) => this.code.symbolsTable.has( token ) && this.code.symbolsTable.get( token )[ 0 ].kind === "struct";
+        ctxData.isEnumSymbol = ( token ) => this.code.symbolsTable.has( token ) && this.code.symbolsTable.get( token )[ 0 ].kind === "enum";
 
-        if( usesBlockComments && this._buildingBlockComment != undefined
+        // Get highlighting class based on language common and specific rules
+        let tokenClass = this._getTokenHighlighting( ctxData, highlight );
+
+        const blockCommentsTokens = lang.blockCommentsTokens ?? this.defaultBlockCommentTokens;
+        if( ( lang.blockComments ?? true ) && this._buildingBlockComment != undefined
             && token.substr( 0, blockCommentsTokens[ 1 ].length ) == blockCommentsTokens[ 1 ] )
         {
-            this._blockCommentCache.push( new LX.vec2( this._buildingBlockComment, this._currentLineNumber ) );
+            this._blockCommentCache.push( new LX.vec2( this._buildingBlockComment, lineNumber ) );
             delete this._buildingBlockComment;
         }
 
@@ -3212,34 +3740,36 @@ class CodeEditor {
         if( this._buildingString && ( this._stringEnded || isLastToken ) )
         {
             token = this._getCurrentString();
-            token_classname = "cm-str";
-            discardToken = false;
+            tokenClass = "cm-str";
+            ctxData.discardToken = false;
         }
 
         // Update state
         this._buildingString = this._stringEnded ? undefined : this._buildingString;
 
-        if( discardToken )
+        if( ctxData.discardToken )
         {
             return "";
         }
 
-        token = token.replace( "<", "&lt;" );
-        token = token.replace( ">", "&gt;" );
+        // Replace html chars
+        token = token.replace( "<", "&lt;" ).replace( ">", "&gt;" );
 
         // No highlighting, no need to put it inside another span..
-        if( !token_classname.length )
+        if( !tokenClass )
         {
             return token;
         }
 
-        return "<span class='" + highlight + " " + token_classname + "'>" + token + "</span>";
+        return `<span class="${ highlight } ${ tokenClass }">${ token }</span>`;
     }
 
     _appendStringToken( token ) {
 
         if( !this._pendingString )
+        {
             this._pendingString = "";
+        }
 
         this._pendingString += token;
 
@@ -3247,7 +3777,6 @@ class CodeEditor {
     }
 
     _getCurrentString() {
-
         const chars = this._pendingString;
         delete this._pendingString;
         return chars;
@@ -3285,11 +3814,9 @@ class CodeEditor {
         return false;
     }
 
-    _isKeyword( ctxData, lang ) {
+    _isKeyword( ctxData ) {
 
-        const token = ctxData.token;
-        const tokenIndex = ctxData.tokenIndex;
-        const tokens = ctxData.tokens;
+        const { token, tokenIndex, tokens, lang } = ctxData;
 
         let isKwd = this._mustHightlightWord( token, CodeEditor.keywords ) || this.highlight == 'XML';
 
@@ -3306,6 +3833,10 @@ class CodeEditor {
                 isKwd |= ( ctxData.tokens[ tokenIndex - 2 ] == '$' );
             }
         }
+        if( this.highlight == 'Markdown' )
+        {
+            isKwd = ( this._markdownHeader !== undefined );
+        }
         else if( lang.tags )
         {
             isKwd &= ( this._enclosedByTokens( token, tokenIndex, '<', '>' ) != undefined );
@@ -3315,24 +3846,14 @@ class CodeEditor {
         return isKwd;
     }
 
-    _isCSSClass( ctxData ) {
-
-        const token = ctxData.token;
-        const prev = ctxData.prev;
-        const next = ctxData.next;
+    _isNumber( token ) {
 
-        if( this.highlight != 'CSS' )
+        const lang = CodeEditor.languages[ this.highlight ];
+        if( !( lang.numbers ?? true ) )
         {
             return false;
         }
 
-        return  ( prev == '.' || prev == '::'
-                || ( prev == ':' && next == '{' )
-                || ( token[ 0 ] == '#' && prev != ':' ) );
-    }
-
-    _isNumber( token ) {
-
         const subToken = token.substring( 0, token.length - 1 );
 
         if( this.highlight == 'C++' )
@@ -3364,56 +3885,27 @@ class CodeEditor {
         return token.length && token != ' ' && !Number.isNaN( +token );
     }
 
-    _isType( ctxData, lang ) {
-
-        const token = ctxData.token;
-        const prev = ctxData.prev;
-        const next = ctxData.next;
-
-        // Common case
-        if( this._mustHightlightWord( token, CodeEditor.types, lang ) )
-        {
-            return true;
-        }
+    _encloseSelectedWordWithKey( key, lidx, cursor ) {
 
-        if( this.highlight == 'JavaScript' )
-        {
-            return (prev == 'class' && next == '{') || (prev == 'new' && next == '(');
-        }
-        else if( this.highlight == 'C++' )
+        if( !cursor.selection || ( cursor.selection.fromY != cursor.selection.toY ) )
         {
-            return (prev == 'class' && next == '{') || (prev == 'struct' && next == '{');
-        }
-        else if ( this.highlight == 'WGSL' )
-        {
-            const not_kwd = !this._mustHightlightWord( token, CodeEditor.keywords, lang );
-            return  (prev == 'struct' && next == '{') ||
-                    (not_kwd && prev == ':' && next == ';') ||
-            ( not_kwd &&
-                ( prev == ':' && next == ')' || prev == ':' && next == ',' || prev == '>' && next == '{'
-                    || prev == '<' && next == ',' || prev == '<' && next == '>' || prev == '>' && token != ';' && !next ));
+            return false;
         }
-    }
-
-    _encloseSelectedWordWithKey( key, lidx, cursor ) {
-
-        if( !cursor.selection || (cursor.selection.fromY != cursor.selection.toY) )
-        return false;
 
         cursor.selection.invertIfNecessary();
 
         // Insert first..
         this.code.lines[ lidx ] = [
-            this.code.lines[ lidx ].slice(0, cursor.selection.fromX),
+            this.code.lines[ lidx ].slice( 0, cursor.selection.fromX ),
             key,
-            this.code.lines[ lidx ].slice(cursor.selection.fromX)
+            this.code.lines[ lidx ].slice( cursor.selection.fromX )
         ].join('');
 
         // Go to the end of the word
-        this.cursorToPosition(cursor, cursor.selection.toX + 1);
+        this.cursorToPosition( cursor, cursor.selection.toX + 1 );
 
         // Change next key?
-        switch(key)
+        switch( key )
         {
             case "'":
             case "\"":
@@ -3441,6 +3933,46 @@ class CodeEditor {
         return true;
     }
 
+    _detectLanguage( text ) {
+
+        const tokenSet = new Set( this._getTokensFromLine( text, true ) );
+        const scores = {};
+
+        for( let [ lang, wordList ] of Object.entries( CodeEditor.keywords ) )
+        {
+            scores[ lang ] = 0;
+            for( let kw of wordList )
+                if( tokenSet.has( kw ) ) scores[ lang ]++;
+        }
+
+        for( let [ lang, wordList ] of Object.entries( CodeEditor.statements ) )
+        {
+            for( let kw of wordList )
+                if( tokenSet.has( kw ) ) scores[ lang ]++;
+        }
+
+        for( let [ lang, wordList ] of Object.entries( CodeEditor.utils ) )
+        {
+            for( let kw of wordList )
+                if( tokenSet.has( kw ) ) scores[ lang ]++;
+        }
+
+        for( let [ lang, wordList ] of Object.entries( CodeEditor.types ) )
+        {
+            for( let kw of wordList )
+                if( tokenSet.has( kw ) ) scores[ lang ]++;
+        }
+
+        for( let [ lang, wordList ] of Object.entries( CodeEditor.builtIn ) )
+        {
+            for( let kw of wordList )
+                if( tokenSet.has( kw ) ) scores[ lang ]++;
+        }
+
+        const sorted = Object.entries( scores ).sort( ( a, b ) => b[ 1 ] - a[ 1 ] );
+        return sorted[0][1] > 0 ? sorted[0][0] : undefined;
+    }
+
     lineUp( cursor, resetLeft ) {
 
         if( this.code.lines[ cursor.line - 1 ] == undefined )
@@ -3556,7 +4088,7 @@ class CodeEditor {
         // Use main cursor
         this._removeSecondaryCursors();
 
-        var cursor = this._getCurrentCursor();
+        var cursor = this.getCurrentCursor();
         this.resetCursorPos( CodeEditor.CURSOR_LEFT_TOP, cursor );
 
         this.startSelection( cursor );
@@ -3578,7 +4110,7 @@ class CodeEditor {
         if( !key ) return;
 
         cursor._left += this.charWidth;
-        cursor.style.left = "calc( " + cursor._left + "px + " + this.xPadding + " )";
+        cursor.style.left = `calc( ${ cursor._left }px + ${ this.xPadding } )`;
         cursor.position++;
 
         this.restartBlink();
@@ -3598,7 +4130,7 @@ class CodeEditor {
 
         cursor._left -= this.charWidth;
         cursor._left = Math.max( cursor._left, 0 );
-        cursor.style.left = "calc( " + cursor._left + "px + " + this.xPadding + " )";
+        cursor.style.left = `calc( ${ cursor._left }px + ${ this.xPadding } )`;
         cursor.position--;
         cursor.position = Math.max( cursor.position, 0 );
         this.restartBlink();
@@ -3616,8 +4148,8 @@ class CodeEditor {
     cursorToTop( cursor, resetLeft = false ) {
 
         cursor._top -= this.lineHeight;
-        cursor._top = Math.max(cursor._top, 0);
-        cursor.style.top = "calc(" + cursor._top + "px)";
+        cursor._top = Math.max( cursor._top, 0 );
+        cursor.style.top = `calc(${ cursor._top }px)`;
         this.restartBlink();
 
         if( resetLeft )
@@ -3646,11 +4178,8 @@ class CodeEditor {
         }
 
         const currentScrollTop = this.getScrollTop();
-        const tabsHeight = this.tabs.root.getBoundingClientRect().height;
-        const infoPanelHeight = this.skipInfo ? 0 : this.infoPanel.root.getBoundingClientRect().height;
-        const scrollerHeight = this.codeScroller.offsetHeight;
-
-        var lastLine = ( ( scrollerHeight - tabsHeight - infoPanelHeight + currentScrollTop ) / this.lineHeight )|0;
+        const scrollerHeight = this.codeScroller.offsetHeight - this._fullVerticalOffset;
+        const lastLine = ( ( scrollerHeight + currentScrollTop ) / this.lineHeight )|0;
         if( cursor.line >= lastLine )
         {
             this.setScrollTop( currentScrollTop + this.lineHeight );
@@ -3660,7 +4189,9 @@ class CodeEditor {
     cursorToString( cursor, text, reverse ) {
 
         if( !text.length )
+        {
             return;
+        }
 
         for( let char of text )
         {
@@ -3672,7 +4203,7 @@ class CodeEditor {
 
         cursor.position = position;
         cursor._left = position * this.charWidth;
-        cursor.style.left = "calc(" + cursor._left + "px + " + this.xPadding + ")";
+        cursor.style.left = `calc( ${ cursor._left }px + ${ this.xPadding } )`;
     }
 
     cursorToLine( cursor, line, resetLeft = false ) {
@@ -3704,14 +4235,24 @@ class CodeEditor {
         return cursors;
     }
 
+    getCurrentCursor( removeOthers ) {
+
+        if( removeOthers )
+        {
+            this._removeSecondaryCursors();
+        }
+
+        return this.cursors.children[ 0 ];
+    }
+
     relocateCursors() {
 
         for( let cursor of this.cursors.children )
         {
             cursor._left = cursor.position * this.charWidth;
-            cursor.style.left = "calc(" + cursor._left + "px + " + this.xPadding + ")";
+            cursor.style.left = `calc( ${ cursor._left }px + ${ this.xPadding } )`;
             cursor._top = cursor.line * this.lineHeight;
-            cursor.style.top = "calc(" + cursor._top + "px)";
+            cursor.style.top = `calc(${ cursor._top }px)`;
         }
     }
 
@@ -3730,9 +4271,9 @@ class CodeEditor {
         cursor.line = state.line ?? 0;
 
         cursor._left = cursor.position * this.charWidth;
-        cursor.style.left = "calc(" + cursor._left + "px + " + this.xPadding + ")";
+        cursor.style.left = `calc( ${ cursor._left }px + ${ this.xPadding } )`;
         cursor._top = cursor.line * this.lineHeight;
-        cursor.style.top = "calc(" + cursor._top + "px)";
+        cursor.style.top = `calc(${ cursor._top }px)`;
 
         if( state.selection )
         {
@@ -3753,7 +4294,7 @@ class CodeEditor {
 
     resetCursorPos( flag, cursor ) {
 
-        cursor = cursor ?? this._getCurrentCursor();
+        cursor = cursor ?? this.getCurrentCursor();
 
         if( flag & CodeEditor.CURSOR_LEFT )
         {
@@ -3770,18 +4311,85 @@ class CodeEditor {
         }
     }
 
+    _addCursor( line = 0, position = 0, force, isMain = false ) {
+
+        // If cursor in that position exists, remove it instead..
+        const exists = Array.from( this.cursors.children ).find( v => v.position == position && v.line == line );
+        if( exists && !force )
+        {
+            if( !exists.isMain )
+                exists.remove();
+
+            return;
+        }
+
+        let cursor = document.createElement( 'div' );
+        cursor.name = "cursor" + this.cursors.childElementCount;
+        cursor.className = "cursor";
+        cursor.innerHTML = "&nbsp;";
+        cursor.isMain = isMain;
+        cursor._left = position * this.charWidth;
+        cursor.style.left = "calc( " + cursor._left + "px + " + this.xPadding + " )";
+        cursor._top = line * this.lineHeight;
+        cursor.style.top = cursor._top + "px";
+        cursor._position = position;
+        cursor._line = line;
+        cursor.print = (function() { console.log( this._line, this._position ) }).bind( cursor );
+        cursor.isLast = (function() { return this.cursors.lastChild == cursor; }).bind( this );
+
+        Object.defineProperty( cursor, 'line', {
+            get: (v) => { return cursor._line },
+            set: (v) => {
+                cursor._line = v;
+                if( cursor.isMain ) this._setActiveLine( v );
+            }
+        } );
+
+        Object.defineProperty( cursor, 'position', {
+            get: (v) => { return cursor._position },
+            set: (v) => {
+                cursor._position = v;
+                if( cursor.isMain )
+                {
+                    const activeLine = this.state.activeLine;
+                    this._updateDataInfoPanel( "@cursor-data", `Ln ${ activeLine + 1 }, Col ${ v + 1 }` );
+                }
+            }
+        } );
+
+        this.cursors.appendChild( cursor );
+
+        return cursor;
+    }
+
+    _removeSecondaryCursors() {
+
+        while( this.cursors.childElementCount > 1 )
+            this.cursors.lastChild.remove();
+    }
+
+    _logCursors() {
+
+        for( let cursor of this.cursors.children )
+        {
+            cursor.print();
+        }
+    }
+
     _addSpaceTabs( cursor, n ) {
 
-        for( var i = 0; i < n; ++i ) {
+        for( var i = 0; i < n; ++i )
+        {
             this.actions[ 'Tab' ].callback( cursor.line, cursor, null );
         }
     }
 
     _addSpaces( n ) {
 
-        for( var i = 0; i < n; ++i ) {
+        for( var i = 0; i < n; ++i )
+        {
             this.root.dispatchEvent( new CustomEvent( 'keydown', { 'detail': {
-                skip_undo: true,
+                skipUndo: true,
                 key: ' ',
                 targetCursor: this._lastProcessedCursorIndex
             }}));
@@ -3789,16 +4397,21 @@ class CodeEditor {
     }
 
     _removeSpaces( cursor ) {
+
         const lidx = cursor.line;
+
         // Remove indentation
         let lineStart = firstNonspaceIndex( this.code.lines[ lidx ] );
 
         // Nothing to remove... we are at the start of the line
         if( lineStart == 0 )
+        {
             return;
+        }
 
         // Only tabs/spaces in the line...
-        if( lineStart == -1 ) {
+        if( lineStart == -1 )
+        {
             lineStart = this.code.lines[ lidx ].length;
         }
 
@@ -3835,7 +4448,7 @@ class CodeEditor {
 
     setScrollLeft( value ) {
         if( !this.codeScroller ) return;
-        doAsync( () => {
+        LX.doAsync( () => {
             this.codeScroller.scrollLeft = value;
             this.setScrollBarValue( 'horizontal', 0 );
         }, 20 );
@@ -3843,30 +4456,34 @@ class CodeEditor {
 
     setScrollTop( value ) {
         if( !this.codeScroller ) return;
-        doAsync( () => {
+        LX.doAsync( () => {
             this.codeScroller.scrollTop = value;
             this.setScrollBarValue( 'vertical' );
         }, 20 );
     }
 
-    resize( pMaxLength, onResize ) {
+    resize( flag = CodeEditor.RESIZE_SCROLLBAR_H_V, pMaxLength, onResize ) {
 
         setTimeout( () => {
 
-            // Update max viewport
-            const maxLineLength = pMaxLength ?? this.getMaxLineLength();
-            const scrollWidth = maxLineLength * this.charWidth + CodeEditor.LINE_GUTTER_WIDTH;
+            let scrollWidth, scrollHeight;
 
-            const tabsHeight = this.tabs.root.getBoundingClientRect().height;
-            const infoPanelHeight = this.skipInfo ? 0 : this.infoPanel.root.getBoundingClientRect().height;
-            const scrollHeight = this.code.lines.length * this.lineHeight;
-
-            this._lastMaxLineLength = maxLineLength;
+            if( flag & CodeEditor.RESIZE_SCROLLBAR_H )
+            {
+                // Update max viewport
+                const maxLineLength = pMaxLength ?? this.getMaxLineLength();
+                this._lastMaxLineLength = maxLineLength;
+                scrollWidth = maxLineLength * this.charWidth + CodeEditor.LINE_GUTTER_WIDTH;
+                this.codeSizer.style.minWidth = scrollWidth + "px";
+            }
 
-            this.codeSizer.style.minWidth = scrollWidth + "px";
-            this.codeSizer.style.minHeight = ( scrollHeight + tabsHeight + infoPanelHeight ) + "px";
+            if( flag & CodeEditor.RESIZE_SCROLLBAR_V )
+            {
+                scrollHeight = this.code.lines.length * this.lineHeight + this._fullVerticalOffset;
+                this.codeSizer.style.minHeight = scrollHeight + "px";
+            }
 
-            this.resizeScrollBars();
+            this.resizeScrollBars( flag );
 
             if( onResize )
             {
@@ -3876,37 +4493,52 @@ class CodeEditor {
         }, 10 );
     }
 
-    resizeScrollBars() {
-
-        const totalLinesInViewport = ((this.codeScroller.offsetHeight) / this.lineHeight)|0;
+    resizeIfNecessary( cursor, force ) {
 
-        if( totalLinesInViewport >= this.code.lines.length )
-        {
-            this.codeScroller.classList.remove( 'with-vscrollbar' );
-            this.vScrollbar.root.classList.add( 'scrollbar-unused' );
-        }
-        else
+        const maxLineLength = this.getMaxLineLength();
+        const numViewportChars = Math.floor( ( this.codeScroller.clientWidth - CodeEditor.LINE_GUTTER_WIDTH ) / this.charWidth );
+        if( force || ( maxLineLength >= numViewportChars && maxLineLength != this._lastMaxLineLength ) )
         {
-            this.codeScroller.classList.add( 'with-vscrollbar' );
-            this.vScrollbar.root.classList.remove( 'scrollbar-unused' );
-            this.vScrollbar.thumb.size = (totalLinesInViewport / this.code.lines.length);
-            this.vScrollbar.thumb.style.height = (this.vScrollbar.thumb.size * 100.0) + "%";
+            this.resize( CodeEditor.RESIZE_SCROLLBAR_H, maxLineLength, () => {
+                if( cursor.position > numViewportChars )
+                {
+                    this.setScrollLeft( cursor.position * this.charWidth );
+                }
+            } );
         }
+    }
 
-        const numViewportChars = Math.floor( ( this.codeScroller.clientWidth - CodeEditor.LINE_GUTTER_WIDTH ) / this.charWidth );
-        const maxLineLength = this._lastMaxLineLength;
+    resizeScrollBars( flag = CodeEditor.RESIZE_SCROLLBAR_H_V ) {
 
-        if( numViewportChars >= maxLineLength )
+        if( flag & CodeEditor.RESIZE_SCROLLBAR_V )
         {
-            this.codeScroller.classList.remove( 'with-hscrollbar' );
-            this.hScrollbar.root.classList.add( 'scrollbar-unused' );
+            const totalLinesInViewport = (( this.codeScroller.offsetHeight ) / this.lineHeight)|0;
+            const needsVerticalScrollbar = ( this.code.lines.length >= totalLinesInViewport );
+            if( needsVerticalScrollbar )
+            {
+                this.vScrollbar.thumb.size = ( totalLinesInViewport / this.code.lines.length );
+                this.vScrollbar.thumb.style.height = (this.vScrollbar.thumb.size * 100.0) + "%";
+            }
+
+            this.vScrollbar.root.classList.toggle( 'hidden', !needsVerticalScrollbar );
+            this.hScrollbar.root.style.width = `calc(100% - ${ 48 + ( needsVerticalScrollbar ? ScrollBar.SCROLLBAR_VERTICAL_WIDTH : 0 ) }px)`; // 48 is the line gutter
+            this.codeArea.root.style.width = `calc(100% - ${ needsVerticalScrollbar ? ScrollBar.SCROLLBAR_VERTICAL_WIDTH : 0 }px)`;
         }
-        else
+
+        if( flag & CodeEditor.RESIZE_SCROLLBAR_H )
         {
-            this.codeScroller.classList.add( 'with-hscrollbar' );
-            this.hScrollbar.root.classList.remove( 'scrollbar-unused' );
-            this.hScrollbar.thumb.size = (numViewportChars / maxLineLength);
-            this.hScrollbar.thumb.style.width = (this.hScrollbar.thumb.size * 100.0) + "%";
+            const numViewportChars = Math.floor( ( this.codeScroller.clientWidth - CodeEditor.LINE_GUTTER_WIDTH ) / this.charWidth );
+            const maxLineLength = this._lastMaxLineLength;
+            const needsHorizontalScrollbar = maxLineLength >= numViewportChars;
+
+            if( needsHorizontalScrollbar )
+            {
+                this.hScrollbar.thumb.size = ( numViewportChars / maxLineLength );
+                this.hScrollbar.thumb.style.width = ( this.hScrollbar.thumb.size * 100.0 ) + "%";
+            }
+
+            this.hScrollbar.root.classList.toggle( 'hidden', !needsHorizontalScrollbar );
+            this.codeArea.root.style.height = `calc(100% - ${ this._verticalBottomOffset + ( needsHorizontalScrollbar ? ScrollBar.SCROLLBAR_HORIZONTAL_HEIGHT : 0 ) }px)`;
         }
     }
 
@@ -3980,7 +4612,6 @@ class CodeEditor {
     }
 
     getCharAtPos( cursor, offset = 0 ) {
-
         return this.code.lines[ cursor.line ][ cursor.position + offset ];
     }
 
@@ -4034,7 +4665,7 @@ class CodeEditor {
         return [ word, from, to ];
     }
 
-    _measureChar( char = "a", use_floating = false, get_bb = false ) {
+    _measureChar( char = "a", useFloating = false, getBB = false ) {
         const parentContainer = LX.makeContainer( null, "lexcodeeditor", "", document.body );
         const container = LX.makeContainer( null, "code", "", parentContainer );
         const line = document.createElement( "pre" );
@@ -4044,12 +4675,11 @@ class CodeEditor {
         text.innerText = char;
         var rect = text.getBoundingClientRect();
         LX.deleteElement( parentContainer );
-        const bb = [ use_floating ? rect.width : Math.floor( rect.width ), use_floating ? rect.height : Math.floor( rect.height ) ];
-        return get_bb ? bb : bb[ 0 ];
+        const bb = [ useFloating ? rect.width : Math.floor( rect.width ), useFloating ? rect.height : Math.floor( rect.height ) ];
+        return getBB ? bb : bb[ 0 ];
     }
 
     measureString( str ) {
-
         return str.length * this.charWidth;
     }
 
@@ -4102,46 +4732,64 @@ class CodeEditor {
     showAutoCompleteBox( key, cursor ) {
 
         if( !cursor.isMain )
+        {
             return;
+        }
 
-        const [word, start, end] = this.getWordAtPos( cursor, -1 );
-        if( key == ' ' || !word.length ) {
+        const [ word, start, end ] = this.getWordAtPos( cursor, -1 );
+        if( key == ' ' || !word.length )
+        {
             this.hideAutoCompleteBox();
             return;
         }
 
         this.autocomplete.innerHTML = ""; // Clear all suggestions
 
-        let suggestions = [];
-
         // Add language special keys...
-        suggestions = suggestions.concat(
-            Object.keys( CodeEditor.builtIn[ this.highlight ] ?? {} ),
-            Object.keys( CodeEditor.keywords[ this.highlight ] ?? {} ),
-            Object.keys( CodeEditor.statementsAndDeclarations[ this.highlight ] ?? {} ),
-            Object.keys( CodeEditor.types[ this.highlight ] ?? {} ),
-            Object.keys( CodeEditor.utils[ this.highlight ] ?? {} )
-        );
+        let suggestions = [
+            ...Array.from( CodeEditor.keywords[ this.highlight ] ?? [] ),
+            ...Array.from( CodeEditor.builtIn[ this.highlight ] ?? [] ),
+            ...Array.from( CodeEditor.statements[ this.highlight ] ?? [] ),
+            ...Array.from( CodeEditor.types[ this.highlight ] ?? [] ),
+            ...Array.from( CodeEditor.utils[ this.highlight ] ?? [] )
+        ];
+
+        suggestions = suggestions.concat( Object.keys(this.code.tokens).filter( a => a != word ) );
+
+        const scopeStack = [ ...this.code.lineScopes[ cursor.line ] ];
+        const scope = scopeStack.at( -1 );
+        if( scope.type.startsWith( "enum" ) )
+        {
+            const enumValues = Array.from( this.code.symbolsTable ).filter( s => s[ 1 ][ 0 ].kind === "enum_value" && s[ 1 ][ 0 ].scope === scope.name ).map( s => s[ 0 ] );
+            suggestions = suggestions.concat( enumValues.slice( 0, -1 ) );
+        }
+        else
+        {
+            const otherValues = Array.from( this.code.symbolsTable ).map( s => s[ 0 ] );
+            suggestions = suggestions.concat( otherValues.slice( 0, -1 ) );
+        }
 
-        // Add words in current tab plus remove current word
-        // suggestions = suggestions.concat( Object.keys(this.code.tokens).filter( a => a != word ) );
+        const prefix = word.toLowerCase();
 
         // Remove 1/2 char words and duplicates...
-        suggestions = suggestions.filter( (value, index) => value.length > 2 && suggestions.indexOf(value) === index );
+        suggestions = Array.from( new Set( suggestions )).filter( s => s.length > 2 && s.toLowerCase().includes( prefix ) );
 
         // Order...
-        suggestions = suggestions.sort( ( a, b ) => a.localeCompare( b ) );
+
+        function scoreSuggestion( s, prefix ) {
+            if( s.startsWith( prefix ) ) return 0; // best option
+            if( s.includes( prefix ))  return 1;
+            return 2; // worst
+        }
+
+        suggestions = suggestions.sort( ( a, b ) => scoreSuggestion( a, prefix ) - scoreSuggestion( b, prefix ) || a.localeCompare( b ) );
 
         for( let s of suggestions )
         {
-            if( !s.toLowerCase().includes( word.toLowerCase() ) )
-            continue;
-
             var pre = document.createElement( 'pre' );
             this.autocomplete.appendChild( pre );
 
             var icon = "Type";
-
             if( this._mustHightlightWord( s, CodeEditor.utils ) )
                 icon = "Box";
             else if( this._mustHightlightWord( s, CodeEditor.types ) )
@@ -4177,11 +4825,11 @@ class CodeEditor {
         }
 
         // Select always first option
-        this.autocomplete.firstChild.classList.add('selected');
+        this.autocomplete.firstChild.classList.add( 'selected' );
 
         // Show box
-        this.autocomplete.classList.toggle('show', true);
-        this.autocomplete.classList.toggle('no-scrollbar', !(this.autocomplete.scrollHeight > this.autocomplete.offsetHeight));
+        this.autocomplete.classList.toggle( 'show', true );
+        this.autocomplete.classList.toggle( 'no-scrollbar', !( this.autocomplete.scrollHeight > this.autocomplete.offsetHeight ) );
         this.autocomplete.style.left = (cursor._left + CodeEditor.LINE_GUTTER_WIDTH - this.getScrollLeft()) + "px";
         this.autocomplete.style.top = (cursor._top + 28 + this.lineHeight - this.getScrollTop()) + "px";
 
@@ -4293,7 +4941,7 @@ class CodeEditor {
         }
         else
         {
-            const cursor = this._getCurrentCursor();
+            const cursor = this.getCurrentCursor();
 
             if( cursor.selection )
             {
@@ -4333,9 +4981,11 @@ class CodeEditor {
         text = text ?? this._lastTextFound;
 
         if( !text )
+        {
             return;
+        }
 
-        let cursor = this._getCurrentCursor();
+        let cursor = this.getCurrentCursor();
         let cursorData = new LX.vec2( cursor.position, cursor.line );
         let line = null;
         let char = -1;
@@ -4344,6 +4994,7 @@ class CodeEditor {
         {
             LX.deleteElement( this._lastResult.dom );
             cursorData = this._lastResult.pos;
+            cursorData.x += text.length * ( reverse ? -1 : 1 );
             delete this._lastResult;
         }
 
@@ -4389,10 +5040,12 @@ class CodeEditor {
             }
         }
 
-        if( line == null)
+        if( line == null )
         {
             if( !skipAlert )
+            {
                 alert( "No results!" );
+            }
 
             const lastLine = this.code.lines.length - 1;
 
@@ -4400,6 +5053,7 @@ class CodeEditor {
                 'dom': this.searchResultSelections.lastChild,
                 'pos': reverse ? new LX.vec2( this.code.lines[ lastLine ].length, lastLine ) : new LX.vec2( 0, 0 )
             };
+
             return;
         }
 
@@ -4409,9 +5063,10 @@ class CodeEditor {
             have to add the length of the substring (0, first_ocurrence)
         */
 
-
         if( !reverse )
+        {
             char += ( line == cursorData.y ? cursorData.x : 0 );
+        }
 
 
         // Text found..
@@ -4439,8 +5094,13 @@ class CodeEditor {
 
         this._lastResult = {
             'dom': this.searchResultSelections.lastChild,
-            'pos': new LX.vec2( char + text.length * ( reverse ? -1 : 1 ) , line )
+            'pos': new LX.vec2( char , line ),
+            reverse
         };
+
+        // Force focus back to search box
+        const input = this.searchbox.querySelector( 'input' );
+        input.focus();
     }
 
     showSearchLineBox() {
@@ -4472,7 +5132,7 @@ class CodeEditor {
         this.codeScroller.scrollTo( 0, Math.max( line - 15 ) * this.lineHeight );
 
         // Select line ?
-        var cursor = this._getCurrentCursor( true );
+        var cursor = this.getCurrentCursor( true );
         this.cursorToLine( cursor, line - 1, true );
     }
 
@@ -4527,13 +5187,16 @@ class CodeEditor {
 
         number = number ?? this.state.activeLine;
 
-        this._updateDataInfoPanel( "@cursor-line", "Ln " + ( number + 1 ) );
+        const cursor = this.getCurrentCursor();
+        this._updateDataInfoPanel( "@cursor-data", `Ln ${ number + 1 }, Col ${ cursor.position + 1 }` );
 
-        const old_local = this.toLocalLine( this.state.activeLine );
-        let line = this.code.childNodes[ old_local ];
+        const oldLocal = this.toLocalLine( this.state.activeLine );
+        let line = this.code.childNodes[ oldLocal ];
 
         if( !line )
+        {
             return;
+        }
 
         line.classList.remove( 'active-line' );
 
@@ -4541,71 +5204,54 @@ class CodeEditor {
         {
             this.state.activeLine = number;
 
-            const new_local = this.toLocalLine( number );
-            line = this.code.childNodes[ new_local ];
+            const newLocal = this.toLocalLine( number );
+            line = this.code.childNodes[ newLocal ];
             if( line ) line.classList.add( 'active-line' );
         }
     }
 
     _hideActiveLine() {
-
         this.code.querySelectorAll( '.active-line' ).forEach( e => e.classList.remove( 'active-line' ) );
     }
 
-    _increaseFontSize() {
-
+    _setFontSize( size ) {
         // Change font size
-
-        var r = document.querySelector( ':root' );
-        var s = getComputedStyle( r );
-        var pixels = parseInt( s.getPropertyValue( "--code-editor-font-size" ) );
-        pixels = LX.clamp( pixels + 1, CodeEditor.CODE_MIN_FONT_SIZE, CodeEditor.CODE_MAX_FONT_SIZE );
-        r.style.setProperty( "--code-editor-font-size", pixels + "px" );
+        this.fontSize = size;
+        const r = document.querySelector( ':root' );
+        r.style.setProperty( "--code-editor-font-size", `${ this.fontSize }px` );
         this.charWidth = this._measureChar( "a", true );
 
-        // Change row size
+        window.localStorage.setItem( "lexcodeeditor-font-size", this.fontSize );
 
-        var row_pixels = pixels + 6;
-        r.style.setProperty( "--code-editor-row-height", row_pixels + "px" );
-        this.lineHeight = row_pixels;
+        // Change row size
+        const rowPixels = this.fontSize + 6;
+        r.style.setProperty( "--code-editor-row-height", `${ rowPixels }px` );
+        this.lineHeight = rowPixels;
 
         // Relocate cursors
-
         this.relocateCursors();
 
         // Resize the code area
-
         this.processLines();
-    }
-
-    _decreaseFontSize() {
-
-        // Change font size
-
-        var r = document.querySelector( ':root' );
-        var s = getComputedStyle( r );
-        var pixels = parseInt( s.getPropertyValue( "--code-editor-font-size" ) );
-        pixels = LX.clamp( pixels - 1, CodeEditor.CODE_MIN_FONT_SIZE, CodeEditor.CODE_MAX_FONT_SIZE );
-        r.style.setProperty( "--code-editor-font-size", pixels + "px" );
-        this.charWidth = this._measureChar( "a", true );
-
-        // Change row size
-
-        var row_pixels = pixels + 6;
-        r.style.setProperty( "--code-editor-row-height", row_pixels + "px" );
-        this.lineHeight = row_pixels;
 
-        // Relocate cursors
+        // Emit event
+        LX.emit( "@font-size", this.fontSize );
+    }
 
-        this.relocateCursors();
+    _applyFontSizeOffset( offset = 0 ) {
+        const newFontSize = LX.clamp( this.fontSize + offset, CodeEditor.CODE_MIN_FONT_SIZE, CodeEditor.CODE_MAX_FONT_SIZE );
+        this._setFontSize( newFontSize );
+    }
 
-        // Resize the code area
+    _increaseFontSize() {
+        this._applyFontSizeOffset( 1 );
+    }
 
-        this.processLines();
+    _decreaseFontSize() {
+        this._applyFontSizeOffset( -1 );
     }
 
     _clearTmpVariables() {
-
         delete this._currentLineString;
         delete this._currentLineNumber;
         delete this._buildingString;
@@ -4613,38 +5259,70 @@ class CodeEditor {
         delete this._buildingBlockComment;
         delete this._markdownHeader;
         delete this._lastResult;
+        delete this._scopeStack;
     }
 }
 
-CodeEditor.keywords = {
+CodeEditor.languages = {
+    'Plain Text': { ext: "txt", blockComments: false, singleLineComments: false, numbers: false, icon: "AlignLeft gray" },
+    'JavaScript': { ext: "js", icon: "Js goldenrod" },
+    'TypeScript': { ext: "ts", icon: "Ts pipelineblue" },
+    'C': { ext: [ 'c', 'h' ], usePreprocessor: true, icon: { 'c': "C pictonblue", 'h': "C heliotrope" } },
+    'C++': { ext: [ "cpp", "hpp" ], usePreprocessor: true, icon: { 'cpp': "CPlusPlus pictonblue", 'hpp': "CPlusPlus heliotrope" } },
+    'CSS': { ext: "css", icon: "Hash dodgerblue" },
+    'CMake': { ext: "cmake", singleLineCommentToken: '#', blockComments: false, ignoreCase: true },
+    'GLSL': { ext: "glsl", usePreprocessor: true },
+    'WGSL': { ext: "wgsl", usePreprocessor: true },
+    'JSON': { ext: "json", blockComments: false, singleLineComments: false, icon: "Braces fg-primary" },
+    'XML': { ext: "xml", tags: true, icon: "Rss orange" },
+    'Rust': { ext: "rs", icon: "Rust fg-primary" },
+    'Python': { ext: "py", singleLineCommentToken: '#', icon: "Python munsellblue" },
+    'HTML': { ext: "html", tags: true, singleLineComments: false, blockCommentsTokens: [ '<!--', '-->' ], numbers: false, icon: "Code orange" },
+    'Batch': { ext: "bat", blockComments: false, singleLineCommentToken: '::', ignoreCase: true, icon: "Windows lightblue" },
+    'Markdown': { ext: "md", blockComments: false, singleLineCommentToken: '::', tags: true, numbers: false, icon: "Markdown fg-primary" },
+    'PHP': { ext: "php", icon: "Php blueviolet" },
+};
+
+CodeEditor.nativeTypes = {
+    'C++': ['int', 'float', 'double', 'bool', 'long', 'short', 'char', 'wchar_t', 'void']
+};
 
+CodeEditor.declarationKeywords = {
+    'JavaScript': ['var', 'let', 'const', 'this', 'static', 'class'],
+    'C++': [...CodeEditor.nativeTypes["C++"], 'const', 'auto', 'class', 'struct', 'namespace', 'enum', 'extern']
+};
+
+CodeEditor.keywords = {
     'JavaScript': ['var', 'let', 'const', 'this', 'in', 'of', 'true', 'false', 'new', 'function', 'NaN', 'static', 'class', 'constructor', 'null', 'typeof', 'debugger', 'abstract',
                   'arguments', 'extends', 'instanceof', 'Infinity'],
+    'TypeScript': ['var', 'let', 'const', 'this', 'in', 'of', 'true', 'false', 'new', 'function', 'class', 'extends', 'instanceof', 'Infinity', 'private', 'public', 'protected', 'interface',
+                  'enum', 'type'],
     'C': ['int', 'float', 'double', 'long', 'short', 'char', 'const', 'void', 'true', 'false', 'auto', 'struct', 'typedef', 'signed', 'volatile', 'unsigned', 'static', 'extern', 'enum', 'register',
         'union'],
-    'C++': ['int', 'float', 'double', 'bool', 'long', 'short', 'char', 'wchar_t', 'const', 'static_cast', 'dynamic_cast', 'new', 'delete', 'void', 'true', 'false', 'auto', 'class', 'struct', 'typedef', 'nullptr',
+    'C++': [...CodeEditor.nativeTypes["C++"], 'const', 'static_cast', 'dynamic_cast', 'new', 'delete', 'true', 'false', 'auto', 'class', 'struct', 'typedef', 'nullptr',
             'NULL', 'signed', 'unsigned', 'namespace', 'enum', 'extern', 'union', 'sizeof', 'static', 'private', 'public'],
     'CMake': ['cmake_minimum_required', 'set', 'not', 'if', 'endif', 'exists', 'string', 'strequal', 'add_definitions', 'macro', 'endmacro', 'file', 'list', 'source_group', 'add_executable',
         'target_include_directories', 'set_target_properties', 'set_property', 'add_compile_options', 'add_link_options', 'include_directories', 'add_library', 'target_link_libraries',
         'target_link_options', 'add_subdirectory', 'add_compile_definitions', 'project', 'cache'],
     'JSON': ['true', 'false'],
     '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',
+    'CSS': ['body', 'html', 'canvas', 'div', 'input', 'span', '.', 'table', 'tr', 'td', 'th', 'label', 'video', 'img', 'code', 'button', 'select', 'option', 'svg', 'media', 'all',
+            'i', 'a', 'li', 'h1', 'h2', 'h3', 'h4', 'h5', 'last-child', 'tbody', 'pre', 'monospace', 'font-face'],
+    'WGSL': ['var', 'let', 'true', 'false', 'fn', 'bool', 'u32', 'i32', 'f16', 'f32', 'vec2', 'vec3', 'vec4', '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', 'vec2u', 'vec3u', 'vec4u'],
+            'texture_storage_2d_array', 'texture_storage_3d', 'vec2u', 'vec3u', 'vec4u', 'ptr'],
     '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'],
+    'Batch': ['set', 'echo', 'off', 'del', 'defined', 'setlocal', 'enabledelayedexpansion', 'driverquery', 'print'],
     'HTML': ['html', 'meta', 'title', 'link', 'script', 'body', 'DOCTYPE', 'head', 'br', 'i', 'a', 'li', 'img', 'tr', 'td', 'h1', 'h2', 'h3', 'h4', 'h5'],
     'Markdown': ['br', 'i', 'a', 'li', 'img', 'table', 'title', 'tr', 'td', 'h1', 'h2', 'h3', 'h4', 'h5'],
+    'PHP': ['const', 'function', 'array', 'new', 'int', 'string', '$this', 'public', 'null', 'private', 'protected', 'implements', 'class', 'use', 'namespace', 'abstract', 'clone', 'final',
+            'enum'],
 };
 
 CodeEditor.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'],
@@ -4656,43 +5334,47 @@ CodeEditor.utils = { // These ones don't have hightlight, used as suggestions to
 };
 
 CodeEditor.types = {
-
     'JavaScript': ['Object', 'String', 'Function', 'Boolean', 'Symbol', 'Error', 'Number', 'TextEncoder', 'TextDecoder', 'Array', 'ArrayBuffer', 'InputEvent', 'MouseEvent',
                    'Int8Array', 'Int16Array', 'Int32Array', 'Float32Array', 'Float64Array', 'Element'],
+    'TypeScript': ['arguments', 'constructor', 'null', 'typeof', 'debugger', 'abstract', 'Object', 'string', 'String', 'Function', 'Boolean', 'boolean', 'Error', 'Number', 'number', 'TextEncoder',
+                  'TextDecoder', 'Array', 'ArrayBuffer', 'InputEvent', 'MouseEvent', 'Int8Array', 'Int16Array', 'Int32Array', 'Float32Array', 'Float64Array', 'Element'],
     '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',
               'UnicodeError', 'UnicodeEncodeError', 'UnicodeDecodeError', 'UnicodeTranslateError', 'ValueError', 'ZeroDivisionError'],
-    'C++': ['uint8_t', 'uint16_t', 'uint32_t']
+    'C++': ['uint8_t', 'uint16_t', 'uint32_t'],
+    'PHP': ['Exception', 'DateTime', 'JsonSerializable'],
 };
 
 CodeEditor.builtIn = {
-
     'JavaScript': ['document', 'console', 'window', 'navigator', 'performance'],
     'CSS': ['*', '!important'],
     'C++': ['vector', 'list', 'map'],
     'HTML': ['type', 'xmlns', 'PUBLIC', 'http-equiv', 'src', 'style', 'lang', 'href', 'rel', 'content', 'xml', 'alt'], // attributes
     'Markdown': ['type', 'src', 'style', 'lang', 'href', 'rel', 'content', 'valign', 'alt'], // attributes
+    'PHP': ['echo', 'print'],
 };
 
-CodeEditor.statementsAndDeclarations = {
-
+CodeEditor.statements = {
     'JavaScript': ['for', 'if', 'else', 'case', 'switch', 'return', 'while', 'continue', 'break', 'do', 'import', 'from', 'throw', 'async', 'try', 'catch', 'await'],
+    'TypeScript': ['for', 'if', 'else', 'case', 'switch', 'return', 'while', 'continue', 'break', 'do', 'import', 'from', 'throw', 'async', 'try', 'catch', 'await', 'as'],
     'CSS': ['@', 'import'],
     'C': ['for', 'if', 'else', 'return', 'continue', 'break', 'case', 'switch', 'while', 'using', 'default', 'goto', 'do'],
     'C++': ['std', 'for', 'if', 'else', 'return', 'continue', 'break', 'case', 'switch', 'while', 'using', 'glm', 'spdlog', 'default'],
     'GLSL': ['for', 'if', 'else', 'return', 'continue', 'break'],
-    'WGSL': ['const','for', 'if', 'else', 'return', 'continue', 'break', 'storage', 'read', 'read_write', 'uniform', 'function', 'workgroup'],
+    'WGSL': ['const','for', 'if', 'else', 'return', 'continue', 'break', 'storage', 'read', 'read_write', 'uniform', 'function', 'workgroup', 'bitcast'],
     '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', 'from'],
-    'Batch': ['if', 'IF', 'for', 'FOR', 'in', 'IN', 'do', 'DO', 'call', 'CALL', 'goto', 'GOTO', 'exit', 'EXIT']
+    'Batch': ['if', 'IF', 'for', 'FOR', 'in', 'IN', 'do', 'DO', 'call', 'CALL', 'goto', 'GOTO', 'exit', 'EXIT'],
+    'PHP': ['declare', 'enddeclare', 'foreach', 'endforeach', 'if', 'else', 'elseif', 'endif', 'for', 'endfor', 'while', 'endwhile', 'switch', 'case', 'default', 'endswitch', 'return', 'break', 'continue',
+            'try', 'catch', 'die', 'do', 'exit', 'finally'],
 };
 
 CodeEditor.symbols = {
-
     'JavaScript': ['<', '>', '[', ']', '{', '}', '(', ')', ';', '=', '|', '||', '&', '&&', '?', '??'],
+    'TypeScript': ['<', '>', '[', ']', '{', '}', '(', ')', ';', '=', '|', '||', '&', '&&', '?', '??'],
     'C': ['<', '>', '[', ']', '{', '}', '(', ')', ';', '=', '|', '||', '&', '&&', '?', '*', '-', '+'],
     'C++': ['<', '>', '[', ']', '{', '}', '(', ')', ';', '=', '|', '||', '&', '&&', '?', '::', '*', '-', '+'],
     'CMake': ['{', '}'],
@@ -4704,7 +5386,22 @@ CodeEditor.symbols = {
     'Python': ['<', '>', '[', ']', '(', ')', '='],
     'Batch': ['[', ']', '(', ')', '%'],
     'HTML': ['<', '>', '/'],
-    'XML': ['<', '>', '/']
+    'XML': ['<', '>', '/'],
+    'PHP': ['[', ']', '{', '}', '(', ')'],
+};
+
+CodeEditor.REGISTER_LANGUAGE = function( name, options = {}, def, rules )
+{
+    CodeEditor.languages[ name ] = options;
+
+    if( def?.keywords ) CodeEditor.keywords[ name ] = new Set( def.keywords );
+    if( def?.utils ) CodeEditor.utils[ name ] = new Set( def.utils );
+    if( def?.types ) CodeEditor.types[ name ] = new Set( def.types );
+    if( def?.builtIn ) CodeEditor.builtIn[ name ] = new Set( def.builtIn );
+    if( def?.statements ) CodeEditor.statements[ name ] = new Set( def.statements );
+    if( def?.symbols ) CodeEditor.symbols[ name ] = new Set( def.symbols );
+
+    if( rules ) HighlightRules[ name ] = rules;
 };
 
 LX.CodeEditor = CodeEditor;