lexgui 0.1.23 → 0.1.25

package/build/components/codeeditor.js

@@ -26,7 +26,8 @@ function sliceChars( str, idx, n = 1 ) {
 }
 
 function firstNonspaceIndex( str ) {
-    return str.search(/\S|$/);
+    const index = str.search(/\S|$/)
+    return index < str.length ? index : -1;
 }
 
 function indexOfFrom( str, reg, from, reverse ) {
@@ -118,7 +119,7 @@ class CodeSelection {
         this.editor.selections.appendChild(domEl);
 
         // Hide active line background
-        this.editor.code.childNodes.forEach( e => e.classList.remove( 'active-line' ) );
+        this.editor._hideActiveLine();
     }
 };
 
@@ -201,8 +202,8 @@ class CodeEditor {
     static WORD_TYPE_METHOD = 0;
     static WORD_TYPE_CLASS  = 1;
 
-    static CODE_MAX_FONT_SIZE = 22;
     static CODE_MIN_FONT_SIZE = 9;
+    static CODE_MAX_FONT_SIZE = 22;
 
     /**
      * @param {*} options
@@ -333,7 +334,7 @@ class CodeEditor {
 
         // Add main cursor
         {
-            this._addCursor( 0, 0, true );
+            this._addCursor( 0, 0, true, true );
 
             Object.defineProperty( this, 'line', {
                 get: (v) => { return this._getCurrentCursor().line }
@@ -493,7 +494,8 @@ class CodeEditor {
         this.state = {
             focused: false,
             selectingText: false,
-            activeLine: null
+            activeLine: null,
+            keyChain: null
         }
 
         // Code
@@ -550,84 +552,16 @@ class CodeEditor {
             'End', 'Tab', 'Escape'
         ];
 
-        this.keywords = {
-            'JavaScript': ['var', 'let', 'const', 'this', 'in', 'of', 'true', 'false', 'new', 'function', 'NaN', 'static', 'class', 'constructor', 'null', 'typeof', 'debugger', 'abstract',
-                          'arguments', 'extends', 'instanceof'],
-            'C++': ['int', 'float', 'double', 'bool', 'char', 'wchar_t', 'const', 'static_cast', 'dynamic_cast', 'new', 'delete', 'void', 'true', 'false', 'auto', 'struct', 'typedef', 'nullptr', 
-                    'NULL', 'unsigned', 'namespace'],
-            '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',
-                    'sampler', 'sampler_comparison', 'texture_depth_2d', 'texture_depth_2d_array', 'texture_depth_cube', 'texture_depth_cube_array', 'texture_depth_multisampled_2d',
-                    'texture_external', 'texture_1d', 'texture_2d', 'texture_2d_array', 'texture_3d', 'texture_cube', 'texture_cube_array', 'texture_storage_1d', 'texture_storage_2d',
-                    'texture_storage_2d_array', 'texture_storage_3d'],
-            'Rust': ['as', 'const', 'crate', 'enum', 'extern', 'false', 'fn', 'impl', 'in', 'let', 'mod', 'move', 'mut', 'pub', 'ref', 'self', 'Self', 'static', 'struct', 'super', 'trait', 'true', 
-                     'type', 'unsafe', 'use', 'where', 'abstract', 'become', 'box', 'final', 'macro', 'override', 'priv', 'typeof', 'unsized', 'virtual'],
-            'Python': ['False', 'def', 'None', 'True', 'in', 'is', 'and', 'lambda', 'nonlocal', 'not', 'or'],
-            'Batch': ['set', 'SET', 'echo', 'ECHO', 'off', 'OFF', 'del', 'DEL', 'defined', 'DEFINED', 'setlocal', 'SETLOCAL', 'enabledelayedexpansion', 'ENABLEDELAYEDEXPANSION', 'driverquery', 
-                      'DRIVERQUERY', 'print', 'PRINT'],
-            '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'],
-        };
-        this.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'],
-            'WGSL': ['textureSample'],
-            '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']
-        };
-        this.types = {
-            'JavaScript': ['Object', 'String', 'Function', 'Boolean', 'Symbol', 'Error', 'Number', 'TextEncoder', 'TextDecoder'],
-            'Rust': ['u128'],
-            'Python': ['int', 'type', 'float', 'map', 'list', 'ArithmeticError', 'AssertionError', 'AttributeError', 'Exception', 'EOFError', 'FloatingPointError', 'GeneratorExit', 
-                      'ImportError', 'IndentationError', 'IndexError', 'KeyError', 'KeyboardInterrupt', 'LookupError', 'MemoryError', 'NameError', 'NotImplementedError', 'OSError',
-                      'OverflowError', 'ReferenceError', 'RuntimeError', 'StopIteration', 'SyntaxError', 'TabError', 'SystemError', 'SystemExit', 'TypeError', 'UnboundLocalError', 
-                      'UnicodeError', 'UnicodeEncodeError', 'UnicodeDecodeError', 'UnicodeTranslateError', 'ValueError', 'ZeroDivisionError'],
-            'C++': ['uint8_t', 'uint16_t', 'uint32_t']
-        };
-        this.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
-        };
-        this.statementsAndDeclarations = {
-            'JavaScript': ['for', 'if', 'else', 'case', 'switch', 'return', 'while', 'continue', 'break', 'do', 'import', 'from', 'throw', 'async', 'try', 'catch', 'await'],
-            'CSS': ['@', 'import'],
-            'C++': ['std', 'for', 'if', 'else', 'return', 'continue', 'break', 'case', 'switch', 'while', 'using', 'glm', 'spdlog'],
-            'GLSL': ['for', 'if', 'else', 'return', 'continue', 'break'],
-            'WGSL': ['const','for', 'if', 'else', 'return', 'continue', 'break', 'storage', 'read', 'uniform'],
-            'Rust': ['break', 'else', 'continue', 'for', 'if', 'loop', 'match', 'return', 'while', 'do', 'yield'],
-            'Python': ['if', 'raise', 'del', 'import', 'return', 'elif', 'try', 'else', 'while', 'as', 'except', 'with', 'assert', 'finally', 'yield', 'break', 'for', 'class', 'continue', 
-                      'global', 'pass'],
-            'Batch': ['if', 'IF', 'for', 'FOR', 'in', 'IN', 'do', 'DO', 'call', 'CALL', 'goto', 'GOTO', 'exit', 'EXIT']
-        };
-        this.symbols = {
-            'JavaScript': ['<', '>', '[', ']', '{', '}', '(', ')', ';', '=', '|', '||', '&', '&&', '?', '??'],
-            'C++': ['<', '>', '[', ']', '{', '}', '(', ')', ';', '=', '|', '||', '&', '&&', '?', '::', '*', '-', '+'],
-            'JSON': ['[', ']', '{', '}', '(', ')'],
-            'GLSL': ['[', ']', '{', '}', '(', ')'],
-            'WGSL': ['[', ']', '{', '}', '(', ')', '->'],
-            'CSS': ['{', '}', '(', ')', '*'],
-            'Rust': ['<', '>', '[', ']', '(', ')', '='],
-            'Python': ['<', '>', '[', ']', '(', ')', '='],
-            'Batch': ['[', ']', '(', ')', '%'],
-            'HTML': ['<', '>', '/']
-        };
+        this._blockCommentCache = [];
 
         // Convert reserved word arrays to maps so we can search tokens faster
 
-        for( let lang in this.keywords ) this.keywords[lang] = this.keywords[lang].reduce((a, v) => ({ ...a, [v]: true}), {});
-        for( let lang in this.utils ) this.utils[lang] = this.utils[lang].reduce((a, v) => ({ ...a, [v]: true}), {});
-        for( let lang in this.types ) this.types[lang] = this.types[lang].reduce((a, v) => ({ ...a, [v]: true}), {});
-        for( let lang in this.builtin ) this.builtin[lang] = this.builtin[lang].reduce((a, v) => ({ ...a, [v]: true}), {});
-        for( let lang in this.statementsAndDeclarations ) this.statementsAndDeclarations[lang] = this.statementsAndDeclarations[lang].reduce((a, v) => ({ ...a, [v]: true}), {});
-        for( let lang in this.symbols ) this.symbols[lang] = this.symbols[lang].reduce((a, v) => ({ ...a, [v]: true}), {});
+        for( let lang in CodeEditor.keywords ) CodeEditor.keywords[lang] = CodeEditor.keywords[lang].reduce((a, v) => ({ ...a, [v]: true}), {});
+        for( let lang in CodeEditor.utils ) CodeEditor.utils[lang] = CodeEditor.utils[lang].reduce((a, v) => ({ ...a, [v]: true}), {});
+        for( let lang in CodeEditor.types ) CodeEditor.types[lang] = CodeEditor.types[lang].reduce((a, v) => ({ ...a, [v]: true}), {});
+        for( let lang in CodeEditor.builtin ) CodeEditor.builtin[lang] = CodeEditor.builtin[lang].reduce((a, v) => ({ ...a, [v]: true}), {});
+        for( let lang in CodeEditor.statementsAndDeclarations ) CodeEditor.statementsAndDeclarations[lang] = CodeEditor.statementsAndDeclarations[lang].reduce((a, v) => ({ ...a, [v]: true}), {});
+        for( let lang in CodeEditor.symbols ) CodeEditor.symbols[lang] = CodeEditor.symbols[lang].reduce((a, v) => ({ ...a, [v]: true}), {});
 
         // Action keys
 
@@ -739,14 +673,18 @@ class CodeEditor {
             if(idx > 0) this.cursorToString( cursor, prestring );
             this.setScrollLeft( 0 );
 
+            // Merge cursors
+            this.mergeCursors( ln );
+
             if( e.shiftKey && !e.cancelShift )
             {
                 // Get last selection range
                 if( this.selection ) 
-                lastX += this.selection.chars;
+                    lastX += this.selection.chars;
 
                 if( !this.selection )
                     this.startSelection( cursor );
+
                 var string = this.code.lines[ ln ].substring( idx, lastX );
                 if( this.selection.sameLine() )
                     this.selection.selectInline( idx, cursor.line, this.measureString( string ) );
@@ -781,6 +719,9 @@ class CodeEditor {
 
             const last_char = ( this.code.clientWidth / this.charWidth )|0;
             this.setScrollLeft( cursor.position >= last_char ? ( cursor.position - last_char ) * this.charWidth : 0 );
+
+            // Merge cursors
+            this.mergeCursors( ln );
         });
 
         this.action( 'Enter', true, ( ln, cursor, e ) => {
@@ -806,6 +747,7 @@ class CodeEditor {
             this.code.lines.splice( cursor.line + 1, 0, "" );
             this.code.lines[cursor.line + 1] = this.code.lines[ ln ].substr( cursor.position ); // new line (below)
             this.code.lines[ ln ] = this.code.lines[ ln ].substr( 0, cursor.position ); // line above
+
             this.lineDown( cursor, true );
 
             // Check indentation
@@ -864,24 +806,20 @@ class CodeEditor {
                 if( e.shiftKey ) {
                     if( !this.selection )
                         this.startSelection( cursor );
+                } else {
+                    this.endSelection();
+                }
 
-                    this.lineDown( cursor );
-                    
-                    var letter = this.getCharAtPos( cursor );
-                    if( !letter ) {
-                        this.cursorToPosition( cursor, Math.max(this.code.lines[ cursor.line ].length - 1, 0) );
-                    }
+                const canGoDown = this.lineDown( cursor );
+                const letter = this.getCharAtPos( cursor );
+
+                // Go to end of line if out of range
+                if( !letter || !canGoDown ) {
+                    this.cursorToPosition( cursor, Math.max(this.code.lines[ cursor.line ].length, 0) );
+                }
 
+                if( e.shiftKey ) {
                     this.processSelection( e );
-                } else {
-    
-                    if( this.code.lines[ ln + 1 ] == undefined ) 
-                        return;
-                    this.endSelection();
-                    this.lineDown( cursor );
-                    // Go to end of line if out of line
-                    var letter = this.getCharAtPos( cursor );
-                    if( !letter ) this.actions['End'].callback(cursor.line, cursor, e);
                 }
             } 
             // Move down autocomplete selection
@@ -1212,25 +1150,36 @@ class CodeEditor {
         }
     }
 
-    _addCursor( line = 0, position = 0, isMain = false ) {
+    _addCursor( line = 0, position = 0, force, isMain = false ) {
+
+        // If cursor in that position exists, remove it instead..
+        const exists = Array.from( this.cursors.children ).find( v => v.position == position && v.line == line );
+        if( exists && !force )
+        {
+            if( !exists.isMain )
+                exists.remove();
 
+            return;
+        }
+         
         let cursor = document.createElement( 'div' );
         cursor.className = "cursor";
         cursor.innerHTML = "&nbsp;";
-        cursor.isMainCursor = isMain;
+        cursor.isMain = isMain;
         cursor._left = position * this.charWidth;
         cursor.style.left = "calc( " + cursor._left + "px + " + this.xPadding + " )";
         cursor._top = line * this.lineHeight;
         cursor.style.top = cursor._top + "px";
         cursor._position = position;
         cursor._line = line;
-        cursor.print = (function() { console.log( this, this._line, this._position ) }).bind( cursor );
+        cursor.print = (function() { console.log( this._line, this._position ) }).bind( cursor );
+        cursor.isLast = (function() { return this.cursors.lastChild == cursor; }).bind( this );
 
         Object.defineProperty( cursor, 'line', {
             get: (v) => { return cursor._line },
             set: (v) => { 
                 cursor._line = v;
-                if( cursor.isMainCursor ) this._setActiveLine( v );
+                if( cursor.isMain ) this._setActiveLine( v );
             }
         } );
 
@@ -1238,7 +1187,7 @@ class CodeEditor {
             get: (v) => { return cursor._position },
             set: (v) => { 
                 cursor._position = v;
-                if( cursor.isMainCursor ) this._updateDataInfoPanel( "@cursor-pos", "Col " + v );
+                if( cursor.isMain ) this._updateDataInfoPanel( "@cursor-pos", "Col " + v );
             }
         } );
 
@@ -1273,6 +1222,10 @@ class CodeEditor {
 
     _addUndoStep( cursor, force, deleteRedo = true )  {
 
+        // Only the mainc cursor stores undo steps
+        if( !cursor.isMain )
+            return;
+
         const d = new Date();
         const current = d.getTime();
 
@@ -1281,7 +1234,7 @@ class CodeEditor {
             if( !this._lastTime ) {
                 this._lastTime = current;
             } else {
-                if( ( current - this._lastTime ) > 3000 ){
+                if( ( current - this._lastTime ) > 2000 ){
                     this._lastTime = null;
                 } else {
                     // If time not enough, reset timer
@@ -1299,22 +1252,80 @@ class CodeEditor {
 
         this.code.undoSteps.push( {
             lines: LX.deepCopy( this.code.lines ),
-            cursor: this.saveCursor( cursor ),
-            line: cursor.line,
-            position: cursor.position
+            cursors: this.saveCursors()
         } );
     }
 
+    _doUndo( cursor ) {
+
+        if( !this.code.undoSteps.length )
+            return;
+
+        this._addRedoStep( cursor );
+
+        // Extract info from the last code state
+        const step = this.code.undoSteps.pop();
+
+        // Set old state lines
+        this.code.lines = step.lines;
+        this.processLines();
+
+        this._removeSecondaryCursors();
+
+        for( let i = 0; i < step.cursors.length; ++i )
+        {
+            var currentCursor = this.cursors.children[ i ];
+
+            // Generate new if needed
+            if( !currentCursor )
+                currentCursor = this._addCursor();
+
+            this.restoreCursor( currentCursor, step.cursors[ i ] );
+        }
+
+        this._hideActiveLine();
+    }
+
     _addRedoStep( cursor )  {
 
+        // Only the mainc cursor stores redo steps
+        if( !cursor.isMain )
+            return;
+
         this.code.redoSteps.push( {
             lines: LX.deepCopy( this.code.lines ),
-            cursor: this.saveCursor( cursor ),
-            line: cursor.line,
-            position: cursor.position
+            cursors: this.saveCursors()
         } );
     }
 
+    _doRedo( cursor ) {
+
+        if( !this.code.redoSteps.length )
+            return;
+
+        this._addUndoStep( cursor, true, false);
+
+        // Extract info from the next saved code state
+        const step = this.code.redoSteps.pop();
+
+        // Set old state lines
+        this.code.lines = step.lines;
+        this.processLines();
+
+        this._removeSecondaryCursors();
+
+        for( let i = 0; i < step.cursors.length; ++i )
+        {
+            var currentCursor = this.cursors.children[ i ];
+
+            // Generate new if needed
+            if( !currentCursor )
+                currentCursor = this._addCursor();
+
+            this.restoreCursor( currentCursor, step.cursors[ i ] );
+        }
+    }
+
     _changeLanguage( lang ) {
 
         this.code.language = lang;
@@ -1610,7 +1621,7 @@ class CodeEditor {
 
     processMouse( e ) {
 
-        if( !e.target.classList.contains('code') ) return;
+        if( !e.target.classList.contains('code') && !e.target.classList.contains('codetabsarea') ) return;
         if( !this.code ) return;
 
         var cursor = this._getCurrentCursor();
@@ -1618,11 +1629,8 @@ class CodeEditor {
         var mouse_pos = [(e.clientX - code_rect.x), (e.clientY - code_rect.y)];
 
         // Discard out of lines click...
-        if( e.type != 'contextmenu' )
-        {
-            var ln = (mouse_pos[1] / this.lineHeight)|0;
-            if(this.code.lines[ ln ] == undefined) return;
-        }
+        var ln = ( mouse_pos[ 1 ] / this.lineHeight ) | 0;
+        if( ln < 0 ) return;
 
         if( e.type == 'mousedown' )
         {
@@ -1730,11 +1738,12 @@ class CodeEditor {
         var position = [( e.clientX - code_rect.x ) + this.getScrollLeft(), (e.clientY - code_rect.y) + this.getScrollTop()];
         var ln = (position[ 1 ] / this.lineHeight)|0;
 
-        if( this.code.lines[ ln ] == undefined )
-            return;
+        // Check out of range line
+        const outOfRange = ln > this.code.lines.length - 1;
+        ln = Math.min( ln, this.code.lines.length - 1 );
 
         var ch = ( ( position[ 0 ] - parseInt( this.xPadding ) + 3) / this.charWidth )|0;
-        var string = this.code.lines[ ln ].slice( 0, ch );
+        var string = outOfRange ? this.code.lines[ ln ] : this.code.lines[ ln ].slice( 0, ch );
 
         // Move main cursor there...
         if( !e.altKey )
@@ -1764,8 +1773,7 @@ class CodeEditor {
         if( !this.selection )
             this.startSelection( cursor );
 
-        // Hide active line background
-        this.code.childNodes.forEach( e => e.classList.remove( 'active-line' ) );
+        this._hideActiveLine();
 
         // Update selection
         if( !keep_range )
@@ -1911,10 +1919,36 @@ class CodeEditor {
         }
     }
 
-    async processKey( event ) {
+    async processKey( e ) {
         
         const numCursors = this.cursors.childElementCount;
 
+        if( !this.code || e.srcElement.constructor != HTMLDivElement ) 
+        return;
+
+        const key = e.key ?? e.detail.key;
+        const target = e.detail.targetCursor;
+
+        // Global keys
+
+        if( this._processGlobalKeys( e, key ) ) {
+            // Stop propagation..
+            return;
+        }
+
+        // By cursor keys
+
+        if( target !== undefined )
+        {
+            this.processKeyAtTargetCursor( e, key, target );
+            return;
+        }
+
+        this._lastProcessedCursorIndex = null;
+
+        var lastProcessedCursor = null;
+        var cursorOffset = new LX.vec2( 0, 0 );
+
         for( var i = 0; i < numCursors; i++ )
         {
             let cursor = this.cursors.children[ i ];
@@ -1923,16 +1957,97 @@ class CodeEditor {
             if( !cursor )
                 break;
 
-            this.processKeyAtCursor( event, cursor );
+            // Arrows don't modify code lines.. And only add offset if in the same line
+            if( lastProcessedCursor && lastProcessedCursor.line == cursor.line && !key.includes( 'Arrow' ) )
+            {
+                cursor.position += cursorOffset.x;
+                cursor.line += cursorOffset.y;
+
+                this.relocateCursors();
+            }
+
+            lastProcessedCursor = this.saveCursor( cursor );
+            this._lastProcessedCursorIndex = i;
+
+            this._processKeyAtCursor( e, key, cursor );
+
+            cursorOffset.x += ( cursor.position - lastProcessedCursor.position );
+            cursorOffset.y += ( cursor.line - lastProcessedCursor.line );
         }
+
+        // Clear tmp
+
+        delete this._lastProcessedCursorIndex;
     }
 
-    async processKeyAtCursor( e, cursor ) {
+    async processKeyAtTargetCursor( e, key, targetIdx ) {
 
-        if( !this.code || e.srcElement.constructor != HTMLDivElement ) 
+        let cursor = this.cursors.children[ targetIdx ];
+
+        // We could delete secondary cursor while iterating..
+        if( !cursor )
             return;
 
-        var key = e.key ?? e.detail.key;
+        this._processKeyAtCursor( e, key, cursor );
+        this._processGlobalKeys( e, key );
+    }
+
+    _processGlobalKeys( e, key ) {
+
+        let cursor = this._getCurrentCursor();
+
+        if( e.ctrlKey || e.metaKey )
+        {
+            e.preventDefault();
+
+            switch( key.toLowerCase() ) {
+            case 'a': // select all
+                this.selectAll();
+                return true;
+            case 'c': // k+c, comment line
+                if( this.state.keyChain == 'k' ) {
+                    this._commentLines();
+                    return true;
+                }
+                return false;
+            case 'f': // find/search
+                this.showSearchBox();
+                return true;
+            case 'g': // find line
+                this.showSearchLineBox();
+                return true;
+            case 'k': // shortcut chain
+                this.state.keyChain = 'k';
+                return true;
+            case 's': // save
+                this.onsave( this.getText() );
+                return true;
+            case 'u': // k+u, uncomment line
+                if( this.state.keyChain == 'k' ) {
+                    this._uncommentLines();
+                    return true;
+                }
+                return false;
+            case 'y': // redo
+                this._doRedo( cursor );
+                return true;
+            case 'z': // undo
+                this._doUndo( cursor );
+                return true;
+            case '+': // increase size
+                this._increaseFontSize();
+                return true;
+            case '-': // decrease size
+                this._decreaseFontSize();
+                return true;
+            }
+        }
+
+        this.state.keyChain = null;
+        return false;
+    }
+
+    async _processKeyAtCursor( e, key, cursor ) {
 
         const skip_undo = e.detail.skip_undo ?? false;
 
@@ -1945,32 +2060,20 @@ class CodeEditor {
 
         // Check combinations
 
+        const isLastCursor = cursor.isLast();
+
         if( e.ctrlKey || e.metaKey )
         {
             switch( key.toLowerCase() ) {
-            case 'a': // select all
-                e.preventDefault();
-                this.selectAll( cursor );
-                break;
             case 'c': // copy
+                // TODO: COPY TEXT FROM EVERY CURSOR
                 this._copyContent( cursor );
                 return;
             case 'd': // duplicate line
                 e.preventDefault();
+                // TODO: UPDATE NEXT CURSOR ON MODIFY STATE
                 this._duplicateLine( lidx, cursor );
                 return;
-            case 'f': // find/search
-                e.preventDefault();
-                this.showSearchBox();
-                return;
-            case 'g': // find line
-                e.preventDefault();
-                this.showSearchLineBox();
-                return;
-            case 's': // save
-                e.preventDefault();
-                this.onsave( this.getText() );
-                return;
             case 'v': // paste
                 this._pasteContent( cursor );
                 return;
@@ -1978,39 +2081,13 @@ class CodeEditor {
                 this._cutContent( cursor );
                 this.hideAutoCompleteBox();
                 return;
-            case 'y': // redo
-                if( !this.code.redoSteps.length )
-                    return;
-                this._addUndoStep( cursor, true, false);
-                const redo_step = this.code.redoSteps.pop();
-                this.code.lines = redo_step.lines;
-                this.processLines();
-                this.restoreCursor( cursor, redo_step.cursor );
-                return;
-            case 'z': // undo
-                if( !this.code.undoSteps.length )
-                    return;
-                this._addRedoStep( cursor );
-                const undo_step = this.code.undoSteps.pop();
-                this.code.lines = undo_step.lines;
-                this.processLines();
-                this.restoreCursor( cursor, undo_step.cursor );
-                return;
-            case '+': // increase size
-                e.preventDefault();
-                this._increaseFontSize();
-                return;
-            case '-': // decrease size
-                e.preventDefault();
-                this._decreaseFontSize();
-                return;
             case 'arrowdown': // add cursor below only for the main cursor..
-                if( cursor.isMainCursor && this.code.lines[ lidx + 1 ] != undefined )
+                if( isLastCursor && this.code.lines[ lidx + 1 ] != undefined )
                 {
-                    var new_cursor = this._addCursor( cursor.line, cursor.position );
+                    var new_cursor = this._addCursor( cursor.line, cursor.position, true );
                     this.lineDown( new_cursor );
-                    return;
                 }
+                return;
             }
         }
 
@@ -2136,6 +2213,9 @@ class CodeEditor {
     async _pasteContent( cursor ) {
 
         let text = await navigator.clipboard.readText();
+
+        this._addUndoStep( cursor, true );
+
         this.appendText( text, cursor );
     }
 
@@ -2152,18 +2232,18 @@ class CodeEditor {
             if( this.selection ) this.selection.invertIfNecessary();
 
             const separator = "_NEWLINE_";
-            let code = this.code.lines.join(separator);
+            let code = this.code.lines.join( separator );
 
             // Get linear start index
             let index = 0;
             
-            for(let i = 0; i <= this.selection.fromY; i++)
-                index += (i == this.selection.fromY ? this.selection.fromX : this.code.lines[ i ].length);
+            for( let i = 0; i <= this.selection.fromY; i++ )
+                index += ( i == this.selection.fromY ? this.selection.fromX : this.code.lines[ i ].length );
 
             index += this.selection.fromY * separator.length; 
-            const num_chars = this.selection.chars + (this.selection.toY - this.selection.fromY) * separator.length;
-            const text = code.substr(index, num_chars);
-            const lines = text.split(separator);
+            const num_chars = this.selection.chars + ( this.selection.toY - this.selection.fromY ) * separator.length;
+            const text = code.substr( index, num_chars );
+            const lines = text.split( separator );
             text_to_copy = lines.join('\n');
         }
 
@@ -2221,6 +2301,114 @@ class CodeEditor {
         this.hideAutoCompleteBox();
     }
 
+    _commentLines() {
+
+        this.state.keyChain = null;
+
+        if( this.selection )
+        {
+            var cursor = this._getCurrentCursor();
+            this._addUndoStep( cursor, true );
+
+            const selectedLines = this.code.lines.slice( this.selection.fromY, this.selection.toY );
+            const minIdx = Math.min(...selectedLines.map( v => {
+                var idx = firstNonspaceIndex( v );
+                return idx < 0 ? 1e10 : idx;
+            } ));
+
+            for( var i = this.selection.fromY; i <= this.selection.toY; ++i )
+            {
+                this._commentLine( cursor, i, minIdx );
+            }
+        }
+        else
+        {
+            for( let cursor of this.cursors.children )
+            {
+                this._addUndoStep( cursor, true );
+                this._commentLine( cursor, cursor.line );
+            }
+        }
+
+        this.processLines();
+        this._hideActiveLine();
+    }
+
+    _commentLine( cursor, line, minNonspaceIdx ) {
+
+        const lang = this.languages[ this.highlight ];
+
+        if( !( lang.singleLineComments ?? true ))
+            return;
+
+        const token = ( lang.singleLineCommentToken ?? this.defaultSingleLineCommentToken ) + ' ';
+        const string = this.code.lines[ line ];
+
+        let idx = firstNonspaceIndex( string );
+        if( idx > -1 )
+        {
+            // Update idx using min of the selected lines (if necessary..)
+            idx = minNonspaceIdx ?? idx;
+
+            this.code.lines[ line ] = [
+                string.substring( 0, idx ),
+                token,
+                string.substring( idx )
+            ].join( '' );
+
+            this.cursorToString( cursor, token );
+        }
+    }
+
+    _uncommentLines() {
+
+        this.state.keyChain = null;
+
+        if( this.selection )
+        {
+            var cursor = this._getCurrentCursor();
+            this._addUndoStep( cursor, true );
+
+            for( var i = this.selection.fromY; i <= this.selection.toY; ++i )
+            {
+                this._uncommentLine( cursor, i );
+            }
+        }
+        else
+        {
+            for( let cursor of this.cursors.children )
+            {
+                this._addUndoStep( cursor, true );
+                this._uncommentLine( cursor, cursor.line );
+            }
+        }
+
+        this.processLines();
+        this._hideActiveLine();
+    }
+
+    _uncommentLine( cursor, line ) {
+
+        const lang = this.languages[ this.highlight ];
+
+        if( !( lang.singleLineComments ?? true ))
+            return;
+
+        const token = lang.singleLineCommentToken ?? this.defaultSingleLineCommentToken;
+        const string = this.code.lines[ line ];
+
+        if( string.includes( token ) )
+        {
+            this.code.lines[ line ] = string.replace( token + ' ', '' );
+
+            // try deleting token + space, and then if not, delete only the token
+            if( string.length == this.code.lines[ line ].length )
+                this.code.lines[ line ] = string.replace( token, '' );
+
+            this.cursorToString( cursor, 'X'.repeat( Math.abs( string.length - this.code.lines[ line ].length ) ), true );
+        }
+    }
+
     action( key, deleteSelection, fn ) {
 
         this.actions[ key ] = {
@@ -2254,9 +2442,8 @@ class CodeEditor {
 
     processLines( mode ) {
         
-        const start = performance.now();
-
         var code_html = "";
+        this._blockCommentCache.length = 0;
         
         // Reset all lines content
         this.code.innerHTML = "";
@@ -2301,6 +2488,13 @@ class CodeEditor {
 
     processLine( linenum, force ) {
 
+        // Check if we are in block comment sections..
+        if( !force && this._inBlockCommentSection( linenum ) )
+        {
+            this.processLines();
+            return;
+        }
+
         const lang = this.languages[ this.highlight ];
         const local_line_num =  this.toLocalLine( linenum );
         const gutter_line = "<span class='line-gutter'>" + (linenum + 1) + "</span>";
@@ -2309,6 +2503,7 @@ class CodeEditor {
             if( !force ) // Single line update
             {
                 this.code.childNodes[ local_line_num ].innerHTML = gutter_line + html;
+                this._setActiveLine( linenum );
                 this._clearTmpVariables();
             }
             else // Update all lines at once
@@ -2335,6 +2530,9 @@ class CodeEditor {
             return UPDATE_LINE( linestring );
         }
 
+        this._currentLineNumber = linenum;
+        this._currentLineString = linestring;
+
         const tokensToEvaluate = this._getTokensFromLine( linestring );
 
         if( !tokensToEvaluate.length )
@@ -2365,7 +2563,7 @@ class CodeEditor {
             {
                 const blockCommentsToken = ( lang.blockCommentsTokens ?? this.defaultBlockCommentTokens )[ 0 ];
                 if( token.substr( 0, blockCommentsToken.length ) == blockCommentsToken )
-                    this._buildingBlockComment = true;
+                    this._buildingBlockComment = linenum;
             }
 
             line_inner_html += this._evaluateToken( {
@@ -2403,19 +2601,12 @@ class CodeEditor {
                 var matches = (linestring.substring( 0, idx ).match( re ) || []);
                 return (matches.length % 2) !== 0; 
             } );
-            err |= stringKeys.some( function(v) { 
-                var re = new RegExp( v, "g" ); 
-                var matches = (linestring.substring( idx ).match( re ) || []);
-                return (matches.length % 2) !== 0; 
-            } );
             return err ? undefined : idx;
         }
     }
 
     _getTokensFromLine( linestring, skipNonWords ) {
 
-        this._currentLineString = linestring;
-
         // Check if line comment
         const ogLine = linestring;
         const hasCommentIdx = this._lineHasComment( linestring );
@@ -2472,12 +2663,12 @@ class CodeEditor {
 
         if( this.highlight == 'C++' || this.highlight == 'CSS' )
         {
-            var idx = tokens.slice( offset ).findIndex( ( value, index ) => this.isNumber( value ) );
+            var idx = tokens.slice( offset ).findIndex( ( value, index ) => this._isNumber( value ) );
             if( idx > -1 )
             {
                 idx += offset; // Add offset to compute within the whole array of tokens
                 let data = tokens[ idx ] + tokens[ ++idx ];
-                while( this.isNumber( data ) )
+                while( this._isNumber( data ) )
                 {
                     tokens[ idx - 1 ] += tokens[ idx ];
                     tokens.splice( idx, 1 );
@@ -2525,7 +2716,7 @@ class CodeEditor {
         // Manage strings
         this._stringEnded = false;
 
-        if( usePreviousTokenToCheckString || ( !this._buildingBlockComment && ( lang.tags ?? false ? ( this._enclosedByTokens( token, tokenIndex, '<', '>' ) ) : true ) ) )
+        if( usePreviousTokenToCheckString || ( this._buildingBlockComment === undefined && ( lang.tags ?? false ? ( this._enclosedByTokens( token, tokenIndex, '<', '>' ) ) : true ) ) )
         {
             const checkIfStringEnded = t => {
                 const idx = Object.values( customStringKeys ).indexOf( t );
@@ -2574,22 +2765,22 @@ class CodeEditor {
             else if( this._buildingString != undefined )
                 discardToken = this._appendStringToken( token );
             
-            else if( this._mustHightlightWord( token, this.keywords ) && ( lang.tags ?? false ? ( this._enclosedByTokens( token, tokenIndex, '<', '>' ) ) : true ) )
+            else if( this._mustHightlightWord( token, CodeEditor.keywords ) && ( lang.tags ?? false ? ( this._enclosedByTokens( token, tokenIndex, '<', '>' ) ) : true ) )
                 token_classname = "cm-kwd";
 
-            else if( this._mustHightlightWord( token, this.builtin ) && ( lang.tags ?? false ? ( this._enclosedByTokens( token, tokenIndex, '<', '>' ) ) : true ) )
+            else if( this._mustHightlightWord( token, CodeEditor.builtin ) && ( lang.tags ?? false ? ( this._enclosedByTokens( token, tokenIndex, '<', '>' ) ) : true ) )
                 token_classname = "cm-bln";
 
-            else if( this._mustHightlightWord( token, this.statementsAndDeclarations ) )
+            else if( this._mustHightlightWord( token, CodeEditor.statementsAndDeclarations ) )
                 token_classname = "cm-std";
 
-            else if( this._mustHightlightWord( token, this.symbols ) )
+            else if( this._mustHightlightWord( token, CodeEditor.symbols ) )
                 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,'') ) )
+            else if( this._isNumber( token ) || this._isNumber( token.replace(/[px]|[em]|%/g,'') ) )
                 token_classname = "cm-dec";
 
             else if( this._isCSSClass( token, prev, next ) )
@@ -2601,7 +2792,7 @@ class CodeEditor {
             else if ( highlight == 'batch' && ( token == '@' || prev == ':' || prev == '@' ) )
                 token_classname = "cm-kwd";
 
-            else if ( highlight == 'cpp' && token.includes( '#' ) ) // C++ preprocessor
+            else if ( [ 'cpp', '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++
@@ -2626,9 +2817,10 @@ class CodeEditor {
                 token_classname = "cm-mtd";
 
 
-            if( usesBlockComments && this._buildingBlockComment 
+            if( usesBlockComments && this._buildingBlockComment != undefined 
                 && token.substr( 0, blockCommentsTokens[ 1 ].length ) == blockCommentsTokens[ 1 ] )
             {
+                this._blockCommentCache.push( new LX.vec2( this._buildingBlockComment, this._currentLineNumber ) );
                 delete this._buildingBlockComment;
             }
 
@@ -2677,16 +2869,27 @@ class CodeEditor {
     _enclosedByTokens( token, tokenIndex, tagStart, tagEnd ) {
 
         const tokenStartIndex = this._currentTokenPositions[ tokenIndex ];
-        const tagStartIndex = indexOfFrom(this._currentLineString, tagStart, tokenStartIndex, true );
+        const tagStartIndex = indexOfFrom( this._currentLineString, tagStart, tokenStartIndex, true );
         if( tagStartIndex < 0 ) // Not found..
             return;
-        const tagEndIndex = indexOfFrom(this._currentLineString, tagEnd, tokenStartIndex );
+        const tagEndIndex = indexOfFrom( this._currentLineString, tagEnd, tokenStartIndex );
         if( tagEndIndex < 0 ) // Not found..
             return;
 
         return ( tagStartIndex < tokenStartIndex ) && ( tagEndIndex >= ( tokenStartIndex + token.length ) );
     }
 
+    _inBlockCommentSection( line ) {
+
+        for( var section of this._blockCommentCache )
+        {
+            if( line >= section.x && line <= section.y )
+                return true;
+        }
+
+        return false;
+    }
+
     _isCSSClass( token, prev, next ) {
 
         if( this.highlight != 'CSS' )
@@ -2697,20 +2900,26 @@ class CodeEditor {
                 || ( token[ 0 ] == '#' && prev != ':' ) );
     }
 
-    isNumber( token ) {
+    _isNumber( token ) {
 
         if(this.highlight == 'C++')
         {
             if( token.lastChar == 'f' )
-                return this.isNumber( token.substring(0, token.length - 1) )
+                return this._isNumber( token.substring(0, token.length - 1) )
             else if( token.lastChar == 'u' )
-                return !(token.includes('.')) && this.isNumber( token.substring(0, token.length - 1) );
+                return !(token.includes('.')) && this._isNumber( token.substring(0, token.length - 1) );
+        }
+
+        else if(this.highlight == 'WGSL')
+        {
+            if( token.lastChar == 'u' )
+                return !(token.includes('.')) && this._isNumber( token.substring(0, token.length - 1) );
         }
 
         else if(this.highlight == 'CSS')
         {
             if( token.lastChar == '%' )
-                return this.isNumber( token.substring(0, token.length - 1) )
+                return this._isNumber( token.substring(0, token.length - 1) )
         }
         
         return token.length && token != ' ' && !Number.isNaN(+token);
@@ -2719,7 +2928,7 @@ class CodeEditor {
     _isType( token, prev, next ) {
         
         // Common case
-        if( this._mustHightlightWord( token, this.types ) )
+        if( this._mustHightlightWord( token, CodeEditor.types ) )
             return true;
 
         if( this.highlight == 'JavaScript' )
@@ -2732,11 +2941,12 @@ class CodeEditor {
         }
         else if ( this.highlight == 'WGSL' )
         {
-            const is_kwd = !this._mustHightlightWord( token, this.keywords );
-            return (prev == 'struct' && next == '{') || 
-            ( is_kwd && 
+            const not_kwd = !this._mustHightlightWord( token, CodeEditor.keywords );
+            return  (prev == 'struct' && next == '{') || 
+                    (not_kwd && prev == ':' && next == ';') || 
+            ( not_kwd && 
                 ( prev == ':' && next == ')' || prev == ':' && next == ',' || prev == '>' && next == '{' 
-                    || prev == '<' && next == ',' || prev == '<' && next == '>' || prev == '>' && !next ));
+                    || prev == '<' && next == ',' || prev == '<' && next == '>' || prev == '>' && token != ';' && !next ));
         }
     }
 
@@ -2804,6 +3014,7 @@ class CodeEditor {
             return false;
     
         cursor.line++;
+
         this.cursorToBottom( cursor, resetLeft );
 
         return true;
@@ -2876,16 +3087,25 @@ class CodeEditor {
         delete this._lastSelectionKeyDir;
     }
 
-    selectAll( cursor ) {
+    selectAll() {
+
+        // Use main cursor
+        this._removeSecondaryCursors();
 
+        var cursor = this._getCurrentCursor();
         this.resetCursorPos( CodeEditor.CURSOR_LEFT | CodeEditor.CURSOR_TOP, cursor );
+
         this.startSelection( cursor );
+
         const nlines = this.code.lines.length - 1;
         this.selection.toX = this.code.lines[ nlines ].length;
         this.selection.toY = nlines;
+
         this.cursorToPosition( cursor, this.selection.toX );
         this.cursorToLine( cursor, this.selection.toY );
+
         this.processSelection( null, true );
+
         this.hideAutoCompleteBox();
     }
 
@@ -2988,22 +3208,51 @@ class CodeEditor {
 
     saveCursor( cursor, state = {} ) {
 
-        state.top = cursor._top;
-        state.left = cursor._left;
-        state.line = cursor.line;
         state.position = cursor.position;
-
+        state.line = cursor.line;
         return state;
     }
 
+    saveCursors() {
+
+        var cursors = [];
+
+        for( let cursor of this.cursors.children )
+        {
+            cursors.push( this.saveCursor( cursor ) );
+        }
+
+        return cursors;
+    }
+
+    relocateCursors() {
+
+        for( let cursor of this.cursors.children )
+        {
+            cursor._left = cursor.position * this.charWidth;
+            cursor.style.left = "calc(" + cursor._left + "px + " + this.xPadding + ")";
+            cursor._top = cursor.line * this.lineHeight;
+            cursor.style.top = "calc(" + cursor._top + "px)";
+        }
+    }
+
+    mergeCursors( line ) {
+
+        console.assert( line >= 0 );
+        const cursorsInLine = Array.from( this.cursors.children ).filter( v => v.line == line );
+
+        while( cursorsInLine.length > 1 )
+            cursorsInLine.pop().remove();
+    }
+
     restoreCursor( cursor, state ) {
 
-        cursor.line = state.line ?? 0;
         cursor.position = state.position ?? 0;
+        cursor.line = state.line ?? 0;
 
-        cursor._left = state.left ?? 0;
+        cursor._left = cursor.position * this.charWidth;
         cursor.style.left = "calc(" + cursor._left + "px + " + this.xPadding + ")";
-        cursor._top = state.top ?? 0;
+        cursor._top = cursor.line * this.lineHeight;
         cursor.style.top = "calc(" + cursor._top + "px)";
     }
 
@@ -3038,7 +3287,8 @@ class CodeEditor {
         for( var i = 0; i < n; ++i ) {
             this.root.dispatchEvent( new CustomEvent( 'keydown', { 'detail': {
                 skip_undo: true,
-                key: ' '
+                key: ' ',
+                targetCursor: this._lastProcessedCursorIndex
             }}));
         }
     }
@@ -3324,11 +3574,11 @@ class CodeEditor {
 
         // Add language special keys...
         suggestions = suggestions.concat(   
-            Object.keys( this.builtin[ this.highlight ] ?? {} ),
-            Object.keys( this.keywords[ this.highlight ] ?? {} ),
-            Object.keys( this.statementsAndDeclarations[ this.highlight ] ?? {} ),
-            Object.keys( this.types[ this.highlight ] ?? {} ),
-            Object.keys( this.utils[ this.highlight ] ?? {} )
+            Object.keys( CodeEditor.builtin[ this.highlight ] ?? {} ),
+            Object.keys( CodeEditor.keywords[ this.highlight ] ?? {} ),
+            Object.keys( CodeEditor.statementsAndDeclarations[ this.highlight ] ?? {} ),
+            Object.keys( CodeEditor.types[ this.highlight ] ?? {} ),
+            Object.keys( CodeEditor.utils[ this.highlight ] ?? {} )
         );
 
         // Add words in current tab plus remove current word
@@ -3350,9 +3600,9 @@ class CodeEditor {
 
             var icon = document.createElement( 'a' );
             
-            if( this._mustHightlightWord( s, this.utils ) )
+            if( this._mustHightlightWord( s, CodeEditor.utils ) )
                 icon.className = "fa fa-cube";
-            else if( this._mustHightlightWord( s, this.types ) )
+            else if( this._mustHightlightWord( s, CodeEditor.types ) )
                 icon.className = "fa fa-code";
             else
                 icon.className = "fa fa-font";
@@ -3600,7 +3850,7 @@ class CodeEditor {
 
     goToLine( line ) {
 
-        if( !this.isNumber( line ) )
+        if( !this._isNumber( line ) )
             return;
 
         this.codeScroller.scrollTo( 0, Math.max( line - 15 ) * this.lineHeight );
@@ -3647,6 +3897,11 @@ class CodeEditor {
         }
     }
 
+    _hideActiveLine() {
+
+        this.code.querySelectorAll( '.active-line' ).forEach( e => e.classList.remove( 'active-line' ) );
+    }
+
     _increaseFontSize() {
 
         // Change font size
@@ -3664,7 +3919,13 @@ class CodeEditor {
         r.style.setProperty( "--code-editor-row-height", row_pixels + "px" );
         this.lineHeight = row_pixels;
 
-        this.processLines(); // ... it's necessary?
+        // Relocate cursors
+
+        this.relocateCursors();
+
+        // Resize the code area
+
+        this.processLines();
     }
 
     _decreaseFontSize() {
@@ -3684,12 +3945,19 @@ class CodeEditor {
         r.style.setProperty( "--code-editor-row-height", row_pixels + "px" );
         this.lineHeight = row_pixels;
 
-        this.processLines(); // ... it's necessary?
+        // Relocate cursors
+
+        this.relocateCursors();
+
+        // Resize the code area
+
+        this.processLines();
     }
 
     _clearTmpVariables() {
 
         delete this._currentLineString;
+        delete this._currentLineNumber;
         delete this._buildingString; 
         delete this._pendingString;
         delete this._buildingBlockComment;
@@ -3697,6 +3965,87 @@ class CodeEditor {
     }
 }
 
+CodeEditor.keywords = {
+
+    'JavaScript': ['var', 'let', 'const', 'this', 'in', 'of', 'true', 'false', 'new', 'function', 'NaN', 'static', 'class', 'constructor', 'null', 'typeof', 'debugger', 'abstract',
+                  'arguments', 'extends', 'instanceof'],
+    'C++': ['int', 'float', 'double', 'bool', 'char', 'wchar_t', 'const', 'static_cast', 'dynamic_cast', 'new', 'delete', 'void', 'true', 'false', 'auto', 'struct', 'typedef', 'nullptr', 
+            'NULL', 'unsigned', 'namespace'],
+    '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',
+            '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'],
+    'Rust': ['as', 'const', 'crate', 'enum', 'extern', 'false', 'fn', 'impl', 'in', 'let', 'mod', 'move', 'mut', 'pub', 'ref', 'self', 'Self', 'static', 'struct', 'super', 'trait', 'true', 
+             'type', 'unsafe', 'use', 'where', 'abstract', 'become', 'box', 'final', 'macro', 'override', 'priv', 'typeof', 'unsized', 'virtual'],
+    'Python': ['False', 'def', 'None', 'True', 'in', 'is', 'and', 'lambda', 'nonlocal', 'not', 'or'],
+    'Batch': ['set', 'SET', 'echo', 'ECHO', 'off', 'OFF', 'del', 'DEL', 'defined', 'DEFINED', 'setlocal', 'SETLOCAL', 'enabledelayedexpansion', 'ENABLEDELAYEDEXPANSION', 'driverquery', 
+              'DRIVERQUERY', 'print', 'PRINT'],
+    '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'],
+};
+
+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'],
+    'WGSL': ['textureSample'],
+    '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']
+};
+
+CodeEditor.types = {
+
+    'JavaScript': ['Object', 'String', 'Function', 'Boolean', 'Symbol', 'Error', 'Number', 'TextEncoder', 'TextDecoder'],
+    'Rust': ['u128'],
+    'Python': ['int', 'type', 'float', 'map', 'list', 'ArithmeticError', 'AssertionError', 'AttributeError', 'Exception', 'EOFError', 'FloatingPointError', 'GeneratorExit', 
+              'ImportError', 'IndentationError', 'IndexError', 'KeyError', 'KeyboardInterrupt', 'LookupError', 'MemoryError', 'NameError', 'NotImplementedError', 'OSError',
+              'OverflowError', 'ReferenceError', 'RuntimeError', 'StopIteration', 'SyntaxError', 'TabError', 'SystemError', 'SystemExit', 'TypeError', 'UnboundLocalError', 
+              'UnicodeError', 'UnicodeEncodeError', 'UnicodeDecodeError', 'UnicodeTranslateError', 'ValueError', 'ZeroDivisionError'],
+    'C++': ['uint8_t', 'uint16_t', 'uint32_t']
+};
+
+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
+};
+
+CodeEditor.statementsAndDeclarations = {
+
+    'JavaScript': ['for', 'if', 'else', 'case', 'switch', 'return', 'while', 'continue', 'break', 'do', 'import', 'from', 'throw', 'async', 'try', 'catch', 'await'],
+    'CSS': ['@', 'import'],
+    'C++': ['std', 'for', 'if', 'else', 'return', 'continue', 'break', 'case', 'switch', 'while', 'using', 'glm', 'spdlog'],
+    'GLSL': ['for', 'if', 'else', 'return', 'continue', 'break'],
+    'WGSL': ['const','for', 'if', 'else', 'return', 'continue', 'break', 'storage', 'read', 'read_write', 'uniform', 'function', 'workgroup'],
+    'Rust': ['break', 'else', 'continue', 'for', 'if', 'loop', 'match', 'return', 'while', 'do', 'yield'],
+    'Python': ['if', 'raise', 'del', 'import', 'return', 'elif', 'try', 'else', 'while', 'as', 'except', 'with', 'assert', 'finally', 'yield', 'break', 'for', 'class', 'continue', 
+              'global', 'pass'],
+    'Batch': ['if', 'IF', 'for', 'FOR', 'in', 'IN', 'do', 'DO', 'call', 'CALL', 'goto', 'GOTO', 'exit', 'EXIT']
+};
+
+CodeEditor.symbols = {
+
+    'JavaScript': ['<', '>', '[', ']', '{', '}', '(', ')', ';', '=', '|', '||', '&', '&&', '?', '??'],
+    'C++': ['<', '>', '[', ']', '{', '}', '(', ')', ';', '=', '|', '||', '&', '&&', '?', '::', '*', '-', '+'],
+    'JSON': ['[', ']', '{', '}', '(', ')'],
+    'GLSL': ['[', ']', '{', '}', '(', ')'],
+    'WGSL': ['[', ']', '{', '}', '(', ')', '->'],
+    'CSS': ['{', '}', '(', ')', '*'],
+    'Rust': ['<', '>', '[', ']', '(', ')', '='],
+    'Python': ['<', '>', '[', ']', '(', ')', '='],
+    'Batch': ['[', ']', '(', ')', '%'],
+    'HTML': ['<', '>', '/']
+};
+
 LX.CodeEditor = CodeEditor;
 
 export { CodeEditor };