lexgui 0.1.22 → 0.1.23

package/build/components/codeeditor.js

@@ -201,8 +201,8 @@ class CodeEditor {
     static WORD_TYPE_METHOD = 0;
     static WORD_TYPE_CLASS  = 1;
 
-    static CODE_MAX_FONT_SIZE = 20;
-    static CODE_MIN_FONT_SIZE = 11;
+    static CODE_MAX_FONT_SIZE = 22;
+    static CODE_MIN_FONT_SIZE = 9;
 
     /**
      * @param {*} options
@@ -333,42 +333,15 @@ class CodeEditor {
 
         // Add main cursor
         {
-            var cursor = document.createElement( 'div' );
-            cursor.className = "cursor";
-            cursor.innerHTML = " ";
-            cursor._left = 0;
-            cursor.style.left = this.xPadding;
-            cursor._top = 0;
-            cursor.style.top = cursor._top + "px";
-            cursor._position = 0;
-            cursor._line = 0;
-            cursor.print = (function() { console.log( this.line, this.position ) }).bind( cursor );
+            this._addCursor( 0, 0, true );
 
             Object.defineProperty( this, 'line', {
-                get: (v) => { return cursor.line }
+                get: (v) => { return this._getCurrentCursor().line }
             } );
-
+    
             Object.defineProperty( this, 'position', {
-                get: (v) => { return cursor.position }
-            } );
-
-            Object.defineProperty( cursor, 'line', {
-                get: (v) => { return this._line },
-                set: (v) => { 
-                    this._line = v;
-                    this._setActiveLine( v );
-                }
+                get: (v) => { return this._getCurrentCursor().position }
             } );
-
-            Object.defineProperty( cursor, 'position', {
-                get: (v) => { return this._position },
-                set: (v) => { 
-                    this._position = v;
-                    this._updateDataInfoPanel( "@cursor-pos", "Col " + v );
-                }
-            } );
-
-            this.cursors.appendChild( cursor );
         }
 
         // Scroll stuff
@@ -534,6 +507,7 @@ class CodeEditor {
         this.tabSpaces = 4;
         this.maxUndoSteps = 16;
         this.lineHeight = 20;
+        this.charWidth = 7; // To update later depending on size..
         this.defaultSingleLineCommentToken = '//';
         this.defaultBlockCommentTokens = [ '/*', '*/' ];
         this._lastTime = null;
@@ -624,6 +598,7 @@ class CodeEditor {
         };
         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'],
@@ -659,6 +634,7 @@ class CodeEditor {
         this.action( 'Escape', false, ( ln, cursor, e ) => {
             this.hideAutoCompleteBox();
             this.hideSearchBox();
+            this._removeSecondaryCursors();
         });
 
         this.action( 'Backspace', false, ( ln, cursor, e ) => {
@@ -704,7 +680,7 @@ class CodeEditor {
                 } 
                 else if( this.code.lines[ ln - 1 ] != undefined ) {
 
-                    this.lineUp();
+                    this.lineUp( cursor );
                     e.cancelShift = true;
                     this.actions[ 'End' ].callback( cursor.line, cursor, e );
                     // Move line on top
@@ -759,7 +735,7 @@ class CodeEditor {
             const prestring = this.code.lines[ ln ].substring( 0, idx );
             let lastX = cursor.position;
 
-            this.resetCursorPos( CodeEditor.CURSOR_LEFT );
+            this.resetCursorPos( CodeEditor.CURSOR_LEFT, cursor );
             if(idx > 0) this.cursorToString( cursor, prestring );
             this.setScrollLeft( 0 );
 
@@ -793,14 +769,14 @@ class CodeEditor {
                     this.selection.selectInline(cursor.position, cursor.line, this.measureString( string ));
                 else
                 {
-                    this.resetCursorPos( CodeEditor.CURSOR_LEFT );
+                    this.resetCursorPos( CodeEditor.CURSOR_LEFT, cursor );
                     this.cursorToString( cursor, this.code.lines[ ln ] );            
                     this.processSelection( e );
                 }
             } else if( !e.keepSelection )
                 this.endSelection();
 
-            this.resetCursorPos( CodeEditor.CURSOR_LEFT );
+            this.resetCursorPos( CodeEditor.CURSOR_LEFT, cursor );
             this.cursorToString( cursor, this.code.lines[ ln ] );
 
             const last_char = ( this.code.clientWidth / this.charWidth )|0;
@@ -856,7 +832,7 @@ class CodeEditor {
                     if( !this.selection )
                         this.startSelection( cursor );
 
-                    this.lineUp();
+                    this.lineUp( cursor );
 
                     var letter = this.getCharAtPos( cursor );
                     if( !letter ) {
@@ -867,7 +843,7 @@ class CodeEditor {
 
                 } else {
                     this.endSelection();
-                    this.lineUp();
+                    this.lineUp( cursor );
                     // Go to end of line if out of line
                     var letter = this.getCharAtPos( cursor );
                     if( !letter ) this.actions['End'].callback( cursor.line, cursor, e );
@@ -960,7 +936,7 @@ class CodeEditor {
                         }
                         else {
                             this.selection.invertIfNecessary();
-                            this.resetCursorPos( CodeEditor.CURSOR_LEFT | CodeEditor.CURSOR_TOP );
+                            this.resetCursorPos( CodeEditor.CURSOR_LEFT | CodeEditor.CURSOR_TOP, cursor );
                             this.cursorToLine( cursor, this.selection.fromY, true );
                             this.cursorToPosition( cursor, this.selection.fromX );
                             this.endSelection();
@@ -986,7 +962,7 @@ class CodeEditor {
 
             // Nothing to do..
             if( cursor.line == this.code.lines.length - 1 && 
-                cursor.position == this.code.lines[ cursor.line - 1 ].length )
+                cursor.position == this.code.lines[ cursor.line ].length )
             return;
 
             if( e.metaKey ) { // Apple devices (Command)
@@ -1002,7 +978,7 @@ class CodeEditor {
                 // Selections...
                 if( e.shiftKey ) { if( !this.selection ) this.startSelection( cursor ); }
                 else this.endSelection();
-                this.cursorToString( cursor, substr);
+                this.cursorToString( cursor, substr );
                 if( e.shiftKey ) this.processSelection( e );
             } else {
                 var letter = this.getCharAtPos( cursor );
@@ -1020,7 +996,7 @@ class CodeEditor {
                         else 
                         {
                             this.selection.invertIfNecessary();
-                            this.resetCursorPos( CodeEditor.CURSOR_LEFT | CodeEditor.CURSOR_TOP );
+                            this.resetCursorPos( CodeEditor.CURSOR_LEFT | CodeEditor.CURSOR_TOP, cursor );
                             this.cursorToLine( cursor, this.selection.toY );
                             this.cursorToPosition( cursor, this.selection.toX );
                             this.endSelection();
@@ -1106,7 +1082,8 @@ class CodeEditor {
     }
 
     getText( min ) {
-        return this.code.lines.join(min ? ' ' : '\n');
+
+        return this.code.lines.join( min ? ' ' : '\n' );
     }
 
     // This can be used to empty all text...
@@ -1115,7 +1092,9 @@ class CodeEditor {
         let new_lines = text.split( '\n' );
         this.code.lines = [].concat( new_lines );
 
-        let cursor = this.cursors.children[ 0 ];
+        this._removeSecondaryCursors();
+
+        let cursor = this._getCurrentCursor( true );
         let lastLine = new_lines.pop();
 
         this.cursorToLine( cursor, new_lines.length ); // Already substracted 1
@@ -1128,9 +1107,8 @@ class CodeEditor {
         }
     }
 
-    appendText( text ) {
+    appendText( text, cursor ) {
 
-        let cursor = this.cursors.children[ 0 ];
         let lidx = cursor.line;
 
         if( this.selection ) {
@@ -1234,6 +1212,65 @@ class CodeEditor {
         }
     }
 
+    _addCursor( line = 0, position = 0, isMain = false ) {
+
+        let cursor = document.createElement( 'div' );
+        cursor.className = "cursor";
+        cursor.innerHTML = " ";
+        cursor.isMainCursor = 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 );
+
+        Object.defineProperty( cursor, 'line', {
+            get: (v) => { return cursor._line },
+            set: (v) => { 
+                cursor._line = v;
+                if( cursor.isMainCursor ) this._setActiveLine( v );
+            }
+        } );
+
+        Object.defineProperty( cursor, 'position', {
+            get: (v) => { return cursor._position },
+            set: (v) => { 
+                cursor._position = v;
+                if( cursor.isMainCursor ) this._updateDataInfoPanel( "@cursor-pos", "Col " + v );
+            }
+        } );
+
+        this.cursors.appendChild( cursor );
+
+        return cursor;
+    }
+
+    _getCurrentCursor( removeOthers ) {
+
+        if( removeOthers )
+        {
+            this._removeSecondaryCursors();
+        }
+
+        return this.cursors.children[ 0 ];
+    }
+
+    _removeSecondaryCursors() {
+
+        while( this.cursors.childElementCount > 1 )
+            this.cursors.lastChild.remove();
+    }
+
+    _logCursors() {
+
+        for( let cursor of this.cursors.children )
+        {
+            cursor.print();
+        }
+    }
+
     _addUndoStep( cursor, force, deleteRedo = true )  {
 
         const d = new Date();
@@ -1260,8 +1297,6 @@ class CodeEditor {
             this.code.redoSteps.length = 0;
         }
 
-        var cursor = cursor ?? this.cursors.children[ 0 ];
-
         this.code.undoSteps.push( {
             lines: LX.deepCopy( this.code.lines ),
             cursor: this.saveCursor( cursor ),
@@ -1272,8 +1307,6 @@ class CodeEditor {
 
     _addRedoStep( cursor )  {
 
-        var cursor = cursor ?? this.cursors.children[ 0 ];
-
         this.code.redoSteps.push( {
             lines: LX.deepCopy( this.code.lines ),
             cursor: this.saveCursor( cursor ),
@@ -1374,7 +1407,7 @@ class CodeEditor {
             ext == 'css' ? "fa-solid fa-hashtag dodgerblue" : 
             ext == 'xml' ? "fa-solid fa-rss orange" : 
             ext == 'bat' ? "fa-brands fa-windows lightblue" : 
-            [ 'js', 'py', 'json', 'cpp', 'rs' ].indexOf( ext ) > -1 ? "images/" + ext + ".png" : 
+            [ 'js', 'py', 'json', 'cpp', 'rs', 'md' ].indexOf( ext ) > -1 ? "images/" + ext + ".png" : 
             !isNewTabButton ? "fa-solid fa-align-left gray" : undefined;
     }
 
@@ -1388,7 +1421,7 @@ class CodeEditor {
         });
     }
 
-    _onSelectTab( isNewTabButton, event, name,  ) {
+    _onSelectTab( isNewTabButton, event, name ) {
 
         if( isNewTabButton )
         {
@@ -1396,7 +1429,9 @@ class CodeEditor {
             return;
         }
 
-        var cursor = cursor ?? this.cursors.children[ 0 ];
+        this._removeSecondaryCursors();
+        var cursor = this._getCurrentCursor( true );
+
         this.saveCursor( cursor, this.code.cursorState );    
 
         this.code = this.loadedTabs[ name ];
@@ -1573,12 +1608,12 @@ class CodeEditor {
         }
     }
 
-    processMouse(e) {
+    processMouse( e ) {
 
         if( !e.target.classList.contains('code') ) return;
         if( !this.code ) return;
 
-        var cursor = this.cursors.children[ 0 ];
+        var cursor = this._getCurrentCursor();
         var code_rect = this.code.getBoundingClientRect();
         var mouse_pos = [(e.clientX - code_rect.x), (e.clientY - code_rect.y)];
 
@@ -1630,7 +1665,7 @@ class CodeEditor {
             {
                 case LX.MOUSE_DOUBLE_CLICK:
                     const [word, from, to] = this.getWordAtPos( cursor );
-                    this.resetCursorPos( CodeEditor.CURSOR_LEFT );
+                    this.resetCursorPos( CodeEditor.CURSOR_LEFT, cursor );
                     this.cursorToPosition( cursor, from );
                     this.startSelection( cursor );
                     this.selection.selectInline( from, cursor.line, this.measureString( word ) );
@@ -1638,7 +1673,7 @@ class CodeEditor {
                     break;
                 // Select entire line
                 case LX.MOUSE_TRIPLE_CLICK:
-                    this.resetCursorPos( CodeEditor.CURSOR_LEFT );
+                    this.resetCursorPos( CodeEditor.CURSOR_LEFT, cursor );
                     e._shiftKey = true;
                     this.actions['End'].callback(cursor.line, cursor, e);
                     this._tripleClickSelection = true;
@@ -1654,11 +1689,11 @@ class CodeEditor {
                 return;
 
             LX.addContextMenu( null, e, m => {
-                m.add( "Copy", () => {  this._copyContent(); } );
+                m.add( "Copy", () => {  this._copyContent( cursor ); } );
                 if( !this.disableEdition )
                 {
-                    m.add( "Cut", () => {  this._cutContent(); } );
-                    m.add( "Paste", () => {  this._pasteContent(); } );
+                    m.add( "Cut", () => {  this._cutContent( cursor ); } );
+                    m.add( "Paste", () => {  this._pasteContent( cursor ); } );
                     m.add( "" );
                     m.add( "Format/JSON", () => { 
                         let json = this.toJSONFormat( this.getText() );
@@ -1690,26 +1725,39 @@ class CodeEditor {
 
     processClick( e ) {
 
-        var cursor = this.cursors.children[ 0 ];
+        var cursor = this._getCurrentCursor();
         var code_rect = this.codeScroller.getBoundingClientRect();
         var position = [( e.clientX - code_rect.x ) + this.getScrollLeft(), (e.clientY - code_rect.y) + this.getScrollTop()];
         var ln = (position[ 1 ] / this.lineHeight)|0;
 
         if( this.code.lines[ ln ] == undefined )
             return;
-        
-        this.cursorToLine( cursor, ln, true );
-        
+
         var ch = ( ( position[ 0 ] - parseInt( this.xPadding ) + 3) / this.charWidth )|0;
         var string = this.code.lines[ ln ].slice( 0, ch );
-        this.cursorToPosition( cursor, string.length );
+
+        // Move main cursor there...
+        if( !e.altKey )
+        {
+            // Make sure we only keep the main cursor..
+            this._removeSecondaryCursors();
+
+            this.cursorToLine( cursor, ln, true );
+            this.cursorToPosition( cursor, string.length );
+        }
+        
+        // Add new cursor
+        else
+        {
+            this._addCursor( ln, string.length );
+        }
 
         this.hideAutoCompleteBox();
     }
 
     processSelection( e, keep_range, flags = CodeEditor.SELECTION_X_Y ) {
 
-        var cursor = this.cursors.children[ 0 ];
+        var cursor = this._getCurrentCursor();
         const isMouseEvent = e && ( e.constructor == MouseEvent );
 
         if( isMouseEvent ) this.processClick( e );
@@ -1863,7 +1911,23 @@ class CodeEditor {
         }
     }
 
-    async processKey( e ) {
+    async processKey( event ) {
+        
+        const numCursors = this.cursors.childElementCount;
+
+        for( var i = 0; i < numCursors; i++ )
+        {
+            let cursor = this.cursors.children[ i ];
+
+            // We could delete secondary cursor while iterating..
+            if( !cursor )
+                break;
+
+            this.processKeyAtCursor( event, cursor );
+        }
+    }
+
+    async processKeyAtCursor( e, cursor ) {
 
         if( !this.code || e.srcElement.constructor != HTMLDivElement ) 
             return;
@@ -1876,7 +1940,6 @@ class CodeEditor {
         if( key.length > 1 && this.specialKeys.indexOf( key ) == -1 )
             return;
 
-        let cursor = this.cursors.children[ 0 ];
         let lidx = cursor.line;
         this.code.lines[ lidx ] = this.code.lines[ lidx ] ?? "";
 
@@ -1887,26 +1950,14 @@ class CodeEditor {
             switch( key.toLowerCase() ) {
             case 'a': // select all
                 e.preventDefault();
-                this.resetCursorPos( CodeEditor.CURSOR_LEFT | CodeEditor.CURSOR_TOP );
-                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();
+                this.selectAll( cursor );
                 break;
             case 'c': // copy
-                this._copyContent();
+                this._copyContent( cursor );
                 return;
             case 'd': // duplicate line
                 e.preventDefault();
-                this.endSelection();
-                this.code.lines.splice( lidx, 0, this.code.lines[ lidx ] );
-                this.lineDown( cursor );
-                this.processLines();
-                this.hideAutoCompleteBox();
+                this._duplicateLine( lidx, cursor );
                 return;
             case 'f': // find/search
                 e.preventDefault();
@@ -1921,14 +1972,14 @@ class CodeEditor {
                 this.onsave( this.getText() );
                 return;
             case 'v': // paste
-                this._pasteContent();
+                this._pasteContent( cursor );
                 return;
             case 'x': // cut line
-                this._cutContent();
+                this._cutContent( cursor );
                 this.hideAutoCompleteBox();
                 return;
             case 'y': // redo
-                if(!this.code.redoSteps.length)
+                if( !this.code.redoSteps.length )
                     return;
                 this._addUndoStep( cursor, true, false);
                 const redo_step = this.code.redoSteps.pop();
@@ -1937,7 +1988,7 @@ class CodeEditor {
                 this.restoreCursor( cursor, redo_step.cursor );
                 return;
             case 'z': // undo
-                if(!this.code.undoSteps.length)
+                if( !this.code.undoSteps.length )
                     return;
                 this._addRedoStep( cursor );
                 const undo_step = this.code.undoSteps.pop();
@@ -1953,6 +2004,13 @@ class CodeEditor {
                 e.preventDefault();
                 this._decreaseFontSize();
                 return;
+            case 'arrowdown': // add cursor below only for the main cursor..
+                if( cursor.isMainCursor && this.code.lines[ lidx + 1 ] != undefined )
+                {
+                    var new_cursor = this._addCursor( cursor.line, cursor.position );
+                    this.lineDown( new_cursor );
+                    return;
+                }
             }
         }
 
@@ -1962,8 +2020,9 @@ class CodeEditor {
                 case 'ArrowUp':
                 if(this.code.lines[ lidx - 1 ] == undefined)
                     return;
-                swapArrayElements(this.code.lines, lidx - 1, lidx);
-                this.lineUp();
+                this._addUndoStep( cursor, true );
+                swapArrayElements( this.code.lines, lidx - 1, lidx );
+                this.lineUp( cursor );
                 this.processLine( lidx - 1 );
                 this.processLine( lidx );
                 this.hideAutoCompleteBox();
@@ -1971,8 +2030,9 @@ class CodeEditor {
             case 'ArrowDown':
                 if(this.code.lines[ lidx + 1 ] == undefined)
                     return;
-                swapArrayElements(this.code.lines, lidx, lidx + 1);
-                this.lineDown();
+                this._addUndoStep( cursor, true );
+                swapArrayElements( this.code.lines, lidx, lidx + 1 );
+                this.lineDown( cursor );
                 this.processLine( lidx );
                 this.processLine( lidx + 1 );
                 this.hideAutoCompleteBox();
@@ -1983,17 +2043,18 @@ class CodeEditor {
         // Apply binded actions...
 
         for( const actKey in this.actions ) {
+
             if( key != actKey ) continue;
             e.preventDefault();
 
-            if(this.actions[ key ].deleteSelection && this.selection)
-                this.actions['Backspace'].callback(lidx, cursor, e);
+            if( this.actions[ key ].deleteSelection && this.selection )
+                this.actions['Backspace'].callback( lidx, cursor, e );
 
             return this.actions[ key ].callback( lidx, cursor, e );
         }
 
         // From now on, don't allow ctrl, shift or meta (mac) combinations
-        if( (e.ctrlKey || e.metaKey) )
+        if( e.ctrlKey || e.metaKey )
             return;
 
         // Add undo steps
@@ -2005,7 +2066,7 @@ class CodeEditor {
 
         //  Some custom cases for word enclosing (), {}, "", '', ...
 
-        const enclosableKeys = ["\"", "'", "(", "{"];
+        const enclosableKeys = [ "\"", "'", "(", "{" ];
         if( enclosableKeys.indexOf( key ) > -1 )
         {
             if( this._encloseSelectedWordWithKey( key, lidx, cursor ) ) 
@@ -2023,19 +2084,19 @@ class CodeEditor {
 
         // Append key
 
-        const isPairKey = (Object.values( this.pairKeys ).indexOf( key ) > -1) && !this.wasKeyPaired;
-        const sameKeyNext = isPairKey && (this.code.lines[ lidx ][cursor.position] === key);
+        const isPairKey = ( Object.values( this.pairKeys ).indexOf( key ) > -1 ) && !this.wasKeyPaired;
+        const sameKeyNext = isPairKey && ( this.code.lines[ lidx ][ cursor.position ] === key );
 
         if( !sameKeyNext )
         {
             this.code.lines[ lidx ] = [
-                this.code.lines[ lidx ].slice(0, cursor.position), 
+                this.code.lines[ lidx ].slice( 0, cursor.position ), 
                 key, 
-                this.code.lines[ lidx ].slice(cursor.position)
+                this.code.lines[ lidx ].slice( cursor.position )
             ].join('');
         }
 
-        this.cursorToRight( key );
+        this.cursorToRight( key, cursor );
 
         //  Some custom cases for auto key pair (), {}, "", '', ...
         
@@ -2045,7 +2106,7 @@ class CodeEditor {
             // Make sure to detect later that the key is paired automatically to avoid loops...
             this.wasKeyPaired = true;
 
-            if(sameKeyNext) return;
+            if( sameKeyNext ) return;
 
             this.root.dispatchEvent(new KeyboardEvent('keydown', { 'key': this.pairKeys[ key ] }));
             this.cursorToLeft( key, cursor );
@@ -2072,14 +2133,14 @@ class CodeEditor {
             this.showAutoCompleteBox( key, cursor );
     }
 
-    async _pasteContent() {
+    async _pasteContent( cursor ) {
+
         let text = await navigator.clipboard.readText();
-        this.appendText(text);
+        this.appendText( text, cursor );
     }
 
-    async _copyContent() {
+    async _copyContent( cursor ) {
 
-        let cursor = this.cursors.children[ 0 ];
         let text_to_copy = "";
 
         if( !this.selection ) {
@@ -2109,9 +2170,8 @@ class CodeEditor {
         navigator.clipboard.writeText( text_to_copy ).then(() => console.log("Successfully copied"), (err) => console.error("Error"));
     }
 
-    async _cutContent() {
+    async _cutContent( cursor ) {
 
-        let cursor = this.cursors.children[ 0 ];
         let lidx = cursor.line;
         let text_to_cut = "";
 
@@ -2121,9 +2181,9 @@ class CodeEditor {
             text_to_cut = "\n" + this.code.lines[ cursor.line ];
             this.code.lines.splice( lidx, 1 );
             this.processLines();
-            this.resetCursorPos( CodeEditor.CURSOR_LEFT );
+            this.resetCursorPos( CodeEditor.CURSOR_LEFT, cursor );
             if( this.code.lines[ lidx ] == undefined )
-                this.lineUp();
+                this.lineUp( cursor );
         }
         else {
             
@@ -2151,6 +2211,16 @@ class CodeEditor {
         navigator.clipboard.writeText( text_to_cut ).then(() => console.log("Successfully cut"), (err) => console.error("Error"));
     }
 
+    _duplicateLine( lidx, cursor ) {
+        
+        this.endSelection();
+        this._addUndoStep( cursor, true );
+        this.code.lines.splice( lidx, 0, this.code.lines[ lidx ] );
+        this.lineDown( cursor );
+        this.processLines();
+        this.hideAutoCompleteBox();
+    }
+
     action( key, deleteSelection, fn ) {
 
         this.actions[ key ] = {
@@ -2618,7 +2688,13 @@ class CodeEditor {
     }
 
     _isCSSClass( token, prev, next ) {
-        return this.highlight == 'CSS' && prev == '.';
+
+        if( this.highlight != 'CSS' )
+            return false;
+
+        return  ( prev == '.' || prev == '::' 
+                || ( prev == ':' && next == '{' ) 
+                || ( token[ 0 ] == '#' && prev != ':' ) );
     }
 
     isNumber( token ) {
@@ -2712,8 +2788,6 @@ class CodeEditor {
 
     lineUp( cursor, resetLeft ) {
 
-        cursor = cursor ?? this.cursors.children[ 0 ];
-
         if( this.code.lines[ cursor.line - 1 ] == undefined ) 
             return false;
 
@@ -2725,8 +2799,6 @@ class CodeEditor {
     }
 
     lineDown( cursor, resetLeft ) {
-
-        cursor = cursor ?? this.cursors.children[ 0 ];
         
         if( this.code.lines[ cursor.line + 1 ] == undefined ) 
             return false;
@@ -2804,10 +2876,23 @@ class CodeEditor {
         delete this._lastSelectionKeyDir;
     }
 
+    selectAll( cursor ) {
+
+        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();
+    }
+
     cursorToRight( key, cursor ) {
 
         if( !key ) return;
-        cursor = cursor ?? this.cursors.children[ 0 ];
+
         cursor._left += this.charWidth;
         cursor.style.left = "calc( " + cursor._left + "px + " + this.xPadding + " )";
         cursor.position++;
@@ -2826,7 +2911,7 @@ class CodeEditor {
     cursorToLeft( key, cursor ) {
 
         if( !key ) return;
-        cursor = cursor ?? this.cursors.children[ 0 ];
+
         cursor._left -= this.charWidth;
         cursor._left = Math.max( cursor._left, 0 );
         cursor.style.left = "calc( " + cursor._left + "px + " + this.xPadding + " )";
@@ -2845,13 +2930,12 @@ class CodeEditor {
 
     cursorToTop( cursor, resetLeft = false ) {
 
-        cursor = cursor ?? this.cursors.children[ 0 ];
         cursor._top -= this.lineHeight;
         cursor._top = Math.max(cursor._top, 0);
         cursor.style.top = "calc(" + cursor._top + "px)";
         this.restartBlink();
         
-        if(resetLeft)
+        if( resetLeft )
             this.resetCursorPos( CodeEditor.CURSOR_LEFT, cursor );
 
         doAsync(() => {
@@ -2863,12 +2947,12 @@ class CodeEditor {
 
     cursorToBottom( cursor, resetLeft = false ) {
 
-        cursor = cursor ?? this.cursors.children[ 0 ];
         cursor._top += this.lineHeight;
         cursor.style.top = "calc(" + cursor._top + "px)";
+
         this.restartBlink();
 
-        if(resetLeft)
+        if( resetLeft )
             this.resetCursorPos( CodeEditor.CURSOR_LEFT, cursor );
 
         doAsync(() => {
@@ -2880,10 +2964,11 @@ class CodeEditor {
 
     cursorToString( cursor, text, reverse ) {
 
-        if( !text.length ) return;
-        cursor = cursor ?? this.cursors.children[ 0 ];
+        if( !text.length ) 
+            return;
+
         for( let char of text ) 
-            reverse ? this.cursorToLeft( char ) : this.cursorToRight( char );
+            reverse ? this.cursorToLeft( char, cursor ) : this.cursorToRight( char, cursor );
     }
 
     cursorToPosition( cursor, position ) {
@@ -2903,17 +2988,16 @@ class CodeEditor {
 
     saveCursor( cursor, state = {} ) {
 
-        var cursor = cursor ?? this.cursors.children[ 0 ];
         state.top = cursor._top;
         state.left = cursor._left;
         state.line = cursor.line;
         state.position = cursor.position;
+
         return state;
     }
 
     restoreCursor( cursor, state ) {
 
-        cursor = cursor ?? this.cursors.children[ 0 ];
         cursor.line = state.line ?? 0;
         cursor.position = state.position ?? 0;
 
@@ -2925,7 +3009,7 @@ class CodeEditor {
 
     resetCursorPos( flag, cursor ) {
         
-        cursor = cursor ?? this.cursors.children[ 0 ];
+        cursor = cursor ?? this._getCurrentCursor();
 
         if( flag & CodeEditor.CURSOR_LEFT )
         {
@@ -2942,14 +3026,14 @@ class CodeEditor {
         }
     }
 
-    addSpaceTabs(n) {
+    addSpaceTabs( n ) {
         
         for( var i = 0; i < n; ++i ) {
             this.actions[ 'Tab' ].callback();
         }
     }
 
-    addSpaces(n) {
+    addSpaces( n ) {
         
         for( var i = 0; i < n; ++i ) {
             this.root.dispatchEvent( new CustomEvent( 'keydown', { 'detail': {
@@ -3109,14 +3193,11 @@ class CodeEditor {
 
     getCharAtPos( cursor, offset = 0 ) {
         
-        cursor = cursor ?? this.cursors.children[ 0 ];
         return this.code.lines[ cursor.line ][ cursor.position + offset ];
     }
 
-    getWordAtPos( cursor, loffset = 0, roffset ) {
+    getWordAtPos( cursor, offset = 0 ) {
         
-        roffset = roffset ?? loffset;
-        cursor = cursor ?? this.cursors.children[ 0 ];
         const col = cursor.line;
         const words = this.code.lines[ col ];
 
@@ -3126,8 +3207,8 @@ class CodeEditor {
             return (exceptions.indexOf( char ) > - 1) || (code > 47 && code < 58) || (code > 64 && code < 91) || (code > 96 && code < 123);
         }
 
-        let from = cursor.position + roffset;
-        let to = cursor.position + loffset;
+        let from = cursor.position + offset;
+        let to = cursor.position + offset;
 
         // Check left ...
 
@@ -3146,7 +3227,7 @@ class CodeEditor {
         let word = words.substring( from, to );
         if( word == ' ' )
         {
-            if( loffset < 0 )
+            if( offset < 0 )
             {
                 while( words[ from - 1 ] != undefined && words[ from - 1 ] == ' ' )
                     from--;
@@ -3319,8 +3400,10 @@ class CodeEditor {
 
     hideAutoCompleteBox() {
 
+        const isActive = this.isAutoCompleteActive;
         this.isAutoCompleteActive = false;
         this.autocomplete.classList.remove( 'show' );
+        return isActive != this.isAutoCompleteActive;
     }
 
     autoCompleteWord( cursor, suggestion ) {
@@ -3521,12 +3604,21 @@ class CodeEditor {
             return;
 
         this.codeScroller.scrollTo( 0, Math.max( line - 15 ) * this.lineHeight );
+
+        // Select line ?
+        var cursor = this._getCurrentCursor( true );
+        this.cursorToLine( cursor, line - 1, true );
     }
 
     _updateDataInfoPanel( signal, value ) {
 
         if( !this.skipCodeInfo )
         {
+            if( this.cursors.childElementCount > 1 )
+            {
+                value = "";
+            }
+
             LX.emit( signal, value );
         }
     }
@@ -3541,7 +3633,7 @@ class CodeEditor {
         let line = this.code.childNodes[ old_local ];
 
         if( !line )
-        return;
+            return;
 
         line.classList.remove( 'active-line' );
 

package/build/lexgui.css

@@ -131,7 +131,7 @@ body.nocursor * {
 #global_search {
   position: absolute;
   background-color: var(--global-blur-background);
-  -webkit-backdrop-filter: blur(12px);
+  --webkit-backdrop-filter: blur(12px);
   backdrop-filter: blur(12px);
   border-radius: 8px;
   border: 1px solid #d0d0ec6b;
@@ -142,6 +142,7 @@ body.nocursor * {
   flex-wrap: wrap;
   z-index: 105;
   -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); /* this fixes the overflow:hidden in Chrome/Opera */
+  mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); /* this fixes the overflow:hidden in Chrome/Opera */
   /* box-shadow: 0 2px 10px black; */
 }
 
@@ -1195,6 +1196,7 @@ input::-webkit-inner-spin-button {
 
 /* Firefox */
 input[type=number] {
+  appearance: textfield;
   -moz-appearance: textfield;
 }
 
@@ -2732,8 +2734,33 @@ ul.lexassetscontent {
   letter-spacing: 0em !important;
 }
 
-.codebasearea .lexareatab {
+.codebasearea .lexareatabs {
   padding: 0px;
+  margin: 0px;
+}
+
+.codebasearea .lexareatab {
+  padding: 5px;
+  border-radius: 0px !important;
+  margin: 0px !important;
+  border: 1px solid #91909036;
+  border-right: none;
+  background-color: var(--global-color-primary) !important;
+  transition: none;
+}
+
+.codebasearea .lexareatab:hover {
+  background-color: var(--global-color-secondary) !important;
+}
+
+.codebasearea .lexareatab:last-child {
+  border-right: 1px solid #91909036;
+}
+
+.codebasearea .lexareatab.selected {
+  background-color: var(--global-color-secondary) !important;
+  border-top: 1px solid var(--global-selected);
+  border-bottom: none;
 }
 
 .codebasearea .lexareatab i {
@@ -2792,7 +2819,7 @@ ul.lexassetscontent {
   width: 48px;
   height: calc(100% - 62px);
   background-color: var(--global-branch-darker);
-  margin-top: 26px;
+  margin-top: 28px;
   overflow: hidden;
   position: absolute;
 }

package/build/lexgui.js

@@ -12,7 +12,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
     */
 
     var LX = global.LX = {
-        version: "0.1.22",
+        version: "0.1.23",
         ready: false,
         components: [], // specific pre-build components
         signals: {} // events and triggers

package/build/lexgui.module.js

@@ -8,7 +8,7 @@
 */
 
 var LX = {
-    version: "0.1.22",
+    version: "0.1.23",
     ready: false,
     components: [], // specific pre-build components
     signals: {} // events and triggers

package/changelog.md

@@ -1,5 +1,14 @@
 # lexgui.js changelog
 
+## 0.1.23
+
+Begin integration of multiple cursors ("Ctrl+ArrowDown").
+Code tabs have new VS Code-alike style.
+Improved CSS highlighting.
+Add Undo Steps to some actions that were missing.
+When using Ctrl+G, the selected line is now highlighted.
+General bug fixes.
+
 ## 0.1.22
 
 Added REDO using "Ctrl+Y".

package/examples/code_editor.html

@@ -2,6 +2,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>LexGUI Code Editor Demo</title>
     <link rel="stylesheet" href="../build/lexgui.css">
     <link rel="icon" href="../images/icon.png">
@@ -20,14 +21,16 @@
         import { LX } from 'lexgui';
         import 'lexgui/components/codeeditor.js';
 
+        window.LX = LX;
+        
         // init library and get main area
         let area = LX.init();
 
-        const file_explorer = true;
+        const file_explorer = false;
 
         if( !file_explorer )
         {
-            var [leftArea, rightArea] = area.split({ sizes:["55%","45%"] });
+            var [leftArea, rightArea] = area.split({ sizes:["40%","60%"] });
 
             var canvas = document.createElement('canvas');
             canvas.id = "mycanvas";
@@ -52,13 +55,13 @@
             file_explorer: file_explorer
         });
 
-        editor.loadFile( "../data/js_sample.js" );
-        editor.loadFile( "../data/json_sample.json" );
-        editor.loadFile( "../data/css_sample.css" );
-        editor.loadFile( "../data/cpp_sample.cpp" );
-        editor.loadFile( "../data/xml_sample.xml" );
-        editor.loadFile( "../data/python_sample.py" );
-        editor.loadFile( "../data/rust_sample.rs" );
+        editor.loadFile( "../demo.js" );
+        // editor.loadFile( "../data/json_sample.json" );
+        // editor.loadFile( "../data/css_sample.css" );
+        // editor.loadFile( "../data/cpp_sample.cpp" );
+        // editor.loadFile( "../data/xml_sample.xml" );
+        // editor.loadFile( "../data/python_sample.py" );
+        // editor.loadFile( "../data/rust_sample.rs" );
         // editor.loadFile( "../localhost.bat" );
         
         if( !file_explorer )

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "lexgui",
-    "version": "0.1.22",
+    "version": "0.1.23",
     "description": "JS library to create web graphical user interfaces",
     "type": "module",
     "main": "./build/lexgui.js",