lexgui 0.7.0 → 0.7.2

package/build/extensions/codeeditor.js

@@ -6,26 +6,13 @@ if(!LX) {
 
 LX.extensions.push( 'CodeEditor' );
 
-function swapElements( obj, a, b ) {
-    [obj[a], obj[b]] = [obj[b], obj[a]];
-}
-
-function swapArrayElements( array, id0, id1 ) {
-    [array[id0], array[id1]] = [array[id1], array[id0]];
-};
-
-function sliceChars( str, idx, n = 1 ) {
-    return str.substr(0, idx) + str.substr(idx + n);
-}
-
-function firstNonspaceIndex( str ) {
-    const index = str.search(/\S|$/)
-    return index < str.length ? index : -1;
-}
-
-function strReverse( str ) {
-    return str.split( "" ).reverse().join( "" );
-}
+function swapElements( obj, a, b ) { [obj[a], obj[b]] = [obj[b], obj[a]]; }
+function swapArrayElements( array, id0, id1 ) { [array[id0], array[id1]] = [array[id1], array[id0]]; };
+function sliceChars( str, idx, n = 1 ) { return str.substr(0, idx) + str.substr(idx + n); }
+function firstNonspaceIndex( str ) { const index = str.search(/\S|$/); return index < str.length ? index : -1; }
+function strReverse( str ) { return str.split( "" ).reverse().join( "" ); }
+function isLetter( c ){ return /[a-zA-Z]/.test( c ); };
+function isSymbol( c ){ return /[^\w\s]/.test( c ); };
 
 function indexOfFrom( str, reg, from, reverse ) {
 
@@ -46,15 +33,6 @@ function indexOfFrom( str, reg, from, reverse ) {
     }
 }
 
-let ASYNC_ENABLED = true;
-
-function doAsync( fn, ms ) {
-    if( ASYNC_ENABLED )
-        setTimeout( fn, ms ?? 0 );
-    else
-        fn();
-}
-
 class CodeSelection {
 
     constructor( editor, cursor, className = "lexcodeselection" ) {
@@ -104,7 +82,6 @@ class CodeSelection {
 
         var domEl = document.createElement( 'div' );
         domEl.className = this.className;
-
         domEl._top = y * this.editor.lineHeight;
         domEl.style.top = domEl._top + "px";
         domEl._left = x * this.editor.charWidth;
@@ -213,6 +190,76 @@ class ScrollBar {
 
 }
 
+/* Highlight rules
+- test: function that receives a context object and returns true or false
+- className: class to apply if test is true
+- action: optional function to execute if test is true, receives context and editor as parameter
+- discard: optional boolean, if true the token is discarded, action value is returned
+        to "ctx.discardToken" and no class is applied
+*/
+
+const HighlightRules = {
+
+    common: [
+        { test: ctx => ctx.inBlockComment, className: "cm-com" },
+        { test: ctx => ctx.inString, action: (ctx, editor) => editor._appendStringToken( ctx.token ), discard: true },
+        { test: ctx => ctx.token.substr( 0, ctx.singleLineCommentToken.length ) == ctx.singleLineCommentToken, className: "cm-com" },
+        { test: (ctx, editor) => editor._isKeyword( ctx ), className: "cm-kwd" },
+        { test: (ctx, editor) => editor._mustHightlightWord( ctx.token, CodeEditor.builtIn, ctx.lang ) && ( ctx.lang.tags ?? false ? ( editor._enclosedByTokens( ctx.token, ctx.tokenIndex, '<', '>' ) ) : true ), className: "cm-bln" },
+        { test: (ctx, editor) => editor._mustHightlightWord( ctx.token, CodeEditor.statementsAndDeclarations, ctx.lang ), className: "cm-std" },
+        { test: (ctx, editor) => editor._mustHightlightWord( ctx.token, CodeEditor.symbols, ctx.lang ), className: "cm-sym" },
+        { test: (ctx, editor) => editor._mustHightlightWord( ctx.token, CodeEditor.types, ctx.lang ), className: "cm-typ" },
+        { test: (ctx, editor) => editor._isNumber( ctx.token ) || editor._isNumber( ctx.token.replace(/[px]|[em]|%/g,'') ), className: "cm-dec" },
+        { test: ctx => ctx.lang.usePreprocessor && ctx.token.includes( '#' ), className: "cm-ppc" },
+    ],
+
+    javascript: [
+        { test: ctx => (ctx.prev === 'class' && ctx.next === '{') || (ctx.prev === 'new' && ctx.next === '('), className: "cm-typ" }
+    ],
+
+    typescript: [
+        { test: ctx => ctx.scope && (ctx.token !== ',' && ctx.scope == "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.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
+    ],
+
+    wgsl: [
+        { test: ctx => ctx.prev === '>' && (!ctx.next || ctx.next === '{'), className: "cm-typ" }, // Function return type
+        { test: ctx => (ctx.prev === ':' && ctx.next !== undefined) || (ctx.prev === 'struct' && ctx.next === '{'), className: "cm-typ" },
+        { test: (ctx, editor) => ctx.token !== ',' && editor._enclosedByTokens( ctx.token, ctx.tokenIndex, '<', '>' ), className: "cm-typ" },
+    ],
+
+    css: [
+        { test: ctx => ( ctx.prev == '.' || ctx.prev == '::' || ( ctx.prev == ':' && ctx.next == '{' ) || ( ctx.token[ 0 ] == '#' && ctx.prev != ':' ) ), className: "cm-kwd" },
+        { test: ctx => ctx.prev === ':' && (ctx.next === ';' || ctx.next === '!important'), className: "cm-str" }, // CSS value
+        { test: ctx => ctx.prev === undefined && ctx.next === ":", className: "cm-typ" }, // CSS attribute
+    ],
+
+    batch: [
+        { test: ctx => ctx.token === '@' || ctx.prev === ':' || ctx.prev === '@', className: "cm-kwd" }
+    ],
+
+    markdown: [
+        { test: ctx => ctx.isFirstToken && ctx.token.replaceAll('#', '').length != ctx.token.length, action: (ctx, editor) => editor._markdownHeader = true, className: "cm-kwd" }
+    ],
+
+    php: [
+        { test: ctx => (ctx.prev === 'class' && ctx.next === '{') || (ctx.prev === 'class' && ctx.next === 'implements'), className: "cm-typ" },
+    ],
+
+    post_common: [
+        { test: ctx => isLetter(ctx.token) && (ctx.token[ 0 ] != '@') && (ctx.token[ 0 ] != ',') && (ctx.next === '('), className: "cm-mtd" }
+    ],
+};
+
 /**
  * @class CodeEditor
  */
@@ -451,9 +498,13 @@ class CodeEditor {
                     if( e.ctrlKey )
                     {
                         e.preventDefault();
+                        e.stopPropagation();
                         ( e.deltaY > 0.0 ? this._decreaseFontSize() : this._increaseFontSize() );
                     }
-                    else
+                } );
+
+                this.codeScroller.addEventListener( 'wheel', e => {
+                    if( !e.ctrlKey )
                     {
                         const dX = ( e.deltaY > 0.0 ? 10.0 : -10.0 ) * ( e.shiftKey ? 1.0 : 0.0 );
                         if( dX != 0.0 ) this.setScrollBarValue( 'horizontal', dX );
@@ -495,17 +546,17 @@ class CodeEditor {
 
             // Add search box
             {
-                var box = document.createElement( 'div' );
+                const box = document.createElement( 'div' );
                 box.className = "searchbox";
 
-                var searchPanel = new LX.Panel();
+                const searchPanel = new LX.Panel();
                 box.appendChild( searchPanel.root );
 
                 searchPanel.sameLine( 4 );
                 searchPanel.addText( null, "", null, { placeholder: "Find" } );
-                searchPanel.addButton( null, "up", () => this.search( null, true ), { icon: "ArrowUp" } );
-                searchPanel.addButton( null, "down", () => this.search(), { icon: "ArrowDown" } );
-                searchPanel.addButton( null, "x", this.hideSearchBox.bind( this ), { icon: "X" } );
+                searchPanel.addButton( null, "up", () => this.search( null, true ), { icon: "ArrowUp", title: "Previous Match", tooltip: true } );
+                searchPanel.addButton( null, "down", () => this.search(), { icon: "ArrowDown", title: "Next Match", tooltip: true } );
+                searchPanel.addButton( null, "x", this.hideSearchBox.bind( this ), { icon: "X", title: "Close", tooltip: true } );
 
                 box.querySelector( 'input' ).addEventListener( 'keyup', e => {
                     if( e.key == 'Escape' ) this.hideSearchBox();
@@ -574,6 +625,7 @@ class CodeEditor {
         this.charWidth = 7; // To update later depending on size..
         this.defaultSingleLineCommentToken = '//';
         this.defaultBlockCommentTokens = [ '/*', '*/' ];
+        this.lineScopes = [];
         this._lastTime = null;
 
         this.pairKeys = {
@@ -592,24 +644,6 @@ class CodeEditor {
         // Scan tokens..
         // setInterval( this.scanWordSuggestions.bind( this ), 2000 );
 
-        this.languages = {
-            'Plain Text': { ext: 'txt', blockComments: false, singleLineComments: false },
-            'JavaScript': { ext: 'js' },
-            'C': { ext: [ 'c', 'h' ] },
-            'C++': { ext: [ 'cpp', 'hpp' ] },
-            'CSS': { ext: 'css' },
-            'CMake': { ext: 'cmake', singleLineCommentToken: '#', blockComments: false, ignoreCase: true },
-            'GLSL': { ext: 'glsl' },
-            'WGSL': { ext: 'wgsl' },
-            'JSON': { ext: 'json', blockComments: false, singleLineComments: false },
-            'XML': { ext: 'xml', tags: true },
-            'Rust': { ext: 'rs' },
-            'Python': { ext: 'py', singleLineCommentToken: '#' },
-            'HTML': { ext: 'html', tags: true, singleLineComments: false, blockCommentsTokens: [ '<!--', '-->' ] },
-            'Batch': { ext: 'bat', blockComments: false, singleLineCommentToken: '::' },
-            'Markdown': { ext: 'md', blockComments: false, singleLineCommentToken: '::', tags: true }
-        };
-
         this.specialKeys = [
             'Backspace', 'Enter', 'ArrowUp', 'ArrowDown',
             'ArrowRight', 'ArrowLeft', 'Delete', 'Home',
@@ -1101,15 +1135,29 @@ class CodeEditor {
         const onLoadAll = () => {
             // Create inspector panel when the initial state is complete
             // and we have at least 1 tab opened
-            this.infoPanel = this._createInfoPanel();
-            if( this.infoPanel )
+            this.statusPanel = this._createStatusPanel();
+            if( this.statusPanel )
             {
-                area.attach( this.infoPanel );
+                area.attach( this.statusPanel );
             }
 
             // Wait until the fonts are all loaded
             document.fonts.ready.then(() => {
-                this.charWidth = this._measureChar( "a", true );
+                // Load any font size from local storage
+                const savedFontSize = window.localStorage.getItem( "lexcodeeditor-font-size" );
+                if( savedFontSize )
+                {
+                    this._setFontSize( parseInt( savedFontSize ) );
+                }
+                else // Use default size
+                {
+                    const r = document.querySelector( ':root' );
+                    const s = getComputedStyle( r );
+                    this.fontSize = parseInt( s.getPropertyValue( "--code-editor-font-size" ) );
+                    this.charWidth = this._measureChar( "a", true );
+                }
+
+                LX.emit( "@font-size", this.fontSize );
             });
 
             window.editor = this;
@@ -1284,7 +1332,7 @@ class CodeEditor {
                     options: options
                 };
 
-                const ext = this.languages[ options.language ] ?. ext;
+                const ext = CodeEditor.languages[ options.language ] ?. ext;
                 this.addExplorerItem( { id: name, skipVisibility: true, icon: this._getFileIcon( name, ext ) } );
                 this.explorer.innerTree.frefresh( name );
             }
@@ -1363,7 +1411,11 @@ class CodeEditor {
             get: (v) => { return cursor._position },
             set: (v) => {
                 cursor._position = v;
-                if( cursor.isMain ) this._updateDataInfoPanel( "@cursor-pos", "Col " + ( v + 1 ) );
+                if( cursor.isMain )
+                {
+                    const activeLine = this.state.activeLine;
+                    this._updateDataInfoPanel( "@cursor-data", `Ln ${ activeLine + 1 }, Col ${ v + 1 }` );
+                }
             }
         } );
 
@@ -1515,7 +1567,7 @@ class CodeEditor {
         this._updateDataInfoPanel( "@highlight", lang );
         this.processLines();
 
-        const ext = langExtension ?? this.languages[ lang ].ext;
+        const ext = langExtension ?? CodeEditor.languages[ lang ].ext;
         const icon = this._getFileIcon( null, ext );
 
         // Update tab icon
@@ -1553,9 +1605,9 @@ class CodeEditor {
             return this._changeLanguage( this.code.language );
         }
 
-        for( let l in this.languages )
+        for( let l in CodeEditor.languages )
         {
-            const langExtension = this.languages[ l ].ext;
+            const langExtension = CodeEditor.languages[ l ].ext;
 
             if( langExtension.constructor == Array )
             {
@@ -1577,17 +1629,25 @@ class CodeEditor {
         this._changeLanguage( 'Plain Text' );
     }
 
-    _createInfoPanel() {
+    _createStatusPanel() {
 
         if( !this.skipInfo )
         {
-            let panel = new LX.Panel({ className: "lexcodetabinfo", width: "calc(100%)", height: "auto" });
-
-            panel.sameLine();
-            panel.addLabel( this.code.title, { fit: true, signal: "@tab-name" });
-            panel.addLabel( "Ln " + 1, { fit: true, signal: "@cursor-line" });
-            panel.addLabel( "Col " + 1, { fit: true, signal: "@cursor-pos" });
-            panel.addButton( null, "Spaces: " + this.tabSpaces, ( value, event ) => {
+            let panel = new LX.Panel({ className: "lexcodetabinfo flex flex-row", height: "auto" });
+
+            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 )
@@ -1597,24 +1657,57 @@ class CodeEditor {
                             this._updateDataInfoPanel( "@tab-spaces", "Spaces: " + this.tabSpaces );
                         } );
                 });
-            }, { nameWidth: "15%", signal: "@tab-spaces" });
-            panel.addButton( "<b>{ }</b>", this.highlight, ( value, event ) => {
+            }, { 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( this.languages ) )
+                    for( const lang of Object.keys( CodeEditor.languages ) )
                     {
                         m.add( lang, v => {
                             this._changeLanguage( v, null, true )
                         } );
                     }
                 });
-            }, { nameWidth: "15%", signal: "@highlight" });
-            panel.endLine();
+            }, { id: "EditorLanguageStatusComponent", nameWidth: "15%", signal: "@highlight" });
+            rightStatusPanel.endLine( "justify-end" );
+            panel.attach( rightStatusPanel.root );
+
+            const itemVisibilityMap = {
+                "Font Size Zoom": true,
+                "Editor Filename": true,
+                "Editor Selection": true,
+                "Editor Indentation": true,
+                "Editor Language": true,
+            };
+
+            panel.root.addEventListener( "contextmenu", (e) => {
+
+                if( e.target && ( e.target.classList.contains( "lexpanel" ) || e.target.classList.contains( "lexinlinecomponents" ) ) )
+                {
+                    return;
+                }
+
+                const menuOptions = Object.keys( itemVisibilityMap ).map( ( itemName, idx ) => {
+                    const item = {
+                        name: itemName,
+                        icon: "Check",
+                        callback: () => {
+                            itemVisibilityMap[ itemName ] = !itemVisibilityMap[ itemName ];
+                            const b = panel.root.querySelector( `#${ itemName.replaceAll( " ", "" ) }StatusComponent` );
+                            console.assert( b, `${ itemName } has no status button!` );
+                            b.classList.toggle( "hidden", !itemVisibilityMap[ itemName ] );
+                        }
+                    }
+                    if( !itemVisibilityMap[ itemName ] ) delete item.icon;
+                    return item;
+                } );
+                new LX.DropdownMenu( e.target, menuOptions, { side: "top", align: "start" });
+            } );
 
             return panel;
         }
         else
         {
-            doAsync( () => {
+            LX.doAsync( () => {
 
                 // Change css a little bit...
                 this.gutter.style.height = "calc(100% - 28px)";
@@ -1623,7 +1716,7 @@ class CodeEditor {
                 this.base_area.root.querySelector( '.lexcodescrollbar.vertical' ).style.height = "calc(100% - 27px)";
                 this.tabs.area.root.classList.add( 'no-code-info' );
 
-            }, 100);
+            }, 100 );
         }
     }
 
@@ -1661,6 +1754,7 @@ class CodeEditor {
             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" :
@@ -1668,6 +1762,7 @@ class CodeEditor {
             extension == "hpp" ? "CPlusPlus heliotrope" :
             extension == "c" ? "C pictonblue" :
             extension == "h" ? "C heliotrope" :
+            extension == "php" ? "Php blueviolet" :
             !isNewTabButton ? "AlignLeft gray" : undefined;
     }
 
@@ -2709,7 +2804,7 @@ class CodeEditor {
 
     _commentLine( cursor, line, minNonspaceIdx ) {
 
-        const lang = this.languages[ this.highlight ];
+        const lang = CodeEditor.languages[ this.highlight ];
 
         if( !( lang.singleLineComments ?? true ))
             return;
@@ -2762,7 +2857,7 @@ class CodeEditor {
 
     _uncommentLine( cursor, line ) {
 
-        const lang = this.languages[ this.highlight ];
+        const lang = CodeEditor.languages[ this.highlight ];
 
         if( !( lang.singleLineComments ?? true ))
             return;
@@ -2804,8 +2899,8 @@ class CodeEditor {
 
         for( let i = 0; i < this.code.lines.length; ++i )
         {
-            const linestring = this.code.lines[ i ];
-            const tokens = this._getTokensFromLine( linestring, true );
+            const lineString = this.code.lines[ i ];
+            const tokens = this._getTokensFromLine( lineString, true );
             tokens.forEach( t => this.code.tokens[ t ] = 1 );
         }
     }
@@ -2823,7 +2918,7 @@ class CodeEditor {
 
     processLines( mode ) {
 
-        var code_html = "";
+        var htmlCode = "";
         this._blockCommentCache.length = 0;
 
         // Reset all lines content
@@ -2843,16 +2938,20 @@ class CodeEditor {
         {
             const diff = Math.max( this.code.lines.length - this.visibleLinesViewport.y, 0 );
             if( diff <= this.lineScrollMargin.y )
+            {
                 this.visibleLinesViewport.y += diff;
+            }
         }
 
+        this._scopeStack = [];
+
         // Process visible lines
         for( let i = this.visibleLinesViewport.x; i < this.visibleLinesViewport.y; ++i )
         {
-            code_html += this.processLine( i, true );
+            htmlCode += this.processLine( i, true );
         }
 
-        this.code.innerHTML = code_html;
+        this.code.innerHTML = htmlCode;
 
         // Update scroll data
         this.codeScroller.scrollTop = lastScrollTop;
@@ -2866,28 +2965,53 @@ class CodeEditor {
         this.resize();
     }
 
-    processLine( linenum, force ) {
+    processLine( lineNumber, force ) {
 
         // Check if we are in block comment sections..
-        if( !force && this._inBlockCommentSection( linenum ) )
+        if( !force && this._inBlockCommentSection( lineNumber ) )
         {
             this.processLines();
             return;
         }
 
-        const lang = this.languages[ this.highlight ];
-        const localLineNum =  this.toLocalLine( linenum );
-        const gutterLineHtml = "<span class='line-gutter'>" + (linenum + 1) + "</span>";
+        if( this._scopeStack )
+        {
+            this.lineScopes[ lineNumber ] = [ ...this._scopeStack ];
+        }
+        else
+        {
+            this._scopeStack = [ ...this.lineScopes[ lineNumber ] ];
+        }
 
-        const UPDATE_LINE = ( html ) => {
+        const lang = CodeEditor.languages[ this.highlight ];
+        const localLineNum =  this.toLocalLine( lineNumber );
+        const gutterLineHtml = `<span class='line-gutter'>${ lineNumber + 1 }</span>`;
+
+        const _updateLine = ( html ) => {
             if( !force ) // Single line update
             {
+                _processNextLineIfNecessary();
                 this.code.childNodes[ localLineNum ].innerHTML = gutterLineHtml + html;
-                this._setActiveLine( linenum );
+                this._setActiveLine( lineNumber );
                 this._clearTmpVariables();
             }
             else // Update all lines at once
-                return "<pre>" + ( gutterLineHtml + html ) + "</pre>";
+            {
+                return `<pre>${ gutterLineHtml + html }</pre>`;
+            }
+        }
+
+        const _processNextLineIfNecessary = () => {
+            // Only update scope stack if something changed when editing a single line
+            if( this._scopeStack.toString() == this.lineScopes[ lineNumber + 1 ]?.toString() )
+                return;
+
+            this.lineScopes[ lineNumber + 1 ] = [ ...this._scopeStack ];
+
+            if( this.code.lines.length > lineNumber + 1 )
+            {
+                this.processLine( lineNumber + 1 );
+            }
         }
 
         // multi-line strings not supported by now
@@ -2895,7 +3019,7 @@ class CodeEditor {
         delete this._pendingString;
         delete this._markdownHeader;
 
-        let linestring = this.code.lines[ linenum ];
+        let lineString = this.code.lines[ lineNumber ];
 
         // Single line
         if( !force )
@@ -2907,35 +3031,36 @@ class CodeEditor {
         // Early out check for no highlighting languages
         if( this.highlight == 'Plain Text' )
         {
-            const plainTextHtml = linestring.replaceAll('<', '&lt;').replaceAll('>', '&gt;');
-            return UPDATE_LINE( plainTextHtml );
+            const plainTextHtml = lineString.replaceAll('<', '&lt;').replaceAll('>', '&gt;');
+            return _updateLine( plainTextHtml );
         }
 
-        this._currentLineNumber = linenum;
-        this._currentLineString = linestring;
-
-        const tokensToEvaluate = this._getTokensFromLine( linestring );
+        this._currentLineNumber = lineNumber;
+        this._currentLineString = lineString;
 
+        const tokensToEvaluate = this._getTokensFromLine( lineString );
         if( !tokensToEvaluate.length )
         {
-            return "<pre><span class='line-gutter'>" + linenum + "</span></pre>";
+            return _updateLine( "" );
         }
 
-        var lineInnerHtml = "";
+        let lineInnerHtml = "";
 
         // Process all tokens
-        for( var i = 0; i < tokensToEvaluate.length; ++i )
+        for( let i = 0; i < tokensToEvaluate.length; ++i )
         {
             let it = i - 1;
             let prev = tokensToEvaluate[ it ];
-            while( prev == ' ' ) {
+            while( prev == ' ' )
+            {
                 it--;
                 prev = tokensToEvaluate[ it ];
             }
 
             it = i + 1;
             let next = tokensToEvaluate[ it ];
-            while( next == ' ' || next == '"' ) {
+            while( next == ' ' || next == '"' )
+            {
                 it++;
                 next = tokensToEvaluate[ it ];
             }
@@ -2946,7 +3071,13 @@ class CodeEditor {
             {
                 const blockCommentsToken = ( lang.blockCommentsTokens ?? this.defaultBlockCommentTokens )[ 0 ];
                 if( token.substr( 0, blockCommentsToken.length ) == blockCommentsToken )
-                    this._buildingBlockComment = linenum;
+                    this._buildingBlockComment = lineNumber;
+            }
+
+            // Pop current scope if necessary
+            if( token === "}" )
+            {
+                this._scopeStack.pop();
             }
 
             lineInnerHtml += this._evaluateToken( {
@@ -2960,20 +3091,49 @@ class CodeEditor {
                 isLastToken: (i == tokensToEvaluate.length - 1),
                 tokens: tokensToEvaluate
             } );
+
+            // Store current scopes
+            if( token === "{" )
+            {
+                // 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 );
+            }
         }
 
-        return UPDATE_LINE( lineInnerHtml );
+        return _updateLine( lineInnerHtml );
     }
 
-    _lineHasComment( linestring ) {
+    _lineHasComment( lineString ) {
 
-        const lang = this.languages[ this.highlight ];
+        const lang = CodeEditor.languages[ this.highlight ];
 
         if( !(lang.singleLineComments ?? true) )
+        {
             return;
+        }
 
         const singleLineCommentToken = lang.singleLineCommentToken ?? this.defaultSingleLineCommentToken;
-        const idx = linestring.indexOf( singleLineCommentToken );
+        const idx = lineString.indexOf( singleLineCommentToken );
 
         if( idx > -1 )
         {
@@ -2982,22 +3142,27 @@ class CodeEditor {
             var err = false;
             err |= stringKeys.some( function(v) {
                 var re = new RegExp( v, "g" );
-                var matches = (linestring.substring( 0, idx ).match( re ) || []);
+                var matches = (lineString.substring( 0, idx ).match( re ) || []);
                 return (matches.length % 2) !== 0;
             } );
             return err ? undefined : idx;
         }
     }
 
-    _getTokensFromLine( linestring, skipNonWords ) {
+    _getTokensFromLine( lineString, skipNonWords ) {
+
+        if( !lineString || !lineString.length )
+        {
+            return [];
+        }
 
         // Check if line comment
-        const ogLine = linestring;
-        const hasCommentIdx = this._lineHasComment( linestring );
+        const ogLine = lineString;
+        const hasCommentIdx = this._lineHasComment( lineString );
 
         if( hasCommentIdx != undefined )
         {
-            linestring = ogLine.substring( 0, hasCommentIdx );
+            lineString = ogLine.substring( 0, hasCommentIdx );
         }
 
         let tokensToEvaluate = []; // store in a temp array so we know prev and next tokens...
@@ -3013,25 +3178,25 @@ class CodeEditor {
             charCounter += t.length;
         };
 
-        let iter = linestring.matchAll(/(<!--|-->|\*\/|\/\*|::|[\[\](){}<>.,;:*"'%@!/= ])/g);
+        let iter = lineString.matchAll(/(<!--|-->|\*\/|\/\*|::|[\[\](){}<>.,;:*"'%@$!/= ])/g);
         let subtokens = iter.next();
         if( subtokens.value )
         {
             let idx = 0;
             while( subtokens.value != undefined )
             {
-                const _pt = linestring.substring(idx, subtokens.value.index);
+                const _pt = lineString.substring(idx, subtokens.value.index);
                 if( _pt.length ) pushToken( _pt );
                 pushToken( subtokens.value[ 0 ] );
                 idx = subtokens.value.index + subtokens.value[ 0 ].length;
                 subtokens = iter.next();
                 if(!subtokens.value) {
-                    const _at = linestring.substring(idx);
+                    const _at = lineString.substring(idx);
                     if( _at.length ) pushToken( _at );
                 }
             }
         }
-        else pushToken( linestring );
+        else pushToken( lineString );
 
         if( hasCommentIdx != undefined )
         {
@@ -3061,6 +3226,22 @@ class CodeEditor {
                 // Scan for numbers again
                 return this._processTokens( tokens, idx );
             }
+
+            const importantIdx = tokens.indexOf( 'important' );
+            if( this.highlight == 'CSS' && importantIdx > -1 && tokens[ importantIdx - 1 ] === '!' )
+            {
+                tokens[ importantIdx - 1 ] = "!important";
+                tokens.splice( importantIdx, 1 );
+            }
+        }
+        else if( this.highlight == 'PHP' )
+        {
+            const dollarIdx = tokens.indexOf( '$' );
+            if( dollarIdx > -1 && tokens[ dollarIdx + 1 ] === 'this-' )
+            {
+                tokens[ dollarIdx ] = "$this";
+                tokens[ dollarIdx + 1 ] = "-";
+            }
         }
 
         return tokens;
@@ -3070,7 +3251,7 @@ class CodeEditor {
 
         if( !lang )
         {
-            lang = this.languages[ this.highlight ];
+            lang = CodeEditor.languages[ this.highlight ];
         }
 
         let t = token;
@@ -3083,16 +3264,30 @@ class CodeEditor {
         return kindArray[ this.highlight ] && kindArray[ this.highlight ][ t ] != undefined;
     }
 
+    _getTokenHighlighting( ctx, highlight ) {
+
+        const rules = [ ...HighlightRules.common, ...( HighlightRules[highlight] || [] ), ...HighlightRules.post_common ];
+
+        for( const rule of rules )
+        {
+            if( !rule.test( ctx, this ) )
+            {
+                continue;
+            }
+
+            const r = rule.action ? rule.action( ctx, this ) : undefined;
+            if( rule.discard ) ctx.discardToken = r;
+            return rule.className;
+        }
+
+        return null;
+    }
+
     _evaluateToken( ctxData ) {
 
-        let token        = ctxData.token,
-            prev         = ctxData.prev,
-            next         = ctxData.next,
-            tokenIndex   = ctxData.tokenIndex,
-            isFirstToken = ctxData.isFirstToken,
-            isLastToken  = ctxData.isLastToken;
+        let { token, prev, next, tokenIndex, isFirstToken, isLastToken } = ctxData;
 
-        const lang = this.languages[ this.highlight ],
+        const lang = CodeEditor.languages[ this.highlight ],
               highlight = this.highlight.replace( /\s/g, '' ).replaceAll( "+", "p" ).toLowerCase(),
               customStringKeys = Object.assign( {}, this.stringKeys );
 
@@ -3114,14 +3309,14 @@ class CodeEditor {
 
         if( usePreviousTokenToCheckString || ( this._buildingBlockComment === undefined && ( lang.tags ?? false ? ( this._enclosedByTokens( token, tokenIndex, '<', '>' ) ) : true ) ) )
         {
-            const checkIfStringEnded = t => {
+            const _checkIfStringEnded = t => {
                 const idx = Object.values( customStringKeys ).indexOf( t );
                 this._stringEnded = (idx > -1) && (idx == Object.values(customStringKeys).indexOf( customStringKeys[ '@' + this._buildingString ] ));
             };
 
             if( this._buildingString != undefined )
             {
-                checkIfStringEnded( usePreviousTokenToCheckString ? ctxData.nextWithSpaces : token );
+                _checkIfStringEnded( usePreviousTokenToCheckString ? ctxData.nextWithSpaces : token );
             }
             else if( customStringKeys[ '@' + ( usePreviousTokenToCheckString ? ctxData.prevWithSpaces : token ) ] )
             {
@@ -3131,77 +3326,25 @@ class CodeEditor {
                 // Check if string ended in same token using next...
                 if( usePreviousTokenToCheckString )
                 {
-                    checkIfStringEnded( ctxData.nextWithSpaces );
+                    _checkIfStringEnded( ctxData.nextWithSpaces );
                 }
             }
         }
 
-        const usesBlockComments = lang.blockComments ?? true;
-        const blockCommentsTokens = lang.blockCommentsTokens ?? this.defaultBlockCommentTokens;
-        const singleLineCommentToken = lang.singleLineCommentToken ?? this.defaultSingleLineCommentToken;
-
-        let token_classname = "";
-        let discardToken = false;
-
-        if( this._buildingBlockComment != undefined )
-            token_classname = "cm-com";
-
-        else if( this._buildingString != undefined )
-            discardToken = this._appendStringToken( token );
-
-        else if( this._isKeyword( ctxData, lang ) )
-            token_classname = "cm-kwd";
-
-        else if( this._mustHightlightWord( token, CodeEditor.builtIn, lang ) && ( lang.tags ?? false ? ( this._enclosedByTokens( token, tokenIndex, '<', '>' ) ) : true ) )
-            token_classname = "cm-bln";
-
-        else if( this._mustHightlightWord( token, CodeEditor.statementsAndDeclarations, lang ) )
-            token_classname = "cm-std";
-
-        else if( this._mustHightlightWord( token, CodeEditor.symbols, lang ) )
-            token_classname = "cm-sym";
-
-        else if( token.substr( 0, singleLineCommentToken.length ) == singleLineCommentToken )
-            token_classname = "cm-com";
-
-        else if( this._isNumber( token ) || this._isNumber( token.replace(/[px]|[em]|%/g,'') ) )
-            token_classname = "cm-dec";
-
-        else if( this._isCSSClass( ctxData ) )
-            token_classname = "cm-kwd";
-
-        else if ( this._isType( ctxData, lang ) )
-            token_classname = "cm-typ";
-
-        else if ( highlight == 'batch' && ( token == '@' || prev == ':' || prev == '@' ) )
-            token_classname = "cm-kwd";
-
-        else if ( [ 'cpp', 'c', 'wgsl', 'glsl' ].indexOf( highlight ) > -1 && token.includes( '#' ) ) // C++ preprocessor
-            token_classname = "cm-ppc";
-
-        else if ( highlight == 'cpp' && prev == '<' && (next == '>' || next == '*') ) // Defining template type in C++
-            token_classname = "cm-typ";
-
-        else if ( highlight == 'cpp' && (next == '::' || prev == '::' && next != '(' )) // C++ Class
-            token_classname = "cm-typ";
-
-        else if ( highlight == 'css' && prev == ':' && (next == ';' || next == '!important') ) // CSS value
-            token_classname = "cm-str";
-
-        else if ( highlight == 'css' && prev == undefined && next == ':' ) // CSS attribute
-            token_classname = "cm-typ";
-
-        else if ( this._markdownHeader || ( highlight == 'markdown' && isFirstToken && token.replaceAll('#', '').length != token.length ) ) // Header
-        {
-            token_classname = "cm-kwd";
-            this._markdownHeader = true;
-        }
-
-        else if ( token[ 0 ] != '@' && token[ 0 ] != ',' && next == '(' )
-            token_classname = "cm-mtd";
+        // Update context data for next tests
+        ctxData.discardToken = false;
+        ctxData.inBlockComment = this._buildingBlockComment;
+        ctxData.markdownHeader = this._markdownHeader;
+        ctxData.inString = this._buildingString;
+        ctxData.singleLineCommentToken = lang.singleLineCommentToken ?? this.defaultSingleLineCommentToken;
+        ctxData.lang = lang;
+        ctxData.scope = this._scopeStack[ this._scopeStack.length - 1 ];
 
+        // Get highlighting class based on language common and specific rules
+        let tokenClass = this._getTokenHighlighting( ctxData, highlight );
 
-        if( usesBlockComments && this._buildingBlockComment != undefined
+        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 ) );
@@ -3212,34 +3355,36 @@ class CodeEditor {
         if( this._buildingString && ( this._stringEnded || isLastToken ) )
         {
             token = this._getCurrentString();
-            token_classname = "cm-str";
-            discardToken = false;
+            tokenClass = "cm-str";
+            ctxData.discardToken = false;
         }
 
         // Update state
         this._buildingString = this._stringEnded ? undefined : this._buildingString;
 
-        if( discardToken )
+        if( ctxData.discardToken )
         {
             return "";
         }
 
-        token = token.replace( "<", "&lt;" );
-        token = token.replace( ">", "&gt;" );
+        // Replace html chars
+        token = token.replace( "<", "&lt;" ).replace( ">", "&gt;" );
 
         // No highlighting, no need to put it inside another span..
-        if( !token_classname.length )
+        if( !tokenClass )
         {
             return token;
         }
 
-        return "<span class='" + highlight + " " + token_classname + "'>" + token + "</span>";
+        return `<span class="${ highlight } ${ tokenClass }">${ token }</span>`;
     }
 
     _appendStringToken( token ) {
 
         if( !this._pendingString )
+        {
             this._pendingString = "";
+        }
 
         this._pendingString += token;
 
@@ -3285,11 +3430,9 @@ class CodeEditor {
         return false;
     }
 
-    _isKeyword( ctxData, lang ) {
+    _isKeyword( ctxData ) {
 
-        const token = ctxData.token;
-        const tokenIndex = ctxData.tokenIndex;
-        const tokens = ctxData.tokens;
+        const { token, tokenIndex, tokens, lang } = ctxData;
 
         let isKwd = this._mustHightlightWord( token, CodeEditor.keywords ) || this.highlight == 'XML';
 
@@ -3306,6 +3449,10 @@ class CodeEditor {
                 isKwd |= ( ctxData.tokens[ tokenIndex - 2 ] == '$' );
             }
         }
+        if( this.highlight == 'Markdown' )
+        {
+            isKwd = ( this._markdownHeader !== undefined );
+        }
         else if( lang.tags )
         {
             isKwd &= ( this._enclosedByTokens( token, tokenIndex, '<', '>' ) != undefined );
@@ -3315,24 +3462,14 @@ class CodeEditor {
         return isKwd;
     }
 
-    _isCSSClass( ctxData ) {
-
-        const token = ctxData.token;
-        const prev = ctxData.prev;
-        const next = ctxData.next;
+    _isNumber( token ) {
 
-        if( this.highlight != 'CSS' )
+        const lang = CodeEditor.languages[ this.highlight ];
+        if( !( lang.numbers ?? true ) )
         {
             return false;
         }
 
-        return  ( prev == '.' || prev == '::'
-                || ( prev == ':' && next == '{' )
-                || ( token[ 0 ] == '#' && prev != ':' ) );
-    }
-
-    _isNumber( token ) {
-
         const subToken = token.substring( 0, token.length - 1 );
 
         if( this.highlight == 'C++' )
@@ -3364,53 +3501,24 @@ class CodeEditor {
         return token.length && token != ' ' && !Number.isNaN( +token );
     }
 
-    _isType( ctxData, lang ) {
-
-        const token = ctxData.token;
-        const prev = ctxData.prev;
-        const next = ctxData.next;
-
-        // Common case
-        if( this._mustHightlightWord( token, CodeEditor.types, lang ) )
-        {
-            return true;
-        }
+    _encloseSelectedWordWithKey( key, lidx, cursor ) {
 
-        if( this.highlight == 'JavaScript' )
-        {
-            return (prev == 'class' && next == '{') || (prev == 'new' && next == '(');
-        }
-        else if( this.highlight == 'C++' )
+        if( !cursor.selection || ( cursor.selection.fromY != cursor.selection.toY ) )
         {
-            return (prev == 'class' && next == '{') || (prev == 'struct' && next == '{');
-        }
-        else if ( this.highlight == 'WGSL' )
-        {
-            const not_kwd = !this._mustHightlightWord( token, CodeEditor.keywords, lang );
-            return  (prev == 'struct' && next == '{') ||
-                    (not_kwd && prev == ':' && next == ';') ||
-            ( not_kwd &&
-                ( prev == ':' && next == ')' || prev == ':' && next == ',' || prev == '>' && next == '{'
-                    || prev == '<' && next == ',' || prev == '<' && next == '>' || prev == '>' && token != ';' && !next ));
+            return false;
         }
-    }
-
-    _encloseSelectedWordWithKey( key, lidx, cursor ) {
-
-        if( !cursor.selection || (cursor.selection.fromY != cursor.selection.toY) )
-        return false;
 
         cursor.selection.invertIfNecessary();
 
         // Insert first..
         this.code.lines[ lidx ] = [
-            this.code.lines[ lidx ].slice(0, cursor.selection.fromX),
+            this.code.lines[ lidx ].slice( 0, cursor.selection.fromX ),
             key,
-            this.code.lines[ lidx ].slice(cursor.selection.fromX)
+            this.code.lines[ lidx ].slice( cursor.selection.fromX )
         ].join('');
 
         // Go to the end of the word
-        this.cursorToPosition(cursor, cursor.selection.toX + 1);
+        this.cursorToPosition( cursor, cursor.selection.toX + 1 );
 
         // Change next key?
         switch(key)
@@ -3578,7 +3686,7 @@ class CodeEditor {
         if( !key ) return;
 
         cursor._left += this.charWidth;
-        cursor.style.left = "calc( " + cursor._left + "px + " + this.xPadding + " )";
+        cursor.style.left = `calc( ${ cursor._left }px + ${ this.xPadding } )`;
         cursor.position++;
 
         this.restartBlink();
@@ -3598,7 +3706,7 @@ class CodeEditor {
 
         cursor._left -= this.charWidth;
         cursor._left = Math.max( cursor._left, 0 );
-        cursor.style.left = "calc( " + cursor._left + "px + " + this.xPadding + " )";
+        cursor.style.left = `calc( ${ cursor._left }px + ${ this.xPadding } )`;
         cursor.position--;
         cursor.position = Math.max( cursor.position, 0 );
         this.restartBlink();
@@ -3616,8 +3724,8 @@ class CodeEditor {
     cursorToTop( cursor, resetLeft = false ) {
 
         cursor._top -= this.lineHeight;
-        cursor._top = Math.max(cursor._top, 0);
-        cursor.style.top = "calc(" + cursor._top + "px)";
+        cursor._top = Math.max( cursor._top, 0 );
+        cursor.style.top = `calc(${ cursor._top }px)`;
         this.restartBlink();
 
         if( resetLeft )
@@ -3647,10 +3755,10 @@ class CodeEditor {
 
         const currentScrollTop = this.getScrollTop();
         const tabsHeight = this.tabs.root.getBoundingClientRect().height;
-        const infoPanelHeight = this.skipInfo ? 0 : this.infoPanel.root.getBoundingClientRect().height;
+        const statusPanelHeight = this.skipInfo ? 0 : this.statusPanel.root.getBoundingClientRect().height;
         const scrollerHeight = this.codeScroller.offsetHeight;
 
-        var lastLine = ( ( scrollerHeight - tabsHeight - infoPanelHeight + currentScrollTop ) / this.lineHeight )|0;
+        var lastLine = ( ( scrollerHeight - tabsHeight - statusPanelHeight + currentScrollTop ) / this.lineHeight )|0;
         if( cursor.line >= lastLine )
         {
             this.setScrollTop( currentScrollTop + this.lineHeight );
@@ -3660,7 +3768,9 @@ class CodeEditor {
     cursorToString( cursor, text, reverse ) {
 
         if( !text.length )
+        {
             return;
+        }
 
         for( let char of text )
         {
@@ -3672,7 +3782,7 @@ class CodeEditor {
 
         cursor.position = position;
         cursor._left = position * this.charWidth;
-        cursor.style.left = "calc(" + cursor._left + "px + " + this.xPadding + ")";
+        cursor.style.left = `calc( ${ cursor._left }px + ${ this.xPadding } )`;
     }
 
     cursorToLine( cursor, line, resetLeft = false ) {
@@ -3709,9 +3819,9 @@ class CodeEditor {
         for( let cursor of this.cursors.children )
         {
             cursor._left = cursor.position * this.charWidth;
-            cursor.style.left = "calc(" + cursor._left + "px + " + this.xPadding + ")";
+            cursor.style.left = `calc( ${ cursor._left }px + ${ this.xPadding } )`;
             cursor._top = cursor.line * this.lineHeight;
-            cursor.style.top = "calc(" + cursor._top + "px)";
+            cursor.style.top = `calc(${ cursor._top }px)`;
         }
     }
 
@@ -3730,9 +3840,9 @@ class CodeEditor {
         cursor.line = state.line ?? 0;
 
         cursor._left = cursor.position * this.charWidth;
-        cursor.style.left = "calc(" + cursor._left + "px + " + this.xPadding + ")";
+        cursor.style.left = `calc( ${ cursor._left }px + ${ this.xPadding } )`;
         cursor._top = cursor.line * this.lineHeight;
-        cursor.style.top = "calc(" + cursor._top + "px)";
+        cursor.style.top = `calc(${ cursor._top }px)`;
 
         if( state.selection )
         {
@@ -3772,7 +3882,8 @@ class CodeEditor {
 
     _addSpaceTabs( cursor, n ) {
 
-        for( var i = 0; i < n; ++i ) {
+        for( var i = 0; i < n; ++i )
+        {
             this.actions[ 'Tab' ].callback( cursor.line, cursor, null );
         }
     }
@@ -3789,13 +3900,17 @@ class CodeEditor {
     }
 
     _removeSpaces( cursor ) {
+
         const lidx = cursor.line;
+
         // Remove indentation
         let lineStart = firstNonspaceIndex( this.code.lines[ lidx ] );
 
         // Nothing to remove... we are at the start of the line
         if( lineStart == 0 )
+        {
             return;
+        }
 
         // Only tabs/spaces in the line...
         if( lineStart == -1 ) {
@@ -3835,7 +3950,7 @@ class CodeEditor {
 
     setScrollLeft( value ) {
         if( !this.codeScroller ) return;
-        doAsync( () => {
+        LX.doAsync( () => {
             this.codeScroller.scrollLeft = value;
             this.setScrollBarValue( 'horizontal', 0 );
         }, 20 );
@@ -3843,7 +3958,7 @@ class CodeEditor {
 
     setScrollTop( value ) {
         if( !this.codeScroller ) return;
-        doAsync( () => {
+        LX.doAsync( () => {
             this.codeScroller.scrollTop = value;
             this.setScrollBarValue( 'vertical' );
         }, 20 );
@@ -3858,13 +3973,13 @@ class CodeEditor {
             const scrollWidth = maxLineLength * this.charWidth + CodeEditor.LINE_GUTTER_WIDTH;
 
             const tabsHeight = this.tabs.root.getBoundingClientRect().height;
-            const infoPanelHeight = this.skipInfo ? 0 : this.infoPanel.root.getBoundingClientRect().height;
+            const statusPanelHeight = this.skipInfo ? 0 : this.statusPanel.root.getBoundingClientRect().height;
             const scrollHeight = this.code.lines.length * this.lineHeight;
 
             this._lastMaxLineLength = maxLineLength;
 
             this.codeSizer.style.minWidth = scrollWidth + "px";
-            this.codeSizer.style.minHeight = ( scrollHeight + tabsHeight + infoPanelHeight ) + "px";
+            this.codeSizer.style.minHeight = ( scrollHeight + tabsHeight + statusPanelHeight ) + "px";
 
             this.resizeScrollBars();
 
@@ -4034,7 +4149,7 @@ class CodeEditor {
         return [ word, from, to ];
     }
 
-    _measureChar( char = "a", use_floating = false, get_bb = false ) {
+    _measureChar( char = "a", useFloating = false, getBB = false ) {
         const parentContainer = LX.makeContainer( null, "lexcodeeditor", "", document.body );
         const container = LX.makeContainer( null, "code", "", parentContainer );
         const line = document.createElement( "pre" );
@@ -4044,8 +4159,8 @@ class CodeEditor {
         text.innerText = char;
         var rect = text.getBoundingClientRect();
         LX.deleteElement( parentContainer );
-        const bb = [ use_floating ? rect.width : Math.floor( rect.width ), use_floating ? rect.height : Math.floor( rect.height ) ];
-        return get_bb ? bb : bb[ 0 ];
+        const bb = [ useFloating ? rect.width : Math.floor( rect.width ), useFloating ? rect.height : Math.floor( rect.height ) ];
+        return getBB ? bb : bb[ 0 ];
     }
 
     measureString( str ) {
@@ -4333,7 +4448,9 @@ class CodeEditor {
         text = text ?? this._lastTextFound;
 
         if( !text )
+        {
             return;
+        }
 
         let cursor = this._getCurrentCursor();
         let cursorData = new LX.vec2( cursor.position, cursor.line );
@@ -4344,6 +4461,7 @@ class CodeEditor {
         {
             LX.deleteElement( this._lastResult.dom );
             cursorData = this._lastResult.pos;
+            cursorData.x += text.length * ( reverse ? -1 : 1 );
             delete this._lastResult;
         }
 
@@ -4389,10 +4507,12 @@ class CodeEditor {
             }
         }
 
-        if( line == null)
+        if( line == null )
         {
             if( !skipAlert )
+            {
                 alert( "No results!" );
+            }
 
             const lastLine = this.code.lines.length - 1;
 
@@ -4400,6 +4520,7 @@ class CodeEditor {
                 'dom': this.searchResultSelections.lastChild,
                 'pos': reverse ? new LX.vec2( this.code.lines[ lastLine ].length, lastLine ) : new LX.vec2( 0, 0 )
             };
+
             return;
         }
 
@@ -4409,9 +4530,10 @@ class CodeEditor {
             have to add the length of the substring (0, first_ocurrence)
         */
 
-
         if( !reverse )
+        {
             char += ( line == cursorData.y ? cursorData.x : 0 );
+        }
 
 
         // Text found..
@@ -4439,8 +4561,13 @@ class CodeEditor {
 
         this._lastResult = {
             'dom': this.searchResultSelections.lastChild,
-            'pos': new LX.vec2( char + text.length * ( reverse ? -1 : 1 ) , line )
+            'pos': new LX.vec2( char , line ),
+            reverse
         };
+
+        // Force focus back to search box
+        const input = this.searchbox.querySelector( 'input' );
+        input.focus();
     }
 
     showSearchLineBox() {
@@ -4527,13 +4654,16 @@ class CodeEditor {
 
         number = number ?? this.state.activeLine;
 
-        this._updateDataInfoPanel( "@cursor-line", "Ln " + ( number + 1 ) );
+        const cursor = this._getCurrentCursor();
+        this._updateDataInfoPanel( "@cursor-data", `Ln ${ number + 1 }, Col ${ cursor.position + 1 }` );
 
-        const old_local = this.toLocalLine( this.state.activeLine );
-        let line = this.code.childNodes[ old_local ];
+        const oldLocal = this.toLocalLine( this.state.activeLine );
+        let line = this.code.childNodes[ oldLocal ];
 
         if( !line )
+        {
             return;
+        }
 
         line.classList.remove( 'active-line' );
 
@@ -4541,71 +4671,54 @@ class CodeEditor {
         {
             this.state.activeLine = number;
 
-            const new_local = this.toLocalLine( number );
-            line = this.code.childNodes[ new_local ];
+            const newLocal = this.toLocalLine( number );
+            line = this.code.childNodes[ newLocal ];
             if( line ) line.classList.add( 'active-line' );
         }
     }
 
     _hideActiveLine() {
-
         this.code.querySelectorAll( '.active-line' ).forEach( e => e.classList.remove( 'active-line' ) );
     }
 
-    _increaseFontSize() {
-
+    _setFontSize( size ) {
         // Change font size
-
-        var r = document.querySelector( ':root' );
-        var s = getComputedStyle( r );
-        var pixels = parseInt( s.getPropertyValue( "--code-editor-font-size" ) );
-        pixels = LX.clamp( pixels + 1, CodeEditor.CODE_MIN_FONT_SIZE, CodeEditor.CODE_MAX_FONT_SIZE );
-        r.style.setProperty( "--code-editor-font-size", pixels + "px" );
+        this.fontSize = size;
+        const r = document.querySelector( ':root' );
+        r.style.setProperty( "--code-editor-font-size", `${ this.fontSize }px` );
         this.charWidth = this._measureChar( "a", true );
 
-        // Change row size
+        window.localStorage.setItem( "lexcodeeditor-font-size", this.fontSize );
 
-        var row_pixels = pixels + 6;
-        r.style.setProperty( "--code-editor-row-height", row_pixels + "px" );
-        this.lineHeight = row_pixels;
+        // Change row size
+        const rowPixels = this.fontSize + 6;
+        r.style.setProperty( "--code-editor-row-height", `${ rowPixels }px` );
+        this.lineHeight = rowPixels;
 
         // Relocate cursors
-
         this.relocateCursors();
 
         // Resize the code area
-
         this.processLines();
-    }
-
-    _decreaseFontSize() {
-
-        // Change font size
 
-        var r = document.querySelector( ':root' );
-        var s = getComputedStyle( r );
-        var pixels = parseInt( s.getPropertyValue( "--code-editor-font-size" ) );
-        pixels = LX.clamp( pixels - 1, CodeEditor.CODE_MIN_FONT_SIZE, CodeEditor.CODE_MAX_FONT_SIZE );
-        r.style.setProperty( "--code-editor-font-size", pixels + "px" );
-        this.charWidth = this._measureChar( "a", true );
-
-        // Change row size
-
-        var row_pixels = pixels + 6;
-        r.style.setProperty( "--code-editor-row-height", row_pixels + "px" );
-        this.lineHeight = row_pixels;
-
-        // Relocate cursors
+        // Emit event
+        LX.emit( "@font-size", this.fontSize );
+    }
 
-        this.relocateCursors();
+    _applyFontSizeOffset( offset = 0 ) {
+        const newFontSize = LX.clamp( this.fontSize + offset, CodeEditor.CODE_MIN_FONT_SIZE, CodeEditor.CODE_MAX_FONT_SIZE );
+        this._setFontSize( newFontSize );
+    }
 
-        // Resize the code area
+    _increaseFontSize() {
+        this._applyFontSizeOffset( 1 );
+    }
 
-        this.processLines();
+    _decreaseFontSize() {
+        this._applyFontSizeOffset( -1 );
     }
 
     _clearTmpVariables() {
-
         delete this._currentLineString;
         delete this._currentLineNumber;
         delete this._buildingString;
@@ -4613,13 +4726,35 @@ class CodeEditor {
         delete this._buildingBlockComment;
         delete this._markdownHeader;
         delete this._lastResult;
+        delete this._scopeStack;
     }
 }
 
-CodeEditor.keywords = {
+CodeEditor.languages = {
+    'Plain Text': { ext: 'txt', blockComments: false, singleLineComments: false, numbers: false },
+    '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' },
+};
 
+CodeEditor.keywords = {
     'JavaScript': ['var', 'let', 'const', 'this', 'in', 'of', 'true', 'false', 'new', 'function', 'NaN', 'static', 'class', 'constructor', 'null', 'typeof', 'debugger', 'abstract',
                   'arguments', 'extends', 'instanceof', 'Infinity'],
+    'TypeScript': ['var', 'let', 'const', 'this', 'in', 'of', 'true', 'false', 'new', 'function', 'class', 'extends', 'instanceof', 'Infinity', 'private', 'public', 'protected', 'interface',
+                  'enum', 'type'],
     'C': ['int', 'float', 'double', 'long', 'short', 'char', 'const', 'void', 'true', 'false', 'auto', 'struct', 'typedef', 'signed', 'volatile', 'unsigned', 'static', 'extern', 'enum', 'register',
         'union'],
     'C++': ['int', 'float', 'double', 'bool', 'long', 'short', 'char', 'wchar_t', 'const', 'static_cast', 'dynamic_cast', 'new', 'delete', 'void', 'true', 'false', 'auto', 'class', 'struct', 'typedef', 'nullptr',
@@ -4630,10 +4765,10 @@ CodeEditor.keywords = {
     'JSON': ['true', 'false'],
     'GLSL': ['true', 'false', 'function', 'int', 'float', 'vec2', 'vec3', 'vec4', 'mat2x2', 'mat3x3', 'mat4x4', 'struct'],
     'CSS': ['body', 'html', 'canvas', 'div', 'input', 'span', '.'],
-    'WGSL': ['var', 'let', 'true', 'false', 'fn', 'bool', 'u32', 'i32', 'f16', 'f32', 'vec2f', 'vec3f', 'vec4f', 'mat2x2f', 'mat3x3f', 'mat4x4f', 'array', 'atomic', 'struct',
+    'WGSL': ['var', 'let', 'true', 'false', 'fn', 'bool', 'u32', 'i32', 'f16', 'f32', 'vec2', 'vec3', 'vec4', 'vec2f', 'vec3f', 'vec4f', 'mat2x2f', 'mat3x3f', 'mat4x4f', 'array', 'atomic', 'struct',
             'sampler', 'sampler_comparison', 'texture_depth_2d', 'texture_depth_2d_array', 'texture_depth_cube', 'texture_depth_cube_array', 'texture_depth_multisampled_2d',
             'texture_external', 'texture_1d', 'texture_2d', 'texture_2d_array', 'texture_3d', 'texture_cube', 'texture_cube_array', 'texture_storage_1d', 'texture_storage_2d',
-            'texture_storage_2d_array', 'texture_storage_3d', 'vec2u', 'vec3u', 'vec4u'],
+            'texture_storage_2d_array', 'texture_storage_3d', 'vec2u', 'vec3u', 'vec4u', 'ptr'],
     'Rust': ['as', 'const', 'crate', 'enum', 'extern', 'false', 'fn', 'impl', 'in', 'let', 'mod', 'move', 'mut', 'pub', 'ref', 'self', 'Self', 'static', 'struct', 'super', 'trait', 'true',
              'type', 'unsafe', 'use', 'where', 'abstract', 'become', 'box', 'final', 'macro', 'override', 'priv', 'typeof', 'unsized', 'virtual'],
     'Python': ['False', 'def', 'None', 'True', 'in', 'is', 'and', 'lambda', 'nonlocal', 'not', 'or'],
@@ -4641,10 +4776,10 @@ CodeEditor.keywords = {
               'DRIVERQUERY', 'print', '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'],
 };
 
 CodeEditor.utils = { // These ones don't have hightlight, used as suggestions to autocomplete only...
-
     'JavaScript': ['querySelector', 'body', 'addEventListener', 'removeEventListener', 'remove', 'sort', 'keys', 'filter', 'isNaN', 'parseFloat', 'parseInt', 'EPSILON', 'isFinite',
                   'bind', 'prototype', 'length', 'assign', 'entries', 'values', 'concat', 'substring', 'substr', 'splice', 'slice', 'buffer', 'appendChild', 'createElement', 'prompt',
                   'alert'],
@@ -4656,42 +4791,45 @@ CodeEditor.utils = { // These ones don't have hightlight, used as suggestions to
 };
 
 CodeEditor.types = {
-
     'JavaScript': ['Object', 'String', 'Function', 'Boolean', 'Symbol', 'Error', 'Number', 'TextEncoder', 'TextDecoder', 'Array', 'ArrayBuffer', 'InputEvent', 'MouseEvent',
                    'Int8Array', 'Int16Array', 'Int32Array', 'Float32Array', 'Float64Array', 'Element'],
+    'TypeScript': ['arguments', 'constructor', 'null', 'typeof', 'debugger', 'abstract', 'Object', 'string', 'String', 'Function', 'Boolean', 'boolean', 'Error', 'Number', 'number', 'TextEncoder',
+                  'TextDecoder', 'Array', 'ArrayBuffer', 'InputEvent', 'MouseEvent', 'Int8Array', 'Int16Array', 'Int32Array', 'Float32Array', 'Float64Array', 'Element'],
     'Rust': ['u128'],
     'Python': ['int', 'type', 'float', 'map', 'list', 'ArithmeticError', 'AssertionError', 'AttributeError', 'Exception', 'EOFError', 'FloatingPointError', 'GeneratorExit',
               'ImportError', 'IndentationError', 'IndexError', 'KeyError', 'KeyboardInterrupt', 'LookupError', 'MemoryError', 'NameError', 'NotImplementedError', 'OSError',
               'OverflowError', 'ReferenceError', 'RuntimeError', 'StopIteration', 'SyntaxError', 'TabError', 'SystemError', 'SystemExit', 'TypeError', 'UnboundLocalError',
               'UnicodeError', 'UnicodeEncodeError', 'UnicodeDecodeError', 'UnicodeTranslateError', 'ValueError', 'ZeroDivisionError'],
-    'C++': ['uint8_t', 'uint16_t', 'uint32_t']
+    'C++': ['uint8_t', 'uint16_t', 'uint32_t'],
+    'PHP': ['Exception', 'DateTime', 'JsonSerializable'],
 };
 
 CodeEditor.builtIn = {
-
     'JavaScript': ['document', 'console', 'window', 'navigator', 'performance'],
     'CSS': ['*', '!important'],
     'C++': ['vector', 'list', 'map'],
     'HTML': ['type', 'xmlns', 'PUBLIC', 'http-equiv', 'src', 'style', 'lang', 'href', 'rel', 'content', 'xml', 'alt'], // attributes
     'Markdown': ['type', 'src', 'style', 'lang', 'href', 'rel', 'content', 'valign', 'alt'], // attributes
+    'PHP': ['echo', 'print'],
 };
 
 CodeEditor.statementsAndDeclarations = {
-
     'JavaScript': ['for', 'if', 'else', 'case', 'switch', 'return', 'while', 'continue', 'break', 'do', 'import', 'from', 'throw', 'async', 'try', 'catch', 'await'],
+    'TypeScript': ['for', 'if', 'else', 'case', 'switch', 'return', 'while', 'continue', 'break', 'do', 'import', 'from', 'throw', 'async', 'try', 'catch', 'await', 'as'],
     'CSS': ['@', 'import'],
     'C': ['for', 'if', 'else', 'return', 'continue', 'break', 'case', 'switch', 'while', 'using', 'default', 'goto', 'do'],
     'C++': ['std', 'for', 'if', 'else', 'return', 'continue', 'break', 'case', 'switch', 'while', 'using', 'glm', 'spdlog', 'default'],
     'GLSL': ['for', 'if', 'else', 'return', 'continue', 'break'],
-    'WGSL': ['const','for', 'if', 'else', 'return', 'continue', 'break', 'storage', 'read', 'read_write', 'uniform', 'function', 'workgroup'],
+    'WGSL': ['const','for', 'if', 'else', 'return', 'continue', 'break', 'storage', 'read', 'read_write', 'uniform', 'function', 'workgroup', 'bitcast'],
     'Rust': ['break', 'else', 'continue', 'for', 'if', 'loop', 'match', 'return', 'while', 'do', 'yield'],
     'Python': ['if', 'raise', 'del', 'import', 'return', 'elif', 'try', 'else', 'while', 'as', 'except', 'with', 'assert', 'finally', 'yield', 'break', 'for', 'class', 'continue',
               'global', 'pass', 'from'],
-    'Batch': ['if', 'IF', 'for', 'FOR', 'in', 'IN', 'do', 'DO', 'call', 'CALL', 'goto', 'GOTO', 'exit', 'EXIT']
+    'Batch': ['if', 'IF', 'for', 'FOR', 'in', 'IN', 'do', 'DO', 'call', 'CALL', 'goto', 'GOTO', 'exit', 'EXIT'],
+    'PHP': ['declare', 'enddeclare', 'foreach', 'endforeach', 'if', 'else', 'elseif', 'endif', 'for', 'endfor', 'while', 'endwhile', 'switch', 'case', 'default', 'endswitch', 'return', 'break', 'continue',
+            'try', 'catch', 'die', 'do', 'exit', 'finally'],
 };
 
 CodeEditor.symbols = {
-
     'JavaScript': ['<', '>', '[', ']', '{', '}', '(', ')', ';', '=', '|', '||', '&', '&&', '?', '??'],
     'C': ['<', '>', '[', ']', '{', '}', '(', ')', ';', '=', '|', '||', '&', '&&', '?', '*', '-', '+'],
     'C++': ['<', '>', '[', ']', '{', '}', '(', ')', ';', '=', '|', '||', '&', '&&', '?', '::', '*', '-', '+'],
@@ -4704,7 +4842,22 @@ CodeEditor.symbols = {
     'Python': ['<', '>', '[', ']', '(', ')', '='],
     'Batch': ['[', ']', '(', ')', '%'],
     'HTML': ['<', '>', '/'],
-    'XML': ['<', '>', '/']
+    'XML': ['<', '>', '/'],
+    'PHP': ['{', '}', '(', ')'],
+};
+
+CodeEditor.REGISTER_LANGUAGE = function( name, options = {}, def, rules )
+{
+    CodeEditor.languages[ name ] = options;
+
+    if( def?.keywords ) CodeEditor.keywords[ name ] = 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( rules ) HighlightRules[ name ] = rules;
 };
 
 LX.CodeEditor = CodeEditor;