lexgui 0.7.7 → 0.7.9

package/build/extensions/codeeditor.js

@@ -1,7 +1,8 @@
 import { LX } from 'lexgui';
 
-if(!LX) {
-    throw("lexgui.js missing!");
+if( !LX )
+{
+    throw( "lexgui.js missing!" );
 }
 
 LX.extensions.push( 'CodeEditor' );
@@ -14,8 +15,8 @@ function strReverse( str ) { return str.split( "" ).reverse().join( "" ); }
 function isLetter( c ){ return /[a-zA-Z]/.test( c ); };
 function isSymbol( c ){ return /[^\w\s]/.test( c ); };
 
-function indexOfFrom( str, reg, from, reverse ) {
-
+function indexOfFrom( str, reg, from, reverse )
+{
     from = from ?? 0;
 
     if( reverse )
@@ -33,7 +34,8 @@ function indexOfFrom( str, reg, from, reverse ) {
     }
 }
 
-function codeScopesEqual( a, b ) {
+function codeScopesEqual( a, b )
+{
     if( a.length !== b.length ) return false;
     for( let i = 0; i < a.length; i++ )
     {
@@ -42,10 +44,10 @@ function codeScopesEqual( a, b ) {
     return true;
 }
 
-class CodeSelection {
-
-    constructor( editor, cursor, className = "lexcodeselection" ) {
-
+class CodeSelection
+{
+    constructor( editor, cursor, className = "lexcodeselection" )
+    {
         this.editor = editor;
         this.cursor = cursor;
         this.className = className;
@@ -57,20 +59,23 @@ class CodeSelection {
         this.toY    = cursor.line;
     }
 
-    sameLine() {
+    sameLine()
+    {
         return this.fromY === this.toY;
     }
 
-    samePosition() {
+    samePosition()
+    {
         return this.fromX === this.toX;
     }
 
-    isEmpty() {
+    isEmpty()
+    {
         return this.sameLine() && this.samePosition();
     }
 
-    invertIfNecessary() {
-        // if( this.fromX > this.toX )
+    invertIfNecessary()
+    {
         if( this.fromY > this.toY )
         {
             swapElements( this, 'fromX', 'toX' );
@@ -82,8 +87,8 @@ class CodeSelection {
         }
     }
 
-    selectInline( cursor, x, y, width, isSearchResult ) {
-
+    selectInline( cursor, x, y, width, isSearchResult )
+    {
         this.chars = width / this.editor.charWidth;
         this.fromX = x;
         this.toX = x + this.chars;
@@ -110,8 +115,8 @@ class CodeSelection {
         this.editor._hideActiveLine();
     }
 
-    save() {
-
+    save()
+    {
         return {
             fromX: this.fromX,
             fromY: this.fromY,
@@ -120,16 +125,16 @@ class CodeSelection {
         }
     }
 
-    load( data ) {
-
+    load( data )
+    {
         this.fromX = data.fromX;
         this.fromY = data.fromY;
         this.toX = data.toX;
         this.toY = data.toY;
     }
 
-    getText() {
-
+    getText()
+    {
         if( !this.editor.code || !this.sameLine() )
             return null;
 
@@ -137,16 +142,16 @@ class CodeSelection {
     }
 };
 
-class ScrollBar {
-
+class ScrollBar
+{
     static SCROLLBAR_VERTICAL       = 1;
     static SCROLLBAR_HORIZONTAL     = 2;
 
     static SCROLLBAR_VERTICAL_WIDTH = 10;
     static SCROLLBAR_HORIZONTAL_HEIGHT = 10;
 
-    constructor( editor, type ) {
-
+    constructor( editor, type )
+    {
         this.editor = editor;
         this.type = type;
 
@@ -199,7 +204,6 @@ class ScrollBar {
             doc.removeEventListener( "mouseup", inner_mouseup );
         }
     }
-
 }
 
 /* Highlight rules
@@ -210,8 +214,8 @@ class ScrollBar {
         to "ctx.discardToken" and no class is applied
 */
 
-const HighlightRules = {
-
+const HighlightRules =
+{
     common: [
         { test: ctx => ctx.inBlockComment, className: "cm-com" },
         { test: ctx => ctx.inString, action: (ctx, editor) => editor._appendStringToken( ctx.token ), discard: true },
@@ -280,9 +284,9 @@ const HighlightRules = {
  * @class CodeEditor
  */
 
-class CodeEditor {
-
-    static __instances  = [];
+class CodeEditor
+{
+    static __instances      = [];
 
     static CURSOR_LEFT      = 1;
     static CURSOR_TOP       = 2;
@@ -295,17 +299,17 @@ class CodeEditor {
     static KEEP_VISIBLE_LINES   = 1;
     static UPDATE_VISIBLE_LINES = 2;
 
-    static WORD_TYPE_METHOD = 0;
-    static WORD_TYPE_CLASS  = 1;
+    static WORD_TYPE_METHOD     = 0;
+    static WORD_TYPE_CLASS      = 1;
 
-    static CODE_MIN_FONT_SIZE = 9;
-    static CODE_MAX_FONT_SIZE = 22;
+    static CODE_MIN_FONT_SIZE   = 9;
+    static CODE_MAX_FONT_SIZE   = 22;
 
-    static LINE_GUTTER_WIDTH = 48;
-    static LINE_GUTTER_WIDTH = 48;
+    static LINE_GUTTER_WIDTH    = 48;
+    static LINE_GUTTER_WIDTH    = 48;
 
-    static RESIZE_SCROLLBAR_H = 1;
-    static RESIZE_SCROLLBAR_V = 2;
+    static RESIZE_SCROLLBAR_H   = 1;
+    static RESIZE_SCROLLBAR_V   = 2;
     static RESIZE_SCROLLBAR_H_V = CodeEditor.RESIZE_SCROLLBAR_H | CodeEditor.RESIZE_SCROLLBAR_V;
 
     /**
@@ -317,8 +321,8 @@ class CodeEditor {
      * disableEdition:
      */
 
-    constructor( area, options = {} ) {
-
+    constructor( area, options = {} )
+    {
         if( options.filesAsync )
         {
             options.files = [ ...options.filesAsync ];
@@ -336,8 +340,8 @@ class CodeEditor {
         }
     }
 
-    async _init( area, options ) {
-
+    async _init( area, options )
+    {
         window.editor = this;
 
         CodeEditor.__instances.push( this );
@@ -360,6 +364,7 @@ class CodeEditor {
         this.onCreateStatusPanel = options.onCreateStatusPanel;
         this.onContextMenu = options.onContextMenu;
         this.onNewTab = options.onNewTab;
+        this.onSelectTab = options.onSelectTab;
 
         // File explorer
         if( this.useFileExplorer )
@@ -671,16 +676,18 @@ class CodeEditor {
 
             // Add search LINE box
             {
-                var box = document.createElement( 'div' );
-                box.className = "searchbox gotoline";
+                const box = document.createElement( 'div' );
+                box.className = "searchbox";
 
-                var searchPanel = new LX.Panel();
+                const searchPanel = new LX.Panel();
                 box.appendChild( searchPanel.root );
 
+                searchPanel.sameLine( 2 );
                 searchPanel.addText( null, "", ( value, event ) => {
                     input.value = ":" + value.replaceAll( ':', '' );
                     this.goToLine( input.value.slice( 1 ) );
                 }, { placeholder: "Go to line", trigger: "input" } );
+                searchPanel.addButton( null, "x", this.hideSearchLineBox.bind( this ), { icon: "X", title: "Close", tooltip: true } );
 
                 let input = box.querySelector( 'input' );
                 input.addEventListener( 'keyup', e => {
@@ -1194,8 +1201,8 @@ class CodeEditor {
                 else // Next char
                 {
                     var letter = this.getCharAtPos( cursor );
-                    if( letter ) {
-
+                    if( letter )
+                    {
                         // Selecting chars
                         if( e.shiftKey )
                         {
@@ -1207,7 +1214,8 @@ class CodeEditor {
                         }
                         else
                         {
-                            if( !cursor.selection ) {
+                            if( !cursor.selection )
+                            {
                                 this.cursorToRight( letter, cursor );
                                 if( this.useAutoComplete && this.isAutoCompleteActive )
                                     this.showAutoCompleteBox( 'foo', cursor );
@@ -1218,16 +1226,20 @@ class CodeEditor {
                                 this.resetCursorPos( CodeEditor.CURSOR_LEFT_TOP, cursor );
                                 this.cursorToLine( cursor, cursor.selection.toY );
                                 this.cursorToPosition( cursor, cursor.selection.toX );
-                                this.endSelection();
+                                this.endSelection( cursor );
                             }
                         }
                     }
-                    else if( this.code.lines[ cursor.line + 1 ] !== undefined ) {
-
-                        if( e.shiftKey ) {
+                    else if( this.code.lines[ cursor.line + 1 ] !== undefined )
+                    {
+                        if( e.shiftKey )
+                        {
                             if( !cursor.selection ) this.startSelection( cursor );
                         }
-                        else this.endSelection();
+                        else
+                        {
+                            this.endSelection();
+                        }
 
                         this.lineDown( cursor, true );
 
@@ -1334,14 +1346,22 @@ class CodeEditor {
         }
     }
 
+    // Clear signals
+    clear()
+    {
+        console.assert( this.rightStatusPanel && this.leftStatusPanel, "No panels to clear." );
+        this.rightStatusPanel.clear();
+        this.leftStatusPanel.clear();
+    }
+
     static getInstances()
     {
         return CodeEditor.__instances;
     }
 
     // This received key inputs from the entire document...
-    onKeyPressed( e ) {
-
+    onKeyPressed( e )
+    {
         // Toggle visibility of the file explorer
         if( e.key == 'b' && e.ctrlKey && this.useFileExplorer )
         {
@@ -1359,13 +1379,14 @@ class CodeEditor {
         }
     }
 
-    getText( min ) {
+    getText( min )
+    {
         return this.code.lines.join( min ? ' ' : '\n' );
     }
 
     // This can be used to empty all text...
-    setText( text = "", lang ) {
-
+    setText( text = "", lang )
+    {
         let newLines = text.split( '\n' );
         this.code.lines = [].concat( newLines );
 
@@ -1387,8 +1408,8 @@ class CodeEditor {
         this._processLinesIfNecessary();
     }
 
-    appendText( text, cursor ) {
-
+    appendText( text, cursor )
+    {
         let lidx = cursor.line;
 
         if( cursor.selection )
@@ -1458,8 +1479,18 @@ class CodeEditor {
         } );
     }
 
-    async loadFile( file, options = {} ) {
+    setCustomSuggestions( suggestions )
+    {
+        if( !suggestions || suggestions.constructor !== Array )
+        {
+            return;
+        }
 
+        this.customSuggestions = suggestions;
+    }
+
+    async loadFile( file, options = {} )
+    {
         const _innerAddTab = ( text, name, title ) => {
 
             // Remove Carriage Return in some cases and sub tabs using spaces
@@ -1530,8 +1561,8 @@ class CodeEditor {
         }
     }
 
-    _addUndoStep( cursor, force, deleteRedo = true )  {
-
+    _addUndoStep( cursor, force, deleteRedo = true )
+    {
         // Only the mainc cursor stores undo steps
         if( !cursor.isMain )
             return;
@@ -1572,10 +1603,12 @@ class CodeEditor {
         } );
     }
 
-    _doUndo( cursor ) {
-
+    _doUndo( cursor )
+    {
         if( !this.code.undoSteps.length )
+        {
             return;
+        }
 
         this._addRedoStep( cursor );
 
@@ -1602,8 +1635,8 @@ class CodeEditor {
         this._hideActiveLine();
     }
 
-    _addRedoStep( cursor )  {
-
+    _addRedoStep( cursor )
+    {
         // Only the mainc cursor stores redo steps
         if( !cursor.isMain )
         {
@@ -1616,10 +1649,12 @@ class CodeEditor {
         } );
     }
 
-    _doRedo( cursor ) {
-
+    _doRedo( cursor )
+    {
         if( !this.code.redoSteps.length )
+        {
             return;
+        }
 
         this._addUndoStep( cursor, true, false);
 
@@ -1646,8 +1681,8 @@ class CodeEditor {
         }
     }
 
-    _changeLanguage( lang, langExtension, override = false ) {
-
+    _changeLanguage( lang, langExtension, override = false )
+    {
         this.code.language = lang;
         this.highlight = lang;
 
@@ -1692,8 +1727,8 @@ class CodeEditor {
         }
     }
 
-    _changeLanguageFromExtension( ext ) {
-
+    _changeLanguageFromExtension( ext )
+    {
         if( !ext )
         {
             return this._changeLanguage( this.code.language );
@@ -1723,8 +1758,8 @@ class CodeEditor {
         this._changeLanguage( 'Plain Text' );
     }
 
-    _createStatusPanel( options ) {
-
+    _createStatusPanel( options )
+    {
         if( this.skipInfo )
         {
             return;
@@ -1737,7 +1772,7 @@ class CodeEditor {
             this.onCreateStatusPanel( panel, this );
         }
 
-        let leftStatusPanel = new LX.Panel( { id: "FontSizeZoomStatusComponent", height: "auto" } );
+        let leftStatusPanel = this.leftStatusPanel = new LX.Panel( { id: "FontSizeZoomStatusComponent", height: "auto" } );
         leftStatusPanel.sameLine();
 
         if( this.skipTabs )
@@ -1751,7 +1786,7 @@ class CodeEditor {
         leftStatusPanel.endLine( "justify-start" );
         panel.attach( leftStatusPanel.root );
 
-        let rightStatusPanel = new LX.Panel( { height: "auto" } );
+        let rightStatusPanel = this.rightStatusPanel = new LX.Panel( { height: "auto" } );
         rightStatusPanel.sameLine();
         rightStatusPanel.addLabel( this.code?.title ?? "", { id: "EditorFilenameStatusComponent", fit: true, signal: "@tab-name" });
         rightStatusPanel.addButton( null, "Ln 1, Col 1", this.showSearchLineBox.bind( this ), { id: "EditorSelectionStatusComponent", fit: true, signal: "@cursor-data" });
@@ -1823,8 +1858,8 @@ class CodeEditor {
         return panel;
     }
 
-    _getFileIcon( name, extension, lang ) {
-
+    _getFileIcon( name, extension, lang )
+    {
         const isNewTabButton = name ? ( name === '+' ) : false;
         if( isNewTabButton )
         {
@@ -1878,8 +1913,8 @@ class CodeEditor {
         return "AlignLeft gray";
     }
 
-    _onNewTab( e ) {
-
+    _onNewTab( e )
+    {
         this.processFocus( false );
 
         if( this.onNewTab )
@@ -1896,8 +1931,8 @@ class CodeEditor {
         new LX.DropdownMenu( e.target, dmOptions, { side: "bottom", align: "start" });
     }
 
-    _onCreateNewFile() {
-
+    _onCreateNewFile()
+    {
         let options = {};
 
         if( this.onCreateFile )
@@ -1913,8 +1948,8 @@ class CodeEditor {
         this.addTab( name, true, name, { indexOffset: options.indexOffset, language: options.language ?? "JavaScript" } );
     }
 
-    _onSelectTab( isNewTabButton, event, name ) {
-
+    _onSelectTab( isNewTabButton, event, name )
+    {
         if( this.disableEdition )
         {
             return;
@@ -1928,9 +1963,16 @@ class CodeEditor {
 
         this._removeSecondaryCursors();
 
-        var cursor = this.getCurrentCursor( true );
-        this.saveCursor( cursor, this.code.cursorState );
+        const cursor = this.getCurrentCursor( true );
+        const lastCode = this.code;
+
+        if( lastCode )
+        {
+            this.saveCursor( cursor, lastCode.cursorState );
+        }
+
         this.code = this.loadedTabs[ name ];
+
         this.restoreCursor( cursor, this.code.cursorState );
 
         this.endSelection();
@@ -1949,10 +1991,15 @@ class CodeEditor {
         }
 
         this.processLines();
-    }
 
-    _onContextMenuTab( isNewTabButton, event, name,  ) {
+        if( !isNewTabButton && this.onSelectTab )
+        {
+            this.onSelectTab( name, this );
+        }
+    }
 
+    _onContextMenuTab( isNewTabButton, event, name,  )
+    {
         if( isNewTabButton )
         {
             return;
@@ -1981,8 +2028,8 @@ class CodeEditor {
         ], { side: "bottom", align: "start", event });
     }
 
-    addTab( name, selected, title, options = {} ) {
-
+    addTab( name, selected, title, options = {} )
+    {
         // If already loaded, set new name...
         const repeats = Object.keys( editor.loadedTabs ).slice( 1 ).reduce( ( v, key ) => {
             const noRepeatName = key.replace( /[_\d+]/g, '');
@@ -2036,6 +2083,10 @@ class CodeEditor {
         this.loadedTabs[ name ] = code;
         this.openedTabs[ name ] = code;
 
+        const lastCode = this.code;
+
+        this.code = code;
+
         const tabIcon = this._getFileIcon( name );
 
         if( this.useFileExplorer && !isNewTabButton )
@@ -2063,13 +2114,6 @@ class CodeEditor {
 
         this.endSelection();
 
-        if( selected )
-        {
-            this.code = code;
-            this.resetCursorPos( CodeEditor.CURSOR_LEFT_TOP );
-            this.mustProcessLines = true;
-        }
-
         if( options.language )
         {
             code.languageOverride = options.language;
@@ -2083,6 +2127,16 @@ class CodeEditor {
             this.mustProcessLines = true;
         }
 
+        if( selected )
+        {
+            this.resetCursorPos( CodeEditor.CURSOR_LEFT_TOP );
+            this.mustProcessLines = true;
+        }
+        else
+        {
+            this.code = lastCode;
+        }
+
         this._processLinesIfNecessary();
 
         this._updateDataInfoPanel( "@tab-name", name );
@@ -2091,8 +2145,8 @@ class CodeEditor {
         return name;
     }
 
-    loadCode( name ) {
-
+    loadCode( name )
+    {
         // Hide all others
         this.codeSizer.querySelectorAll( ".code" ).forEach( c => c.classList.add( "hidden" ) );
 
@@ -2150,8 +2204,8 @@ class CodeEditor {
         this._updateDataInfoPanel( "@tab-name", code.tabName );
     }
 
-    loadTab( name ) {
-
+    loadTab( name )
+    {
         // Already open...
         if( this.openedTabs[ name ] )
         {
@@ -2216,8 +2270,8 @@ class CodeEditor {
         this._updateDataInfoPanel( "@tab-name", code.tabName );
     }
 
-    closeTab( name, eraseAll ) {
-
+    closeTab( name, eraseAll )
+    {
         if( !this.allowClosingTabs )
         {
             return;
@@ -2233,12 +2287,13 @@ class CodeEditor {
         }
     }
 
-    getSelectedTabName() {
+    getSelectedTabName()
+    {
         return this.tabs.selected;
     }
 
-    loadTabFromFile() {
-
+    loadTabFromFile()
+    {
         const input = document.createElement( 'input' );
         input.type = 'file';
         document.body.appendChild( input );
@@ -2252,8 +2307,8 @@ class CodeEditor {
         });
     }
 
-    processFocus( active ) {
-
+    processFocus( active )
+    {
         if( active )
         {
             this.restartBlink();
@@ -2265,8 +2320,8 @@ class CodeEditor {
         }
     }
 
-    processMouse( e ) {
-
+    processMouse( e )
+    {
         if( !e.target.classList.contains('code') && !e.target.classList.contains('lexcodearea') ) return;
         if( !this.code ) return;
 
@@ -2406,8 +2461,8 @@ class CodeEditor {
         }
     }
 
-    _onMouseUp( e ) {
-
+    _onMouseUp( e )
+    {
         if( ( LX.getTime() - this.lastMouseDown ) < 120 )
         {
             this.state.selectingText = false;
@@ -2424,8 +2479,8 @@ class CodeEditor {
         delete this._lastSelectionKeyDir;
     }
 
-    processClick( e ) {
-
+    processClick( e )
+    {
         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()];
@@ -2456,8 +2511,8 @@ class CodeEditor {
         this.hideAutoCompleteBox();
     }
 
-    updateSelections( e, keepRange, flags = CodeEditor.SELECTION_X_Y ) {
-
+    updateSelections( e, keepRange, flags = CodeEditor.SELECTION_X_Y )
+    {
         for( let cursor of this.cursors.children )
         {
             if( !cursor.selection )
@@ -2469,16 +2524,16 @@ class CodeEditor {
         }
     }
 
-    processSelections( e, keepRange, flags = CodeEditor.SELECTION_X_Y ) {
-
+    processSelections( e, keepRange, flags = CodeEditor.SELECTION_X_Y )
+    {
         for( let cursor of this.cursors.children )
         {
             this._processSelection( cursor, e, keepRange, flags );
         }
     }
 
-    _processSelection( cursor, e, keepRange, flags = CodeEditor.SELECTION_X_Y ) {
-
+    _processSelection( cursor, e, keepRange, flags = CodeEditor.SELECTION_X_Y )
+    {
         const isMouseEvent = e && ( e.constructor == MouseEvent );
 
         if( isMouseEvent )
@@ -2639,8 +2694,8 @@ class CodeEditor {
         }
     }
 
-    async processKey( e ) {
-
+    async processKey( e )
+    {
         const numCursors = this.cursors.childElementCount;
 
         if( !this.code || e.srcElement.constructor != HTMLDivElement )
@@ -2708,8 +2763,8 @@ class CodeEditor {
         delete this._lastProcessedCursorIndex;
     }
 
-    async processKeyAtTargetCursor( e, key, targetIdx ) {
-
+    async processKeyAtTargetCursor( e, key, targetIdx )
+    {
         let cursor = this.cursors.children[ targetIdx ];
 
         // We could delete secondary cursor while iterating..
@@ -2720,13 +2775,14 @@ class CodeEditor {
         this._processGlobalKeys( e, key );
     }
 
-    _processGlobalKeys( e, key ) {
-
+    _processGlobalKeys( e, key )
+    {
         let cursor = this.getCurrentCursor();
 
         if( e.ctrlKey || e.metaKey )
         {
-            switch( key.toLowerCase() ) {
+            switch( key.toLowerCase() )
+            {
             case 'a': // select all
                 e.preventDefault();
                 this.selectAll();
@@ -2802,8 +2858,8 @@ class CodeEditor {
         return false;
     }
 
-    async _processKeyAtCursor( e, key, cursor ) {
-
+    async _processKeyAtCursor( e, key, cursor )
+    {
         const skipUndo = e.detail.skipUndo ?? false;
 
         // keys with length > 1 are probably special keys
@@ -2965,8 +3021,8 @@ class CodeEditor {
         }
     }
 
-    async _pasteContent( cursor ) {
-
+    async _pasteContent( cursor )
+    {
         const mustDetectLanguage = ( !this.getText().length );
 
         let text = await navigator.clipboard.readText();
@@ -2996,8 +3052,8 @@ class CodeEditor {
         }
     }
 
-    async _copyContent( cursor ) {
-
+    async _copyContent( cursor )
+    {
         let textToCopy = "";
 
         if( !cursor.selection )
@@ -3031,8 +3087,8 @@ class CodeEditor {
             // .then(() => console.log("Successfully copied"), (err) => console.error("Error"));
     }
 
-    async _cutContent( cursor ) {
-
+    async _cutContent( cursor )
+    {
         let lidx = cursor.line;
         let textToCut = "";
 
@@ -3078,8 +3134,8 @@ class CodeEditor {
             // .then(() => console.log("Successfully cut"), (err) => console.error("Error"));
     }
 
-    _duplicateLine( lidx, cursor ) {
-
+    _duplicateLine( lidx, cursor )
+    {
         this.endSelection();
         this._addUndoStep( cursor, true );
         this.code.lines.splice( lidx, 0, this.code.lines[ lidx ] );
@@ -3088,8 +3144,8 @@ class CodeEditor {
         this.hideAutoCompleteBox();
     }
 
-    _commentLines( cursor, useCommentBlock ) {
-
+    _commentLines( cursor, useCommentBlock )
+    {
         const lang = CodeEditor.languages[ this.highlight ];
 
         this.state.keyChain = null;
@@ -3166,8 +3222,8 @@ class CodeEditor {
         this._hideActiveLine();
     }
 
-    _commentLine( cursor, line, minNonspaceIdx, updateCursor = true ) {
-
+    _commentLine( cursor, line, minNonspaceIdx, updateCursor = true )
+    {
         const lang = CodeEditor.languages[ this.highlight ];
         if( !( lang.singleLineComments ?? true ) )
             return;
@@ -3196,8 +3252,8 @@ class CodeEditor {
         }
     }
 
-    _uncommentLines( cursor ) {
-
+    _uncommentLines( cursor )
+    {
         this.state.keyChain = null;
 
         if( cursor.selection )
@@ -3223,8 +3279,8 @@ class CodeEditor {
         this._hideActiveLine();
     }
 
-    _uncommentLine( cursor, line ) {
-
+    _uncommentLine( cursor, line )
+    {
         const lang = CodeEditor.languages[ this.highlight ];
 
         if( !( lang.singleLineComments ?? true ))
@@ -3245,8 +3301,8 @@ class CodeEditor {
         }
     }
 
-    action( key, deleteSelection, fn, eventSkipDelete ) {
-
+    action( key, deleteSelection, fn, eventSkipDelete )
+    {
         this.actions[ key ] = {
             "key": key,
             "callback": fn,
@@ -3255,13 +3311,14 @@ class CodeEditor {
         };
     }
 
-    _actionMustDelete( cursor, action, e ) {
+    _actionMustDelete( cursor, action, e )
+    {
         return cursor.selection && action.deleteSelection &&
             ( action.eventSkipDelete ? !e[ action.eventSkipDelete ] : true );
     }
 
-    scanWordSuggestions() {
-
+    scanWordSuggestions()
+    {
         this.code.tokens = {};
 
         for( let i = 0; i < this.code.lines.length; ++i )
@@ -3272,16 +3329,19 @@ class CodeEditor {
         }
     }
 
-    toLocalLine( line ) {
+    toLocalLine( line )
+    {
         const d = Math.max( this.firstLineInViewport - this.lineScrollMargin.x, 0 );
         return Math.min( Math.max( line - d, 0 ), this.code.lines.length - 1 );
     }
 
-    getMaxLineLength() {
+    getMaxLineLength()
+    {
         return Math.max(...this.code.lines.map( v => v.length ));
     }
 
-    _processLinesIfNecessary() {
+    _processLinesIfNecessary()
+    {
         if( this.mustProcessLines )
         {
             this.mustProcessLines = false;
@@ -3289,8 +3349,8 @@ class CodeEditor {
         }
     }
 
-    processLines( mode ) {
-
+    processLines( mode )
+    {
         if( !this.code )
         {
             return;
@@ -3344,8 +3404,8 @@ class CodeEditor {
         this.resize();
     }
 
-    processLine( lineNumber, force, skipPropagation ) {
-
+    processLine( lineNumber, force, skipPropagation )
+    {
         if( this._scopeStack )
         {
             this.code.lineScopes[ lineNumber ] = [ ...this._scopeStack ];
@@ -3567,14 +3627,15 @@ class CodeEditor {
         return this._updateLine( force, lineNumber, lineInnerHtml, skipPropagation, symbols, tokensToEvaluate );
     }
 
-    _getLineSignatureFromTokens( tokens ) {
+    _getLineSignatureFromTokens( tokens )
+    {
         const structuralChars = new Set( [ '{',  '}'] );
         const sign = tokens.filter( t => structuralChars.has( t ) );
         return sign.join( "_" );
     }
 
-    _updateBlockComments( section, lineNumber, tokens ) {
-
+    _updateBlockComments( section, lineNumber, tokens )
+    {
         const lang = CodeEditor.languages[ this.highlight ];
         const blockCommentsTokens = lang.blockCommentsTokens ?? this.defaultBlockCommentTokens;
         const lineOpensBlock = ( section[ 0 ].x === lineNumber );
@@ -3653,8 +3714,8 @@ class CodeEditor {
         }
     }
 
-    _processExtraLineIfNecessary( lineNumber, tokens, oldSymbols, skipPropagation ) {
-
+    _processExtraLineIfNecessary( lineNumber, tokens, oldSymbols, skipPropagation )
+    {
         if( !this._scopeStack )
         {
             console.warn( "CodeEditor: No scope available" );
@@ -3721,8 +3782,8 @@ class CodeEditor {
         }
     }
 
-    _updateLine( force, lineNumber, html, skipPropagation, symbols = [], tokens = [] ) {
-
+    _updateLine( force, lineNumber, html, skipPropagation, symbols = [], tokens = [] )
+    {
         const gutterLineHtml = `<span class='line-gutter'>${ lineNumber + 1 }</span>`;
         const oldSymbols = this._updateLineSymbols( lineNumber, symbols );
         const lineScope = CodeEditor.debugScopes && this.code.lineScopes[ lineNumber ] ? this.code.lineScopes[ lineNumber ].map( s => `${ s.type }` ).join( ", " ) : "";
@@ -3780,8 +3841,8 @@ class CodeEditor {
     /**
      * Parses a single line of code and extract declared symbols
      */
-    _parseLineForSymbols( lineNumber, lineString, tokens, pushedScope ) {
-
+    _parseLineForSymbols( lineNumber, lineString, tokens, pushedScope )
+    {
         const scope = this._scopeStack.at( pushedScope ? -2 : -1 );
 
         if( !scope || this._inBlockCommentSection( lineNumber ) )
@@ -3917,8 +3978,8 @@ class CodeEditor {
      * - Removes old symbols from that line
      * - Inserts the new symbols
      */
-    _updateLineSymbols( lineNumber, newSymbols ) {
-
+    _updateLineSymbols( lineNumber, newSymbols )
+    {
         this.code.lineSymbols[ lineNumber ] = this.code.lineSymbols[ lineNumber ] ?? [];
         const oldSymbols = LX.deepCopy( this.code.lineSymbols[ lineNumber ] );
 
@@ -3957,8 +4018,8 @@ class CodeEditor {
         return oldSymbols;
     }
 
-    _lineHasComment( lineString ) {
-
+    _lineHasComment( lineString )
+    {
         const lang = CodeEditor.languages[ this.highlight ];
 
         if( !(lang.singleLineComments ?? true) )
@@ -3983,8 +4044,8 @@ class CodeEditor {
         }
     }
 
-    _getTokensFromLine( lineString, skipNonWords ) {
-
+    _getTokensFromLine( lineString, skipNonWords )
+    {
         if( !lineString || !lineString.length )
         {
             return [];
@@ -4043,8 +4104,8 @@ class CodeEditor {
         return this._processTokens( tokensToEvaluate );
     }
 
-    _processTokens( tokens, offset = 0 ) {
-
+    _processTokens( tokens, offset = 0 )
+    {
         if( this.highlight == 'C++' || this.highlight == 'CSS' )
         {
             var idx = tokens.slice( offset ).findIndex( ( value, index ) => this._isNumber( value ) );
@@ -4113,8 +4174,8 @@ class CodeEditor {
         return tokens;
     }
 
-    _mustHightlightWord( token, wordCategory, lang ) {
-
+    _mustHightlightWord( token, wordCategory, lang )
+    {
         if( !lang )
         {
             lang = CodeEditor.languages[ this.highlight ];
@@ -4130,8 +4191,8 @@ class CodeEditor {
         return wordCategory[ this.highlight ] && wordCategory[ this.highlight ].has( t );
     }
 
-    _getTokenHighlighting( ctx, highlight ) {
-
+    _getTokenHighlighting( ctx, highlight )
+    {
         const rules = [ ...HighlightRules.common, ...( HighlightRules[ highlight ] || [] ), ...HighlightRules.post_common ];
 
         for( const rule of rules )
@@ -4149,8 +4210,8 @@ class CodeEditor {
         return null;
     }
 
-    _evaluateToken( ctxData ) {
-
+    _evaluateToken( ctxData )
+    {
         let { token, prev, next, tokenIndex, isFirstToken, isLastToken } = ctxData;
 
         const lang = CodeEditor.languages[ this.highlight ];
@@ -4158,7 +4219,7 @@ class CodeEditor {
         const customStringKeys = Object.assign( {}, this.stringKeys );
         const lineNumber = this._currentLineNumber;
         const tokenStartIndex = this._currentTokenPositions[ tokenIndex ];
-        const inBlockComment = ( this._buildingBlockComment ?? this._inBlockCommentSection( lineNumber, tokenStartIndex, token.length ) !== undefined )
+        const inBlockComment = ( this._buildingBlockComment ?? this._inBlockCommentSection( lineNumber, tokenStartIndex, token.length ) ) !== undefined;
 
         var usePreviousTokenToCheckString = false;
 
@@ -4247,8 +4308,8 @@ class CodeEditor {
         return `<span class="${ highlight } ${ tokenClass }">${ token }</span>`;
     }
 
-    _appendStringToken( token ) {
-
+    _appendStringToken( token )
+    {
         if( !this._pendingString )
         {
             this._pendingString = "";
@@ -4259,14 +4320,15 @@ class CodeEditor {
         return true;
     }
 
-    _getCurrentString() {
+    _getCurrentString()
+    {
         const chars = this._pendingString;
         delete this._pendingString;
         return chars;
     }
 
-    _enclosedByTokens( token, tokenIndex, tagStart, tagEnd ) {
-
+    _enclosedByTokens( token, tokenIndex, tagStart, tagEnd )
+    {
         const tokenStartIndex = this._currentTokenPositions[ tokenIndex ];
         const tagStartIndex = indexOfFrom( this._currentLineString, tagStart, tokenStartIndex, true );
         if( tagStartIndex < 0 ) // Not found..
@@ -4284,8 +4346,8 @@ class CodeEditor {
         }
     }
 
-    _inBlockCommentSection( lineNumber, tokenPosition, tokenLength ) {
-
+    _inBlockCommentSection( lineNumber, tokenPosition, tokenLength )
+    {
         const lang = CodeEditor.languages[ this.highlight ];
         const blockCommentsTokens = lang.blockCommentsTokens ?? this.defaultBlockCommentTokens;
 
@@ -4312,8 +4374,8 @@ class CodeEditor {
         }
     }
 
-    _isKeyword( ctxData ) {
-
+    _isKeyword( ctxData )
+    {
         const { token, tokenIndex, tokens, lang } = ctxData;
 
         let isKwd = this._mustHightlightWord( token, CodeEditor.keywords ) || this.highlight == 'XML';
@@ -4344,8 +4406,8 @@ class CodeEditor {
         return isKwd;
     }
 
-    _isNumber( token ) {
-
+    _isNumber( token )
+    {
         const lang = CodeEditor.languages[ this.highlight ];
         if( !( lang.numbers ?? true ) )
         {
@@ -4383,8 +4445,8 @@ class CodeEditor {
         return token.length && token != ' ' && !Number.isNaN( +token );
     }
 
-    _encloseSelectedWordWithKey( key, lidx, cursor ) {
-
+    _encloseSelectedWordWithKey( key, lidx, cursor )
+    {
         if( !cursor.selection || ( cursor.selection.fromY != cursor.selection.toY ) )
         {
             return false;
@@ -4431,8 +4493,8 @@ class CodeEditor {
         return true;
     }
 
-    _detectLanguage( text ) {
-
+    _detectLanguage( text )
+    {
         const tokenSet = new Set( this._getTokensFromLine( text, true ) );
         const scores = {};
 
@@ -4471,8 +4533,8 @@ class CodeEditor {
         return sorted[0][1] > 0 ? sorted[0][0] : undefined;
     }
 
-    lineUp( cursor, resetLeft ) {
-
+    lineUp( cursor, resetLeft )
+    {
         if( this.code.lines[ cursor.line - 1 ] == undefined )
             return false;
 
@@ -4483,8 +4545,8 @@ class CodeEditor {
         return true;
     }
 
-    lineDown( cursor, resetLeft ) {
-
+    lineDown( cursor, resetLeft )
+    {
         if( this.code.lines[ cursor.line + 1 ] == undefined )
             return false;
 
@@ -4495,8 +4557,8 @@ class CodeEditor {
         return true;
     }
 
-    restartBlink() {
-
+    restartBlink()
+    {
         if( !this.code ) return;
 
         clearInterval( this.blinker );
@@ -4510,8 +4572,8 @@ class CodeEditor {
             this.cursors.classList.remove( 'show' );
     }
 
-    startSelection( cursor ) {
-
+    startSelection( cursor )
+    {
         // Show elements
         let selectionContainer = document.createElement( 'div' );
         selectionContainer.className = 'selections';
@@ -4524,8 +4586,8 @@ class CodeEditor {
         cursor.selection = new CodeSelection( this, cursor );
     }
 
-    deleteSelection( cursor ) {
-
+    deleteSelection( cursor )
+    {
         // I think it's not necessary but...
         if( this.disableEdition )
         {
@@ -4557,8 +4619,8 @@ class CodeEditor {
         this.processLines();
     }
 
-    endSelection( cursor ) {
-
+    endSelection( cursor )
+    {
         delete this._tripleClickSelection;
         delete this._lastSelectionKeyDir;
         delete this._currentOcurrences;
@@ -4581,7 +4643,9 @@ class CodeEditor {
         }
     }
 
-    selectAll() {
+    selectAll()
+    {
+        this.endSelection();
 
         // Use main cursor
         this._removeSecondaryCursors();
@@ -4603,8 +4667,8 @@ class CodeEditor {
         this.hideAutoCompleteBox();
     }
 
-    cursorToRight( key, cursor ) {
-
+    cursorToRight( key, cursor )
+    {
         if( !key ) return;
 
         cursor._left += this.charWidth;
@@ -4622,8 +4686,8 @@ class CodeEditor {
         }
     }
 
-    cursorToLeft( key, cursor ) {
-
+    cursorToLeft( key, cursor )
+    {
         if( !key ) return;
 
         cursor._left -= this.charWidth;
@@ -4643,8 +4707,8 @@ class CodeEditor {
         }
     }
 
-    cursorToTop( cursor, resetLeft = false ) {
-
+    cursorToTop( cursor, resetLeft = false )
+    {
         cursor._top -= this.lineHeight;
         cursor._top = Math.max( cursor._top, 0 );
         cursor.style.top = `calc(${ cursor._top }px)`;
@@ -4663,8 +4727,8 @@ class CodeEditor {
         }
     }
 
-    cursorToBottom( cursor, resetLeft = false ) {
-
+    cursorToBottom( cursor, resetLeft = false )
+    {
         cursor._top += this.lineHeight;
         cursor.style.top = `calc(${ cursor._top }px)`;
 
@@ -4684,8 +4748,8 @@ class CodeEditor {
         }
     }
 
-    cursorToString( cursor, text, reverse ) {
-
+    cursorToString( cursor, text, reverse )
+    {
         if( !text.length )
         {
             return;
@@ -4697,23 +4761,23 @@ class CodeEditor {
         }
     }
 
-    cursorToPosition( cursor, position ) {
-
+    cursorToPosition( cursor, position )
+    {
         cursor.position = position;
         cursor._left = position * this.charWidth;
         cursor.style.left = `calc( ${ cursor._left }px + ${ this.xPadding } )`;
     }
 
-    cursorToLine( cursor, line, resetLeft = false ) {
-
+    cursorToLine( cursor, line, resetLeft = false )
+    {
         cursor.line = line;
         cursor._top = this.lineHeight * line;
         cursor.style.top = cursor._top + "px";
         if( resetLeft ) this.resetCursorPos( CodeEditor.CURSOR_LEFT, cursor );
     }
 
-    saveCursor( cursor, state = {} ) {
-
+    saveCursor( cursor, state = {} )
+    {
         state.position = cursor.position;
         state.line = cursor.line;
         state.selection = cursor.selection ? cursor.selection.save() : undefined;
@@ -4721,8 +4785,8 @@ class CodeEditor {
         return state;
     }
 
-    saveCursors() {
-
+    saveCursors()
+    {
         var cursors = [];
 
         for( let cursor of this.cursors.children )
@@ -4733,8 +4797,8 @@ class CodeEditor {
         return cursors;
     }
 
-    getCurrentCursor( removeOthers ) {
-
+    getCurrentCursor( removeOthers )
+    {
         if( removeOthers )
         {
             this._removeSecondaryCursors();
@@ -4743,8 +4807,8 @@ class CodeEditor {
         return this.cursors.children[ 0 ];
     }
 
-    relocateCursors() {
-
+    relocateCursors()
+    {
         for( let cursor of this.cursors.children )
         {
             cursor._left = cursor.position * this.charWidth;
@@ -4754,8 +4818,8 @@ class CodeEditor {
         }
     }
 
-    mergeCursors( line ) {
-
+    mergeCursors( line )
+    {
         console.assert( line >= 0 );
         const cursorsInLine = Array.from( this.cursors.children ).filter( v => v.line == line );
 
@@ -4763,8 +4827,8 @@ class CodeEditor {
             this.removeCursor( cursorsInLine.pop() );
     }
 
-    restoreCursor( cursor, state ) {
-
+    restoreCursor( cursor, state )
+    {
         cursor.position = state.position ?? 0;
         cursor.line = state.line ?? 0;
 
@@ -4785,15 +4849,15 @@ class CodeEditor {
         }
     }
 
-    removeCursor( cursor ) {
-
+    removeCursor( cursor )
+    {
         LX.deleteElement( this.selections[ cursor.name ] );
         delete this.selections[ cursor.name ];
         LX.deleteElement( cursor );
     }
 
-    resetCursorPos( flag, cursor ) {
-
+    resetCursorPos( flag, cursor )
+    {
         cursor = cursor ?? this.getCurrentCursor();
 
         if( flag & CodeEditor.CURSOR_LEFT )
@@ -4811,8 +4875,8 @@ class CodeEditor {
         }
     }
 
-    _addCursor( line = 0, position = 0, force, isMain = false ) {
-
+    _addCursor( line = 0, position = 0, force, isMain = false )
+    {
         // If cursor in that position exists, remove it instead..
         const exists = Array.from( this.cursors.children ).find( v => v.position == position && v.line == line );
         if( exists && !force )
@@ -4862,30 +4926,42 @@ class CodeEditor {
         return cursor;
     }
 
-    _removeSecondaryCursors() {
-
+    _removeSecondaryCursors()
+    {
         while( this.cursors.childElementCount > 1 )
+        {
             this.cursors.lastChild.remove();
+        }
     }
 
-    _logCursors() {
+    _getLastCursor()
+    {
+        return this.cursors.lastChild;
+    }
+
+    _isLastCursor( cursor )
+    {
+        return cursor === this._getLastCursor();
+    }
 
+    _logCursors()
+    {
         for( let cursor of this.cursors.children )
         {
             cursor.print();
         }
     }
 
-    _addSpaceTabs( cursor, n ) {
-
+    _addSpaceTabs( cursor, n )
+    {
         for( var i = 0; i < n; ++i )
         {
             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': {
@@ -4896,8 +4972,8 @@ class CodeEditor {
         }
     }
 
-    _removeSpaces( cursor ) {
-
+    _removeSpaces( cursor )
+    {
         const lidx = cursor.line;
 
         // Remove indentation
@@ -4936,17 +5012,20 @@ class CodeEditor {
         }
     }
 
-    getScrollLeft() {
+    getScrollLeft()
+    {
         if( !this.codeScroller ) return 0;
         return this.codeScroller.scrollLeft;
     }
 
-    getScrollTop() {
+    getScrollTop()
+    {
         if( !this.codeScroller ) return 0;
         return this.codeScroller.scrollTop;
     }
 
-    setScrollLeft( value ) {
+    setScrollLeft( value )
+    {
         if( !this.codeScroller ) return;
         LX.doAsync( () => {
             this.codeScroller.scrollLeft = value;
@@ -4954,7 +5033,8 @@ class CodeEditor {
         }, 20 );
     }
 
-    setScrollTop( value ) {
+    setScrollTop( value )
+    {
         if( !this.codeScroller ) return;
         LX.doAsync( () => {
             this.codeScroller.scrollTop = value;
@@ -4962,8 +5042,8 @@ class CodeEditor {
         }, 20 );
     }
 
-    resize( flag = CodeEditor.RESIZE_SCROLLBAR_H_V, pMaxLength, onResize ) {
-
+    resize( flag = CodeEditor.RESIZE_SCROLLBAR_H_V, pMaxLength, onResize )
+    {
         setTimeout( () => {
 
             let scrollWidth, scrollHeight;
@@ -4993,8 +5073,8 @@ class CodeEditor {
         }, 10 );
     }
 
-    resizeIfNecessary( cursor, force ) {
-
+    resizeIfNecessary( cursor, force )
+    {
         const maxLineLength = this.getMaxLineLength();
         const numViewportChars = Math.floor( ( this.codeScroller.clientWidth - CodeEditor.LINE_GUTTER_WIDTH ) / this.charWidth );
         if( force || ( maxLineLength >= numViewportChars && maxLineLength != this._lastMaxLineLength ) )
@@ -5008,8 +5088,8 @@ class CodeEditor {
         }
     }
 
-    resizeScrollBars( flag = CodeEditor.RESIZE_SCROLLBAR_H_V ) {
-
+    resizeScrollBars( flag = CodeEditor.RESIZE_SCROLLBAR_H_V )
+    {
         if( flag & CodeEditor.RESIZE_SCROLLBAR_V )
         {
             const totalLinesInViewport = (( this.codeScroller.offsetHeight ) / this.lineHeight)|0;
@@ -5042,8 +5122,8 @@ class CodeEditor {
         }
     }
 
-    setScrollBarValue( type = 'vertical', value ) {
-
+    setScrollBarValue( type = 'vertical', value )
+    {
         if( type == 'vertical' )
         {
             const scrollBarHeight = this.vScrollbar.thumb.parentElement.offsetHeight;
@@ -5073,8 +5153,8 @@ class CodeEditor {
         }
     }
 
-    updateHorizontalScrollFromScrollBar( value ) {
-
+    updateHorizontalScrollFromScrollBar( value )
+    {
         value = this.hScrollbar.thumb._left - value;
 
         // Move scrollbar thumb
@@ -5095,8 +5175,8 @@ class CodeEditor {
         this._discardScroll = true;
     }
 
-    updateVerticalScrollFromScrollBar( value ) {
-
+    updateVerticalScrollFromScrollBar( value )
+    {
         value = this.vScrollbar.thumb._top - value;
 
         // Move scrollbar thumb
@@ -5114,12 +5194,13 @@ class CodeEditor {
         this.codeScroller.scrollTop = currentScroll;
     }
 
-    getCharAtPos( cursor, offset = 0 ) {
+    getCharAtPos( cursor, offset = 0 )
+    {
         return this.code.lines[ cursor.line ][ cursor.position + offset ];
     }
 
-    getWordAtPos( cursor, offset = 0 ) {
-
+    getWordAtPos( cursor, offset = 0 )
+    {
         const col = cursor.line;
         const words = this.code.lines[ col ];
 
@@ -5168,7 +5249,8 @@ class CodeEditor {
         return [ word, from, to ];
     }
 
-    _measureChar( char = "a", useFloating = false, getBB = false ) {
+    _measureChar( char = "a", useFloating = false, getBB = false )
+    {
         const parentContainer = LX.makeContainer( null, "lexcodeeditor", "", document.body );
         const container = LX.makeContainer( null, "code", "", parentContainer );
         const line = document.createElement( "pre" );
@@ -5182,12 +5264,13 @@ class CodeEditor {
         return getBB ? bb : bb[ 0 ];
     }
 
-    measureString( str ) {
+    measureString( str )
+    {
         return str.length * this.charWidth;
     }
 
-    runScript( code ) {
-
+    runScript( code )
+    {
         const script = document.createElement( 'script' );
         script.type = 'module';
         script.innerHTML = code;
@@ -5197,8 +5280,8 @@ class CodeEditor {
         document.getElementsByTagName( 'head' )[ 0 ].appendChild( script );
     }
 
-    toJSONFormat( text ) {
-
+    toJSONFormat( text )
+    {
         let params = text.split( ':' );
 
         for(let i = 0; i < params.length; i++) {
@@ -5232,8 +5315,8 @@ class CodeEditor {
         }
     }
 
-    showAutoCompleteBox( key, cursor ) {
-
+    showAutoCompleteBox( key, cursor )
+    {
         if( !cursor.isMain )
         {
             return;
@@ -5326,7 +5409,6 @@ class CodeEditor {
             }
 
             pre.appendChild( LX.makeIcon( iconName, { iconClass: "mr-1", svgClass: "sm " + iconClass } ) );
-s
             pre.addEventListener( 'click', () => {
                 this.autoCompleteWord( s );
             } );
@@ -5366,8 +5448,8 @@ s
         this.isAutoCompleteActive = true;
     }
 
-    hideAutoCompleteBox() {
-
+    hideAutoCompleteBox()
+    {
         if( !this.autocomplete )
         {
             return;
@@ -5381,8 +5463,8 @@ s
         return isActive != this.isAutoCompleteActive;
     }
 
-    autoCompleteWord( suggestion ) {
-
+    autoCompleteWord( suggestion )
+    {
         if( !this.isAutoCompleteActive )
             return;
 
@@ -5408,8 +5490,8 @@ s
         this.hideAutoCompleteBox();
     }
 
-    _getSelectedAutoComplete() {
-
+    _getSelectedAutoComplete()
+    {
         if( !this.isAutoCompleteActive )
         {
             return;
@@ -5435,18 +5517,21 @@ s
         }
     }
 
-    _moveArrowSelectedAutoComplete( dir ) {
-
+    _moveArrowSelectedAutoComplete( dir )
+    {
         if( !this.isAutoCompleteActive )
-        return;
+            return;
 
-        const [word, idx] = this._getSelectedAutoComplete();
+        const [ word, idx ] = this._getSelectedAutoComplete();
         const offset = dir == 'down' ? 1 : -1;
 
-        if( dir == 'down' ) {
-            if( (idx + offset) >= this.autocomplete.childElementCount ) return;
-        } else if( dir == 'up') {
-            if( (idx + offset) < 0 ) return;
+        if( dir == 'down' )
+        {
+            if( ( idx + offset ) >= this.autocomplete.childElementCount ) return;
+        }
+        else if( dir == 'up')
+        {
+            if( ( idx + offset ) < 0 ) return;
         }
 
         this.autocomplete.scrollTop += offset * 20;
@@ -5456,8 +5541,8 @@ s
         this.autocomplete.childNodes[ idx + offset ].classList.add('selected');
     }
 
-    showSearchBox( clear ) {
-
+    showSearchBox( clear )
+    {
         this.hideSearchLineBox();
 
         this.searchbox.classList.add( 'opened' );
@@ -5485,8 +5570,8 @@ s
         input.focus();
     }
 
-    hideSearchBox() {
-
+    hideSearchBox()
+    {
         const active = this.searchboxActive;
 
         if( this.searchboxActive )
@@ -5503,11 +5588,11 @@ s
 
         this.searchResultSelections.classList.remove( 'show' );
 
-        return active != this.searchboxActive;
+        return ( active != this.searchboxActive );
     }
 
-    search( text, reverse, callback, skipAlert ) {
-
+    search( text, reverse, callback, skipAlert, forceFocus = true )
+    {
         text = text ?? this._lastTextFound;
 
         if( !text )
@@ -5629,12 +5714,15 @@ s
         };
 
         // Force focus back to search box
-        const input = this.searchbox.querySelector( 'input' );
-        input.focus();
+        if( forceFocus )
+        {
+            const input = this.searchbox.querySelector( 'input' );
+            input.focus();
+        }
     }
 
-    showSearchLineBox() {
-
+    showSearchLineBox()
+    {
         this.hideSearchBox();
 
         this.searchlinebox.classList.add( 'opened' );
@@ -5645,8 +5733,8 @@ s
         input.focus();
     }
 
-    hideSearchLineBox() {
-
+    hideSearchLineBox()
+    {
         if( this.searchlineboxActive )
         {
             this.searchlinebox.classList.remove( 'opened' );
@@ -5654,8 +5742,8 @@ s
         }
     }
 
-    goToLine( line ) {
-
+    goToLine( line )
+    {
         if( !this._isNumber( line ) )
             return;
 
@@ -5666,8 +5754,8 @@ s
         this.cursorToLine( cursor, line - 1, true );
     }
 
-    selectNextOcurrence( cursor ) {
-
+    selectNextOcurrence( cursor )
+    {
         if( !cursor.selection )
             return;
 
@@ -5682,11 +5770,12 @@ s
             this._currentOcurrences[ currentKey ] = true;
         }
 
-        this.search( text, false, (col, ln) => {
+        this.search( text, false, ( col, ln ) => {
 
             const key = [ col, ln ].join( '_' );
 
-            if( this._currentOcurrences[ key ] ) {
+            if( this._currentOcurrences[ key ] )
+            {
                 return;
             }
 
@@ -5697,11 +5786,11 @@ s
 
             this._currentOcurrences[ key ] = true;
 
-        }, true );
+        }, true, false );
     }
 
-    _updateDataInfoPanel( signal, value ) {
-
+    _updateDataInfoPanel( signal, value )
+    {
         if( !this.skipInfo )
         {
             if( this.cursors.childElementCount > 1 )
@@ -5713,8 +5802,8 @@ s
         }
     }
 
-    _setActiveLine( number ) {
-
+    _setActiveLine( number )
+    {
         number = number ?? this.state.activeLine;
 
         const cursor = this.getCurrentCursor();
@@ -5740,11 +5829,13 @@ s
         }
     }
 
-    _hideActiveLine() {
+    _hideActiveLine()
+    {
         this.code.querySelectorAll( '.active-line' ).forEach( e => e.classList.remove( 'active-line' ) );
     }
 
-    _setFontSize( size ) {
+    _setFontSize( size )
+    {
         // Change font size
         this.fontSize = size;
         const r = document.querySelector( ':root' );
@@ -5768,20 +5859,24 @@ s
         LX.emit( "@font-size", this.fontSize );
     }
 
-    _applyFontSizeOffset( offset = 0 ) {
+    _applyFontSizeOffset( offset = 0 )
+    {
         const newFontSize = LX.clamp( this.fontSize + offset, CodeEditor.CODE_MIN_FONT_SIZE, CodeEditor.CODE_MAX_FONT_SIZE );
         this._setFontSize( newFontSize );
     }
 
-    _increaseFontSize() {
+    _increaseFontSize()
+    {
         this._applyFontSizeOffset( 1 );
     }
 
-    _decreaseFontSize() {
+    _decreaseFontSize()
+    {
         this._applyFontSizeOffset( -1 );
     }
 
-    _clearTmpVariables() {
+    _clearTmpVariables()
+    {
         delete this._currentLineString;
         delete this._currentLineNumber;
         delete this._buildingString;
@@ -5792,7 +5887,8 @@ s
         delete this._scopeStack;
     }
 
-    async _requestFileAsync( url, dataType, nocache ) {
+    async _requestFileAsync( url, dataType, nocache )
+    {
         return new Promise( (resolve, reject) => {
             dataType = dataType ?? "arraybuffer";
             const mimeType = dataType === "arraybuffer" ? "application/octet-stream" : undefined;
@@ -5823,7 +5919,8 @@ s
     }
 }
 
-CodeEditor.languages = {
+CodeEditor.languages =
+{
     'Plain Text': { ext: "txt", blockComments: false, singleLineComments: false, numbers: false, icon: "AlignLeft gray" },
     'JavaScript': { ext: "js", icon: "Js goldenrod" },
     'TypeScript': { ext: "ts", icon: "Ts pipelineblue" },
@@ -5843,17 +5940,20 @@ CodeEditor.languages = {
     'PHP': { ext: "php", icon: "Php blueviolet" },
 };
 
-CodeEditor.nativeTypes = {
+CodeEditor.nativeTypes =
+{
     'C++': ['int', 'float', 'double', 'bool', 'long', 'short', 'char', 'wchar_t', 'void'],
     'WGSL': ['bool', 'u32', 'i32', 'f16', 'f32', 'vec2', 'vec3', 'vec4', 'vec2f', 'vec3f', 'vec4f', 'mat2x2f', 'mat3x3f', 'mat4x4f', 'array', 'vec2u', 'vec3u', 'vec4u', 'ptr', 'sampler']
 };
 
-CodeEditor.declarationKeywords = {
+CodeEditor.declarationKeywords =
+{
     'JavaScript': ['var', 'let', 'const', 'this', 'static', 'class'],
     'C++': [...CodeEditor.nativeTypes["C++"], 'const', 'auto', 'class', 'struct', 'namespace', 'enum', 'extern']
 };
 
-CodeEditor.keywords = {
+CodeEditor.keywords =
+{
     'JavaScript': ['var', 'let', 'const', 'this', 'in', 'of', 'true', 'false', 'new', 'function', 'NaN', 'static', 'class', 'constructor', 'null', 'typeof', 'debugger', 'abstract',
                   'arguments', 'extends', 'instanceof', 'Infinity'],
     'TypeScript': ['var', 'let', 'const', 'this', 'in', 'of', 'true', 'false', 'new', 'function', 'class', 'extends', 'instanceof', 'Infinity', 'private', 'public', 'protected', 'interface',
@@ -5882,7 +5982,9 @@ CodeEditor.keywords = {
             'enum'],
 };
 
-CodeEditor.utils = { // These ones don't have hightlight, used as suggestions to autocomplete only...
+// These ones don't have hightlight, used as suggestions to autocomplete only...
+CodeEditor.utils =
+{
     'JavaScript': ['querySelector', 'body', 'addEventListener', 'removeEventListener', 'remove', 'sort', 'keys', 'filter', 'isNaN', 'parseFloat', 'parseInt', 'EPSILON', 'isFinite',
                   'bind', 'prototype', 'length', 'assign', 'entries', 'values', 'concat', 'substring', 'substr', 'splice', 'slice', 'buffer', 'appendChild', 'createElement', 'prompt',
                   'alert'],
@@ -5900,7 +6002,8 @@ CodeEditor.utils = { // These ones don't have hightlight, used as suggestions to
             'lime', 'teal', 'navy', 'transparent', 'currentcolor', 'inherit', 'initial', 'unset', 'revert', 'none', 'auto', 'fit-content', 'min-content', 'max-content']
 };
 
-CodeEditor.types = {
+CodeEditor.types =
+{
     'JavaScript': ['Object', 'String', 'Function', 'Boolean', 'Symbol', 'Error', 'Number', 'TextEncoder', 'TextDecoder', 'Array', 'ArrayBuffer', 'InputEvent', 'MouseEvent',
                    'Int8Array', 'Int16Array', 'Int32Array', 'Float32Array', 'Float64Array', 'Element'],
     'TypeScript': ['arguments', 'constructor', 'null', 'typeof', 'debugger', 'abstract', 'Object', 'string', 'String', 'Function', 'Boolean', 'boolean', 'Error', 'Number', 'number', 'TextEncoder',
@@ -5914,7 +6017,8 @@ CodeEditor.types = {
     'PHP': ['Exception', 'DateTime', 'JsonSerializable'],
 };
 
-CodeEditor.builtIn = {
+CodeEditor.builtIn =
+{
     'JavaScript': ['document', 'console', 'window', 'navigator', 'performance'],
     'CSS': ['*', '!important'],
     'C++': ['vector', 'list', 'map'],
@@ -5924,7 +6028,8 @@ CodeEditor.builtIn = {
     'PHP': ['echo', 'print'],
 };
 
-CodeEditor.statements = {
+CodeEditor.statements =
+{
     'JavaScript': ['for', 'if', 'else', 'case', 'switch', 'return', 'while', 'continue', 'break', 'do', 'import', 'from', 'throw', 'async', 'try', 'catch', 'await'],
     'TypeScript': ['for', 'if', 'else', 'case', 'switch', 'return', 'while', 'continue', 'break', 'do', 'import', 'from', 'throw', 'async', 'try', 'catch', 'await', 'as'],
     'CSS': ['@', 'import'],
@@ -5940,7 +6045,8 @@ CodeEditor.statements = {
             'try', 'catch', 'die', 'do', 'exit', 'finally'],
 };
 
-CodeEditor.symbols = {
+CodeEditor.symbols =
+{
     'JavaScript': ['<', '>', '[', ']', '{', '}', '(', ')', ';', '=', '|', '||', '&', '&&', '?', '??'],
     'TypeScript': ['<', '>', '[', ']', '{', '}', '(', ')', ';', '=', '|', '||', '&', '&&', '?', '??'],
     'C': ['<', '>', '[', ']', '{', '}', '(', ')', ';', '=', '|', '||', '&', '&&', '?', '*', '-', '+'],