lexgui 0.7.2 → 0.7.4

package/build/extensions/codeeditor.js

@@ -33,6 +33,15 @@ function indexOfFrom( str, reg, from, reverse ) {
     }
 }
 
+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 {
 
     constructor( editor, cursor, className = "lexcodeselection" ) {
@@ -133,13 +142,16 @@ 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;
         this.type = type;
 
         this.root = document.createElement( 'div' );
-        this.root.className = "lexcodescrollbar";
+        this.root.className = "lexcodescrollbar hidden";
 
         if( type & ScrollBar.SCROLLBAR_VERTICAL )
             this.root.classList.add( 'vertical' );
@@ -206,7 +218,7 @@ const HighlightRules = {
         { 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.statementsAndDeclarations, ctx.lang ), className: "cm-std" },
+        { 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" },
@@ -214,21 +226,23 @@ const HighlightRules = {
     ],
 
     javascript: [
-        { test: ctx => (ctx.prev === 'class' && ctx.next === '{') || (ctx.prev === 'new' && ctx.next === '('), className: "cm-typ" }
+        { test: ctx => (ctx.prev === 'class' && ctx.next === '{') , className: "cm-typ" },
     ],
 
     typescript: [
-        { test: ctx => ctx.scope && (ctx.token !== ',' && ctx.scope == "enum"), className: "cm-enu" },
+        { 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 == "enum"), className: "cm-enu" },
+        { 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.next === "::" || (ctx.prev === "::" && ctx.next !== "("), className: "cm-typ" }, // C++ Class
+        { test: ctx => ctx.isClassSymbol( ctx.token ) || ctx.isStructSymbol( ctx.token ), className: "cm-typ" },
     ],
 
     wgsl: [
@@ -240,7 +254,8 @@ const HighlightRules = {
     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.next === ":", className: "cm-typ" }, // CSS attribute
+        { 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: [
@@ -252,7 +267,8 @@ const HighlightRules = {
     ],
 
     php: [
-        { test: ctx => (ctx.prev === 'class' && ctx.next === '{') || (ctx.prev === 'class' && ctx.next === 'implements'), className: "cm-typ" },
+        { 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: [
@@ -285,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:
@@ -302,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();
@@ -357,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');
 
@@ -401,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 );
@@ -432,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 = {};
@@ -450,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 ]
 
@@ -475,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...
@@ -488,7 +552,9 @@ class CodeEditor {
                     {
                         const scrollUpBoundary = parseInt( this.code.style.top );
                         if( scrollTop < scrollUpBoundary )
+                        {
                             this.processLines( CodeEditor.UPDATE_VISIBLE_LINES );
+                        }
                     }
 
                     lastScrollTopValue = scrollTop;
@@ -513,34 +579,31 @@ 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;
             }
 
@@ -564,7 +627,7 @@ class CodeEditor {
                 } );
 
                 this.searchbox = box;
-                this.tabs.area.attach( box );
+                this.codeArea.attach( box );
             }
 
             // Add search LINE box
@@ -586,7 +649,7 @@ class CodeEditor {
                 } );
 
                 this.searchlinebox = box;
-                this.tabs.area.attach( box );
+                this.codeArea.attach( box );
             }
         }
 
@@ -597,7 +660,9 @@ class CodeEditor {
 
             // Append all childs
             while( this.codeScroller.firstChild )
+            {
                 this.codeSizer.appendChild( this.codeScroller.firstChild );
+            }
 
             this.codeScroller.appendChild( this.codeSizer );
         }
@@ -613,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) });
@@ -625,8 +689,8 @@ class CodeEditor {
         this.charWidth = 7; // To update later depending on size..
         this.defaultSingleLineCommentToken = '//';
         this.defaultBlockCommentTokens = [ '/*', '*/' ];
-        this.lineScopes = [];
         this._lastTime = null;
+        this._tabStorage = {};
 
         this.pairKeys = {
             "\"": "\"",
@@ -656,476 +720,488 @@ 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 {
-
-                var letter = this.getCharAtPos( cursor, -1 );
-                if( letter ) {
+                else {
 
-                    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 ] );
+                this.setScrollLeft( 0 );
+                this.mergeCursors( 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 );
+                if( e.shiftKey && !e.cancelShift )
+                {
+                    // Get last selection range
+                    if( cursor.selection )
+                    {
+                        lastX += cursor.selection.chars;
+                    }
 
-            // Merge cursors
-            this.mergeCursors( ln );
-        });
+                    if( !cursor.selection )
+                    {
+                        this.startSelection( cursor );
+                    }
 
-        this.action( 'Enter', true, ( ln, cursor, e ) => {
+                    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();
+            });
 
-            // Add word
-            if( this.isAutoCompleteActive )
-            {
-                this.autoCompleteWord();
-                return;
-            }
+            this.action( 'End', false, ( ln, cursor, e ) => {
 
-            if( e.ctrlKey )
-            {
-                this.onrun( this.getText() );
-                return;
-            }
+                if( ( e.shiftKey || e._shiftKey ) && !e.cancelShift ) {
 
-            this._addUndoStep( cursor, true );
+                    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();
 
-            var _c0 = this.getCharAtPos( cursor, -1 );
-            var _c1 = this.getCharAtPos( cursor );
+                this.resetCursorPos( CodeEditor.CURSOR_LEFT, cursor );
+                this.cursorToString( cursor, this.code.lines[ ln ] );
 
-            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 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 );
 
-            this.lineDown( cursor, true );
+                // Merge cursors
+                this.mergeCursors( ln );
+            });
 
-            // Check indentation
-            var spaces = firstNonspaceIndex( this.code.lines[ ln ]);
-            var tabs = Math.floor( spaces / this.tabSpaces );
+            this.action( 'Enter', true, ( ln, cursor, e ) => {
 
-            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 );
-            }
+                // Add word
+                if( this.isAutoCompleteActive )
+                {
+                    this.autoCompleteWord();
+                    return;
+                }
 
-            this.processLines();
-        });
+                if( e.ctrlKey )
+                {
+                    this.onrun( this.getText() );
+                    return;
+                }
 
-        this.action( 'ArrowUp', false, ( ln, cursor, e ) => {
+                this._addUndoStep( cursor, true );
 
-            // Move cursor..
-            if( !this.isAutoCompleteActive )
-            {
-                if( e.shiftKey ) {
-                    if( !cursor.selection )
-                        this.startSelection( cursor );
+                var _c0 = this.getCharAtPos( cursor, -1 );
+                var _c1 = this.getCharAtPos( cursor );
 
-                    this.lineUp( cursor );
+                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 letter = this.getCharAtPos( cursor );
-                    if( !letter ) {
-                        this.cursorToPosition( cursor, this.code.lines[ cursor.line ].length );
-                    }
+                this.lineDown( cursor, true );
 
-                    this._processSelection( cursor, e, false );
+                // Check indentation
+                var spaces = firstNonspaceIndex( this.code.lines[ ln ]);
+                var tabs = Math.floor( spaces / this.tabSpaces );
 
-                } 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 );
+                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 );
                 }
-            }
-            // Move up autocomplete selection
-            else
-            {
-                this._moveArrowSelectedAutoComplete('up');
-            }
-        });
 
-        this.action( 'ArrowDown', false, ( ln, cursor, e ) => {
+                this.processLines();
+            });
 
-            // Move cursor..
-            if( !this.isAutoCompleteActive )
-            {
-                if( e.shiftKey ) {
-                    if( !cursor.selection )
-                        this.startSelection( cursor );
-                } else {
-                    this.endSelection();
-                }
+            this.action( 'ArrowUp', false, ( ln, cursor, e ) => {
+
+                // Move cursor..
+                if( !this.isAutoCompleteActive )
+                {
+                    if( e.shiftKey ) {
+                        if( !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) );
-                }
+                        var letter = this.getCharAtPos( cursor );
+                        if( !letter ) {
+                            this.cursorToPosition( cursor, this.code.lines[ cursor.line ].length );
+                        }
+
+                        this._processSelection( cursor, e, false );
 
-                if( e.shiftKey ) {
-                    this._processSelection( cursor, e );
+                    } 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 down autocomplete selection
-            else
-            {
-                this._moveArrowSelectedAutoComplete('down');
-            }
-        });
+                // Move up autocomplete selection
+                else
+                {
+                    this._moveArrowSelectedAutoComplete('up');
+                }
+            });
 
-        this.action( 'ArrowLeft', false, ( ln, cursor, e ) => {
+            this.action( 'ArrowDown', false, ( ln, cursor, e ) => {
 
-            // Nothing to do..
-            if( cursor.line == 0 && cursor.position == 0 )
-            return;
+                // Move cursor..
+                if( !this.isAutoCompleteActive )
+                {
+                    if( e.shiftKey ) {
+                        if( !cursor.selection )
+                            this.startSelection( cursor );
+                    } else {
+                        this.endSelection();
+                    }
 
-            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 );
+                    const canGoDown = this.lineDown( cursor );
+                    const letter = this.getCharAtPos( cursor );
 
-                // Selections...
-                if( e.shiftKey ) {
-                    if( !cursor.selection )
-                    this.startSelection( 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) );
+                    }
+
+                    if( e.shiftKey ) {
+                        this._processSelection( cursor, e );
+                    }
                 }
+                // Move down autocomplete selection
                 else
-                    this.endSelection();
+                {
+                    this._moveArrowSelectedAutoComplete('down');
+                }
+            });
 
-                this.cursorToString( cursor, substr, true );
+            this.action( 'ArrowLeft', false, ( ln, cursor, e ) => {
 
-                if( e.shiftKey )
-                    this._processSelection( cursor, e );
-            }
-            else {
-                var letter = this.getCharAtPos( cursor, -1 );
-                if( letter ) {
+                // 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 );
+
+                    // Selections...
                     if( e.shiftKey ) {
-                        if( !cursor.selection ) this.startSelection( cursor );
-                        this.cursorToLeft( letter, cursor );
-                        this._processSelection( cursor, e, false, CodeEditor.SELECTION_X );
+                        if( !cursor.selection )
+                        this.startSelection( cursor );
                     }
-                    else {
-                        if( !cursor.selection ) {
+                    else
+                        this.endSelection();
+
+                    this.cursorToString( cursor, substr, true );
+
+                    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 );
-                            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.fromY, true );
-                            this.cursorToPosition( cursor, cursor.selection.fromX );
-                            this.endSelection();
+                            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 ) {
+                    else if( cursor.line > 0 ) {
 
-                    if( e.shiftKey && !cursor.selection ) this.startSelection( cursor );
+                        if( e.shiftKey && !cursor.selection ) this.startSelection( cursor );
 
-                    this.lineUp( cursor );
+                        this.lineUp( cursor );
 
-                    e.cancelShift = e.keepSelection = true;
-                    this.actions[ 'End' ].callback( cursor.line, cursor, e );
-                    delete e.cancelShift; delete e.keepSelection;
+                        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 );
+                        if( e.shiftKey ) this._processSelection( cursor, e, false );
+                    }
                 }
-            }
-        });
-
-        this.action( 'ArrowRight', false, ( ln, cursor, e ) => {
-
-            // Nothing to do..
-            if( cursor.line == this.code.lines.length - 1 &&
-                cursor.position == this.code.lines[ cursor.line ].length )
-            return;
+            });
 
-            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 );
+            this.action( 'ArrowRight', false, ( ln, cursor, e ) => {
 
-                // If no length, we change line..
-                if( !word.length ) this.lineDown( cursor, true );
-                var diff = cursor.position - from;
-                var substr = word.substr( diff );
+                // Nothing to do..
+                if( cursor.line == this.code.lines.length - 1 &&
+                    cursor.position == this.code.lines[ cursor.line ].length )
+                return;
 
-                // Selections...
-                if( e.shiftKey ) {
-                    if( !cursor.selection )
-                        this.startSelection( cursor );
+                if( e.metaKey ) // Apple devices (Command)
+                {
+                    e.preventDefault();
+                    this.actions[ 'End' ].callback( ln, cursor );
                 }
-                else
-                    this.endSelection();
-
-                this.cursorToString( cursor, substr );
+                else if( e.ctrlKey ) // Next word
+                {
+                    // Get next word
+                    const [ word, from, to ] = this.getWordAtPos( cursor );
 
-                if( e.shiftKey )
-                    this._processSelection( cursor, e );
-            }
-            else // Next char
-            {
-                var letter = this.getCharAtPos( cursor );
-                if( letter ) {
+                    // If no length, we change line..
+                    if( !word.length ) this.lineDown( cursor, true );
+                    var diff = cursor.position - from;
+                    var substr = word.substr( diff );
 
-                    // Selecting chars
-                    if( e.shiftKey )
-                    {
+                    // 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
 
@@ -1133,9 +1209,10 @@ class CodeEditor {
         this.openedTabs = { };
 
         const onLoadAll = () => {
+
             // Create inspector panel when the initial state is complete
             // and we have at least 1 tab opened
-            this.statusPanel = this._createStatusPanel();
+            this.statusPanel = this._createStatusPanel( options );
             if( this.statusPanel )
             {
                 area.attach( this.statusPanel );
@@ -1158,6 +1235,21 @@ class CodeEditor {
                 }
 
                 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._verticalTopOffset }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._fullVerticalOffset }px)`;
+                }, 50 );
+
             });
 
             window.editor = this;
@@ -1176,11 +1268,16 @@ class CodeEditor {
 
             for( let url of options.files )
             {
-                this.loadFile( url, { callback: () => {
+                this.loadFile( url, { callback: ( name, text ) => {
                     filesLoaded++;
                     if( filesLoaded == numFiles )
                     {
                         onLoadAll();
+
+                        if( options.onFilesLoaded )
+                        {
+                            options.onFilesLoaded( this, numFiles );
+                        }
                     }
                 }});
             }
@@ -1201,67 +1298,70 @@ 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();
+
+        this.mustProcessLines = true;
 
         if( lang )
         {
             this._changeLanguage( lang );
         }
+
+        this._processLinesIfNecessary();
     }
 
     appendText( text, cursor ) {
 
         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 );
@@ -1278,11 +1378,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 );
             }
@@ -1296,24 +1396,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 = {} ) {
+    async 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', '' );
@@ -1325,7 +1427,7 @@ class CodeEditor {
 
             // Add item in the explorer if used
 
-            if( this.explorer )
+            if( this.useFileExplorer || this.skipTabs )
             {
                 this._tabStorage[ name ] = {
                     lines: lines,
@@ -1333,8 +1435,12 @@ class CodeEditor {
                 };
 
                 const ext = CodeEditor.languages[ options.language ] ?. ext;
-                this.addExplorerItem( { id: name, skipVisibility: true, icon: this._getFileIcon( name, ext ) } );
-                this.explorer.innerTree.frefresh( name );
+
+                if( this.useFileExplorer )
+                {
+                    this.addExplorerItem( { id: name, skipVisibility: true, icon: this._getFileIcon( name, ext ) } );
+                    this.explorer.innerTree.frefresh( name );
+                }
             }
             else
             {
@@ -1350,17 +1456,19 @@ class CodeEditor {
 
             if( options.callback )
             {
-                options.callback( text );
+                options.callback( name, text );
             }
         };
 
         if( file.constructor == String )
         {
             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
         {
@@ -1368,86 +1476,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 )
-                {
-                    const activeLine = this.state.activeLine;
-                    this._updateDataInfoPanel( "@cursor-data", `Ln ${ activeLine + 1 }, 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
@@ -1459,12 +1492,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;
@@ -1518,7 +1557,9 @@ class CodeEditor {
 
         // Only the mainc cursor stores redo steps
         if( !cursor.isMain )
+        {
             return;
+        }
 
         this.code.redoSteps.push( {
             lines: LX.deepCopy( this.code.lines ),
@@ -1548,7 +1589,9 @@ class CodeEditor {
 
             // Generate new if needed
             if( !currentCursor )
+            {
                 currentCursor = this._addCursor();
+            }
 
             this.restoreCursor( currentCursor, step.cursors[ i ] );
         }
@@ -1565,12 +1608,14 @@ class CodeEditor {
         }
 
         this._updateDataInfoPanel( "@highlight", lang );
-        this.processLines();
+
+        this.mustProcessLines = true;
 
         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();
@@ -1589,7 +1634,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 );
@@ -1629,146 +1674,159 @@ class CodeEditor {
         this._changeLanguage( 'Plain Text' );
     }
 
-    _createStatusPanel() {
+    _createStatusPanel( options ) {
 
-        if( !this.skipInfo )
+        if( this.skipInfo )
         {
-            let panel = new LX.Panel({ className: "lexcodetabinfo flex flex-row", height: "auto" });
+            return;
+        }
 
-            let leftStatusPanel = new LX.Panel( { id: "FontSizeZoomStatusComponent", height: "auto" } );
-            leftStatusPanel.sameLine();
-            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,
-            };
+        let panel = new LX.Panel({ className: "lexcodetabinfo flex flex-row", height: "auto" });
 
-            panel.root.addEventListener( "contextmenu", (e) => {
+        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 } );
+        }
 
-                if( e.target && ( e.target.classList.contains( "lexpanel" ) || e.target.classList.contains( "lexinlinecomponents" ) ) )
+        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 ) )
                 {
-                    return;
+                    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": options.statusShowFontSizeZoom ?? true,
+            "Editor Filename": options.statusShowEditorFilename ?? true,
+            "Editor Selection": options.statusShowEditorSelection ?? true,
+            "Editor Indentation": options.statusShowEditorIndentation ?? true,
+            "Editor Language": options.statusShowEditorLanguage ?? true,
+        };
 
-                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;
+        const _setVisibility = ( itemName ) => {
+            const b = panel.root.querySelector( `#${ itemName.replaceAll( " ", "" ) }StatusComponent` );
+            console.assert( b, `${ itemName } has no status button!` );
+            b.classList.toggle( "hidden", !itemVisibilityMap[ itemName ] );
         }
-        else
+
+        for( const [ itemName, v ] of Object.entries( itemVisibilityMap ) )
         {
-            LX.doAsync( () => {
+            _setVisibility( itemName );
+        }
 
-                // 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' );
+        panel.root.addEventListener( "contextmenu", (e) => {
 
-            }, 100 );
-        }
+            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 ];
+                        _setVisibility( 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 )
+            {
+                extension = LX.getExtension( name );
+            }
+            else
             {
-                const fileExtension = LX.getExtension( name );
-                const idx = possibleExtensions.indexOf( fileExtension );
+                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 == "ts" ? "Ts pipelineblue" :
-            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" :
-            extension == "php" ? "Php blueviolet" :
-            !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" } ) );
@@ -1791,7 +1849,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 );
@@ -1815,12 +1873,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" )} );
         });
     }
 
@@ -1841,17 +1899,24 @@ class CodeEditor {
 
         // Create code content
         let code = document.createElement( 'div' );
-        code.className = 'code';
-        code.lines = [ "" ];
-        code.language = options.language ?? "Plain Text";
-        code.cursorState = {};
-        code.undoSteps = [];
-        code.redoSteps = [];
-        code.tabName = name;
-        code.title = title ?? name;
-        code.tokens = {};
-        code.style.left = "0px";
-        code.style.top = "0px";
+        Object.assign( code, {
+            className: 'code',
+            lines: [ "" ],
+            language: options.language ?? "Plain Text",
+            cursorState: {},
+            undoSteps: [],
+            redoSteps: [],
+            lineScopes: [],
+            lineSymbols: [],
+            lineSignatures: [],
+            symbolsTable: new Map(),
+            tabName: name,
+            title: title ?? name,
+            tokens: {}
+        } );
+
+        code.style.left = "0px",
+        code.style.top = "0px",
 
         code.addEventListener( 'dragenter', function(e) {
             e.preventDefault();
@@ -1873,21 +1938,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 );
@@ -1898,32 +1966,38 @@ class CodeEditor {
         {
             this.code = code;
             this.resetCursorPos( CodeEditor.CURSOR_LEFT_TOP );
-            this.processLines();
+            this.mustProcessLines = true;
         }
 
         if( options.language )
         {
             code.languageOverride = options.language;
             this._changeLanguage( code.languageOverride );
+            this.mustProcessLines = true;
         }
 
+        this._processLinesIfNecessary();
+
         this._updateDataInfoPanel( "@tab-name", name );
 
         // Bc it could be overrided..
         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 );
@@ -1946,24 +2020,13 @@ class CodeEditor {
                 delete this._tabStorage[ name ];
             }
 
+            this._processLinesIfNecessary();
+
             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
-        });
-
         // Move into the sizer..
         this.codeSizer.appendChild( code );
 
@@ -1971,17 +2034,86 @@ class CodeEditor {
 
         // Select as current...
         this.code = code;
+        this.mustProcessLines = true;
+
         this.resetCursorPos( CodeEditor.CURSOR_LEFT_TOP );
         this.processLines();
         this._changeLanguageFromExtension( LX.getExtension( name ) );
+        this._processLinesIfNecessary();
         this._updateDataInfoPanel( "@tab-name", code.tabName );
     }
 
-    closeTab( name, eraseAll ) {
-
-        this.tabs.delete( name );
+    loadTab( name ) {
 
-        if( eraseAll )
+        // 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 ];
+            }
+
+            this._processLinesIfNecessary();
+
+            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
+        });
+
+        // Move into the sizer..
+        this.codeSizer.appendChild( code );
+
+        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 );
+    }
+
+    closeTab( name, eraseAll ) {
+
+        this.tabs.delete( name );
+
+        if( eraseAll )
         {
             delete this.openedTabs[ name ];
             delete this.loadedTabs[ name ];
@@ -1994,12 +2126,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();
@@ -2009,8 +2143,11 @@ class CodeEditor {
     processFocus( active ) {
 
         if( active )
+        {
             this.restartBlink();
-        else {
+        }
+        else
+        {
             clearInterval( this.blinker );
             this.cursors.classList.remove( 'show' );
         }
@@ -2018,10 +2155,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)];
 
@@ -2116,14 +2253,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;
@@ -2131,7 +2271,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;
@@ -2148,7 +2288,6 @@ class CodeEditor {
         {
             // Make sure we only keep the main cursor..
             this._removeSecondaryCursors();
-
             this.cursorToLine( cursor, ln, true );
             this.cursorToPosition( cursor, string.length );
         }
@@ -2162,38 +2301,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;
 
@@ -2260,19 +2406,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;
                 }
 
@@ -2281,7 +2427,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";
                 }
@@ -2302,7 +2448,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";
@@ -2421,7 +2567,7 @@ class CodeEditor {
 
     _processGlobalKeys( e, key ) {
 
-        let cursor = this._getCurrentCursor();
+        let cursor = this.getCurrentCursor();
 
         if( e.ctrlKey || e.metaKey )
         {
@@ -2489,7 +2635,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 )
@@ -2579,7 +2725,7 @@ class CodeEditor {
 
         // Add undo steps
 
-        if( !skip_undo && this.code.lines.length )
+        if( !skipUndo && this.code.lines.length )
         {
             this._addUndoStep( cursor );
         }
@@ -2640,17 +2786,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
 
@@ -2662,6 +2798,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
@@ -2674,9 +2812,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 ) {
@@ -2699,7 +2847,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;
@@ -2775,7 +2925,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 );
@@ -2834,7 +2984,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 )
@@ -2888,7 +3038,6 @@ class CodeEditor {
     }
 
     _actionMustDelete( cursor, action, e ) {
-
         return cursor.selection && action.deleteSelection &&
             ( action.eventSkipDelete ? !e[ action.eventSkipDelete ] : true );
     }
@@ -2906,20 +3055,32 @@ class CodeEditor {
     }
 
     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 ));
     }
 
+    _processLinesIfNecessary() {
+        if( this.mustProcessLines )
+        {
+            this.mustProcessLines = false;
+            this.processLines();
+        }
+    }
+
     processLines( mode ) {
 
+        if( !this.code )
+        {
+            return;
+        }
+
         var htmlCode = "";
         this._blockCommentCache.length = 0;
+        this.mustProcessLines = false;
 
         // Reset all lines content
         this.code.innerHTML = "";
@@ -2928,7 +3089,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 )
@@ -2943,7 +3104,7 @@ class CodeEditor {
             }
         }
 
-        this._scopeStack = [];
+        this._scopeStack = [ { name: "", type: "global" } ];
 
         // Process visible lines
         for( let i = this.visibleLinesViewport.x; i < this.visibleLinesViewport.y; ++i )
@@ -2965,162 +3126,617 @@ class CodeEditor {
         this.resize();
     }
 
-    processLine( lineNumber, force ) {
+    processLine( lineNumber, force, skipPropagation ) {
+
+        if( this._scopeStack )
+        {
+            this.code.lineScopes[ lineNumber ] = [ ...this._scopeStack ];
+        }
+        else
+        {
+            this.code.lineScopes[ lineNumber ] = this.code.lineScopes[ lineNumber ] ?? [];
+            this._scopeStack = [ ...this.code.lineScopes[ lineNumber ] ];
+        }
 
-        // Check if we are in block comment sections..
-        if( !force && this._inBlockCommentSection( lineNumber ) )
+        const lang = CodeEditor.languages[ this.highlight ];
+        const localLineNum =  this.toLocalLine( lineNumber );
+        const lineString = this.code.lines[ lineNumber ];
+        if( lineString === undefined )
         {
-            this.processLines();
             return;
         }
 
-        if( this._scopeStack )
+        this._lastProcessedLine = lineNumber;
+
+        // multi-line strings not supported by now
+        delete this._buildingString;
+        delete this._pendingString;
+        delete this._markdownHeader;
+
+        // Single line
+        if( !force )
         {
-            this.lineScopes[ lineNumber ] = [ ...this._scopeStack ];
+            LX.deleteElement( this.code.childNodes[ localLineNum ] );
+            this.code.insertChildAtIndex( document.createElement( 'pre' ), localLineNum );
         }
-        else
+
+        // Early out check for no highlighting languages
+        if( this.highlight == 'Plain Text' )
         {
-            this._scopeStack = [ ...this.lineScopes[ lineNumber ] ];
+            const plainTextHtml = lineString.replaceAll('<', '&lt;').replaceAll('>', '&gt;');
+            return this._updateLine( force, lineNumber, plainTextHtml, skipPropagation );
+        }
+
+        this._currentLineNumber = lineNumber;
+        this._currentLineString = lineString;
+
+        const tokensToEvaluate = this._getTokensFromLine( lineString );
+        if( !tokensToEvaluate.length )
+        {
+            return this._updateLine( force, lineNumber, "", skipPropagation );
+        }
+
+        let lineInnerHtml = "";
+        let pushedScope = false;
+
+        const newSignature = this._getLineSignatureFromTokens( tokensToEvaluate );
+        const cachedSignature = this.code.lineSignatures[ lineNumber ];
+        const mustUpdateScopes = ( cachedSignature !== newSignature ) && !force;
+        const blockComments = lang.blockComments ?? true;
+        const blockCommentsTokens = lang.blockCommentsTokens ?? this.defaultBlockCommentTokens;
+
+        // Reset scope stack if structural changes in current line
+        if( mustUpdateScopes )
+        {
+            this._scopeStack = [ { name: "", type: "global" } ];
         }
 
+        // Process all tokens
+        for( let i = 0; i < tokensToEvaluate.length; ++i )
+        {
+            let it = i - 1;
+            let prev = tokensToEvaluate[ it ];
+            while( prev == ' ' )
+            {
+                it--;
+                prev = tokensToEvaluate[ it ];
+            }
+
+            it = i + 1;
+            let next = tokensToEvaluate[ it ];
+            while( next == ' ' || next == '"' )
+            {
+                it++;
+                next = tokensToEvaluate[ it ];
+            }
+
+            const token = tokensToEvaluate[ i ];
+            const tokenIndex = i;
+            const tokenStartIndex = this._currentTokenPositions[ tokenIndex ];;
+
+            if( blockComments )
+            {
+                if( token.substr( 0, blockCommentsTokens[ 0 ].length ) == blockCommentsTokens[ 0 ] )
+                {
+                    this._buildingBlockComment = [ lineNumber, tokenStartIndex ];
+                }
+            }
+
+            // Compare line signature for structural changes
+            // to pop current scope if necessary
+            if( token === "}" && this._scopeStack.length > 1 )
+            {
+                this._scopeStack.pop();
+            }
+
+            lineInnerHtml += this._evaluateToken( {
+                token,
+                prev,
+                prevWithSpaces: tokensToEvaluate[ i - 1 ],
+                next,
+                nextWithSpaces: tokensToEvaluate[ i + 1 ],
+                tokenIndex,
+                isFirstToken: ( tokenIndex == 0 ),
+                isLastToken: ( tokenIndex == tokensToEvaluate.length - 1 ),
+                tokens: tokensToEvaluate
+            } );
+
+            if( blockComments && this._buildingBlockComment != undefined
+                && token.substr( 0, blockCommentsTokens[ 1 ].length ) == blockCommentsTokens[ 1 ] )
+            {
+                const [ commentLineNumber, tokenPos ] = this._buildingBlockComment;
+                this._blockCommentCache.push( [ new LX.vec2( commentLineNumber, lineNumber ), new LX.vec2( tokenPos, tokenStartIndex ) ] );
+                delete this._buildingBlockComment;
+            }
+
+            if( token !== "{" )
+            {
+                continue;
+            }
+
+            // Store current scopes
+
+            let contextTokens = [
+                ...this._getTokensFromLine( this.code.lines[ lineNumber ].substring( 0, tokenStartIndex ) )
+            ];
+
+            // Add token context from above lines in case we don't have information
+            // in the same line to get the scope data
+            if( !prev )
+            {
+                for( let k = 1; k < 50; k++ )
+                {
+                    let kLineString = this.code.lines[ lineNumber - k ];
+                    if( !kLineString )
+                    {
+                        break;
+                    }
+
+                    const openIdx = kLineString.lastIndexOf( '{' );
+                    const closeIdx = kLineString.lastIndexOf( '}' );
+                    if( openIdx > -1 )
+                    {
+                        kLineString = kLineString.substr( openIdx );
+                    }
+                    else 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";
+                }
+            }
+
+            // Only push if it's not already reflected in the cached scopes
+            const lastScope = this._scopeStack.at( -1 );
+            if( lastScope?.lineNumber !== lineNumber )
+            {
+                this._scopeStack.push( { name: scopeName ?? "", type: scopeType ?? "anonymous", lineNumber } );
+            }
+
+            pushedScope = true;
+        }
+
+        // Update scopes cache
+        this.code.lineScopes[ lineNumber ] = [ ...this._scopeStack ];
+
+        const symbols = this._parseLineForSymbols( lineNumber, lineString, tokensToEvaluate, pushedScope );
+
+        return this._updateLine( force, lineNumber, lineInnerHtml, skipPropagation, symbols, tokensToEvaluate );
+    }
+
+    _getLineSignatureFromTokens( tokens ) {
+        const structuralChars = new Set( [ '{',  '}'] );
+        const sign = tokens.filter( t => structuralChars.has( t ) );
+        return sign.join( "_" );
+    }
+
+    _updateBlockComments( section, lineNumber, tokens ) {
+
         const lang = CodeEditor.languages[ this.highlight ];
-        const localLineNum =  this.toLocalLine( lineNumber );
+        const blockCommentsTokens = lang.blockCommentsTokens ?? this.defaultBlockCommentTokens;
+        const lineOpensBlock = ( section[ 0 ].x === lineNumber );
+        const lineClosesBlock = ( section[ 0 ].y === lineNumber );
+        const lineInsideBlock = ( section[ 0 ].x !== lineNumber ) && ( section[ 0 ].y !== lineNumber );
+
+        delete this._buildingBlockComment;
+
+        /*
+            Check if delimiters have been removed and process lines backwards/forward
+            until reaching new delimiters
+        */
+
+        if( lineOpensBlock )
+        {
+            const r = tokens.filter( t => t.substr( 0, blockCommentsTokens[ 0 ].length ) == blockCommentsTokens[ 0 ] );
+            if( !r.length )
+            {
+                this._buildingBlockComment = [ lineNumber - 1, 0 ];
+
+                this.mustProcessPreviousLine = ( tokens ) => {
+                    const idx = tokens.indexOf( blockCommentsTokens[ 0 ] );
+                    return ( idx === -1 );
+                }
+
+                this.processLine( lineNumber - 1, false, true );
+
+                section[ 0 ].x = this._lastProcessedLine;
+
+                const lastProcessedString = this.code.lines[ this._lastProcessedLine ];
+                const idx = lastProcessedString.indexOf( blockCommentsTokens[ 0 ] );
+                section[ 1 ].x = idx > 0 ? idx : 0;
+            }
+            else
+            {
+                const tokenIndex = tokens.indexOf( blockCommentsTokens[ 0 ] );
+                const tokenStartIndex = this._currentTokenPositions[ tokenIndex ];
+                section[ 1 ].x = tokenStartIndex;
+                console.log(tokenStartIndex)
+                // Process current line to update new sections
+                this.processLine( lineNumber, false, true );
+            }
+        }
+        else if( lineClosesBlock )
+        {
+            const r = tokens.filter( t => t.substr( 0, blockCommentsTokens[ 1 ].length ) == blockCommentsTokens[ 1 ] );
+            if( !r.length )
+            {
+                this._buildingBlockComment = [ section[ 0 ].x, section[ 1 ].x ];
+
+                this.mustProcessNextLine = ( tokens ) => {
+                    const idx = tokens.indexOf( blockCommentsTokens[ 1 ] );
+                    return ( idx === -1 );
+                }
+
+                this.processLine( lineNumber + 1, false, true );
+
+                section[ 0 ].y = this._lastProcessedLine;
+
+                const lastProcessedString = this.code.lines[ this._lastProcessedLine ];
+                const idx = lastProcessedString.indexOf( blockCommentsTokens[ 1 ] );
+                section[ 1 ].y = idx > 0 ? idx : ( lastProcessedString.length - 1 );
+            }
+            else
+            {
+                const tokenIndex = tokens.indexOf( blockCommentsTokens[ 1 ] );
+                const tokenStartIndex = this._currentTokenPositions[ tokenIndex ];
+                section[ 1 ].y = tokenStartIndex;
+                // Process current line to update new sections
+                this.processLine( lineNumber, false, true );
+            }
+        }
+        else if( lineInsideBlock )
+        {
+            // Here it can't modify delimiters..
+        }
+    }
+
+    _processExtraLineIfNecessary( lineNumber, tokens, oldSymbols, skipPropagation ) {
+
+        if( !this._scopeStack )
+        {
+            console.warn( "CodeEditor: No scope available" );
+            return;
+        }
+
+        // Update block comments if necessary
+        {
+            const commentBlockSection = this._inBlockCommentSection( lineNumber, 1e10, -1e10 );
+            if( tokens && commentBlockSection !== undefined )
+            {
+                this._updateBlockComments( commentBlockSection, lineNumber, tokens );
+
+                // Get again correct scope
+                this._scopeStack = [ ...this.code.lineScopes[ lineNumber ] ];
+            }
+        }
+
+        if( ( (lineNumber + 1) === this.code.lines.length ) || !this.code.lineScopes[ lineNumber + 1 ] )
+        {
+            return;
+        }
+
+        const newSignature = this._getLineSignatureFromTokens( tokens );
+        const cachedSignature = this.code.lineSignatures[ lineNumber ];
+        const mustUpdateScopes = ( cachedSignature !== newSignature );
+        const sameScopes = codeScopesEqual( this._scopeStack, this.code.lineScopes[ lineNumber + 1 ] );
+
+        // Only update scope stack if something changed when editing a single line
+        // Compare line signature for structural changes
+        if( ( mustUpdateScopes || this._scopesUpdated ) && ( !sameScopes && !skipPropagation ) )
+        {
+            if( mustUpdateScopes )
+            {
+                this._scopesUpdated = true;
+            }
+
+            this.code.lineScopes[ lineNumber + 1 ] = [ ...this._scopeStack ];
+            this.processLine( lineNumber + 1 );
+
+            delete this._scopesUpdated;
+        }
+        else if( sameScopes )
+        {
+            // In case of same scope, 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 );
+                }
+            }
+        }
+    }
+
+    _updateLine( force, lineNumber, html, skipPropagation, symbols = [], tokens = [] ) {
+
         const gutterLineHtml = `<span class='line-gutter'>${ lineNumber + 1 }</span>`;
+        const oldSymbols = this._updateLineSymbols( lineNumber, symbols );
+        const lineScope = CodeEditor.debugScopes && this.code.lineScopes[ lineNumber ] ? this.code.lineScopes[ lineNumber ].map( s => `${ s.type }` ).join( ", " ) : "";
+        const lineSymbols = CodeEditor.debugSymbols && this.code.lineSymbols[ lineNumber ] ? 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 );
 
-        const _updateLine = ( html ) => {
-            if( !force ) // Single line update
+            if( !skipPropagation )
             {
-                _processNextLineIfNecessary();
-                this.code.childNodes[ localLineNum ].innerHTML = gutterLineHtml + html;
-                this._setActiveLine( lineNumber );
-                this._clearTmpVariables();
+                this._processExtraLineIfNecessary( lineNumber, tokens, oldSymbols, skipPropagation );
             }
-            else // Update all lines at once
+
+            if( this.mustProcessNextLine )
             {
-                return `<pre>${ gutterLineHtml + html }</pre>`;
+                if( this.mustProcessNextLine( tokens ) && ( ( lineNumber + 1 ) < this.code.lines.length ) )
+                {
+                    this.processLine( lineNumber + 1, false, true );
+                }
+                else
+                {
+                    delete this.mustProcessNextLine;
+                }
+            }
+
+            if( this.mustProcessPreviousLine )
+            {
+                if( this.mustProcessPreviousLine( tokens ) && ( ( lineNumber - 1 ) >= 0 ) )
+                {
+                    this.processLine( lineNumber - 1, false, true );
+                }
+                else
+                {
+                    delete this.mustProcessPreviousLine;
+                }
+            }
+
+            if( CodeEditor.debugProcessedLines )
+            {
+                this.code.childNodes[ lineNumber ]?.classList.add( "debug" );
             }
+
+            this._setActiveLine( lineNumber );
+            this._clearTmpVariables();
+        }
+
+        this.code.lineSignatures[ lineNumber ] = this._getLineSignatureFromTokens( tokens );
+
+        // Update all lines at once
+        return force ? `<pre>${ ( gutterLineHtml + html + debugString ) }</pre>` : undefined;
+    }
+
+    /**
+     * 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 || this._inBlockCommentSection( lineNumber ) )
+        {
+            return [];
         }
 
-        const _processNextLineIfNecessary = () => {
-            // Only update scope stack if something changed when editing a single line
-            if( this._scopeStack.toString() == this.lineScopes[ lineNumber + 1 ]?.toString() )
+        const scopeName = scope.name;
+        const scopeType = scope.type;
+        const symbols = [];
+        const symbolsMap = new Map();
+        const text = lineString.trim();
+        const previousLineScope = this.code.lineScopes[ lineNumber - 1 ];
+
+        const _pushSymbol = ( s ) => {
+            const signature = `${ s.name }_${ s.kind }_${ s.scope }_${ s.line }`;
+            if( symbolsMap.has( signature ) )
+            {
                 return;
+            }
+            symbolsMap.set( signature, s );
+            symbols.push( s );
+        };
+
+        // Don't make symbols from preprocessor lines
+        if( text.startsWith( "#" ) )
+        {
+            return [];
+        }
+
+        const nativeTypes = CodeEditor.nativeTypes[ this.highlight ];
 
-            this.lineScopes[ lineNumber + 1 ] = [ ...this._scopeStack ];
+        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"],
+            [/^fn\s+([A-Za-z0-9_]+)/, "method"],
+            [/^def\s+([A-Za-z0-9_]+)/, "method"],
+            [/^([A-Za-z0-9_]+)\s*=\s*\(?.*\)?\s*=>/, "method"] // arrow functions
+        ];
 
-            if( this.code.lines.length > lineNumber + 1 )
+        // Add regexes to detect methods, variables ( including "id : nativeType" )
+        {
+            if( nativeTypes )
             {
-                this.processLine( lineNumber + 1 );
+                topLevelRegexes.push( [ new RegExp( `^(?:${nativeTypes.join('|')})\\s+([A-Za-z0-9_]+)\s*[\(]+` ), 'method' ] );
+
+                if( this.highlight === "WGSL" )
+                {
+                    topLevelRegexes.push( [ new RegExp( `[A-Za-z0-9]+(\\s*)+:(\\s*)+(${nativeTypes.join('|')})` ), 'variable', ( m ) => m[ 0 ].split( ":" )[ 0 ].trim() ] );
+                }
             }
+
+            const declarationKeywords = CodeEditor.declarationKeywords[ this.highlight ] ?? [ "const", "let", "var" ];
+            topLevelRegexes.push( [ new RegExp( `^(?:${ declarationKeywords.join('|') })\\s+([A-Za-z0-9_]+)` ), 'variable' ] );
         }
 
-        // multi-line strings not supported by now
-        delete this._buildingString;
-        delete this._pendingString;
-        delete this._markdownHeader;
+        for( let [ regex, kind, fn ] of topLevelRegexes )
+        {
+            const m = text.match( regex );
+            if( m )
+            {
+                _pushSymbol( { name: fn ? fn( m ) : m[ 1 ], kind, scope: scopeName, line: lineNumber } );
+            }
+        }
 
-        let lineString = this.code.lines[ lineNumber ];
+        const usageRegexes = [
+            [/new\s+([A-Za-z0-9_]+)\s*\(/, "constructor-call"],
+            [/this.([A-Za-z_][A-Za-z0-9_]*)\s*\=/, "class-property"],
+        ];
 
-        // Single line
-        if( !force )
+        for( let [ regex, kind, fn ] of usageRegexes )
         {
-            LX.deleteElement( this.code.childNodes[ localLineNum ] );
-            this.code.insertChildAtIndex( document.createElement( 'pre' ), localLineNum );
+            const m = text.match( regex );
+            if( m )
+            {
+                _pushSymbol( { name: fn ? fn( m ) : m[ 1 ], kind, scope: scopeName, line: lineNumber } );
+            }
         }
 
-        // Early out check for no highlighting languages
-        if( this.highlight == 'Plain Text' )
+        // Detect method calls
+        const regex = /([A-Za-z0-9_]+)\s*\(/g;
+        let match;
+        while( match = regex.exec( text ) )
         {
-            const plainTextHtml = lineString.replaceAll('<', '&lt;').replaceAll('>', '&gt;');
-            return _updateLine( plainTextHtml );
+            const name = match[ 1 ];
+            const before = text.slice( 0, match.index );
+            if( /(new|function|fn|def)\s+$/.test( before ) ) continue; // skip constructor calls
+            if( [ "constructor", "location", ...( nativeTypes ?? [] ) ].indexOf( name ) > -1 ) continue; // skip hardcoded non method symbol
+            if( previousLineScope && previousLineScope.at( -1 )?.type === "class" ) continue; // skip class methods
+            _pushSymbol( { name, kind: "method-call", scope: scopeName, line: lineNumber } );
         }
 
-        this._currentLineNumber = lineNumber;
-        this._currentLineString = lineString;
-
-        const tokensToEvaluate = this._getTokensFromLine( lineString );
-        if( !tokensToEvaluate.length )
+        // Stop after matches for top-level declarations and usage symbols
+        if( symbols.length )
         {
-            return _updateLine( "" );
+            return symbols;
         }
 
-        let lineInnerHtml = "";
+        const nonWhiteSpaceTokens = tokens.filter( t => t.trim().length );
 
-        // Process all tokens
-        for( let i = 0; i < tokensToEvaluate.length; ++i )
+        for( let i = 0; i < nonWhiteSpaceTokens.length; i++ )
         {
-            let it = i - 1;
-            let prev = tokensToEvaluate[ it ];
-            while( prev == ' ' )
+            const prev = nonWhiteSpaceTokens[ i - 1 ];
+            const token = nonWhiteSpaceTokens[ i ];
+            const next = nonWhiteSpaceTokens[ i + 1 ];
+
+            if( scopeType.startsWith("class") )
             {
-                it--;
-                prev = tokensToEvaluate[ it ];
+                if( next === "(" && /^[a-zA-Z_]\w*$/.test( token ) && prev === undefined )
+                {
+                    if( token === "constructor" ) continue; // skip constructor symbol
+                    _pushSymbol( { name: token, kind: "method", scope: scopeName, line: lineNumber } );
+                }
             }
-
-            it = i + 1;
-            let next = tokensToEvaluate[ it ];
-            while( next == ' ' || next == '"' )
+            else if( scopeType.startsWith("enum") )
             {
-                it++;
-                next = tokensToEvaluate[ it ];
+                if( !isSymbol( token ) && !this._isNumber( token ) && !this._mustHightlightWord( token, CodeEditor.statements ) )
+                {
+                    _pushSymbol({ name: token, kind: "enum_value", scope: scopeName, line: lineNumber });
+                }
             }
+        }
 
-            const token = tokensToEvaluate[ i ];
+        return symbols;
+    }
 
-            if( lang.blockComments ?? true )
-            {
-                const blockCommentsToken = ( lang.blockCommentsTokens ?? this.defaultBlockCommentTokens )[ 0 ];
-                if( token.substr( 0, blockCommentsToken.length ) == blockCommentsToken )
-                    this._buildingBlockComment = lineNumber;
-            }
+    /**
+     * 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 ] );
 
-            // Pop current scope if necessary
-            if( token === "}" )
+        // Clean old symbols from current line
+        for( let sym of this.code.lineSymbols[ lineNumber ] )
+        {
+            let array = this.code.symbolsTable.get( sym.name );
+            if( !array )
             {
-                this._scopeStack.pop();
+                continue;
             }
 
-            lineInnerHtml += this._evaluateToken( {
-                token: token,
-                prev: prev,
-                prevWithSpaces: tokensToEvaluate[ i - 1 ],
-                next: next,
-                nextWithSpaces: tokensToEvaluate[ i + 1 ],
-                tokenIndex: i,
-                isFirstToken: (i == 0),
-                isLastToken: (i == tokensToEvaluate.length - 1),
-                tokens: tokensToEvaluate
-            } );
+            array = array.filter( s => s.line !== lineNumber );
 
-            // Store current scopes
-            if( token === "{" )
+            if( array.length )
             {
-                // Get some context about the scope from previous lines
-                const contextTokens = [
-                    ...this._getTokensFromLine( this.code.lines[ lineNumber - 2 ] ),
-                    ...this._getTokensFromLine( this.code.lines[ lineNumber - 1 ] ),
-                    ...this._getTokensFromLine( this.code.lines[ lineNumber ].substring( 0, lineString.indexOf( token ) ) )
-                ].reverse().filter( v => v.length && v != ' ' );
-
-                let scopeType = contextTokens[ 1 ]; // This is the type of scope (function, class, enum, etc)
-
-                // Special cases
-                if( scopeType === ":" ) // enum type specification
-                {
-                    scopeType = contextTokens[ 3 ];
-                }
-
-                if( !this._mustHightlightWord( scopeType, CodeEditor.keywords, lang ) )
-                {
-                    // If the scope type is not a keyword, use an empty string
-                    scopeType = "";
-                }
-
-                this._scopeStack.push( scopeType );
+                this.code.symbolsTable.set( sym.name, array );
+            }
+            else
+            {
+                this.code.symbolsTable.delete( sym.name );
             }
         }
 
-        return _updateLine( 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 ) {
@@ -3185,13 +3801,14 @@ class CodeEditor {
             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);
+                if( !subtokens.value )
+                {
+                    const _at = lineString.substring( idx );
                     if( _at.length ) pushToken( _at );
                 }
             }
@@ -3236,18 +3853,49 @@ class CodeEditor {
         }
         else if( this.highlight == 'PHP' )
         {
-            const dollarIdx = tokens.indexOf( '$' );
-            if( dollarIdx > -1 && tokens[ dollarIdx + 1 ] === 'this-' )
+            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;
+            }
+        }
+        else if( this.highlight == 'WGSL' )
+        {
+            let offset = 0;
+            let atIdx = tokens.indexOf( '@' );
+
+            while( atIdx > -1 )
             {
-                tokens[ dollarIdx ] = "$this";
-                tokens[ dollarIdx + 1 ] = "-";
+                const offsetIdx = atIdx + offset;
+
+                tokens[ offsetIdx ] += ( tokens[ offsetIdx + 1 ] ?? "" );
+                tokens.splice( offsetIdx + 1, 1 );
+
+                atIdx = tokens.slice( offsetIdx ).indexOf( '$' );
+                offset = offsetIdx;
             }
         }
 
         return tokens;
     }
 
-    _mustHightlightWord( token, kindArray, lang ) {
+    _mustHightlightWord( token, wordCategory, lang ) {
 
         if( !lang )
         {
@@ -3261,12 +3909,12 @@ 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 ];
+        const rules = [ ...HighlightRules.common, ...( HighlightRules[ highlight ] || [] ), ...HighlightRules.post_common ];
 
         for( const rule of rules )
         {
@@ -3287,9 +3935,12 @@ class CodeEditor {
 
         let { token, prev, next, tokenIndex, isFirstToken, isLastToken } = ctxData;
 
-        const lang = CodeEditor.languages[ this.highlight ],
-              highlight = this.highlight.replace( /\s/g, '' ).replaceAll( "+", "p" ).toLowerCase(),
-              customStringKeys = Object.assign( {}, this.stringKeys );
+        const lang = CodeEditor.languages[ this.highlight ];
+        const highlight = this.highlight.replace( /\s/g, '' ).replaceAll( "+", "p" ).toLowerCase();
+        const customStringKeys = Object.assign( {}, this.stringKeys );
+        const lineNumber = this._currentLineNumber;
+        const tokenStartIndex = this._currentTokenPositions[ tokenIndex ];
+        const inBlockComment = ( this._buildingBlockComment ?? this._inBlockCommentSection( lineNumber, tokenStartIndex, token.length ) !== undefined )
 
         var usePreviousTokenToCheckString = false;
 
@@ -3307,7 +3958,7 @@ class CodeEditor {
         // Manage strings
         this._stringEnded = false;
 
-        if( usePreviousTokenToCheckString || ( this._buildingBlockComment === undefined && ( lang.tags ?? false ? ( this._enclosedByTokens( token, tokenIndex, '<', '>' ) ) : true ) ) )
+        if( usePreviousTokenToCheckString || ( !inBlockComment && ( lang.tags ?? false ? ( this._enclosedByTokens( token, tokenIndex, '<', '>' ) ) : true ) ) )
         {
             const _checkIfStringEnded = t => {
                 const idx = Object.values( customStringKeys ).indexOf( t );
@@ -3333,26 +3984,25 @@ class CodeEditor {
 
         // Update context data for next tests
         ctxData.discardToken = false;
-        ctxData.inBlockComment = this._buildingBlockComment;
+        ctxData.inBlockComment = inBlockComment;
         ctxData.markdownHeader = this._markdownHeader;
-        ctxData.inString = this._buildingString;
+        ctxData.inString = ( this._buildingString !== undefined );
         ctxData.singleLineCommentToken = lang.singleLineCommentToken ?? this.defaultSingleLineCommentToken;
         ctxData.lang = lang;
-        ctxData.scope = this._scopeStack[ this._scopeStack.length - 1 ];
+        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";
 
         // 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 ) );
-            delete this._buildingBlockComment;
-        }
-
         // We finished constructing a string
-        if( this._buildingString && ( this._stringEnded || isLastToken ) )
+        if( this._buildingString && ( this._stringEnded || isLastToken ) && !inBlockComment )
         {
             token = this._getCurrentString();
             tokenClass = "cm-str";
@@ -3392,7 +4042,6 @@ class CodeEditor {
     }
 
     _getCurrentString() {
-
         const chars = this._pendingString;
         delete this._pendingString;
         return chars;
@@ -3417,17 +4066,32 @@ class CodeEditor {
         }
     }
 
-    _inBlockCommentSection( line ) {
+    _inBlockCommentSection( lineNumber, tokenPosition, tokenLength ) {
+
+        const lang = CodeEditor.languages[ this.highlight ];
+        const blockCommentsTokens = lang.blockCommentsTokens ?? this.defaultBlockCommentTokens;
 
-        for( var section of this._blockCommentCache )
+        for( let section of this._blockCommentCache )
         {
-            if( line >= section.x && line <= section.y )
+            const lineRange = section[ 0 ];
+            const posRange = section[ 1 ];
+
+            // Outside the lines range
+            const meetsLineRange = ( lineNumber >= lineRange.x && lineNumber <= lineRange.y );
+            if( !meetsLineRange )
             {
-                return true;
+                continue;
             }
-        }
 
-        return false;
+            if( ( lineNumber != lineRange.x && lineNumber != lineRange.y ) || // Inside the block, not first nor last line
+                ( lineNumber == lineRange.x && tokenPosition >= posRange.x &&
+                    (( lineNumber == lineRange.y && ( tokenPosition + tokenLength ) <= ( posRange.y + blockCommentsTokens[ 1 ].length ) ) || lineNumber !== lineRange.y) ) ||
+                ( lineNumber == lineRange.y && ( ( tokenPosition + tokenLength ) <= ( posRange.y + blockCommentsTokens[ 1 ].length ) ) ) &&
+                    (( lineNumber == lineRange.x && tokenPosition >= posRange.x ) || lineNumber !== lineRange.x) )
+            {
+                return section;
+            }
+        }
     }
 
     _isKeyword( ctxData ) {
@@ -3521,7 +4185,7 @@ class CodeEditor {
         this.cursorToPosition( cursor, cursor.selection.toX + 1 );
 
         // Change next key?
-        switch(key)
+        switch( key )
         {
             case "'":
             case "\"":
@@ -3549,6 +4213,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 )
@@ -3664,7 +4368,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 );
@@ -3754,11 +4458,8 @@ class CodeEditor {
         }
 
         const currentScrollTop = this.getScrollTop();
-        const tabsHeight = this.tabs.root.getBoundingClientRect().height;
-        const statusPanelHeight = this.skipInfo ? 0 : this.statusPanel.root.getBoundingClientRect().height;
-        const scrollerHeight = this.codeScroller.offsetHeight;
-
-        var lastLine = ( ( scrollerHeight - tabsHeight - statusPanelHeight + 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 );
@@ -3814,6 +4515,16 @@ class CodeEditor {
         return cursors;
     }
 
+    getCurrentCursor( removeOthers ) {
+
+        if( removeOthers )
+        {
+            this._removeSecondaryCursors();
+        }
+
+        return this.cursors.children[ 0 ];
+    }
+
     relocateCursors() {
 
         for( let cursor of this.cursors.children )
@@ -3863,7 +4574,7 @@ class CodeEditor {
 
     resetCursorPos( flag, cursor ) {
 
-        cursor = cursor ?? this._getCurrentCursor();
+        cursor = cursor ?? this.getCurrentCursor();
 
         if( flag & CodeEditor.CURSOR_LEFT )
         {
@@ -3880,6 +4591,71 @@ 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 )
@@ -3890,9 +4666,10 @@ class CodeEditor {
 
     _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
             }}));
@@ -3913,7 +4690,8 @@ class CodeEditor {
         }
 
         // Only tabs/spaces in the line...
-        if( lineStart == -1 ) {
+        if( lineStart == -1 )
+        {
             lineStart = this.code.lines[ lidx ].length;
         }
 
@@ -3964,24 +4742,28 @@ class CodeEditor {
         }, 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;
-
-            const tabsHeight = this.tabs.root.getBoundingClientRect().height;
-            const statusPanelHeight = this.skipInfo ? 0 : this.statusPanel.root.getBoundingClientRect().height;
-            const scrollHeight = this.code.lines.length * this.lineHeight;
+            let scrollWidth, scrollHeight;
 
-            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 + statusPanelHeight ) + "px";
+            if( flag & CodeEditor.RESIZE_SCROLLBAR_V )
+            {
+                scrollHeight = this.code.lines.length * this.lineHeight;
+                this.codeSizer.style.minHeight = scrollHeight + "px";
+            }
 
-            this.resizeScrollBars();
+            this.resizeScrollBars( flag );
 
             if( onResize )
             {
@@ -3991,37 +4773,52 @@ class CodeEditor {
         }, 10 );
     }
 
-    resizeScrollBars() {
+    resizeIfNecessary( cursor, force ) {
 
-        const totalLinesInViewport = ((this.codeScroller.offsetHeight) / this.lineHeight)|0;
-
-        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._fullVerticalOffset + ( needsHorizontalScrollbar ? ScrollBar.SCROLLBAR_HORIZONTAL_HEIGHT : 0 ) }px)`;
         }
     }
 
@@ -4095,7 +4892,6 @@ class CodeEditor {
     }
 
     getCharAtPos( cursor, offset = 0 ) {
-
         return this.code.lines[ cursor.line ][ cursor.position + offset ];
     }
 
@@ -4164,7 +4960,6 @@ class CodeEditor {
     }
 
     measureString( str ) {
-
         return str.length * this.charWidth;
     }
 
@@ -4217,53 +5012,95 @@ 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 ] ?? [] )
+        ];
 
-        // Add words in current tab plus remove current word
-        // 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 ) );
+        }
 
         // 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( word.toLowerCase() ) );
 
         // 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, word ) - scoreSuggestion( b, word ) ) || a.localeCompare( b ) );
 
         for( let s of suggestions )
         {
-            if( !s.toLowerCase().includes( word.toLowerCase() ) )
-            continue;
-
-            var pre = document.createElement( 'pre' );
+            const pre = document.createElement( 'pre' );
             this.autocomplete.appendChild( pre );
 
-            var icon = "Type";
+            const symbol = this.code.symbolsTable.get( s );
 
-            if( this._mustHightlightWord( s, CodeEditor.utils ) )
-                icon = "Box";
-            else if( this._mustHightlightWord( s, CodeEditor.types ) )
-                icon = "Code";
+            let iconName = "CaseLower";
+            let iconClass = "foo";
 
-            pre.appendChild( LX.makeIcon( icon, { iconClass: "mr-1", svgClass: "xs" } ) );
+            if( symbol )
+            {
+                switch( symbol[ 0 ].kind )  // Get first occurrence
+                {
+                    case "variable":
+                        iconName = "Cuboid";
+                        iconClass = "lightblue";
+                        break;
+                    case "method":
+                        iconName = "Box";
+                        iconClass = "heliotrope";
+                        break;
+                    case "class":
+                        iconName = "CircleNodes";
+                        iconClass = "orange";
+                        break;
+                }
+            }
+            else
+            {
+                if( this._mustHightlightWord( s, CodeEditor.utils ) )
+                    iconName = "ToolCase";
+                else if( this._mustHightlightWord( s, CodeEditor.types ) )
+                {
+                    iconName = "Type";
+                    iconClass = "lightblue";
+                }
+            }
 
+            pre.appendChild( LX.makeIcon( iconName, { iconClass: "mr-1", svgClass: "sm " + iconClass } ) );
+s
             pre.addEventListener( 'click', () => {
                 this.autoCompleteWord( s );
             } );
@@ -4292,11 +5129,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";
 
@@ -4408,7 +5245,7 @@ class CodeEditor {
         }
         else
         {
-            const cursor = this._getCurrentCursor();
+            const cursor = this.getCurrentCursor();
 
             if( cursor.selection )
             {
@@ -4452,7 +5289,7 @@ class CodeEditor {
             return;
         }
 
-        let cursor = this._getCurrentCursor();
+        let cursor = this.getCurrentCursor();
         let cursorData = new LX.vec2( cursor.position, cursor.line );
         let line = null;
         let char = -1;
@@ -4599,7 +5436,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 );
     }
 
@@ -4654,7 +5491,7 @@ class CodeEditor {
 
         number = number ?? this.state.activeLine;
 
-        const cursor = this._getCurrentCursor();
+        const cursor = this.getCurrentCursor();
         this._updateDataInfoPanel( "@cursor-data", `Ln ${ number + 1 }, Col ${ cursor.position + 1 }` );
 
         const oldLocal = this.toLocalLine( this.state.activeLine );
@@ -4731,23 +5568,33 @@ class CodeEditor {
 }
 
 CodeEditor.languages = {
-    'Plain Text': { ext: 'txt', blockComments: false, singleLineComments: false, numbers: false },
-    'JavaScript': { ext: 'js' },
-    'TypeScript': { ext: 'ts' },
-    'C': { ext: [ 'c', 'h' ], usePreprocessor: true },
-    'C++': { ext: [ 'cpp', 'hpp' ], usePreprocessor: true },
-    'CSS': { ext: 'css' },
-    '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 },
-    'XML': { ext: 'xml', tags: true },
-    'Rust': { ext: 'rs' },
-    'Python': { ext: 'py', singleLineCommentToken: '#' },
-    'HTML': { ext: 'html', tags: true, singleLineComments: false, blockCommentsTokens: [ '<!--', '-->' ], numbers: false },
-    'Batch': { ext: 'bat', blockComments: false, singleLineCommentToken: '::' },
-    'Markdown': { ext: 'md', blockComments: false, singleLineCommentToken: '::', tags: true, numbers: false },
-    'PHP': { ext: 'php' },
+    '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'],
+    'WGSL': ['bool', 'u32', 'i32', 'f16', 'f32', 'vec2', 'vec3', 'vec4', 'vec2f', 'vec3f', 'vec4f', 'mat2x2f', 'mat3x3f', 'mat4x4f', 'array', 'vec2u', 'vec3u', 'vec4u', 'ptr', 'sampler']
+};
+
+CodeEditor.declarationKeywords = {
+    'JavaScript': ['var', 'let', 'const', 'this', 'static', 'class'],
+    'C++': [...CodeEditor.nativeTypes["C++"], 'const', 'auto', 'class', 'struct', 'namespace', 'enum', 'extern']
 };
 
 CodeEditor.keywords = {
@@ -4757,26 +5604,26 @@ CodeEditor.keywords = {
                   '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', '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', 'ptr'],
+    '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': [...CodeEditor.nativeTypes["WGSL"], 'var', 'let', 'true', 'false', 'fn', 'atomic', 'struct', 'sampler_comparison', 'texture_depth_2d', 'texture_depth_2d_array', 'texture_depth_cube',
+            'texture_depth_cube_array', 'texture_depth_multisampled_2d', 'texture_external', 'texture_1d', 'texture_2d', 'texture_2d_array', 'texture_3d', 'texture_cube', 'texture_cube_array',
+            'texture_storage_1d', 'texture_storage_2d', 'texture_storage_2d_array', 'texture_storage_3d'],
     'Rust': ['as', 'const', 'crate', 'enum', 'extern', 'false', 'fn', 'impl', 'in', 'let', 'mod', 'move', 'mut', 'pub', 'ref', 'self', 'Self', 'static', 'struct', 'super', 'trait', 'true',
              'type', 'unsafe', 'use', 'where', 'abstract', 'become', 'box', 'final', 'macro', 'override', 'priv', 'typeof', 'unsized', 'virtual'],
     'Python': ['False', 'def', 'None', 'True', 'in', 'is', 'and', 'lambda', 'nonlocal', 'not', 'or'],
-    'Batch': ['set', 'SET', 'echo', 'ECHO', 'off', 'OFF', 'del', 'DEL', 'defined', 'DEFINED', 'setlocal', 'SETLOCAL', 'enabledelayedexpansion', 'ENABLEDELAYEDEXPANSION', 'driverquery',
-              'DRIVERQUERY', 'print', 'PRINT'],
+    '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'],
+    '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...
@@ -4787,7 +5634,14 @@ CodeEditor.utils = { // These ones don't have hightlight, used as suggestions to
     'Python': ['abs', 'all', 'any', 'ascii', 'bin', 'bool', 'bytearray', 'bytes', 'callable', 'chr', 'classmethod', 'compile', 'complex', 'delattr', 'dict', 'dir', 'divmod',
               'enumerate', 'eval', 'exec', 'filter', 'float', 'format', 'frozenset', 'getattr', 'globals', 'hasattr', 'hash', 'help', 'hex', 'id', 'input', 'int', 'isinstance',
               'issubclass', 'iter', 'len', 'list', 'locals', 'map', 'max', 'memoryview', 'min', 'next', 'object', 'oct', 'open', 'ord', 'pow', 'print', 'property', 'range', 'repr',
-              'reversed', 'round', 'set', 'setattr', 'slice', 'sorted', 'staticmethod', 'str', 'sum', 'super', 'tuple', 'type', 'vars', 'zip']
+              'reversed', 'round', 'set', 'setattr', 'slice', 'sorted', 'staticmethod', 'str', 'sum', 'super', 'tuple', 'type', 'vars', 'zip'],
+    'CSS': [ ...Object.keys( document.body.style ).map( LX.toKebabCase ), 'block', 'inline', 'inline-block', 'flex', 'grid', 'none', 'inherit', 'initial', 'unset', 'revert', 'sticky',
+            'relative', 'absolute', 'fixed', 'static', 'auto', 'visible', 'hidden', 'scroll', 'clip', 'ellipsis', 'nowrap', 'wrap', 'break-word', 'solid', 'dashed', 'dotted', 'double',
+            'groove', 'ridge', 'inset', 'outset', 'left', 'right', 'center', 'top', 'bottom', 'start', 'end', 'justify', 'stretch', 'space-between', 'space-around', 'space-evenly',
+            'baseline', 'middle', 'normal', 'bold', 'lighter', 'bolder', 'italic', 'blur', 'uppercase', 'lowercase', 'capitalize', 'transparent', 'currentColor', 'pointer', 'default',
+            'move', 'grab', 'grabbing', 'not-allowed', 'none', 'cover', 'contain', 'repeat', 'no-repeat', 'repeat-x', 'repeat-y', 'round', 'space', 'linear-gradient', 'radial-gradient',
+            'conic-gradient', 'url', 'calc', 'min', 'max', 'clamp', 'red', 'blue', 'green', 'black', 'white', 'gray', 'silver', 'yellow', 'orange', 'purple', 'pink', 'cyan', 'magenta',
+            'lime', 'teal', 'navy', 'transparent', 'currentcolor', 'inherit', 'initial', 'unset', 'revert', 'none', 'auto', 'fit-content', 'min-content', 'max-content']
 };
 
 CodeEditor.types = {
@@ -4808,12 +5662,13 @@ CodeEditor.builtIn = {
     'JavaScript': ['document', 'console', 'window', 'navigator', 'performance'],
     'CSS': ['*', '!important'],
     'C++': ['vector', 'list', 'map'],
+    'WGSL': ['@vertex', '@fragment'],
     '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'],
@@ -4831,6 +5686,7 @@ CodeEditor.statementsAndDeclarations = {
 
 CodeEditor.symbols = {
     'JavaScript': ['<', '>', '[', ']', '{', '}', '(', ')', ';', '=', '|', '||', '&', '&&', '?', '??'],
+    'TypeScript': ['<', '>', '[', ']', '{', '}', '(', ')', ';', '=', '|', '||', '&', '&&', '?', '??'],
     'C': ['<', '>', '[', ']', '{', '}', '(', ')', ';', '=', '|', '||', '&', '&&', '?', '*', '-', '+'],
     'C++': ['<', '>', '[', ']', '{', '}', '(', ')', ';', '=', '|', '||', '&', '&&', '?', '::', '*', '-', '+'],
     'CMake': ['{', '}'],
@@ -4843,19 +5699,19 @@ CodeEditor.symbols = {
     'Batch': ['[', ']', '(', ')', '%'],
     'HTML': ['<', '>', '/'],
     'XML': ['<', '>', '/'],
-    'PHP': ['{', '}', '(', ')'],
+    'PHP': ['[', ']', '{', '}', '(', ')'],
 };
 
 CodeEditor.REGISTER_LANGUAGE = function( name, options = {}, def, rules )
 {
     CodeEditor.languages[ name ] = options;
 
-    if( def?.keywords ) CodeEditor.keywords[ name ] = def.keywords.reduce((a, v) => ({ ...a, [v]: true}), {});
-    if( def?.utils ) CodeEditor.utils[ name ] = def.utils.reduce((a, v) => ({ ...a, [v]: true}), {});
-    if( def?.types ) CodeEditor.types[ name ] = def.types.reduce((a, v) => ({ ...a, [v]: true}), {});
-    if( def?.builtIn ) CodeEditor.builtIn[ name ] = def.builtIn.reduce((a, v) => ({ ...a, [v]: true}), {});
-    if( def?.statementsAndDeclarations ) CodeEditor.statementsAndDeclarations[ name ] = def.statementsAndDeclarations.reduce((a, v) => ({ ...a, [v]: true}), {});
-    if( def?.symbols ) CodeEditor.symbols[ name ] = def.symbols.reduce((a, v) => ({ ...a, [v]: true}), {});
+    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;
 };