lexgui 0.7.3 → 0.7.5

package/build/extensions/codeeditor.js

@@ -151,7 +151,7 @@ class ScrollBar {
         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' );
@@ -338,7 +338,7 @@ class CodeEditor {
 
             let panel = new LX.Panel();
 
-            panel.addTitle( "EXPLORER" );
+            panel.addTitle( options.explorerName ?? "EXPLORER" );
 
             let sceneData = {
                 'id': 'WORKSPACE',
@@ -403,11 +403,11 @@ class CodeEditor {
 
             if( !this.disableEdition )
             {
-                this.tabs.root.addEventListener( 'dblclick', (e) => {
+                this.tabs.root.parentElement.addEventListener( 'dblclick', (e) => {
                     if( options.allowAddScripts ?? true )
                     {
                         e.preventDefault();
-                        this.addTab( "unnamed.js", true );
+                        this._onCreateNewFile();
                     }
                 } );
             }
@@ -966,11 +966,14 @@ class CodeEditor {
                 var spaces = firstNonspaceIndex( this.code.lines[ ln ]);
                 var tabs = Math.floor( spaces / this.tabSpaces );
 
-                if( _c0 == '{' && _c1 == '}' ) {
+                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 {
+                }
+                else
+                {
                     this._addSpaceTabs( cursor, tabs );
                 }
 
@@ -1206,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 );
@@ -1228,6 +1232,7 @@ class CodeEditor {
                     const s = getComputedStyle( r );
                     this.fontSize = parseInt( s.getPropertyValue( "--code-editor-font-size" ) );
                     this.charWidth = this._measureChar( "a", true );
+                    this.processLines();
                 }
 
                 LX.emit( "@font-size", this.fontSize );
@@ -1240,10 +1245,10 @@ class CodeEditor {
 
                     this.gutter.style.marginTop = `${ this._verticalTopOffset }px`;
                     this.gutter.style.height = `calc(100% - ${ this._fullVerticalOffset }px)`;
-                    this.vScrollbar.root.style.marginTop = `${ this.tabs?.root.getBoundingClientRect().height ?? 0 }px`;
+                    this.vScrollbar.root.style.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._verticalBottomOffset }px)`;
+                    this.codeArea.root.style.height = `calc(100% - ${ this._fullVerticalOffset }px)`;
                 }, 50 );
 
             });
@@ -1253,7 +1258,9 @@ class CodeEditor {
 
         if( options.allowAddScripts ?? true )
         {
-            this.addTab("+", false, "New File");
+            this.onCreateFile = options.onCreateFile;
+
+            this.addTab( "+", false, "Create file" );
         }
 
         if( options.files )
@@ -1264,11 +1271,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 );
+                        }
                     }
                 }});
             }
@@ -1322,12 +1334,15 @@ class CodeEditor {
 
         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 ) {
@@ -1401,7 +1416,7 @@ class CodeEditor {
         } );
     }
 
-    loadFile( file, options = {} ) {
+    async loadFile( file, options = {} ) {
 
         const _innerAddTab = ( text, name, title ) => {
 
@@ -1429,10 +1444,6 @@ class CodeEditor {
                     this.addExplorerItem( { id: name, skipVisibility: true, icon: this._getFileIcon( name, ext ) } );
                     this.explorer.innerTree.frefresh( name );
                 }
-                else
-                {
-
-                }
             }
             else
             {
@@ -1448,17 +1459,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);
                 _innerAddTab( text, name, filename );
             } });
+
         }
         else // File Blob
         {
@@ -1598,7 +1611,8 @@ class CodeEditor {
         }
 
         this._updateDataInfoPanel( "@highlight", lang );
-        this.processLines();
+
+        this.mustProcessLines = true;
 
         const ext = langExtension ?? CodeEditor.languages[ lang ].ext;
         const icon = this._getFileIcon( null, ext );
@@ -1663,7 +1677,7 @@ class CodeEditor {
         this._changeLanguage( 'Plain Text' );
     }
 
-    _createStatusPanel() {
+    _createStatusPanel( options ) {
 
         if( this.skipInfo )
         {
@@ -1688,7 +1702,7 @@ class CodeEditor {
 
         let rightStatusPanel = new LX.Panel( { height: "auto" } );
         rightStatusPanel.sameLine();
-        rightStatusPanel.addLabel( this.code.title, { id: "EditorFilenameStatusComponent", fit: true, signal: "@tab-name" });
+        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 => {
@@ -1715,13 +1729,24 @@ class CodeEditor {
         panel.attach( rightStatusPanel.root );
 
         const itemVisibilityMap = {
-            "Font Size Zoom": true,
-            "Editor Filename": true,
-            "Editor Selection": true,
-            "Editor Indentation": true,
-            "Editor Language": true,
+            "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 _setVisibility = ( itemName ) => {
+            const b = panel.root.querySelector( `#${ itemName.replaceAll( " ", "" ) }StatusComponent` );
+            console.assert( b, `${ itemName } has no status button!` );
+            b.classList.toggle( "hidden", !itemVisibilityMap[ itemName ] );
+        }
+
+        for( const [ itemName, v ] of Object.entries( itemVisibilityMap ) )
+        {
+            _setVisibility( itemName );
+        }
+
         panel.root.addEventListener( "contextmenu", (e) => {
 
             if( e.target && ( e.target.classList.contains( "lexpanel" ) || e.target.classList.contains( "lexinlinecomponents" ) ) )
@@ -1735,9 +1760,7 @@ class CodeEditor {
                     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 ] );
+                        _setVisibility( itemName );
                     }
                 }
                 if( !itemVisibilityMap[ itemName ] ) delete item.icon;
@@ -1808,10 +1831,23 @@ class CodeEditor {
 
         this.processFocus( false );
 
-        LX.addContextMenu( null, e, m => {
-            m.add( "Create", this.addTab.bind( this, "unnamed.js", true, "", { language: "JavaScript" } ) );
-            m.add( "Load", this.loadTabFromFile.bind( this, "unnamed.js", true ) );
-        });
+        new LX.DropdownMenu( e.target, [
+            { name: "Create file", icon: "FilePlus", callback: this._onCreateNewFile.bind( this ) },
+            { name: "Load file", icon: "FileUp", callback: this.loadTabFromFile.bind( this ) },
+        ], { side: "bottom", align: "start" });
+    }
+
+    _onCreateNewFile() {
+
+        let options = {};
+
+        if( this.onCreateFile )
+        {
+            options = this.onCreateFile( this );
+        }
+
+        const name = options.name ?? "unnamed.js";
+        this.addTab( name, true, name, { language: options.language ?? "JavaScript" } );
     }
 
     _onSelectTab( isNewTabButton, event, name ) {
@@ -1848,18 +1884,38 @@ class CodeEditor {
         {
             this._changeLanguageFromExtension( LX.getExtension( name ) );
         }
+
+        this.processLines();
     }
 
     _onContextMenuTab( isNewTabButton, event, name,  ) {
 
         if( isNewTabButton )
+        {
             return;
+        }
 
-        LX.addContextMenu( null, event, m => {
-            m.add( "Close", () => { this.tabs.delete( name ) } );
-            // m.add( "" );
-            // m.add( "Rename", () => { console.warn( "TODO" )} );
-        });
+        new LX.DropdownMenu( event.target, [
+            { name: "Close", kbd: "MWB", callback: () => { this.tabs.delete( name ) } },
+            { name: "Close Others", callback: () => {
+                for( const [ key, data ] of Object.entries( this.tabs.tabs ) )
+                {
+                    if( key === '+' || key === name ) continue;
+                    this.tabs.delete( key )
+                }
+            } },
+            { name: "Close All", callback: () => {
+                for( const [ key, data ] of Object.entries( this.tabs.tabs ) )
+                {
+                    if( key === '+' ) continue;
+                    this.tabs.delete( key )
+                }
+            } },
+            null,
+            { name: "Copy Path", icon: "Copy", callback: () => {
+                navigator.clipboard.writeText( this.openedTabs[ name ].path ?? "" );
+            } }
+        ], { side: "bottom", align: "start", event });
     }
 
     addTab( name, selected, title, options = {} ) {
@@ -1879,20 +1935,25 @@ 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.lineScopes = [];
-        code.lineSymbols = [];
-        code.symbolsTable = new Map();
-        code.tabName = name;
-        code.title = title ?? name;
-        code.tokens = {};
-        code.style.left = "0px";
-        code.style.top = "0px";
+        Object.assign( code, {
+            path: options.path ?? "",
+            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();
@@ -1942,15 +2003,18 @@ 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..
@@ -1993,6 +2057,8 @@ class CodeEditor {
                 delete this._tabStorage[ name ];
             }
 
+            this._processLinesIfNecessary();
+
             return;
         }
 
@@ -2005,9 +2071,12 @@ 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 );
     }
 
@@ -2044,6 +2113,8 @@ class CodeEditor {
                 delete this._tabStorage[ name ];
             }
 
+            this._processLinesIfNecessary();
+
             return;
         }
 
@@ -2098,7 +2169,7 @@ class CodeEditor {
         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 ] );
             }
@@ -3029,10 +3100,24 @@ class CodeEditor {
         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 = "";
@@ -3080,13 +3165,6 @@ class CodeEditor {
 
     processLine( lineNumber, force, skipPropagation ) {
 
-        // Check if we are in block comment sections..
-        if( !force && this._inBlockCommentSection( lineNumber ) )
-        {
-            this.processLines();
-            return;
-        }
-
         if( this._scopeStack )
         {
             this.code.lineScopes[ lineNumber ] = [ ...this._scopeStack ];
@@ -3100,6 +3178,12 @@ class CodeEditor {
         const lang = CodeEditor.languages[ this.highlight ];
         const localLineNum =  this.toLocalLine( lineNumber );
         const lineString = this.code.lines[ lineNumber ];
+        if( lineString === undefined )
+        {
+            return;
+        }
+
+        this._lastProcessedLine = lineNumber;
 
         // multi-line strings not supported by now
         delete this._buildingString;
@@ -3132,6 +3216,18 @@ class CodeEditor {
         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 )
         {
@@ -3152,34 +3248,44 @@ class CodeEditor {
             }
 
             const token = tokensToEvaluate[ i ];
+            const tokenIndex = i;
+            const tokenStartIndex = this._currentTokenPositions[ tokenIndex ];;
 
-            if( lang.blockComments ?? true )
+            if( blockComments )
             {
-                const blockCommentsToken = ( lang.blockCommentsTokens ?? this.defaultBlockCommentTokens )[ 0 ];
-                if( token.substr( 0, blockCommentsToken.length ) == blockCommentsToken )
+                if( token.substr( 0, blockCommentsTokens[ 0 ].length ) == blockCommentsTokens[ 0 ] )
                 {
-                    this._buildingBlockComment = lineNumber;
+                    this._buildingBlockComment = [ lineNumber, tokenStartIndex ];
                 }
             }
 
-            // Pop current scope if necessary
+            // 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: token,
-                prev: prev,
+                token,
+                prev,
                 prevWithSpaces: tokensToEvaluate[ i - 1 ],
-                next: next,
+                next,
                 nextWithSpaces: tokensToEvaluate[ i + 1 ],
-                tokenIndex: i,
-                isFirstToken: (i == 0),
-                isLastToken: (i == tokensToEvaluate.length - 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;
@@ -3187,26 +3293,39 @@ class CodeEditor {
 
             // Store current scopes
 
-            // Get some context about the scope from previous lines
             let contextTokens = [
-                ...this._getTokensFromLine( this.code.lines[ lineNumber ].substring( 0, lineString.indexOf( token ) ) )
+                ...this._getTokensFromLine( this.code.lines[ lineNumber ].substring( 0, tokenStartIndex ) )
             ];
 
-            for( let k = 1; k < 50; k++ )
+            // Add token context from above lines in case we don't have information
+            // in the same line to get the scope data
+            if( !prev )
             {
-                let kLineString = this.code.lines[ lineNumber - k ];
-                if( !kLineString ) break;
-                const closeIdx = kLineString.lastIndexOf( '}' );
-                if( closeIdx > -1 )
+                for( let k = 1; k < 50; k++ )
                 {
-                    kLineString = kLineString.substr( closeIdx );
-                }
+                    let kLineString = this.code.lines[ lineNumber - k ];
+                    if( !kLineString )
+                    {
+                        break;
+                    }
 
-                contextTokens = [ ...this._getTokensFromLine( kLineString ), ...contextTokens ];
+                    const openIdx = kLineString.lastIndexOf( '{' );
+                    const closeIdx = kLineString.lastIndexOf( '}' );
+                    if( openIdx > -1 )
+                    {
+                        kLineString = kLineString.substr( openIdx );
+                    }
+                    else if( closeIdx > -1 )
+                    {
+                        kLineString = kLineString.substr( closeIdx );
+                    }
 
-                if( kLineString.length !== this.code.lines[ lineNumber - k ] )
-                {
-                    break;
+                    contextTokens = [ ...this._getTokensFromLine( kLineString ), ...contextTokens ];
+
+                    if( kLineString.length !== this.code.lines[ lineNumber - k ] )
+                    {
+                        break;
+                    }
                 }
             }
 
@@ -3249,28 +3368,111 @@ class CodeEditor {
                 }
             }
 
-            if( scopeType )
+            // 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 } );
-            }
-            else
-            {
-                this._scopeStack.push( { name: "", type: "anonymous" } ); // anonymous scope
+                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 );
+
+        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( "_" );
     }
 
-    _processExtraLineIfNecessary( lineNumber, oldSymbols ) {
+    _updateBlockComments( section, lineNumber, tokens ) {
 
-        if( ( (lineNumber + 1) === this.code.lines.length ) || !this.code.lineScopes[ lineNumber + 1 ] )
+        const lang = CodeEditor.languages[ this.highlight ];
+        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 )
         {
-            return;
+            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 )
         {
@@ -3278,11 +3480,45 @@ class CodeEditor {
             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
-        if( codeScopesEqual( this._scopeStack, this.code.lineScopes[ lineNumber + 1 ] ) )
+        // Compare line signature for structural changes
+        if( ( mustUpdateScopes || this._scopesUpdated ) && ( !sameScopes && !skipPropagation ) )
         {
-            // First check for occurrencies of the old symbols, to reprocess that lines
+            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 );
@@ -3301,20 +3537,15 @@ class CodeEditor {
                     this.processLine( occ.line, false, true );
                 }
             }
-
-            return;
         }
-
-        this.code.lineScopes[ lineNumber + 1 ] = [ ...this._scopeStack ];
-        this.processLine( lineNumber + 1 );
     }
 
-    _updateLine( force, lineNumber, html, skipPropagation, symbols = [] ) {
+    _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 ].map( s => `${ s.type }` ).join( ", " ) : "";
-        const lineSymbols = CodeEditor.debugSymbols ? this.code.lineSymbols[ lineNumber ].map( s => `${ s.name }(${ s.kind })` ).join( ", " ) : "";
+        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
@@ -3323,17 +3554,46 @@ class CodeEditor {
 
             if( !skipPropagation )
             {
-                this._processExtraLineIfNecessary( lineNumber, oldSymbols );
+                this._processExtraLineIfNecessary( lineNumber, tokens, oldSymbols, skipPropagation );
+            }
+
+            if( this.mustProcessNextLine )
+            {
+                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();
         }
-        else // Update all lines at once
-        {
 
-            return `<pre>${ ( gutterLineHtml + html + debugString ) }</pre>`;
-        }
+        this.code.lineSignatures[ lineNumber ] = this._getLineSignatureFromTokens( tokens );
+
+        // Update all lines at once
+        return force ? `<pre>${ ( gutterLineHtml + html + debugString ) }</pre>` : undefined;
     }
 
     /**
@@ -3343,7 +3603,7 @@ class CodeEditor {
 
         const scope = this._scopeStack.at( pushedScope ? -2 : -1 );
 
-        if( !scope )
+        if( !scope || this._inBlockCommentSection( lineNumber ) )
         {
             return [];
         }
@@ -3351,7 +3611,19 @@ class CodeEditor {
         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( "#" ) )
@@ -3359,6 +3631,8 @@ class CodeEditor {
             return [];
         }
 
+        const nativeTypes = CodeEditor.nativeTypes[ this.highlight ];
+
         const topLevelRegexes = [
             [/^class\s+([A-Za-z0-9_]+)/, "class"],
             [/^struct\s+([A-Za-z0-9_]+)/, "struct"],
@@ -3366,30 +3640,33 @@ class CodeEditor {
             [/^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
         ];
 
+        // Add regexes to detect methods, variables ( including "id : nativeType" )
         {
-            const nativeTypes = CodeEditor.nativeTypes[ this.highlight ];
             if( nativeTypes )
             {
-                const nativeTypes = ['int', 'float', 'double', 'bool', 'long', 'short', 'char', 'wchar_t', 'void'];
-                const regex = `^(?:${nativeTypes.join('|')})\\s+([A-Za-z0-9_]+)\s*[\(]+`;
-                topLevelRegexes.push( [ new RegExp( regex ), 'method' ] );
+                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" ];
-            const regex = `^(?:${declarationKeywords.join('|')})\\s+([A-Za-z0-9_]+)`;
-            topLevelRegexes.push( [ new RegExp( regex ), 'variable' ] );
+            topLevelRegexes.push( [ new RegExp( `^(?:${ declarationKeywords.join('|') })\\s+([A-Za-z0-9_]+)` ), 'variable' ] );
         }
 
-        for( let [ regex, kind ] of topLevelRegexes )
+        for( let [ regex, kind, fn ] of topLevelRegexes )
         {
             const m = text.match( regex );
             if( m )
             {
-                symbols.push( { name: m[ 1 ], kind, scope: scopeName, line: lineNumber } );
-                break;
+                _pushSymbol( { name: fn ? fn( m ) : m[ 1 ], kind, scope: scopeName, line: lineNumber } );
             }
         }
 
@@ -3398,15 +3675,28 @@ class CodeEditor {
             [/this.([A-Za-z_][A-Za-z0-9_]*)\s*\=/, "class-property"],
         ];
 
-        for( let [ regex, kind ] of usageRegexes )
+        for( let [ regex, kind, fn ] of usageRegexes )
         {
             const m = text.match( regex );
             if( m )
             {
-                symbols.push( { name: m[ 1 ], kind, scope: scopeName, line: lineNumber } );
+                _pushSymbol( { name: fn ? fn( m ) : m[ 1 ], kind, scope: scopeName, line: lineNumber } );
             }
         }
 
+        // Detect method calls
+        const regex = /([A-Za-z0-9_]+)\s*\(/g;
+        let match;
+        while( match = regex.exec( text ) )
+        {
+            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 } );
+        }
+
         // Stop after matches for top-level declarations and usage symbols
         if( symbols.length )
         {
@@ -3425,14 +3715,15 @@ class CodeEditor {
             {
                 if( next === "(" && /^[a-zA-Z_]\w*$/.test( token ) && prev === undefined )
                 {
-                    symbols.push( { name: token, kind: "method", scope: scopeName, line: lineNumber } );
+                    if( token === "constructor" ) continue; // skip constructor symbol
+                    _pushSymbol( { name: token, kind: "method", scope: scopeName, line: lineNumber } );
                 }
             }
             else if( scopeType.startsWith("enum") )
             {
                 if( !isSymbol( token ) && !this._isNumber( token ) && !this._mustHightlightWord( token, CodeEditor.statements ) )
                 {
-                    symbols.push({ name: token, kind: "enum_value", scope: scopeName, line: lineNumber });
+                    _pushSymbol({ name: token, kind: "enum_value", scope: scopeName, line: lineNumber });
                 }
             }
         }
@@ -3547,13 +3838,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 );
                 }
             }
@@ -3620,6 +3912,22 @@ class CodeEditor {
                 offset = offsetIdx;
             }
         }
+        else if( this.highlight == 'WGSL' )
+        {
+            let offset = 0;
+            let atIdx = tokens.indexOf( '@' );
+
+            while( atIdx > -1 )
+            {
+                const offsetIdx = atIdx + offset;
+
+                tokens[ offsetIdx ] += ( tokens[ offsetIdx + 1 ] ?? "" );
+                tokens.splice( offsetIdx + 1, 1 );
+
+                atIdx = tokens.slice( offsetIdx ).indexOf( '$' );
+                offset = offsetIdx;
+            }
+        }
 
         return tokens;
     }
@@ -3664,10 +3972,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 ),
-              lineNumber = this._currentLineNumber;
+        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;
 
@@ -3685,7 +3995,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 );
@@ -3711,9 +4021,9 @@ 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.at( -1 );
@@ -3728,16 +4038,8 @@ class CodeEditor {
         // 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, lineNumber ) );
-            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";
@@ -3801,17 +4103,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 ) {
@@ -4479,7 +4796,7 @@ class CodeEditor {
 
             if( flag & CodeEditor.RESIZE_SCROLLBAR_V )
             {
-                scrollHeight = this.code.lines.length * this.lineHeight + this._fullVerticalOffset;
+                scrollHeight = this.code.lines.length * this.lineHeight;
                 this.codeSizer.style.minHeight = scrollHeight + "px";
             }
 
@@ -4538,7 +4855,7 @@ class CodeEditor {
             }
 
             this.hScrollbar.root.classList.toggle( 'hidden', !needsHorizontalScrollbar );
-            this.codeArea.root.style.height = `calc(100% - ${ this._verticalBottomOffset + ( needsHorizontalScrollbar ? ScrollBar.SCROLLBAR_HORIZONTAL_HEIGHT : 0 ) }px)`;
+            this.codeArea.root.style.height = `calc(100% - ${ this._fullVerticalOffset + ( needsHorizontalScrollbar ? ScrollBar.SCROLLBAR_HORIZONTAL_HEIGHT : 0 ) }px)`;
         }
     }
 
@@ -4754,8 +5071,6 @@ class CodeEditor {
             ...Array.from( CodeEditor.utils[ this.highlight ] ?? [] )
         ];
 
-        suggestions = suggestions.concat( Object.keys(this.code.tokens).filter( a => a != word ) );
-
         const scopeStack = [ ...this.code.lineScopes[ cursor.line ] ];
         const scope = scopeStack.at( -1 );
         if( scope.type.startsWith( "enum" ) )
@@ -4769,10 +5084,8 @@ class CodeEditor {
             suggestions = suggestions.concat( otherValues.slice( 0, -1 ) );
         }
 
-        const prefix = word.toLowerCase();
-
         // Remove 1/2 char words and duplicates...
-        suggestions = Array.from( new Set( suggestions )).filter( s => s.length > 2 && s.toLowerCase().includes( prefix ) );
+        suggestions = Array.from( new Set( suggestions )).filter( s => s.length > 2 && s.toLowerCase().includes( word.toLowerCase() ) );
 
         // Order...
 
@@ -4782,21 +5095,49 @@ class CodeEditor {
             return 2; // worst
         }
 
-        suggestions = suggestions.sort( ( a, b ) => scoreSuggestion( a, prefix ) - scoreSuggestion( b, prefix ) || a.localeCompare( b ) );
+        suggestions = suggestions.sort( ( a, b ) => ( scoreSuggestion( a, word ) - scoreSuggestion( b, word ) ) || a.localeCompare( b ) );
 
         for( let s of suggestions )
         {
-            var pre = document.createElement( 'pre' );
+            const pre = document.createElement( 'pre' );
             this.autocomplete.appendChild( pre );
 
-            var icon = "Type";
-            if( this._mustHightlightWord( s, CodeEditor.utils ) )
-                icon = "Box";
-            else if( this._mustHightlightWord( s, CodeEditor.types ) )
-                icon = "Code";
+            const symbol = this.code.symbolsTable.get( s );
 
-            pre.appendChild( LX.makeIcon( icon, { iconClass: "mr-1", svgClass: "xs" } ) );
+            let iconName = "CaseLower";
+            let iconClass = "foo";
+
+            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 );
             } );
@@ -5284,7 +5625,8 @@ CodeEditor.languages = {
 };
 
 CodeEditor.nativeTypes = {
-    'C++': ['int', 'float', 'double', 'bool', 'long', 'short', 'char', 'wchar_t', 'void']
+    '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 = {
@@ -5308,10 +5650,9 @@ CodeEditor.keywords = {
     'GLSL': ['true', 'false', 'function', 'int', 'float', 'vec2', 'vec3', 'vec4', 'mat2x2', 'mat3x3', 'mat4x4', 'struct'],
     'CSS': ['body', 'html', 'canvas', 'div', 'input', 'span', '.', 'table', 'tr', 'td', 'th', 'label', 'video', 'img', 'code', 'button', 'select', 'option', 'svg', 'media', 'all',
             'i', 'a', 'li', 'h1', 'h2', 'h3', 'h4', 'h5', 'last-child', 'tbody', 'pre', 'monospace', 'font-face'],
-    'WGSL': ['var', 'let', 'true', 'false', 'fn', 'bool', 'u32', 'i32', 'f16', 'f32', 'vec2', 'vec3', 'vec4', 'vec2f', 'vec3f', 'vec4f', 'mat2x2f', 'mat3x3f', 'mat4x4f', 'array', 'atomic', 'struct',
-            'sampler', 'sampler_comparison', 'texture_depth_2d', 'texture_depth_2d_array', 'texture_depth_cube', 'texture_depth_cube_array', 'texture_depth_multisampled_2d',
-            'texture_external', 'texture_1d', 'texture_2d', 'texture_2d_array', 'texture_3d', 'texture_cube', 'texture_cube_array', 'texture_storage_1d', 'texture_storage_2d',
-            'texture_storage_2d_array', 'texture_storage_3d', 'vec2u', 'vec3u', 'vec4u', 'ptr'],
+    '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'],
@@ -5330,7 +5671,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 = {
@@ -5351,6 +5699,7 @@ 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'],