lexgui 0.1.21 → 0.1.23

package/build/components/codeeditor.js

@@ -201,6 +201,9 @@ class CodeEditor {
     static WORD_TYPE_METHOD = 0;
     static WORD_TYPE_CLASS  = 1;
 
+    static CODE_MAX_FONT_SIZE = 22;
+    static CODE_MIN_FONT_SIZE = 9;
+
     /**
      * @param {*} options
      * skip_info, allow_add_scripts, name
@@ -330,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 );
-                }
-            } );
-
-            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
@@ -413,8 +389,16 @@ class CodeEditor {
             });
 
             this.codeScroller.addEventListener( 'wheel', e => {
-                const dX = ( e.deltaY > 0.0 ? 10.0 : -10.0 ) * ( e.shiftKey ? 1.0 : 0.0 );
-                if( dX != 0.0 ) this.setScrollBarValue( 'horizontal', dX );
+                if( e.ctrlKey )
+                {
+                    e.preventDefault();
+                    ( e.deltaY > 0.0 ? this._decreaseFontSize() : this._increaseFontSize() );
+                }
+                else
+                {
+                    const dX = ( e.deltaY > 0.0 ? 10.0 : -10.0 ) * ( e.shiftKey ? 1.0 : 0.0 );
+                    if( dX != 0.0 ) this.setScrollBarValue( 'horizontal', dX );
+                }
             });
         }
 
@@ -470,6 +454,28 @@ class CodeEditor {
             this.tabs.area.attach( box );
         }
 
+        // Add search LINE box
+        {
+            var box = document.createElement( 'div' );
+            box.className = "searchbox gotoline";
+            
+            var searchPanel = new LX.Panel();
+            box.appendChild( searchPanel.root );
+
+            searchPanel.addText( null, "", ( value, event ) => {
+                input.value = ":" + value.replaceAll( ':', '' );
+                this.goToLine( input.value.slice( 1 ) );
+            }, { placeholder: "Go to line", trigger: "input" } );
+
+            let input = box.querySelector( 'input' );
+            input.addEventListener( 'keyup', e => {
+                if( e.key == 'Escape' ) this.hideSearchLineBox();
+            } );
+
+            this.searchlinebox = box;
+            this.tabs.area.attach( box );
+        }
+
         // Add code-sizer
         {
             this.codeSizer = document.createElement( 'div' );
@@ -501,9 +507,9 @@ 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.charWidth = 7; //this._measureChar();
         this._lastTime = null;
 
         this.pairKeys = {
@@ -592,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'],
@@ -627,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 ) => {
@@ -672,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
@@ -727,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 );
 
@@ -761,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;
@@ -790,7 +798,7 @@ class CodeEditor {
                 return;
             }
 
-            this._addUndoStep( cursor );
+            this._addUndoStep( cursor, true );
 
             var _c0 = this.getCharAtPos( cursor, -1 );
             var _c1 = this.getCharAtPos( cursor );
@@ -824,7 +832,7 @@ class CodeEditor {
                     if( !this.selection )
                         this.startSelection( cursor );
 
-                    this.lineUp();
+                    this.lineUp( cursor );
 
                     var letter = this.getCharAtPos( cursor );
                     if( !letter ) {
@@ -835,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 );
@@ -928,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();
@@ -954,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)
@@ -970,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 );
@@ -988,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();
@@ -1018,7 +1026,7 @@ class CodeEditor {
         if( options.allow_add_scripts ?? true )
             this.addTab("+", false, "New File");
 
-        this.addTab(options.name || "untitled", true, options.title);
+        this.addTab( options.name || "untitled", true, options.title );
 
         // Create inspector panel
         let panel = this._createPanelInfo();
@@ -1036,14 +1044,15 @@ class CodeEditor {
         );
         
         // Add to the document.fonts (FontFaceSet)
-        document.fonts.add(commitMono);
+        document.fonts.add( commitMono );
 
         // Load the font
         commitMono.load();
 
         // Wait until the fonts are all loaded
         document.fonts.ready.then(() => {
-            console.log("commitMono loaded")
+            // console.log("commitMono loaded")
+            this.charWidth = this._measureChar( "a", true );
         });
     }
 
@@ -1073,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...
@@ -1082,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
@@ -1095,9 +1107,8 @@ class CodeEditor {
         }
     }
 
-    appendText( text ) {
+    appendText( text, cursor ) {
 
-        let cursor = this.cursors.children[ 0 ];
         let lidx = cursor.line;
 
         if( this.selection ) {
@@ -1201,24 +1212,90 @@ class CodeEditor {
         }
     }
 
-    _addUndoStep( cursor )  {
+    _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();
         const current = d.getTime();
 
-        if( !this._lastTime ) {
-            this._lastTime = current;
-        } else {
-            if( ( current - this._lastTime ) > 3000 ){
-                this._lastTime = null;
-            } else {
-                // If time not enough, reset timer
+        if( !force )
+        {
+            if( !this._lastTime ) {
                 this._lastTime = current;
-                return;
+            } else {
+                if( ( current - this._lastTime ) > 3000 ){
+                    this._lastTime = null;
+                } else {
+                    // If time not enough, reset timer
+                    this._lastTime = current;
+                    return;
+                }
             }
         }
 
-        var cursor = cursor ?? this.cursors.children[ 0 ];
+        if( deleteRedo ) 
+        {
+            // Remove all redo steps
+            this.code.redoSteps.length = 0;
+        }
 
         this.code.undoSteps.push( {
             lines: LX.deepCopy( this.code.lines ),
@@ -1228,6 +1305,16 @@ class CodeEditor {
         } );
     }
 
+    _addRedoStep( cursor )  {
+
+        this.code.redoSteps.push( {
+            lines: LX.deepCopy( this.code.lines ),
+            cursor: this.saveCursor( cursor ),
+            line: cursor.line,
+            position: cursor.position
+        } );
+    }
+
     _changeLanguage( lang ) {
 
         this.code.language = lang;
@@ -1320,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;
     }
 
@@ -1334,7 +1421,7 @@ class CodeEditor {
         });
     }
 
-    _onSelectTab( isNewTabButton, event, name,  ) {
+    _onSelectTab( isNewTabButton, event, name ) {
 
         if( isNewTabButton )
         {
@@ -1342,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 ];
@@ -1385,6 +1474,7 @@ class CodeEditor {
         code.language = "Plain Text";
         code.cursorState = {};
         code.undoSteps = [];
+        code.redoSteps = [];
         code.tabName = name;
         code.title = title ?? name;
         code.tokens = {};
@@ -1518,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)];
 
@@ -1555,6 +1645,7 @@ class CodeEditor {
             this.lastMouseDown = LX.getTime();
             this.state.selectingText = true;
             this.endSelection();
+            this.processClick( e );
         }
         
         else if( e.type == 'mouseup' )
@@ -1574,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 ) );
@@ -1582,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;
@@ -1598,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() );
@@ -1618,9 +1709,8 @@ class CodeEditor {
 
     _onMouseUp( e ) {
 
-        if( (LX.getTime() - this.lastMouseDown) < 300 ) {
+        if( (LX.getTime() - this.lastMouseDown) < 120 ) {
             this.state.selectingText = false;
-            this.processClick( e );
             this.endSelection();
         }
 
@@ -1635,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 );
@@ -1808,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;
@@ -1821,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 ] ?? "";
 
@@ -1832,49 +1950,67 @@ 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.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();
                 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();
+                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)
+                if( !this.code.undoSteps.length )
                     return;
-                const step = this.code.undoSteps.pop();
-                this.code.lines = step.lines;
+                this._addRedoStep( cursor );
+                const undo_step = this.code.undoSteps.pop();
+                this.code.lines = undo_step.lines;
                 this.processLines();
-                this.restoreCursor( cursor, step.cursor );
+                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 )
+                {
+                    var new_cursor = this._addCursor( cursor.line, cursor.position );
+                    this.lineDown( new_cursor );
+                    return;
+                }
             }
         }
 
@@ -1884,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();
@@ -1893,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();
@@ -1905,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
@@ -1927,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 ) ) 
@@ -1945,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 (), {}, "", '', ...
         
@@ -1967,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 );
@@ -1994,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 ) {
@@ -2031,21 +2170,20 @@ 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 = "";
 
-        this._addUndoStep( cursor );
+        this._addUndoStep( cursor, true );
 
         if( !this.selection ) {
             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 {
             
@@ -2073,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 ] = {
@@ -2540,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 ) {
@@ -2634,8 +2788,6 @@ class CodeEditor {
 
     lineUp( cursor, resetLeft ) {
 
-        cursor = cursor ?? this.cursors.children[ 0 ];
-
         if( this.code.lines[ cursor.line - 1 ] == undefined ) 
             return false;
 
@@ -2647,8 +2799,6 @@ class CodeEditor {
     }
 
     lineDown( cursor, resetLeft ) {
-
-        cursor = cursor ?? this.cursors.children[ 0 ];
         
         if( this.code.lines[ cursor.line + 1 ] == undefined ) 
             return false;
@@ -2726,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++;
@@ -2748,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 + " )";
@@ -2767,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(() => {
@@ -2785,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(() => {
@@ -2802,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 ) {
@@ -2825,29 +2988,28 @@ 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;
 
         cursor._left = state.left ?? 0;
-        cursor.style.left = "calc(" + ( cursor._left - this.getScrollLeft() ) + "px + " + this.xPadding + ")";
+        cursor.style.left = "calc(" + cursor._left + "px + " + this.xPadding + ")";
         cursor._top = state.top ?? 0;
-        cursor.style.top = "calc(" + ( cursor._top - this.getScrollTop() ) + "px)";
+        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 )
         {
@@ -2864,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': {
@@ -2923,8 +3085,6 @@ class CodeEditor {
 
             this.resizeScrollBars();
 
-            // console.warn("Resize editor viewport");
-
         }, 10 );
     }
 
@@ -3033,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 ];
 
@@ -3050,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 ...
 
@@ -3070,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--;
@@ -3089,15 +3246,16 @@ class CodeEditor {
         return [ word, from, to ];
     }
 
-    _measureChar( char = "a", get_bb = false ) {
+    _measureChar( char = "a", use_floating = false, get_bb = false ) {
         
-        var test = document.createElement( "pre" );
-        test.className = "codechar";
-        test.innerHTML = char;
-        document.body.appendChild( test );
-        var rect = test.getBoundingClientRect();
-        deleteElement( test );
-        const bb = [ Math.floor( rect.width ), Math.floor( rect.height ) ];
+        var line = document.createElement( "pre" );
+        var text = document.createElement( "span" );
+        line.appendChild( text );
+        text.innerText = char;
+        this.code.appendChild( line );
+        var rect = text.getBoundingClientRect();
+        deleteElement( line );
+        const bb = [ use_floating ? rect.width : Math.floor( rect.width ), use_floating ? rect.height : Math.floor( rect.height ) ];
         return get_bb ? bb : bb[ 0 ];
     }
 
@@ -3242,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 ) {
@@ -3344,8 +3504,8 @@ class CodeEditor {
             return;
 
         let cursorData = new LX.vec2( this.position, this.line );
-        let found = null;
-        let idx = -1;
+        let line = null;
+        let char = -1;
 
         if( this._lastResult )
         {
@@ -3354,18 +3514,18 @@ class CodeEditor {
             delete this._lastResult;
         }
 
-        const getIndex = line => {
-            return this.code.lines[ line ].substr( line == cursorData.y ? cursorData.x : 0 ).indexOf( text );
+        const getIndex = l => {
+            return this.code.lines[ l ].substr( l == cursorData.y ? cursorData.x : 0 ).indexOf( text );
         };
 
         if( reverse )
         {
             for( var j = cursorData.y; j >= 0; --j )
             {
-                idx = getIndex( j );
-                if( idx > -1 )
+                char = getIndex( j );
+                if( char > -1 )
                 {
-                    found = j;
+                    line = j;
                     break;
                 }
             }
@@ -3374,30 +3534,36 @@ class CodeEditor {
         {
             for( var j = cursorData.y; j < this.code.lines.length; ++j )
             {
-                idx = getIndex( j );
-                if( idx > -1 )
+                char = getIndex( j );
+                if( char > -1 )
                 {
-                    found = j;
+                    line = j;
                     break;
                 }
             }
         }
 
-        if( found == null)
+        if( line == null)
         {
             alert("No results!")
             return;
         }
         
+        /*
+            Position idx is computed from last pos, which could be in same line,
+            so we search in the substring (first_ocurrence, end). That's why we 
+            have to add the length of the substring (0, first_ocurrence)
+        */
+
+        char += ( line == cursorData.y ? cursorData.x : 0 );
+
         // Text found..
 
         this._lastTextFound = text;
 
-        // console.warn("FOUND!! --", text, "-- at", "[" + idx + ", " + j + "]")
-
         this.codeScroller.scrollTo( 
-            Math.max( idx * this.charWidth - this.codeScroller.clientWidth ), 
-            Math.max( found - 10 ) * this.lineHeight 
+            Math.max( char * this.charWidth - this.codeScroller.clientWidth ), 
+            Math.max( line - 10 ) * this.lineHeight 
         );
 
         // Show elements
@@ -3405,18 +3571,54 @@ class CodeEditor {
 
         // Create new selection instance
         this.selection = new CodeSelection( this, 0, 0, "lexcodesearchresult" );
-        this.selection.selectInline( idx, found, this.measureString( text ) );
+        this.selection.selectInline( char, line, this.measureString( text ) );
         this._lastResult = {
             'dom': this.selections.lastChild,
-            'pos': new LX.vec2( idx + text.length, found )
+            'pos': new LX.vec2( char + text.length, line )
         };
 
     }
 
+    showSearchLineBox() {
+        
+        this.searchlinebox.classList.add( 'opened' );
+        this.searchlineboxActive = true;
+
+        const input = this.searchlinebox.querySelector( 'input' );
+        input.value = ":";
+        input.focus();
+    }
+
+    hideSearchLineBox() {
+
+        if( this.searchlineboxActive )
+        {
+            this.searchlinebox.classList.remove( 'opened' );
+            this.searchlineboxActive = false;
+        }
+    }
+
+    goToLine( line ) {
+
+        if( !this.isNumber( line ) )
+            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 );
         }
     }
@@ -3431,7 +3633,7 @@ class CodeEditor {
         let line = this.code.childNodes[ old_local ];
 
         if( !line )
-        return;
+            return;
 
         line.classList.remove( 'active-line' );
 
@@ -3445,6 +3647,46 @@ class CodeEditor {
         }
     }
 
+    _increaseFontSize() {
+
+        // Change font size
+
+        var r = document.querySelector( ':root' );
+        var s = getComputedStyle( r );
+        var pixels = parseInt( s.getPropertyValue( "--code-editor-font-size" ) );
+        pixels = LX.UTILS.clamp( pixels + 1, CodeEditor.CODE_MIN_FONT_SIZE, CodeEditor.CODE_MAX_FONT_SIZE );
+        r.style.setProperty( "--code-editor-font-size", pixels + "px" );
+        this.charWidth = this._measureChar( "a", true );
+
+        // Change row size
+
+        var row_pixels = pixels + 6;
+        r.style.setProperty( "--code-editor-row-height", row_pixels + "px" );
+        this.lineHeight = row_pixels;
+
+        this.processLines(); // ... it's necessary?
+    }
+
+    _decreaseFontSize() {
+
+        // Change font size
+
+        var r = document.querySelector( ':root' );
+        var s = getComputedStyle( r );
+        var pixels = parseInt( s.getPropertyValue( "--code-editor-font-size" ) );
+        pixels = LX.UTILS.clamp( pixels - 1, CodeEditor.CODE_MIN_FONT_SIZE, CodeEditor.CODE_MAX_FONT_SIZE );
+        r.style.setProperty( "--code-editor-font-size", pixels + "px" );
+        this.charWidth = this._measureChar( "a", true );
+
+        // Change row size
+
+        var row_pixels = pixels + 6;
+        r.style.setProperty( "--code-editor-row-height", row_pixels + "px" );
+        this.lineHeight = row_pixels;
+
+        this.processLines(); // ... it's necessary?
+    }
+
     _clearTmpVariables() {
 
         delete this._currentLineString;