lexgui 0.1.25 → 0.1.27

package/build/components/codeeditor.js

@@ -30,6 +30,10 @@ function firstNonspaceIndex( str ) {
     return index < str.length ? index : -1;
 }
 
+function strReverse( str ) {
+    return str.split( "" ).reverse().join( "" );
+}
+
 function indexOfFrom( str, reg, from, reverse ) {
 
     from = from ?? 0;
@@ -64,16 +68,17 @@ function doAsync( fn, ms ) {
 
 class CodeSelection {
 
-    constructor( editor, ix, iy, className = "lexcodeselection" ) {
+    constructor( editor, cursor, className = "lexcodeselection" ) {
 
         this.editor = editor;
-        this.chars  = 0;
+        this.cursor = cursor;
         this.className = className;
+        this.chars  = 0;
 
-        this.fromX  = ix;
-        this.toX    = ix;
-        this.fromY  = iy;
-        this.toY    = iy;
+        this.fromX  = cursor.position;
+        this.toX    = cursor.position;
+        this.fromY  = cursor.line;
+        this.toY    = cursor.line;
     }
 
     sameLine() {
@@ -101,7 +106,7 @@ class CodeSelection {
         }
     }
 
-    selectInline( x, y, width ) {
+    selectInline( cursor, x, y, width, isSearchResult ) {
         
         this.chars = width / this.editor.charWidth;
         this.fromX = x;
@@ -116,11 +121,45 @@ class CodeSelection {
         domEl._left = x * this.editor.charWidth;
         domEl.style.left = "calc(" + domEl._left + "px + " + this.editor.xPadding + ")";
         domEl.style.width = width + "px";
-        this.editor.selections.appendChild(domEl);
+
+        if( isSearchResult )
+        {
+            this.editor.searchResultSelections.appendChild( domEl );
+        }
+        else
+        {
+            this.editor.selections[ cursor.name ].appendChild( domEl );
+        }
 
         // Hide active line background
         this.editor._hideActiveLine();
     }
+
+    save() {
+
+        return {
+            fromX: this.fromX,
+            fromY: this.fromY,
+            toX: this.toX,
+            toY: this.toY
+        }
+    }
+
+    load( data ) {
+
+        this.fromX = data.fromX;
+        this.fromY = data.fromY;
+        this.toX = data.toX;
+        this.toY = data.toY;
+    }
+
+    getText() {
+
+        if( !this.editor.code || !this.sameLine() )
+            return null;
+
+        return this.editor.code.lines[ this.fromY ].substring( this.fromX, this.toX );
+    }
 };
 
 class ScrollBar {
@@ -141,6 +180,7 @@ class ScrollBar {
         this.thumb = document.createElement( 'div' );
         this.thumb._top = 0;
         this.thumb._left = 0;
+
         this.root.appendChild( this.thumb );
 
         this.thumb.addEventListener( "mousedown", inner_mousedown );
@@ -152,8 +192,8 @@ class ScrollBar {
         function inner_mousedown( e )
         {
             var doc = editor.root.ownerDocument;
-            doc.addEventListener( "mousemove",inner_mousemove );
-            doc.addEventListener( "mouseup",inner_mouseup );
+            doc.addEventListener( "mousemove", inner_mousemove );
+            doc.addEventListener( "mouseup", inner_mouseup );
             that.lastPosition.set( e.x, e.y );
             e.stopPropagation();
             e.preventDefault();
@@ -325,25 +365,19 @@ class CodeEditor {
         this.cursors.className = 'cursors';
         this.tabs.area.attach( this.cursors );
 
-        this.selections = document.createElement( 'div' );
-        this.selections.className = 'selections';
-        this.tabs.area.attach( this.selections );
+        this.searchResultSelections = document.createElement( 'div' );
+        this.searchResultSelections.id = 'search-selections';
+        this.searchResultSelections.className = 'selections';
+        this.tabs.area.attach( this.searchResultSelections );
+
+        // Store here selections per cursor
+        this.selections = {};
 
         // Css char synchronization
         this.xPadding = "48px";
 
         // Add main cursor
-        {
-            this._addCursor( 0, 0, true, true );
-
-            Object.defineProperty( this, 'line', {
-                get: (v) => { return this._getCurrentCursor().line }
-            } );
-    
-            Object.defineProperty( this, 'position', {
-                get: (v) => { return this._getCurrentCursor().position }
-            } );
-        }
+        this._addCursor( 0, 0, true, true );
 
         // Scroll stuff
         {
@@ -556,18 +590,27 @@ class CodeEditor {
 
         // Convert reserved word arrays to maps so we can search tokens faster
 
-        for( let lang in CodeEditor.keywords ) CodeEditor.keywords[lang] = CodeEditor.keywords[lang].reduce((a, v) => ({ ...a, [v]: true}), {});
-        for( let lang in CodeEditor.utils ) CodeEditor.utils[lang] = CodeEditor.utils[lang].reduce((a, v) => ({ ...a, [v]: true}), {});
-        for( let lang in CodeEditor.types ) CodeEditor.types[lang] = CodeEditor.types[lang].reduce((a, v) => ({ ...a, [v]: true}), {});
-        for( let lang in CodeEditor.builtin ) CodeEditor.builtin[lang] = CodeEditor.builtin[lang].reduce((a, v) => ({ ...a, [v]: true}), {});
-        for( let lang in CodeEditor.statementsAndDeclarations ) CodeEditor.statementsAndDeclarations[lang] = CodeEditor.statementsAndDeclarations[lang].reduce((a, v) => ({ ...a, [v]: true}), {});
-        for( let lang in CodeEditor.symbols ) CodeEditor.symbols[lang] = CodeEditor.symbols[lang].reduce((a, v) => ({ ...a, [v]: true}), {});
+        if( !CodeEditor._staticReady )
+        {
+            for( let lang in CodeEditor.keywords ) CodeEditor.keywords[lang] = CodeEditor.keywords[lang].reduce((a, v) => ({ ...a, [v]: true}), {});
+            for( let lang in CodeEditor.utils ) CodeEditor.utils[lang] = CodeEditor.utils[lang].reduce((a, v) => ({ ...a, [v]: true}), {});
+            for( let lang in CodeEditor.types ) CodeEditor.types[lang] = CodeEditor.types[lang].reduce((a, v) => ({ ...a, [v]: true}), {});
+            for( let lang in CodeEditor.builtin ) CodeEditor.builtin[lang] = CodeEditor.builtin[lang].reduce((a, v) => ({ ...a, [v]: true}), {});
+            for( let lang in CodeEditor.statementsAndDeclarations ) CodeEditor.statementsAndDeclarations[lang] = CodeEditor.statementsAndDeclarations[lang].reduce((a, v) => ({ ...a, [v]: true}), {});
+            for( let lang in CodeEditor.symbols ) CodeEditor.symbols[lang] = CodeEditor.symbols[lang].reduce((a, v) => ({ ...a, [v]: true}), {});
+    
+            CodeEditor._staticReady = true;
+        }
 
         // Action keys
 
         this.action( 'Escape', false, ( ln, cursor, e ) => {
-            this.hideAutoCompleteBox();
-            this.hideSearchBox();
+            if( this.hideAutoCompleteBox() )
+                return;
+            if( this.hideSearchBox() )
+                return;
+            // Remove selections and cursors
+            this.endSelection();
             this._removeSecondaryCursors();
         });
 
@@ -575,7 +618,7 @@ class CodeEditor {
 
             this._addUndoStep( cursor );
 
-            if( this.selection ) {
+            if( cursor.selection ) {
                 this.deleteSelection( cursor );
                 // Remove entire line when selecting with triple click
                 if( this._tripleClickSelection ) 
@@ -629,7 +672,7 @@ class CodeEditor {
 
             this._addUndoStep( cursor );
             
-            if(this.selection) {
+            if( cursor.selection ) {
                 // Use 'Backspace' as it's the same callback...
                 this.actions['Backspace'].callback( ln, cursor, e );
             }
@@ -640,7 +683,7 @@ class CodeEditor {
                     this.code.lines[ ln ] = sliceChars( this.code.lines[ ln ], cursor.position );
                     this.processLine( ln );
                 } 
-                else if(this.code.lines[ ln + 1 ] != undefined) {
+                else if( this.code.lines[ ln + 1 ] != undefined ) {
                     this.code.lines[ ln ] += this.code.lines[ ln + 1 ];
                     this.code.lines.splice( ln + 1, 1 );
                     this.processLines();
@@ -650,14 +693,31 @@ class CodeEditor {
 
         this.action( 'Tab', true, ( ln, cursor, e ) => {
             
-            if( this.isAutoCompleteActive )
+            if( this._skipTabs )
             {
-                this.autoCompleteWord( cursor );
-            } else 
+                this._skipTabs--;
+                if( !this._skipTabs )
+                    delete this._skipTabs;
+            }
+            else if( this.isAutoCompleteActive )
             {
-                this.addSpaces( this.tabSpaces );
+                this.autoCompleteWord();
             }
-        });
+            else
+            {
+                this._addUndoStep( cursor );
+
+                if( e && e.shiftKey )
+                {
+                    this._removeSpaces( cursor );
+                }
+                else
+                {
+                    const indentSpaces = this.tabSpaces - (cursor.position % this.tabSpaces);
+                    this._addSpaces( indentSpaces );
+                }
+            }
+        }, "shiftKey");
 
         this.action( 'Home', false, ( ln, cursor, e ) => {
             
@@ -670,7 +730,8 @@ class CodeEditor {
             let lastX = cursor.position;
 
             this.resetCursorPos( CodeEditor.CURSOR_LEFT, cursor );
-            if(idx > 0) this.cursorToString( cursor, prestring );
+            if(idx > 0)
+                this.cursorToString( cursor, prestring );
             this.setScrollLeft( 0 );
 
             // Merge cursors
@@ -679,18 +740,18 @@ class CodeEditor {
             if( e.shiftKey && !e.cancelShift )
             {
                 // Get last selection range
-                if( this.selection ) 
-                    lastX += this.selection.chars;
+                if( cursor.selection ) 
+                    lastX += cursor.selection.chars;
 
-                if( !this.selection )
+                if( !cursor.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 ) );
+                if( cursor.selection.sameLine() )
+                    cursor.selection.selectInline( cursor, idx, cursor.line, this.measureString( string ) );
                 else
                 {
-                    this.processSelection( e );
+                    this._processSelection( cursor, e );
                 }
             } else if( !e.keepSelection )
                 this.endSelection();
@@ -701,15 +762,15 @@ class CodeEditor {
             if( ( e.shiftKey || e._shiftKey ) && !e.cancelShift ) {
                 
                 var string = this.code.lines[ ln ].substring( cursor.position );
-                if( !this.selection )
+                if( !cursor.selection )
                     this.startSelection( cursor );
-                if( this.selection.sameLine() )
-                    this.selection.selectInline(cursor.position, cursor.line, this.measureString( string ));
+                if( cursor.selection.sameLine() )
+                    cursor.selection.selectInline( cursor, cursor.position, cursor.line, this.measureString( string ));
                 else
                 {
                     this.resetCursorPos( CodeEditor.CURSOR_LEFT, cursor );
                     this.cursorToString( cursor, this.code.lines[ ln ] );            
-                    this.processSelection( e );
+                    this._processSelection( cursor, e );
                 }
             } else if( !e.keepSelection )
                 this.endSelection();
@@ -729,7 +790,7 @@ class CodeEditor {
             // Add word
             if( this.isAutoCompleteActive )
             {
-                this.autoCompleteWord( cursor );
+                this.autoCompleteWord();
                 return;
             }
 
@@ -756,10 +817,10 @@ class CodeEditor {
 
             if( _c0 == '{' && _c1 == '}' ) {
                 this.code.lines.splice( cursor.line, 0, "" );
-                this.addSpaceTabs( tabs + 1 );
+                this._addSpaceTabs( cursor, tabs + 1 );
                 this.code.lines[ cursor.line + 1 ] = " ".repeat(spaces) + this.code.lines[ cursor.line + 1 ];
             } else {
-                this.addSpaceTabs( tabs );
+                this._addSpaceTabs( cursor, tabs );
             }
 
             this.processLines();
@@ -771,7 +832,7 @@ class CodeEditor {
             if( !this.isAutoCompleteActive )
             {
                 if( e.shiftKey ) {
-                    if( !this.selection )
+                    if( !cursor.selection )
                         this.startSelection( cursor );
 
                     this.lineUp( cursor );
@@ -781,7 +842,7 @@ class CodeEditor {
                         this.cursorToPosition( cursor, this.code.lines[ cursor.line ].length );
                     }
                     
-                    this.processSelection( e, false );
+                    this._processSelection( cursor, e, false );
 
                 } else {
                     this.endSelection();
@@ -804,7 +865,7 @@ class CodeEditor {
             if( !this.isAutoCompleteActive )
             {
                 if( e.shiftKey ) {
-                    if( !this.selection )
+                    if( !cursor.selection )
                         this.startSelection( cursor );
                 } else {
                     this.endSelection();
@@ -819,7 +880,7 @@ class CodeEditor {
                 }
 
                 if( e.shiftKey ) {
-                    this.processSelection( e );
+                    this._processSelection( cursor, e );
                 }
             } 
             // Move down autocomplete selection
@@ -853,37 +914,37 @@ class CodeEditor {
                 var diff = Math.max( cursor.position - from, 1 );
                 var substr = word.substr( 0, diff );
                 // Selections...
-                if( e.shiftKey ) { if( !this.selection ) this.startSelection( cursor ); }
+                if( e.shiftKey ) { if( !cursor.selection ) this.startSelection( cursor ); }
                 else this.endSelection();
                 this.cursorToString( cursor, substr, true );
-                if( e.shiftKey ) this.processSelection( e, false, true );
+                if( e.shiftKey ) this._processSelection( cursor, e, false, true );
             }
             else {
                 var letter = this.getCharAtPos( cursor, -1 );
                 if( letter ) {
                     if( e.shiftKey ) {
-                        if( !this.selection ) this.startSelection( cursor );
+                        if( !cursor.selection ) this.startSelection( cursor );
                         this.cursorToLeft( letter, cursor );
-                        this.processSelection( e, false, CodeEditor.SELECTION_X );
+                        this._processSelection( cursor, e, false, CodeEditor.SELECTION_X );
                     }
                     else {
-                        if( !this.selection ) {
+                        if( !cursor.selection ) {
                             this.cursorToLeft( letter, cursor );
                             if( this.useAutoComplete && this.isAutoCompleteActive )
                                 this.showAutoCompleteBox( 'foo', cursor );
                         }
                         else {
-                            this.selection.invertIfNecessary();
+                            cursor.selection.invertIfNecessary();
                             this.resetCursorPos( CodeEditor.CURSOR_LEFT | CodeEditor.CURSOR_TOP, cursor );
-                            this.cursorToLine( cursor, this.selection.fromY, true );
-                            this.cursorToPosition( cursor, this.selection.fromX );
+                            this.cursorToLine( cursor, cursor.selection.fromY, true );
+                            this.cursorToPosition( cursor, cursor.selection.fromX );
                             this.endSelection();
                         }
                     }
                 }
                 else if( cursor.line > 0 ) {
                     
-                    if( e.shiftKey && !this.selection ) this.startSelection( cursor );
+                    if( e.shiftKey && !cursor.selection ) this.startSelection( cursor );
                         
                     this.lineUp( cursor );
 
@@ -891,7 +952,7 @@ class CodeEditor {
                     this.actions[ 'End' ].callback( cursor.line, cursor, e );
                     delete e.cancelShift; delete e.keepSelection;
 
-                    if( e.shiftKey ) this.processSelection( e, false );
+                    if( e.shiftKey ) this._processSelection( cursor, e, false );
                 }
             }
         });
@@ -903,40 +964,61 @@ class CodeEditor {
                 cursor.position == this.code.lines[ cursor.line ].length )
             return;
 
-            if( e.metaKey ) { // Apple devices (Command)
+            if( e.metaKey ) // Apple devices (Command)
+            {
                 e.preventDefault();
                 this.actions[ 'End' ].callback( ln, cursor );
-            } else if( e.ctrlKey ) {
+            }
+            else if( e.ctrlKey ) // Next word
+            {
                 // Get next word
                 const [ word, from, to ] = this.getWordAtPos( cursor );
+
                 // If no length, we change line..
                 if( !word.length ) this.lineDown( cursor, true );
                 var diff = cursor.position - from;
                 var substr = word.substr( diff );
+
                 // Selections...
-                if( e.shiftKey ) { if( !this.selection ) this.startSelection( cursor ); }
-                else this.endSelection();
+                if( e.shiftKey ) {
+                    if( !cursor.selection )
+                        this.startSelection( cursor );
+                }
+                else
+                    this.endSelection();
+
                 this.cursorToString( cursor, substr );
-                if( e.shiftKey ) this.processSelection( e );
-            } else {
+
+                if( e.shiftKey )
+                    this._processSelection( cursor, e );
+            }
+            else // Next char
+            {
                 var letter = this.getCharAtPos( cursor );
                 if( letter ) {
-                    if( e.shiftKey ) {
-                        if( !this.selection ) this.startSelection( cursor );
+
+                    // Selecting chars
+                    if( e.shiftKey )
+                    {
+                        if( !cursor.selection )
+                            this.startSelection( cursor );
+
                         this.cursorToRight( letter, cursor );
-                        this.processSelection( e, false, CodeEditor.SELECTION_X );
-                    }else{
-                        if( !this.selection ) {
+                        this._processSelection( cursor, e, false, CodeEditor.SELECTION_X );
+                    }
+                    else
+                    {
+                        if( !cursor.selection ) {
                             this.cursorToRight( letter, cursor );
                             if( this.useAutoComplete && this.isAutoCompleteActive )
                                 this.showAutoCompleteBox( 'foo', cursor );
                         }
-                        else 
+                        else
                         {
-                            this.selection.invertIfNecessary();
+                            cursor.selection.invertIfNecessary();
                             this.resetCursorPos( CodeEditor.CURSOR_LEFT | CodeEditor.CURSOR_TOP, cursor );
-                            this.cursorToLine( cursor, this.selection.toY );
-                            this.cursorToPosition( cursor, this.selection.toX );
+                            this.cursorToLine( cursor, cursor.selection.toY );
+                            this.cursorToPosition( cursor, cursor.selection.toX );
                             this.endSelection();
                         }
                     }
@@ -944,12 +1026,13 @@ class CodeEditor {
                 else if( this.code.lines[ cursor.line + 1 ] !== undefined ) {
                     
                     if( e.shiftKey ) {
-                        if( !this.selection ) this.startSelection( cursor );
+                        if( !cursor.selection ) this.startSelection( cursor );
                     }
+                    else this.endSelection();
 
                     this.lineDown( cursor, true );
                     
-                    if( e.shiftKey ) this.processSelection( e, false );
+                    if( e.shiftKey ) this._processSelection( cursor, e, false );
 
                     this.hideAutoCompleteBox();
                 }
@@ -1049,14 +1132,14 @@ class CodeEditor {
 
         let lidx = cursor.line;
 
-        if( this.selection ) {
+        if( cursor.selection ) {
             this.deleteSelection( cursor );
             lidx = cursor.line;
         }
 
         this.endSelection();
 
-        const new_lines = text.split( '\n' );
+        const new_lines = text.replaceAll( '\r', '' ).split( '\n' );
 
         // Pasting Multiline...
         if( new_lines.length != 1 )
@@ -1111,10 +1194,16 @@ class CodeEditor {
 
         const inner_add_tab = ( text, name, title ) => {
 
+            // Remove Carriage Return in some cases and sub tabs using spaces
+            text = text.replaceAll( '\r', '' );
+            text = text.replaceAll( /\t|\\t/g, ' '.repeat( this.tabSpaces ) );
+
             // Set current text and language
-            const lines = text.replaceAll( '\r', '' ).split( '\n' );
+
+            const lines = text.split( '\n' );
 
             // Add item in the explorer if used
+
             if( this.explorer )
             {
                 this._storedLines = this._storedLines ?? {};
@@ -1163,6 +1252,7 @@ class CodeEditor {
         }
          
         let cursor = document.createElement( 'div' );
+        cursor.name = "cursor" + this.cursors.childElementCount;
         cursor.className = "cursor";
         cursor.innerHTML = "&nbsp;";
         cursor.isMain = isMain;
@@ -1385,14 +1475,25 @@ class CodeEditor {
 
             panel.sameLine();
             panel.addLabel( this.code.title, { float: 'right', signal: "@tab-name" });
-            panel.addLabel( "Ln " + 1, { width: "64px", signal: "@cursor-line" });
-            panel.addLabel( "Col " + 1, { width: "64px", signal: "@cursor-pos" });
+            panel.addLabel( "Ln " + 1, { maxWidth: "48px", signal: "@cursor-line" });
+            panel.addLabel( "Col " + 1, { maxWidth: "48px", signal: "@cursor-pos" });
+            panel.addButton( null, "Spaces: " + this.tabSpaces, ( value, event ) => {
+                LX.addContextMenu( "Spaces", event, m => {
+                    const options = [ 2, 4, 8 ];
+                    for( const n of options )
+                        m.add( n, (v) => {
+                            this.tabSpaces = v;
+                            this.processLines();
+                            this._updateDataInfoPanel( "@tab-spaces", "Spaces: " + this.tabSpaces );
+                        } );
+                });
+            }, { width: "10%", nameWidth: "15%", signal: "@tab-spaces" });
             panel.addButton( "<b>{ }</b>", this.highlight, ( value, event ) => {
                 LX.addContextMenu( "Language", event, m => {
                     for( const lang of Object.keys(this.languages) )
                         m.add( lang, this._changeLanguage.bind(this) );
                 });
-            }, { width: "25%", nameWidth: "15%", signal: "@highlight" });
+            }, { width: "17.5%", nameWidth: "15%", signal: "@highlight" });
             panel.endLine();
 
             return panel;
@@ -1639,12 +1740,12 @@ class CodeEditor {
             {
                 this.processClick( e );
 
-                this.canOpenContextMenu = !this.selection;
+                this.canOpenContextMenu = !cursor.selection;
 
-                if( this.selection )
+                if( cursor.selection )
                 {
-                    this.canOpenContextMenu |= (cursor.line >= this.selection.fromY && cursor.line <= this.selection.toY 
-                                                && cursor.position >= this.selection.fromX && cursor.position <= this.selection.toX);
+                    this.canOpenContextMenu |= (cursor.line >= cursor.selection.fromY && cursor.line <= cursor.selection.toY 
+                                                && cursor.position >= cursor.selection.fromX && cursor.position <= cursor.selection.toX);
                     if( this.canOpenContextMenu )
                         return;
                 }
@@ -1664,7 +1765,7 @@ class CodeEditor {
         else if( e.type == 'mousemove' )
         {
             if( this.state.selectingText )
-                this.processSelection( e );
+                this.processSelections( e );
         }
 
         else if ( e.type == 'click' ) // trip
@@ -1676,7 +1777,7 @@ class CodeEditor {
                     this.resetCursorPos( CodeEditor.CURSOR_LEFT, cursor );
                     this.cursorToPosition( cursor, from );
                     this.startSelection( cursor );
-                    this.selection.selectInline( from, cursor.line, this.measureString( word ) );
+                    cursor.selection.selectInline( cursor, from, cursor.line, this.measureString( word ) );
                     this.cursorToString( cursor, word ); // Go to the end of the word
                     break;
                 // Select entire line
@@ -1705,6 +1806,8 @@ class CodeEditor {
                     m.add( "" );
                     m.add( "Format/JSON", () => { 
                         let json = this.toJSONFormat( this.getText() );
+                        if( !json )
+                            return;
                         this.code.lines = json.split( "\n" ); 
                         this.processLines();
                     } );
@@ -1722,10 +1825,9 @@ class CodeEditor {
             this.endSelection();
         }
 
-        if( this.selection )
-        {
-            this.selection.invertIfNecessary();
-        }
+        const cursor = this._getCurrentCursor();
+        if( cursor.selection )
+            cursor.selection.invertIfNecessary();
 
         this.state.selectingText = false;
         delete this._lastSelectionKeyDir;
@@ -1764,13 +1866,32 @@ class CodeEditor {
         this.hideAutoCompleteBox();
     }
 
-    processSelection( e, keep_range, flags = CodeEditor.SELECTION_X_Y ) {
+    updateSelections( e, keep_range, flags = CodeEditor.SELECTION_X_Y ) {
+
+        for( let cursor of this.cursors.children )
+        {
+            if( !cursor.selection )
+                continue;
+
+            this._processSelection( cursor, e, keep_range, flags );
+        }
+    }
+
+    processSelections( e, keep_range, flags = CodeEditor.SELECTION_X_Y ) {
+
+        for( let cursor of this.cursors.children )
+        {
+            this._processSelection( cursor, e, keep_range, flags );
+        }
+    }
+
+    _processSelection( cursor, e, keep_range, flags = CodeEditor.SELECTION_X_Y ) {
 
-        var cursor = this._getCurrentCursor();
         const isMouseEvent = e && ( e.constructor == MouseEvent );
 
         if( isMouseEvent ) this.processClick( e );
-        if( !this.selection )
+
+        if( !cursor.selection )
             this.startSelection( cursor );
 
         this._hideActiveLine();
@@ -1781,46 +1902,48 @@ class CodeEditor {
             let ccw = true;
 
             // Check if we must change ccw or not ... (not with mouse)
-            if( !isMouseEvent && this.line >= this.selection.fromY && 
-                (this.line == this.selection.fromY ? this.position >= this.selection.fromX : true) )
+            if( !isMouseEvent && cursor.line >= cursor.selection.fromY && 
+                (cursor.line == cursor.selection.fromY ? cursor.position >= cursor.selection.fromX : true) )
             {
                 ccw = ( e && this._lastSelectionKeyDir && ( e.key == 'ArrowRight' || e.key == 'ArrowDown' || e.key == 'End' ) );
             }
 
             if( ccw )
             {
-                if( flags & CodeEditor.SELECTION_X ) this.selection.fromX = cursor.position;
-                if( flags & CodeEditor.SELECTION_Y ) this.selection.fromY = cursor.line;
+                if( flags & CodeEditor.SELECTION_X ) cursor.selection.fromX = cursor.position;
+                if( flags & CodeEditor.SELECTION_Y ) cursor.selection.fromY = cursor.line;
             }
             else
             {
-                if( flags & CodeEditor.SELECTION_X ) this.selection.toX = cursor.position;
-                if( flags & CodeEditor.SELECTION_Y ) this.selection.toY = cursor.line;
+                if( flags & CodeEditor.SELECTION_X ) cursor.selection.toX = cursor.position;
+                if( flags & CodeEditor.SELECTION_Y ) cursor.selection.toY = cursor.line;
             }
 
             this._lastSelectionKeyDir = ccw;
         }
 
         // Only leave if not a mouse selection...
-        if( !isMouseEvent && this.selection.isEmpty() )
+        if( !isMouseEvent && cursor.selection.isEmpty() )
         {
             this.endSelection();
             return;
         }
 
-        this.selection.chars = 0;
+        cursor.selection.chars = 0;
 
-        const fromX = this.selection.fromX,
-                fromY = this.selection.fromY,
-                toX = this.selection.toX,
-                toY = this.selection.toY;
+        const fromX = cursor.selection.fromX,
+                fromY = cursor.selection.fromY,
+                toX = cursor.selection.toX,
+                toY = cursor.selection.toY;
         const deltaY = toY - fromY;
 
+        let cursorSelections = this.selections[ cursor.name ];
+
         // Selection goes down...
         if( deltaY >= 0 )
         {
-            while( deltaY < ( this.selections.childElementCount - 1 ) )
-                deleteElement( this.selections.lastChild );
+            while( deltaY < ( cursorSelections.childElementCount - 1 ) )
+                deleteElement( cursorSelections.lastChild );
 
             for(let i = fromY; i <= toY; i++){
 
@@ -1831,12 +1954,12 @@ class CodeEditor {
                 if( isVisible )
                 {
                     // Make sure that the line selection is generated...
-                    domEl = this.selections.childNodes[ sId ];
+                    domEl = cursorSelections.childNodes[ sId ];
                     if(!domEl)
                     {
                         domEl = document.createElement( 'div' );
                         domEl.className = "lexcodeselection";
-                        this.selections.appendChild( domEl );
+                        cursorSelections.appendChild( domEl );
                     }
                 }
 
@@ -1858,7 +1981,7 @@ class CodeEditor {
                 }
                 
                 const stringWidth = this.measureString( string );
-                this.selection.chars += stringWidth / this.charWidth;
+                cursor.selection.chars += stringWidth / this.charWidth;
 
                 if( isVisible )
                 {
@@ -1870,8 +1993,8 @@ class CodeEditor {
         }
         else // Selection goes up...
         {
-            while( Math.abs( deltaY ) < ( this.selections.childElementCount - 1 ) )            
-                deleteElement( this.selections.firstChild );
+            while( Math.abs( deltaY ) < ( cursorSelections.childElementCount - 1 ) )
+                deleteElement( cursorSelections.firstChild );
 
             for( let i = toY; i <= fromY; i++ ){
 
@@ -1882,12 +2005,12 @@ class CodeEditor {
                 if( isVisible )
                 {
                     // Make sure that the line selection is generated...
-                    domEl = this.selections.childNodes[ sId ];
+                    domEl = cursorSelections.childNodes[ sId ];
                     if(!domEl)
                     {
                         domEl = document.createElement( 'div' );
                         domEl.className = "lexcodeselection";
-                        this.selections.appendChild( domEl );
+                        cursorSelections.appendChild( domEl );
                     }
                 }
 
@@ -1907,7 +2030,7 @@ class CodeEditor {
                 }
                 
                 const stringWidth = this.measureString( string );
-                this.selection.chars += stringWidth / this.charWidth;
+                cursor.selection.chars += stringWidth / this.charWidth;
                 
                 if( isVisible )
                 {
@@ -1998,46 +2121,59 @@ class CodeEditor {
 
         if( e.ctrlKey || e.metaKey )
         {
-            e.preventDefault();
-
             switch( key.toLowerCase() ) {
             case 'a': // select all
+                e.preventDefault();
                 this.selectAll();
                 return true;
             case 'c': // k+c, comment line
+                e.preventDefault();
                 if( this.state.keyChain == 'k' ) {
                     this._commentLines();
                     return true;
                 }
                 return false;
+            case 'd': // next ocurrence
+                e.preventDefault();
+                this.selectNextOcurrence( cursor );
+                return true;
             case 'f': // find/search
+                e.preventDefault();
                 this.showSearchBox();
                 return true;
             case 'g': // find line
+                e.preventDefault();
                 this.showSearchLineBox();
                 return true;
             case 'k': // shortcut chain
+                e.preventDefault();
                 this.state.keyChain = 'k';
                 return true;
             case 's': // save
+                e.preventDefault();
                 this.onsave( this.getText() );
                 return true;
             case 'u': // k+u, uncomment line
+                e.preventDefault();
                 if( this.state.keyChain == 'k' ) {
                     this._uncommentLines();
                     return true;
                 }
                 return false;
             case 'y': // redo
+                e.preventDefault();
                 this._doRedo( cursor );
                 return true;
             case 'z': // undo
+                e.preventDefault();
                 this._doUndo( cursor );
                 return true;
             case '+': // increase size
+                e.preventDefault();
                 this._increaseFontSize();
                 return true;
             case '-': // decrease size
+                e.preventDefault();
                 this._decreaseFontSize();
                 return true;
             }
@@ -2066,14 +2202,8 @@ class CodeEditor {
         {
             switch( key.toLowerCase() ) {
             case 'c': // copy
-                // TODO: COPY TEXT FROM EVERY CURSOR
                 this._copyContent( cursor );
                 return;
-            case 'd': // duplicate line
-                e.preventDefault();
-                // TODO: UPDATE NEXT CURSOR ON MODIFY STATE
-                this._duplicateLine( lidx, cursor );
-                return;
             case 'v': // paste
                 this._pasteContent( cursor );
                 return;
@@ -2094,6 +2224,10 @@ class CodeEditor {
         else if( e.altKey )
         {
             switch( key ) {
+                case 'd': // duplicate line
+                e.preventDefault();
+                this._duplicateLine( lidx, cursor );
+                return;
                 case 'ArrowUp':
                 if(this.code.lines[ lidx - 1 ] == undefined)
                     return;
@@ -2121,10 +2255,12 @@ class CodeEditor {
 
         for( const actKey in this.actions ) {
 
-            if( key != actKey ) continue;
+            if( key != actKey )
+                continue;
+
             e.preventDefault();
 
-            if( this.actions[ key ].deleteSelection && this.selection )
+            if( this._actionMustDelete( cursor, this.actions[ key ], e ) )
                 this.actions['Backspace'].callback( lidx, cursor, e );
 
             return this.actions[ key ].callback( lidx, cursor, e );
@@ -2153,7 +2289,7 @@ class CodeEditor {
         // Until this point, if there was a selection, we need 
         // to delete the content..
 
-        if( this.selection )
+        if( cursor.selection )
         {
             this.actions['Backspace'].callback( lidx, cursor, e );
             lidx = cursor.line;
@@ -2214,22 +2350,32 @@ class CodeEditor {
 
         let text = await navigator.clipboard.readText();
 
+        // Remove any possible tabs (\t) and add spaces
+        text = text.replaceAll( /\t|\\t/g, ' '.repeat( this.tabSpaces ) );
+
         this._addUndoStep( cursor, true );
 
         this.appendText( text, cursor );
+
+        const currentScroll = this.getScrollTop();
+        const scroll = Math.max( cursor.line * this.lineHeight - this.codeScroller.offsetWidth, 0 );
+
+        if( currentScroll < scroll ) {
+            this.codeScroller.scrollTo( 0, cursor.line * this.lineHeight );
+        }
     }
 
     async _copyContent( cursor ) {
 
         let text_to_copy = "";
 
-        if( !this.selection ) {
+        if( !cursor.selection ) {
             text_to_copy = "\n" + this.code.lines[ cursor.line ];
         }
         else {
             
             // Some selections don't depend on mouse up..
-            if( this.selection ) this.selection.invertIfNecessary();
+            if( cursor.selection ) cursor.selection.invertIfNecessary();
 
             const separator = "_NEWLINE_";
             let code = this.code.lines.join( separator );
@@ -2237,11 +2383,11 @@ class CodeEditor {
             // 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 <= cursor.selection.fromY; i++ )
+                index += ( i == cursor.selection.fromY ? cursor.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;
+            index += cursor.selection.fromY * separator.length; 
+            const num_chars = cursor.selection.chars + ( cursor.selection.toY - cursor.selection.fromY ) * separator.length;
             const text = code.substr( index, num_chars );
             const lines = text.split( separator );
             text_to_copy = lines.join('\n');
@@ -2257,7 +2403,7 @@ class CodeEditor {
 
         this._addUndoStep( cursor, true );
 
-        if( !this.selection ) {
+        if( !cursor.selection ) {
             text_to_cut = "\n" + this.code.lines[ cursor.line ];
             this.code.lines.splice( lidx, 1 );
             this.processLines();
@@ -2268,7 +2414,7 @@ class CodeEditor {
         else {
             
             // Some selections don't depend on mouse up..
-            if( this.selection ) this.selection.invertIfNecessary();
+            if( cursor.selection ) cursor.selection.invertIfNecessary();
 
             const separator = "_NEWLINE_";
             let code = this.code.lines.join(separator);
@@ -2276,11 +2422,11 @@ class CodeEditor {
             // 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 <= cursor.selection.fromY; i++)
+                index += (i == cursor.selection.fromY ? cursor.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;
+            index += cursor.selection.fromY * separator.length; 
+            const num_chars = cursor.selection.chars + (cursor.selection.toY - cursor.selection.fromY) * separator.length;
             const text = code.substr(index, num_chars);
             const lines = text.split(separator);
             text_to_cut = lines.join('\n');
@@ -2305,18 +2451,18 @@ class CodeEditor {
 
         this.state.keyChain = null;
 
-        if( this.selection )
+        if( cursor.selection )
         {
             var cursor = this._getCurrentCursor();
             this._addUndoStep( cursor, true );
 
-            const selectedLines = this.code.lines.slice( this.selection.fromY, this.selection.toY );
+            const selectedLines = this.code.lines.slice( cursor.selection.fromY, cursor.selection.toY );
             const minIdx = Math.min(...selectedLines.map( v => {
                 var idx = firstNonspaceIndex( v );
                 return idx < 0 ? 1e10 : idx;
             } ));
 
-            for( var i = this.selection.fromY; i <= this.selection.toY; ++i )
+            for( var i = cursor.selection.fromY; i <= cursor.selection.toY; ++i )
             {
                 this._commentLine( cursor, i, minIdx );
             }
@@ -2364,12 +2510,12 @@ class CodeEditor {
 
         this.state.keyChain = null;
 
-        if( this.selection )
+        if( cursor.selection )
         {
             var cursor = this._getCurrentCursor();
             this._addUndoStep( cursor, true );
 
-            for( var i = this.selection.fromY; i <= this.selection.toY; ++i )
+            for( var i = cursor.selection.fromY; i <= cursor.selection.toY; ++i )
             {
                 this._uncommentLine( cursor, i );
             }
@@ -2409,14 +2555,22 @@ class CodeEditor {
         }
     }
 
-    action( key, deleteSelection, fn ) {
+    action( key, deleteSelection, fn, eventSkipDelete ) {
 
         this.actions[ key ] = {
+            "key": key,
             "callback": fn,
-            "deleteSelection": deleteSelection
+            "deleteSelection": deleteSelection,
+            "eventSkipDelete": eventSkipDelete
         };
     }
 
+    _actionMustDelete( cursor, action, e ) {
+
+        return cursor.selection && action.deleteSelection &&
+            ( action.eventSkipDelete ? !e[ action.eventSkipDelete ] : true );
+    }
+
     scanWordSuggestions() {
 
         this.code.tokens = {};
@@ -2478,8 +2632,7 @@ class CodeEditor {
         this.code.style.top = ( this.visibleLinesViewport.x * this.lineHeight ) + "px";
 
         // Update selections
-        if( this.selection )
-            this.processSelection( null, true );
+        this.updateSelections( null, true );
 
         this._clearTmpVariables();
         this._setActiveLine();
@@ -2742,111 +2895,98 @@ class CodeEditor {
         
         const usesBlockComments = lang.blockComments ?? true;
         const blockCommentsTokens = lang.blockCommentsTokens ?? this.defaultBlockCommentTokens;
+        const singleLineCommentToken = lang.singleLineCommentToken ?? this.defaultSingleLineCommentToken;
+        
+        let token_classname = "";
+        let discardToken = false;
 
-        if( !usePreviousTokenToCheckString && token == ' ' )
-        {
-            if( this._buildingString != undefined )
-            {
-                this._appendStringToken( token );
-                return "";
-            }
-            return token;
-        }
-        else
-        {
-            const singleLineCommentToken = lang.singleLineCommentToken ?? this.defaultSingleLineCommentToken;
-            
-            let token_classname = "";
-            let discardToken = false;
-
-            if( this._buildingBlockComment != undefined )
-                token_classname = "cm-com";
-            
-            else if( this._buildingString != undefined )
-                discardToken = this._appendStringToken( token );
-            
-            else if( this._mustHightlightWord( token, CodeEditor.keywords ) && ( lang.tags ?? false ? ( this._enclosedByTokens( token, tokenIndex, '<', '>' ) ) : true ) )
-                token_classname = "cm-kwd";
+        if( this._buildingBlockComment != undefined )
+            token_classname = "cm-com";
+        
+        else if( this._buildingString != undefined )
+            discardToken = this._appendStringToken( token );
+        
+        else if( this._mustHightlightWord( token, CodeEditor.keywords ) && ( lang.tags ?? false ? ( this._enclosedByTokens( token, tokenIndex, '<', '>' ) ) : true ) )
+            token_classname = "cm-kwd";
 
-            else if( this._mustHightlightWord( token, CodeEditor.builtin ) && ( lang.tags ?? false ? ( this._enclosedByTokens( token, tokenIndex, '<', '>' ) ) : true ) )
-                token_classname = "cm-bln";
+        else if( this._mustHightlightWord( token, CodeEditor.builtin ) && ( lang.tags ?? false ? ( this._enclosedByTokens( token, tokenIndex, '<', '>' ) ) : true ) )
+            token_classname = "cm-bln";
 
-            else if( this._mustHightlightWord( token, CodeEditor.statementsAndDeclarations ) )
-                token_classname = "cm-std";
+        else if( this._mustHightlightWord( token, CodeEditor.statementsAndDeclarations ) )
+            token_classname = "cm-std";
 
-            else if( this._mustHightlightWord( token, CodeEditor.symbols ) )
-                token_classname = "cm-sym";
+        else if( this._mustHightlightWord( token, CodeEditor.symbols ) )
+            token_classname = "cm-sym";
 
-            else if( token.substr( 0, singleLineCommentToken.length ) == singleLineCommentToken )
-                token_classname = "cm-com";
+        else if( token.substr( 0, singleLineCommentToken.length ) == singleLineCommentToken )
+            token_classname = "cm-com";
 
-            else if( this._isNumber( token ) || this._isNumber( token.replace(/[px]|[em]|%/g,'') ) )
-                token_classname = "cm-dec";
+        else if( this._isNumber( token ) || this._isNumber( token.replace(/[px]|[em]|%/g,'') ) )
+            token_classname = "cm-dec";
 
-            else if( this._isCSSClass( token, prev, next ) )
-                token_classname = "cm-kwd";
+        else if( this._isCSSClass( token, prev, next ) )
+            token_classname = "cm-kwd";
 
-            else if ( this._isType( token, prev, next ) )
-                token_classname = "cm-typ";
+        else if ( this._isType( token, prev, next ) )
+            token_classname = "cm-typ";
 
-            else if ( highlight == 'batch' && ( token == '@' || prev == ':' || prev == '@' ) )
-                token_classname = "cm-kwd";
+        else if ( highlight == 'batch' && ( token == '@' || prev == ':' || prev == '@' ) )
+            token_classname = "cm-kwd";
 
-            else if ( [ 'cpp', 'wgsl', 'glsl' ].indexOf( highlight ) > -1 && token.includes( '#' ) ) // C++ preprocessor
-                token_classname = "cm-ppc";
+        else if ( [ 'cpp', 'wgsl', 'glsl' ].indexOf( highlight ) > -1 && token.includes( '#' ) ) // C++ preprocessor
+            token_classname = "cm-ppc";
 
-            else if ( highlight == 'cpp' && prev == '<' && (next == '>' || next == '*') ) // Defining template type in C++
-                token_classname = "cm-typ";
+        else if ( highlight == 'cpp' && prev == '<' && (next == '>' || next == '*') ) // Defining template type in C++
+            token_classname = "cm-typ";
 
-            else if ( highlight == 'cpp' && (next == '::' || prev == '::' && next != '(' )) // C++ Class
-                token_classname = "cm-typ";
+        else if ( highlight == 'cpp' && (next == '::' || prev == '::' && next != '(' )) // C++ Class
+            token_classname = "cm-typ";
 
-            else if ( highlight == 'css' && prev == ':' && (next == ';' || next == '!important') ) // CSS value
-                token_classname = "cm-str";
+        else if ( highlight == 'css' && prev == ':' && (next == ';' || next == '!important') ) // CSS value
+            token_classname = "cm-str";
 
-            else if ( highlight == 'css' && prev == undefined && next == ':' ) // CSS attribute
-                token_classname = "cm-typ";
-            
-            else if ( this._markdownHeader || ( highlight == 'markdown' && isFirstToken && token.replaceAll('#', '').length != token.length ) ) // Header
-            {
-                token_classname = "cm-kwd";
-                this._markdownHeader = true;
-            }
+        else if ( highlight == 'css' && prev == undefined && next == ':' ) // CSS attribute
+            token_classname = "cm-typ";
+        
+        else if ( this._markdownHeader || ( highlight == 'markdown' && isFirstToken && token.replaceAll('#', '').length != token.length ) ) // Header
+        {
+            token_classname = "cm-kwd";
+            this._markdownHeader = true;
+        }
 
-            else if ( token[ 0 ] != '@' && token[ 0 ] != ',' && next == '(' )
-                token_classname = "cm-mtd";
+        else if ( token[ 0 ] != '@' && token[ 0 ] != ',' && next == '(' )
+            token_classname = "cm-mtd";
 
 
-            if( usesBlockComments && this._buildingBlockComment != undefined 
-                && token.substr( 0, blockCommentsTokens[ 1 ].length ) == blockCommentsTokens[ 1 ] )
-            {
-                this._blockCommentCache.push( new LX.vec2( this._buildingBlockComment, this._currentLineNumber ) );
-                delete this._buildingBlockComment;
-            }
+        if( usesBlockComments && this._buildingBlockComment != undefined 
+            && token.substr( 0, blockCommentsTokens[ 1 ].length ) == blockCommentsTokens[ 1 ] )
+        {
+            this._blockCommentCache.push( new LX.vec2( this._buildingBlockComment, this._currentLineNumber ) );
+            delete this._buildingBlockComment;
+        }
 
-            // We finished constructing a string
-            if( this._buildingString && ( this._stringEnded || isLastToken ) )
-            {
-                token = this._getCurrentString();
-                token_classname = "cm-str";
-                discardToken = false;
-            }
+        // We finished constructing a string
+        if( this._buildingString && ( this._stringEnded || isLastToken ) )
+        {
+            token = this._getCurrentString();
+            token_classname = "cm-str";
+            discardToken = false;
+        }
 
-            // Update state
-            this._buildingString = this._stringEnded ? undefined : this._buildingString;
+        // Update state
+        this._buildingString = this._stringEnded ? undefined : this._buildingString;
 
-            if( discardToken )
-                return "";
+        if( discardToken )
+            return "";
 
-            token = token.replace( "<", "&lt;" );
-            token = token.replace( ">", "&gt;" );
+        token = token.replace( "<", "&lt;" );
+        token = token.replace( ">", "&gt;" );
 
-            // No highlighting, no need to put it inside another span..
-            if( !token_classname.length )
-                return token;
+        // No highlighting, no need to put it inside another span..
+        if( !token_classname.length )
+            return token;
 
-            return "<span class='" + highlight + " " + token_classname + "'>" + token + "</span>";
-        }
+        return "<span class='" + highlight + " " + token_classname + "'>" + token + "</span>";
     }
 
     _appendStringToken( token ) {
@@ -2952,20 +3092,20 @@ class CodeEditor {
 
     _encloseSelectedWordWithKey( key, lidx, cursor ) {
 
-        if( !this.selection || (this.selection.fromY != this.selection.toY) )
+        if( !cursor.selection || (cursor.selection.fromY != cursor.selection.toY) )
         return false;
         
-        this.selection.invertIfNecessary();
+        cursor.selection.invertIfNecessary();
 
         // Insert first..
         this.code.lines[ lidx ] = [
-            this.code.lines[ lidx ].slice(0, this.selection.fromX), 
+            this.code.lines[ lidx ].slice(0, cursor.selection.fromX), 
             key, 
-            this.code.lines[ lidx ].slice(this.selection.fromX)
+            this.code.lines[ lidx ].slice(cursor.selection.fromX)
         ].join('');
 
         // Go to the end of the word
-        this.cursorToPosition(cursor, this.selection.toX + 1);
+        this.cursorToPosition(cursor, cursor.selection.toX + 1);
 
         // Change next key?
         switch(key)
@@ -2986,10 +3126,10 @@ class CodeEditor {
 
         // Recompute and reposition current selection
         
-        this.selection.fromX++; 
-        this.selection.toX++;
+        cursor.selection.fromX++; 
+        cursor.selection.toX++;
 
-        this.processSelection();
+        this._processSelection( cursor );
         this.processLine( lidx );
 
         // Stop propagation
@@ -3037,14 +3177,16 @@ class CodeEditor {
 
     startSelection( cursor ) {
 
-        // Clear other selections...
-        this.selections.innerHTML = "";
-
         // Show elements
-        this.selections.classList.add( 'show' );
+        let selectionContainer = document.createElement( 'div' );
+        selectionContainer.className = 'selections';
+        selectionContainer.classList.add( 'show' );
+
+        this.codeSizer.insertChildAtIndex( selectionContainer, 2 );
+        this.selections[ cursor.name ] = selectionContainer;
 
         // Create new selection instance
-        this.selection = new CodeSelection( this, cursor.position, cursor.line );
+        cursor.selection = new CodeSelection( this, cursor );
     }
 
     deleteSelection( cursor ) {
@@ -3054,37 +3196,52 @@ class CodeEditor {
             return;
 
         // Some selections don't depend on mouse up..
-        if( this.selection ) this.selection.invertIfNecessary();
+        if( cursor.selection ) cursor.selection.invertIfNecessary();
 
         const separator = "_NEWLINE_";
         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 <= cursor.selection.fromY; i++ )
+            index += (i == cursor.selection.fromY ? cursor.selection.fromX : this.code.lines[ i ].length);
 
-        index += this.selection.fromY * separator.length; 
+        index += cursor.selection.fromY * separator.length; 
 
-        const num_chars = this.selection.chars + (this.selection.toY - this.selection.fromY) * separator.length;
+        const num_chars = cursor.selection.chars + (cursor.selection.toY - cursor.selection.fromY) * separator.length;
         const pre = code.slice( 0, index );
         const post = code.slice( index + num_chars );
 
         this.code.lines = ( pre + post ).split( separator );
         
-        this.cursorToLine( cursor, this.selection.fromY, true );
-        this.cursorToPosition( cursor, this.selection.fromX );
-        this.endSelection();
+        this.cursorToLine( cursor, cursor.selection.fromY, true );
+        this.cursorToPosition( cursor, cursor.selection.fromX );
+        this.endSelection( cursor );
         this.processLines();
     }
 
-    endSelection() {
+    endSelection( cursor ) {
 
-        this.selections.classList.remove( 'show' );
-        this.selections.innerHTML = "";
-        delete this.selection;
         delete this._tripleClickSelection;
         delete this._lastSelectionKeyDir;
+        delete this._currentOcurrences;
+        delete this._lastResult;
+
+        if( cursor )
+        {
+            deleteElement( this.selections[ cursor.name ] );
+            delete this.selections[ cursor.name ];
+            delete cursor.selection;
+        }
+        else
+        {
+            for( let cursor of this.cursors.children )
+            {
+                deleteElement( this.selections[ cursor.name ] );
+                delete this.selections[ cursor.name ];
+                delete cursor.selection;
+            }
+        }
     }
 
     selectAll() {
@@ -3098,13 +3255,13 @@ class CodeEditor {
         this.startSelection( cursor );
 
         const nlines = this.code.lines.length - 1;
-        this.selection.toX = this.code.lines[ nlines ].length;
-        this.selection.toY = nlines;
+        cursor.selection.toX = this.code.lines[ nlines ].length;
+        cursor.selection.toY = nlines;
 
-        this.cursorToPosition( cursor, this.selection.toX );
-        this.cursorToLine( cursor, this.selection.toY );
+        this.cursorToPosition( cursor, cursor.selection.toX );
+        this.cursorToLine( cursor, cursor.selection.toY );
 
-        this.processSelection( null, true );
+        this._processSelection( cursor, null, true );
 
         this.hideAutoCompleteBox();
     }
@@ -3210,6 +3367,8 @@ class CodeEditor {
 
         state.position = cursor.position;
         state.line = cursor.line;
+        state.selection = cursor.selection ? cursor.selection.save() : undefined;
+
         return state;
     }
 
@@ -3242,7 +3401,7 @@ class CodeEditor {
         const cursorsInLine = Array.from( this.cursors.children ).filter( v => v.line == line );
 
         while( cursorsInLine.length > 1 )
-            cursorsInLine.pop().remove();
+            this.removeCursor( cursorsInLine.pop() );
     }
 
     restoreCursor( cursor, state ) {
@@ -3254,6 +3413,22 @@ class CodeEditor {
         cursor.style.left = "calc(" + cursor._left + "px + " + this.xPadding + ")";
         cursor._top = cursor.line * this.lineHeight;
         cursor.style.top = "calc(" + cursor._top + "px)";
+
+        if( state.selection )
+        {
+            this.startSelection( cursor );
+
+            cursor.selection.load( state.selection );
+
+            this._processSelection( cursor, null, true );
+        }
+    }
+
+    removeCursor( cursor ) {
+
+        deleteElement( this.selections[ cursor.name ] );
+        delete this.selections[ cursor.name ];
+        deleteElement( cursor );
     }
 
     resetCursorPos( flag, cursor ) {
@@ -3275,14 +3450,14 @@ class CodeEditor {
         }
     }
 
-    addSpaceTabs( n ) {
+    _addSpaceTabs( cursor, n ) {
         
         for( var i = 0; i < n; ++i ) {
-            this.actions[ 'Tab' ].callback();
+            this.actions[ 'Tab' ].callback( cursor.line, cursor, null );
         }
     }
 
-    addSpaces( n ) {
+    _addSpaces( n ) {
         
         for( var i = 0; i < n; ++i ) {
             this.root.dispatchEvent( new CustomEvent( 'keydown', { 'detail': {
@@ -3293,6 +3468,37 @@ class CodeEditor {
         }
     }
 
+    _removeSpaces( cursor ) {
+
+        // Remove indentation
+        const lidx = cursor.line;
+        const lineStart = firstNonspaceIndex( this.code.lines[ lidx ] );
+
+        // Nothing to remove...
+        if( lineStart == 0 )
+            return;
+
+        let indentSpaces = lineStart % this.tabSpaces;
+        indentSpaces = indentSpaces == 0 ? this.tabSpaces : indentSpaces;
+        const newStart = Math.max( lineStart - indentSpaces, 0 );
+
+        this.code.lines[ lidx ] = [
+            this.code.lines[ lidx ].slice( 0, newStart ),
+            this.code.lines[ lidx ].slice( lineStart )
+        ].join('');
+
+        this.processLine( lidx );
+
+        this.cursorToString( cursor, " ".repeat( indentSpaces ), true );
+
+        if( cursor.selection )
+        {
+            cursor.selection.invertIfNecessary();
+            cursor.selection.fromX = Math.max( cursor.selection.fromX - indentSpaces, 0 );
+            this._processSelection( cursor );
+        }
+    }
+
     getScrollLeft() {
         
         if( !this.codeScroller ) return 0;
@@ -3562,8 +3768,11 @@ class CodeEditor {
 
     showAutoCompleteBox( key, cursor ) {
         
+        if( !cursor.isMain )
+            return;
+
         const [word, start, end] = this.getWordAtPos( cursor, -1 );
-        if(key == ' ' || !word.length) {
+        if( key == ' ' || !word.length ) {
             this.hideAutoCompleteBox();
             return;
         }
@@ -3610,7 +3819,7 @@ class CodeEditor {
             pre.appendChild( icon );
 
             pre.addEventListener( 'click', () => {
-                this.autoCompleteWord( cursor, s );
+                this.autoCompleteWord( s );
             } ); 
 
             // Highlight the written part
@@ -3642,8 +3851,8 @@ class CodeEditor {
         // Show box
         this.autocomplete.classList.toggle('show', true);
         this.autocomplete.classList.toggle('no-scrollbar', !(this.autocomplete.scrollHeight > this.autocomplete.offsetHeight));
-        this.autocomplete.style.left = (cursor._left + 36 - this.getScrollLeft()) + "px";
-        this.autocomplete.style.top = (cursor._top + 48 - this.getScrollTop()) + "px";
+        this.autocomplete.style.left = (cursor._left + 48 - this.getScrollLeft()) + "px";
+        this.autocomplete.style.top = (cursor._top + 28 + this.lineHeight - this.getScrollTop()) + "px";
 
         this.isAutoCompleteActive = true;
     }
@@ -3656,23 +3865,30 @@ class CodeEditor {
         return isActive != this.isAutoCompleteActive;
     }
 
-    autoCompleteWord( cursor, suggestion ) {
+    autoCompleteWord( suggestion ) {
         
         if( !this.isAutoCompleteActive )
-        return;
+            return;
 
         let [suggestedWord, idx] = this._getSelectedAutoComplete();
         suggestedWord = suggestion ?? suggestedWord;
 
-        const [word, start, end] = this.getWordAtPos( cursor, -1 );
+        for( let cursor of this.cursors.children )
+        {
+            const [word, start, end] = this.getWordAtPos( cursor, -1 );
+
+            const lineString = this.code.lines[ cursor.line ];
+            this.code.lines[ cursor.line ] =
+                lineString.slice(0, start) + suggestedWord + lineString.slice( end );
+
+            // Process lines and remove suggestion box
+            this.cursorToPosition( cursor, start + suggestedWord.length );
+            this.processLine( cursor.line );
+        }
 
-        const lineString = this.code.lines[ cursor.line ];
-        this.code.lines[ cursor.line ] = 
-            lineString.slice(0, start) + suggestedWord + lineString.slice(end);
+        // Only the main cursor autocompletes, skip the "Tab" event for the rest
+        this._skipTabs = this.cursors.childElementCount - 1;
 
-        // Process lines and remove suggestion box
-        this.cursorToPosition(cursor, start + suggestedWord.length);
-        this.processLine(cursor.line);
         this.hideAutoCompleteBox();
     }
 
@@ -3718,6 +3934,8 @@ class CodeEditor {
 
     showSearchBox( clear ) {
         
+        this.hideSearchLineBox();
+
         this.searchbox.classList.add( 'opened' );
         this.searchboxActive = true;
 
@@ -3727,12 +3945,26 @@ class CodeEditor {
         {
             input.value = "";
         }
+        else
+        {
+            const cursor = this._getCurrentCursor();
+
+            if( cursor.selection )
+            {
+                input.value = cursor.selection.getText() ?? input.value;
+            }
+        }
+
+        input.selectionStart = 0;
+        input.selectionEnd = input.value.length;
 
         input.focus();
     }
 
     hideSearchBox() {
 
+        const active = this.searchboxActive;
+
         if( this.searchboxActive )
         {
             this.searchbox.classList.remove( 'opened' );
@@ -3741,31 +3973,49 @@ class CodeEditor {
 
         else if( this._lastResult )
         {
-            this._lastResult.dom.remove();
+            deleteElement( this._lastResult.dom );
             delete this._lastResult;
         }
+
+        this.searchResultSelections.classList.remove( 'show' );
+
+        return active != this.searchboxActive;
     }
 
-    search( text, reverse ) {
+    search( text, reverse, callback, skipAlert ) {
 
         text = text ?? this._lastTextFound;
 
         if( !text )
             return;
 
-        let cursorData = new LX.vec2( this.position, this.line );
+        let cursor = this._getCurrentCursor();
+        let cursorData = new LX.vec2( cursor.position, cursor.line );
         let line = null;
         let char = -1;
 
         if( this._lastResult )
         {
-            this._lastResult.dom.remove();
+            deleteElement( this._lastResult.dom );
             cursorData = this._lastResult.pos;
             delete this._lastResult;
         }
 
         const getIndex = l => {
-            return this.code.lines[ l ].substr( l == cursorData.y ? cursorData.x : 0 ).indexOf( text );
+            
+            var string = this.code.lines[ l ];
+
+            if( reverse )
+            {
+                string = string.substr( 0, l == cursorData.y ? cursorData.x : string.length );
+                var reversed = strReverse( string );
+                var reversedIdx = reversed.indexOf( strReverse( text ) );
+                return reversedIdx == -1 ? -1 : string.length - reversedIdx - text.length;
+            }
+            else
+            {
+                return string.substr( l == cursorData.y ? cursorData.x : 0 ).indexOf( text );
+            }
         };
 
         if( reverse )
@@ -3795,7 +4045,15 @@ class CodeEditor {
 
         if( line == null)
         {
-            alert("No results!")
+            if( !skipAlert )
+                alert( "No results!" );
+
+            const lastLine = this.code.lines.length - 1;
+
+            this._lastResult = {
+                'dom': this.searchResultSelections.lastChild,
+                'pos': reverse ? new LX.vec2( this.code.lines[ lastLine ].length, lastLine ) : new LX.vec2( 0, 0 )
+            };
             return;
         }
         
@@ -3805,32 +4063,44 @@ class CodeEditor {
             have to add the length of the substring (0, first_ocurrence)
         */
 
-        char += ( line == cursorData.y ? cursorData.x : 0 );
+
+        if( !reverse )
+            char += ( line == cursorData.y ? cursorData.x : 0 );
+
 
         // Text found..
 
         this._lastTextFound = text;
 
         this.codeScroller.scrollTo( 
-            Math.max( char * this.charWidth - this.codeScroller.clientWidth ), 
-            Math.max( line - 10 ) * this.lineHeight 
+            Math.max( char * this.charWidth - this.codeScroller.clientWidth, 0 ), 
+            Math.max( line - 10, 0 ) * this.lineHeight 
         );
 
-        // Show elements
-        this.selections.classList.add( 'show' );
+        if( callback )
+        {
+            callback( char, line );
+        }
+        else
+        {
+            // Show elements
+            this.searchResultSelections.classList.add( 'show' );
+
+            // Create new selection instance
+            cursor.selection = new CodeSelection( this, cursor, "lexcodesearchresult" );
+            cursor.selection.selectInline( cursor, char, line, this.measureString( text ), true );
+        }
 
-        // Create new selection instance
-        this.selection = new CodeSelection( this, 0, 0, "lexcodesearchresult" );
-        this.selection.selectInline( char, line, this.measureString( text ) );
         this._lastResult = {
-            'dom': this.selections.lastChild,
-            'pos': new LX.vec2( char + text.length, line )
+            'dom': this.searchResultSelections.lastChild,
+            'pos': new LX.vec2( char + text.length * ( reverse ? -1 : 1 ) , line )
         };
-
     }
 
     showSearchLineBox() {
         
+        this.hideSearchBox();
+
         this.searchlinebox.classList.add( 'opened' );
         this.searchlineboxActive = true;
 
@@ -3860,6 +4130,40 @@ class CodeEditor {
         this.cursorToLine( cursor, line - 1, true );
     }
 
+    selectNextOcurrence( cursor ) {
+
+        if( !cursor.selection )
+            return;
+
+        const text = cursor.selection.getText();
+        if( !text )
+            return;
+
+        if( !this._currentOcurrences )
+        {
+            const currentKey = [ cursor.position - text.length, cursor.line ].join( '_' );
+            this._currentOcurrences = { };
+            this._currentOcurrences[ currentKey ] = true;
+        }
+
+        this.search( text, false, (col, ln) => {
+
+            const key = [ col, ln ].join( '_' );
+
+            if( this._currentOcurrences[ key ] ) {
+                return;
+            }
+
+            var newCursor = this._addCursor( ln, col, true );
+            this.startSelection( newCursor );
+            newCursor.selection.selectInline( newCursor, col, ln, this.measureString( text ) );
+            this.cursorToString( newCursor, text );
+
+            this._currentOcurrences[ key ] = true;
+
+        }, true );
+    }
+
     _updateDataInfoPanel( signal, value ) {
 
         if( !this.skipCodeInfo )
@@ -3962,13 +4266,14 @@ class CodeEditor {
         delete this._pendingString;
         delete this._buildingBlockComment;
         delete this._markdownHeader;
+        delete this._lastResult;
     }
 }
 
 CodeEditor.keywords = {
 
     'JavaScript': ['var', 'let', 'const', 'this', 'in', 'of', 'true', 'false', 'new', 'function', 'NaN', 'static', 'class', 'constructor', 'null', 'typeof', 'debugger', 'abstract',
-                  'arguments', 'extends', 'instanceof'],
+                  'arguments', 'extends', 'instanceof', 'Infinity'],
     'C++': ['int', 'float', 'double', 'bool', 'char', 'wchar_t', 'const', 'static_cast', 'dynamic_cast', 'new', 'delete', 'void', 'true', 'false', 'auto', 'struct', 'typedef', 'nullptr', 
             'NULL', 'unsigned', 'namespace'],
     'JSON': ['true', 'false'],
@@ -4001,7 +4306,8 @@ CodeEditor.utils = { // These ones don't have hightlight, used as suggestions to
 
 CodeEditor.types = {
 
-    'JavaScript': ['Object', 'String', 'Function', 'Boolean', 'Symbol', 'Error', 'Number', 'TextEncoder', 'TextDecoder'],
+    'JavaScript': ['Object', 'String', 'Function', 'Boolean', 'Symbol', 'Error', 'Number', 'TextEncoder', 'TextDecoder', 'Array', 'ArrayBuffer', 'InputEvent', 'MouseEvent',
+                   'Int8Array', 'Int16Array', 'Int32Array', 'Float32Array', 'Float64Array', 'Element'],
     'Rust': ['u128'],
     'Python': ['int', 'type', 'float', 'map', 'list', 'ArithmeticError', 'AssertionError', 'AttributeError', 'Exception', 'EOFError', 'FloatingPointError', 'GeneratorExit', 
               'ImportError', 'IndentationError', 'IndexError', 'KeyError', 'KeyboardInterrupt', 'LookupError', 'MemoryError', 'NameError', 'NotImplementedError', 'OSError',