lexgui 0.1.22 → 0.1.24

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, 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 );
-                }
-            } );
-
-            Object.defineProperty( cursor, 'position', {
-                get: (v) => { return this._position },
-                set: (v) => { 
-                    this._position = v;
-                    this._updateDataInfoPanel( "@cursor-pos", "Col " + v );
-                }
+                get: (v) => { return this._getCurrentCursor().position }
             } );
-
-            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,18 +735,22 @@ 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 );
 
+            // 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 ) );
@@ -793,18 +773,21 @@ 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;
             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 ) => {
@@ -830,6 +813,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
@@ -856,7 +840,7 @@ class CodeEditor {
                     if( !this.selection )
                         this.startSelection( cursor );
 
-                    this.lineUp();
+                    this.lineUp( cursor );
 
                     var letter = this.getCharAtPos( cursor );
                     if( !letter ) {
@@ -867,7 +851,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 );
@@ -888,24 +872,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.actions[ 'End' ].callback( cursor.line, cursor, e );
+                }
 
+                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
@@ -960,7 +940,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 +966,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 +982,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 +1000,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 +1086,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 +1096,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 +1111,8 @@ class CodeEditor {
         }
     }
 
-    appendText( text ) {
+    appendText( text, cursor ) {
 
-        let cursor = this.cursors.children[ 0 ];
         let lidx = cursor.line;
 
         if( this.selection ) {
@@ -1234,8 +1216,82 @@ class CodeEditor {
         }
     }
 
+    _addCursor( line = 0, position = 0, force, isMain = false ) {
+
+        // If cursor in that position exists, remove it instead..
+        const exists = Array.from( this.cursors.children ).find( v => v.position == position && v.line == line );
+        if( exists && !force )
+        {
+            if( !exists.isMain )
+                exists.remove();
+
+            return;
+        }
+
+        let cursor = document.createElement( 'div' );
+        cursor.className = "cursor";
+        cursor.innerHTML = " ";
+        cursor.isMain = isMain;
+        cursor._left = position * this.charWidth;
+        cursor.style.left = "calc( " + cursor._left + "px + " + this.xPadding + " )";
+        cursor._top = line * this.lineHeight;
+        cursor.style.top = cursor._top + "px";
+        cursor._position = position;
+        cursor._line = line;
+        cursor.print = (function() { console.log( this._line, this._position ) }).bind( cursor );
+        cursor.isLast = (function() { return this.cursors.lastChild == cursor; }).bind( this );
+
+        Object.defineProperty( cursor, 'line', {
+            get: (v) => { return cursor._line },
+            set: (v) => { 
+                cursor._line = v;
+                if( cursor.isMain ) this._setActiveLine( v );
+            }
+        } );
+
+        Object.defineProperty( cursor, 'position', {
+            get: (v) => { return cursor._position },
+            set: (v) => { 
+                cursor._position = v;
+                if( cursor.isMain ) 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 )  {
 
+        // Only the mainc cursor stores undo steps
+        if( !cursor.isMain )
+            return;
+
         const d = new Date();
         const current = d.getTime();
 
@@ -1244,7 +1300,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
@@ -1260,28 +1316,80 @@ 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 ),
-            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 ] );
+        }
+    }
+
     _addRedoStep( cursor )  {
 
-        var cursor = cursor ?? this.cursors.children[ 0 ];
+        // 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;
@@ -1374,7 +1482,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 +1496,7 @@ class CodeEditor {
         });
     }
 
-    _onSelectTab( isNewTabButton, event, name,  ) {
+    _onSelectTab( isNewTabButton, event, name ) {
 
         if( isNewTabButton )
         {
@@ -1396,7 +1504,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,21 +1683,18 @@ class CodeEditor {
         }
     }
 
-    processMouse(e) {
+    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.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)];
 
         // 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' )
         {
@@ -1630,7 +1737,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 +1745,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 +1761,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 +1797,40 @@ 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 );
-        
+        // 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 );
-        this.cursorToPosition( cursor, string.length );
+        var string = outOfRange ? this.code.lines[ ln ] : this.code.lines[ ln ].slice( 0, ch );
+
+        // 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 );
@@ -1864,11 +1985,113 @@ class CodeEditor {
     }
 
     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;
+
+        if( target !== undefined )
+        {
+            this.processKeyAtTargetCursor( e, key, target );
+            return;
+        }
+
+        // By cursor keys
+
+        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 ];
+
+            // We could delete secondary cursor while iterating..
+            if( !cursor )
+                break;
+
+            // 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 );
+        }
+
+        // Global keys
+
+        this._processGlobalKeys( e, key );
+
+        // Clear tmp
+
+        delete this._lastProcessedCursorIndex;
+    }
+
+    async processKeyAtTargetCursor( e, key, targetIdx ) {
+
+        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 );
+    }
+
+    async _processGlobalKeys( e, key ) {
+
+        let cursor = this._getCurrentCursor();
+
+        if( e.ctrlKey || e.metaKey )
+        {
+            e.preventDefault();
+
+            switch( key.toLowerCase() ) {
+            case 'a': // select all
+                this.selectAll();
+                break;
+            case 'f': // find/search
+                this.showSearchBox();
+                break;
+            case 'g': // find line
+                this.showSearchLineBox();
+                break;
+            case 's': // save
+                this.onsave( this.getText() );
+                break;
+            case 'y': // redo
+                this._doRedo( cursor );
+                break;
+            case 'z': // undo
+                this._doUndo( cursor );
+                break;
+            case '+': // increase size
+                this._increaseFontSize();
+                break;
+            case '-': // decrease size
+                this._decreaseFontSize();
+                break;
+            }
+        }
+    }
+
+    async _processKeyAtCursor( e, key, cursor ) {
 
         const skip_undo = e.detail.skip_undo ?? false;
 
@@ -1876,82 +2099,38 @@ 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 ] ?? "";
 
         // Check combinations
 
+        const isLastCursor = cursor.isLast();
+
         if( e.ctrlKey || e.metaKey )
         {
             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();
-                break;
             case 'c': // copy
-                this._copyContent();
+                // TODO: COPY TEXT FROM EVERY CURSOR
+                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();
-                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() );
+                // TODO: UPDATE NEXT CURSOR ON MODIFY STATE
+                this._duplicateLine( lidx, cursor );
                 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)
-                    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();
+            case 'arrowdown': // add cursor below only for the main cursor..
+                if( isLastCursor && this.code.lines[ lidx + 1 ] != undefined )
+                {
+                    var new_cursor = this._addCursor( cursor.line, cursor.position, true );
+                    this.lineDown( new_cursor );
+                }
                 return;
             }
         }
@@ -1962,8 +2141,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 +2151,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 +2164,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 +2187,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 +2205,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 +2227,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 +2254,17 @@ class CodeEditor {
             this.showAutoCompleteBox( key, cursor );
     }
 
-    async _pasteContent() {
+    async _pasteContent( cursor ) {
+
         let text = await navigator.clipboard.readText();
-        this.appendText(text);
+
+        this._addUndoStep( cursor, true );
+
+        this.appendText( text, cursor );
     }
 
-    async _copyContent() {
+    async _copyContent( cursor ) {
 
-        let cursor = this.cursors.children[ 0 ];
         let text_to_copy = "";
 
         if( !this.selection ) {
@@ -2091,27 +2276,26 @@ 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');
         }
 
         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 +2305,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 +2335,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 ] = {
@@ -2184,8 +2378,6 @@ class CodeEditor {
 
     processLines( mode ) {
         
-        const start = performance.now();
-
         var code_html = "";
         
         // Reset all lines content
@@ -2618,7 +2810,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 +2910,6 @@ class CodeEditor {
 
     lineUp( cursor, resetLeft ) {
 
-        cursor = cursor ?? this.cursors.children[ 0 ];
-
         if( this.code.lines[ cursor.line - 1 ] == undefined ) 
             return false;
 
@@ -2725,13 +2921,12 @@ class CodeEditor {
     }
 
     lineDown( cursor, resetLeft ) {
-
-        cursor = cursor ?? this.cursors.children[ 0 ];
         
         if( this.code.lines[ cursor.line + 1 ] == undefined ) 
             return false;
     
         cursor.line++;
+
         this.cursorToBottom( cursor, resetLeft );
 
         return true;
@@ -2804,10 +2999,32 @@ class CodeEditor {
         delete this._lastSelectionKeyDir;
     }
 
+    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();
+    }
+
     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 +3043,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 +3062,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 +3079,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 +3096,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,29 +3120,57 @@ 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;
+        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 = cursor ?? this.cursors.children[ 0 ];
-        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)";
     }
 
     resetCursorPos( flag, cursor ) {
         
-        cursor = cursor ?? this.cursors.children[ 0 ];
+        cursor = cursor ?? this._getCurrentCursor();
 
         if( flag & CodeEditor.CURSOR_LEFT )
         {
@@ -2942,19 +3187,20 @@ 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': {
                 skip_undo: true,
-                key: ' '
+                key: ' ',
+                targetCursor: this._lastProcessedCursorIndex
             }}));
         }
     }
@@ -3109,14 +3355,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 +3369,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 +3389,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 +3562,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 +3766,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 +3795,7 @@ class CodeEditor {
         let line = this.code.childNodes[ old_local ];
 
         if( !line )
-        return;
+            return;
 
         line.classList.remove( 'active-line' );
 
@@ -3572,7 +3826,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() {
@@ -3592,7 +3852,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();
     }
 
     _clearTmpVariables() {