lexgui 0.1.17 → 0.1.19

package/build/components/codeeditor.js

@@ -170,11 +170,74 @@ class CodeEditor {
         window.editor = this;
 
         CodeEditor.__instances.push( this );
+        
+        // File explorer
+        if( options.file_explorer ?? false )
+        {
+            var [explorerArea, codeArea] = area.split({ sizes:["15%","85%"] });
+            explorerArea.setLimitBox( 180, 20, 512 );
+            this.explorerArea = explorerArea;
+
+            let panel = new LX.Panel();
+
+            panel.addTitle( "EXPLORER" );
+
+            let sceneData = {
+                'id': 'WORKSPACE',
+                'skipVisibility': true,
+                'children': []
+            };
+        
+            this.explorer = panel.addTree( null, sceneData, { 
+                filter: false,
+                rename: false,
+                skip_default_icon: true,
+                onevent: (event) => { 
+                    switch(event.type) {
+                        // case LX.TreeEvent.NODE_SELECTED:
+                        //     if( !this.tabs.tabDOMs[ event.node.id ] ) break;
+                        case LX.TreeEvent.NODE_DBLCLICKED:
+                            this.loadTab( event.node.id );
+                            break;
+                        case LX.TreeEvent.NODE_DELETED: 
+                            this.tabs.delete( event.node.id );
+                            delete this.loadedTabs[ event.node.id ];
+                            break;
+                        // case LX.TreeEvent.NODE_CONTEXTMENU: 
+                        //     LX.addContextMenu( event.multiple ? "Selected Nodes" : event.node.id, event.value, m => {
+                        //          
+                        //     });
+                        //     break;
+                        // case LX.TreeEvent.NODE_DRAGGED: 
+                        //     console.log(event.node.id + " is now child of " + event.value.id); 
+                        //     break;
+                    }
+                }
+            });    
+
+            this.addExplorerItem = function( item ) 
+            {
+                if( !this.explorer.data.children.find( (value, index) => value.id === item.id ) )
+                    this.explorer.data.children.push( item );
+            };
+
+            explorerArea.attach( panel );
+
+            // Update area
+            area = codeArea;
+        }
 
         this.base_area = area;
         this.area = new LX.Area( { className: "lexcodeeditor", height: "auto", no_append: true } );
 
-        this.tabs = this.area.addTabs( { onclose: (name) => delete this.openedTabs[ name ] } );
+        this.tabs = this.area.addTabs( { onclose: (name) => {
+            delete this.openedTabs[ name ];
+            if( Object.keys( this.openedTabs ).length < 2 )
+            {
+                clearInterval( this.blinker );
+                this.cursors.classList.remove('show');
+            }
+        } } );
         this.tabs.root.addEventListener( 'dblclick', (e) => {
             if( options.allow_add_scripts ?? true ) {
                 e.preventDefault();
@@ -245,12 +308,12 @@ class CodeEditor {
         // Scroll stuff
         {
             this.codeScroller = this.tabs.area.root;
-            this.viewportRangeStart = 0;
+            this.firstLineInViewport = 0;
             this.lineScrollMargin = new LX.vec2( 20, 20 ); // [ mUp, mDown ]
             window.scroller = this.codeScroller;
 
             let lastScrollTopValue = -1;
-            this.codeScroller.addEventListener( 'scroll', (e) => {
+            this.codeScroller.addEventListener( 'scroll', e => {
 
                 if( this._discardScroll )
                 {
@@ -265,36 +328,29 @@ class CodeEditor {
                 // Scroll down...
                 if( scrollTop > lastScrollTopValue )
                 {
-                    const scrollDownBoundary = (this.viewportRangeStart + this.lineScrollMargin.y) * this.lineHeight;
-
-                    if( scrollTop > scrollDownBoundary )
+                    if( this.visibleLinesViewport.y < (this.code.lines.length - 1) )
                     {
-                        this.code.style.top = (scrollDownBoundary - this.lineScrollMargin.x * this.lineHeight) + "px";
-                        this.processLines( CodeEditor.UPDATE_VISIBLE_LINES );
+                        const totalLinesInViewport = ((this.codeScroller.offsetHeight - 36) / this.lineHeight)|0;
+                        const scrollDownBoundary = 
+                            ( Math.max( this.visibleLinesViewport.y - totalLinesInViewport, 0 ) - 1 ) * this.lineHeight; 
+
+                        if( scrollTop >= scrollDownBoundary )
+                            this.processLines( CodeEditor.UPDATE_VISIBLE_LINES );
                     }
                 }
                 // Scroll up...
                 else
                 {
-                    const scrollUpBoundary = (this.viewportRangeStart + this.lineScrollMargin.x) * this.lineHeight;
-                    // console.log(scrollTop, scrollUpBoundary)
-    
-                    if( scrollTop <= scrollUpBoundary )
-                    {
-                        this.viewportRangeStart -= this.lineScrollMargin.x;
-                        this.viewportRangeStart = Math.max( this.viewportRangeStart, 0 );
-
-                        this.code.style.top = this.viewportRangeStart == 0 ? "0px" : (scrollUpBoundary - this.lineScrollMargin.x * this.lineHeight) + "px";
-                        
-                        this.processLines( CodeEditor.KEEP_VISIBLE_LINES );
-                    }
+                    const scrollUpBoundary = parseInt( this.code.style.top );
+                    if( scrollTop < scrollUpBoundary )
+                        this.processLines( CodeEditor.UPDATE_VISIBLE_LINES );
                 }
 
                 lastScrollTopValue = scrollTop;
             });
 
-            this.codeScroller.addEventListener( 'wheel', (e) => {
-                const dX = (e.deltaY > 0.0 ? 10.0 : -10.0) * ( e.shiftKey ? 1.0 : 0.0 );
+            this.codeScroller.addEventListener( 'wheel', e => {
+                const dX = ( e.deltaY > 0.0 ? 10.0 : -10.0 ) * ( e.shiftKey ? 1.0 : 0.0 );
                 if( dX != 0.0 ) this.setScrollBarValue( 'horizontal', dX );
             });
         }
@@ -309,13 +365,13 @@ class CodeEditor {
         // Add custom vertical scroll bar
         {
             this.vScrollbar = new ScrollBar( this, ScrollBar.SCROLLBAR_VERTICAL );
-            area.attach(this.vScrollbar.root);
+            area.attach( this.vScrollbar.root );
         }
 
         // Add custom horizontal scroll bar
         {
             this.hScrollbar = new ScrollBar( this, ScrollBar.SCROLLBAR_HORIZONTAL );
-            area.attach(this.hScrollbar.root);
+            area.attach( this.hScrollbar.root );
         }
 
         // Add autocomplete box
@@ -323,7 +379,7 @@ class CodeEditor {
             var box = document.createElement( 'div' );
             box.className = "autocomplete";
             this.autocomplete = box;
-            this.tabs.area.attach(box);
+            this.tabs.area.attach( box );
 
             this.isAutoCompleteActive = false;
         }
@@ -351,7 +407,7 @@ class CodeEditor {
 
         this.useAutoComplete = options.autocomplete ?? true;
         this.highlight = options.highlight ?? 'Plain Text';
-        this.onsave = options.onsave ?? ((code) => {  });
+        this.onsave = options.onsave ?? ((code) => { console.log( code, "save" ) });
         this.onrun = options.onrun ?? ((code) => { this.runScript(code) });
         this.actions = {};
         this.cursorBlinkRate = 550;
@@ -379,16 +435,17 @@ class CodeEditor {
         // setInterval( this.scanWordSuggestions.bind( this ), 2000 );
 
         this.languages = {
-            'Plain Text': { },
-            'JavaScript': { },
-            'C++': { },
-            'CSS': { },
-            'GLSL': { },
-            'WGSL': { },
-            'JSON': { },
-            'XML': { },
-            'Python': { },
-            'Batch': { blockComments: false, singleLineCommentToken: '::' }
+            'Plain Text': { ext: 'txt' },
+            'JavaScript': { ext: 'js' },
+            'C++': { ext: 'cpp' },
+            'CSS': { ext: 'css' },
+            'GLSL': { ext: 'glsl' },
+            'WGSL': { ext: 'wgsl' },
+            'JSON': { ext: 'json' },
+            'XML': { ext: 'xml' },
+            'Python': { ext: 'py', singleLineCommentToken: '#' },
+            'HTML': { ext: 'html' },
+            'Batch': { ext: 'bat', blockComments: false, singleLineCommentToken: '::' }
         };
 
         this.specialKeys = [
@@ -411,7 +468,8 @@ class CodeEditor {
                     'texture_storage_2d_array', 'texture_storage_3d'],
             'Python': ['False', 'def', 'None', 'True', 'in', 'is', 'and', 'lambda', 'nonlocal', 'not', 'or'],
             'Batch': ['set', 'SET', 'echo', 'ECHO', 'off', 'OFF', 'del', 'DEL', 'defined', 'DEFINED', 'setlocal', 'SETLOCAL', 'enabledelayedexpansion', 'ENABLEDELAYEDEXPANSION', 'driverquery', 
-                      'DRIVERQUERY', 'print', 'PRINT']
+                      'DRIVERQUERY', 'print', 'PRINT'],
+            'HTML': ['html', 'meta', 'title', 'link', 'script', 'body', 'DOCTYPE', 'head'],
         };
         this.utils = { // These ones don't have hightlight, used as suggestions to autocomplete only...
             'JavaScript': ['querySelector', 'body', 'addEventListener', 'removeEventListener', 'remove', 'sort', 'keys', 'filter', 'isNaN', 'parseFloat', 'parseInt', 'EPSILON', 'isFinite',
@@ -428,13 +486,14 @@ class CodeEditor {
             'Python': ['int', 'type', 'float', 'map', 'list', 'ArithmeticError', 'AssertionError', 'AttributeError', 'Exception', 'EOFError', 'FloatingPointError', 'GeneratorExit', 
                       'ImportError', 'IndentationError', 'IndexError', 'KeyError', 'KeyboardInterrupt', 'LookupError', 'MemoryError', 'NameError', 'NotImplementedError', 'OSError',
                       'OverflowError', 'ReferenceError', 'RuntimeError', 'StopIteration', 'SyntaxError', 'TabError', 'SystemError', 'SystemExit', 'TypeError', 'UnboundLocalError', 
-                      'UnicodeError', 'UnicodeEncodeError', 'UnicodeDecodeError', 'UnicodeTranslateError', 'ValueError', 'ZeroDivisionError' ],
+                      'UnicodeError', 'UnicodeEncodeError', 'UnicodeDecodeError', 'UnicodeTranslateError', 'ValueError', 'ZeroDivisionError'],
             'C++': ['uint8_t', 'uint16_t', 'uint32_t']
         };
         this.builtin = {
             'JavaScript': ['document', 'console', 'window', 'navigator', 'performance'],
             'CSS': ['*', '!important'],
-            'C++': ['vector', 'list', 'map']
+            'C++': ['vector', 'list', 'map'],
+            'HTML': ['type', 'xmlns', 'PUBLIC', 'http-equiv', 'src', 'lang', 'href', 'rel', 'content', 'xml'], // attributes
         };
         this.statementsAndDeclarations = {
             'JavaScript': ['for', 'if', 'else', 'case', 'switch', 'return', 'while', 'continue', 'break', 'do', 'import', 'from', 'throw', 'async', 'try', 'catch', 'await'],
@@ -454,6 +513,7 @@ class CodeEditor {
             'CSS': ['{', '}', '(', ')', '*'],
             'Python': ['<', '>', '[', ']', '(', ')', '='],
             'Batch': ['[', ']', '(', ')', '%'],
+            'HTML': ['<', '>', '/']
         };
 
         // Convert reserved word arrays to maps so we can search tokens faster
@@ -478,7 +538,7 @@ class CodeEditor {
             if( this.selection ) {
                 this.deleteSelection( cursor );
                 // Remove entire line when selecting with triple click
-                if(this.code.lines[ ln ] != undefined && !this.code.lines[ ln ].length) 
+                if( this._tripleClickSelection ) 
                 {
                     this.actions['Backspace'].callback( ln, cursor, e );
                     this.lineDown( cursor, true );
@@ -559,9 +619,15 @@ class CodeEditor {
                 if( this.selection ) 
                 lastX += this.selection.chars;
 
-                this.startSelection( cursor );
+                if( !this.selection )
+                    this.startSelection( cursor );
                 var string = this.code.lines[ ln ].substring( idx, lastX );
-                this.selection.selectInline( idx, cursor.line, this.measureString( string ) );
+                if( this.selection.sameLine() )
+                    this.selection.selectInline( idx, cursor.line, this.measureString( string ) );
+                else
+                {
+                    this.processSelection();
+                }
             } else if( !e.keepSelection )
                 this.endSelection();
         });
@@ -570,18 +636,25 @@ class CodeEditor {
             
             if( e.shiftKey || e._shiftKey ) {
                 
-                var string = this.code.lines[ ln ].substring(cursor.position);
+                var string = this.code.lines[ ln ].substring( cursor.position );
                 if( !this.selection )
                     this.startSelection( cursor );
-                this.selection.selectInline(cursor.position, cursor.line, this.measureString(string));
+                if( this.selection.sameLine() )
+                    this.selection.selectInline(cursor.position, cursor.line, this.measureString( string ));
+                else
+                {
+                    this.resetCursorPos( CodeEditor.CURSOR_LEFT );
+                    this.cursorToString( cursor, this.code.lines[ ln ] );            
+                    this.processSelection();
+                }
             } else 
                 this.endSelection();
 
             this.resetCursorPos( CodeEditor.CURSOR_LEFT );
             this.cursorToString( cursor, this.code.lines[ ln ] );
 
-            const last_char = (this.code.clientWidth / this.charWidth)|0;
-            this.setScrollLeft( cursor.position >= last_char ? (cursor.position - last_char) * this.charWidth : 0 );
+            const last_char = ( this.code.clientWidth / this.charWidth )|0;
+            this.setScrollLeft( cursor.position >= last_char ? ( cursor.position - last_char ) * this.charWidth : 0 );
         });
 
         this.action( 'Enter', true, ( ln, cursor, e ) => {
@@ -708,7 +781,8 @@ 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( !this.selection ) this.startSelection( cursor ); }
+                else this.endSelection();
                 this.cursorToString(cursor, substr, true);
                 if( e.shiftKey ) this.processSelection();
             }
@@ -772,7 +846,8 @@ class CodeEditor {
                 var diff = cursor.position - from;
                 var substr = word.substr( diff );
                 // Selections...
-                if( e.shiftKey ) if( !this.selection ) this.startSelection( cursor );
+                if( e.shiftKey ) { if( !this.selection ) this.startSelection( cursor ); }
+                else this.endSelection();
                 this.cursorToString( cursor, substr);
                 if( e.shiftKey ) this.processSelection();
             } else {
@@ -833,6 +908,7 @@ class CodeEditor {
 
         // Default code tab
     
+        this.loadedTabs = { };
         this.openedTabs = { };
         
         if( options.allow_add_scripts ?? true )
@@ -850,6 +926,26 @@ class CodeEditor {
         return CodeEditor.__instances;
     }
 
+    // This received key inputs from the entire document...
+    onKeyPressed( e ) {
+        
+        // Toggle visibility of the file explorer
+        if( e.key == 'b' && e.ctrlKey && this.explorer )
+        {
+            this.explorerArea.root.classList.toggle( "hidden" );
+            if( this._lastBaseareaWidth )
+            {
+                this.base_area.root.style.width = this._lastBaseareaWidth;
+                delete this._lastBaseareaWidth;
+
+            } else
+            {
+                this._lastBaseareaWidth = this.base_area.root.style.width;
+                this.base_area.root.style.width = "100%";
+            }
+        }
+    }
+
     getText( min ) {
         return this.code.lines.join(min ? ' ' : '\n');
     }
@@ -939,11 +1035,22 @@ class CodeEditor {
     loadFile( file ) {
 
         const inner_add_tab = ( text, name, title ) => {
-            const existing = this.addTab(name, true, title);
-            if( !existing )
+
+            // Set current text and language
+            const lines = text.replaceAll( '\r', '' ).split( '\n' );
+
+            // Add item in the explorer if used
+            if( this.explorer )
+            {
+                this._storedLines = this._storedLines ?? {};
+                this._storedLines[ name ] = lines;
+                this.addExplorerItem( { 'id': name, 'skipVisibility': true, 'icon': this._getFileIcon( name ) } );
+                this.explorer.frefresh( name );
+            }
+            else
             {
-                text = text.replaceAll( '\r', '' );
-                this.code.lines = text.split( '\n' );
+                this.addTab(name, true, title);
+                this.code.lines = lines;
                 this._changeLanguageFromExtension( LX.getExtension( name ) );
             }
         };
@@ -970,12 +1077,28 @@ class CodeEditor {
 
     _addUndoStep( cursor )  {
 
+        const d = new Date();
+        const current = d.getTime();
+
+        if( !this._lastTime ) {
+            this._lastTime = current;
+        } else {
+            if( ( current - this._lastTime ) > 3000 ){
+                this._lastTime = null;
+            } else {
+                // If time not enough, reset timer
+                this._lastTime = current;
+                return;
+            }
+        }
+
         var cursor = cursor ?? this.cursors.children[ 0 ];
 
         this.code.undoSteps.push( {
             lines: LX.deepCopy( this.code.lines ),
             cursor: this.saveCursor( cursor ),
-            line: cursor.line
+            line: cursor.line,
+            position: cursor.position
         } );
     }
 
@@ -985,6 +1108,35 @@ class CodeEditor {
         this.highlight = lang;
         this._refreshCodeInfo();
         this.processLines();
+
+        const ext = this.languages[ lang ].ext;
+        const icon = this._getFileIcon( null, ext );
+
+        // Update tab icon
+        {
+            const tab = this.tabs.tabDOMs[ this.code.tabName ];
+            tab.firstChild.remove();
+            console.assert( tab != undefined );
+            var iconEl;
+            if( icon.includes( 'fa-' ) )
+            {
+                iconEl = document.createElement( 'i' );
+                iconEl.className = icon;
+            } else {
+                iconEl = document.createElement( 'img' );
+                iconEl.src = "https://raw.githubusercontent.com/jxarco/lexgui.js/master/" + icon;
+            }
+            tab.prepend( iconEl );
+        }
+
+        // Update explorer icon
+        if( this.explorer )
+        {
+            const item = this.explorer.data.children.filter( (v) => v.id === this.code.tabName )[ 0 ];
+            console.assert( item != undefined );
+            item.icon = icon;
+            this.explorer.frefresh( this.code.tabName );
+        }
     }
 
     _changeLanguageFromExtension( ext ) {
@@ -1004,6 +1156,7 @@ class CodeEditor {
             case 'wgsl': return this._changeLanguage( 'WGSL' );
             case 'py': return this._changeLanguage( 'Python' );
             case 'bat': return this._changeLanguage( 'Batch' );
+            case 'html': return this._changeLanguage( 'HTML' );
             case 'txt': 
             default:
                 this._changeLanguage( 'Plain Text' );
@@ -1054,23 +1207,40 @@ class CodeEditor {
         }
     }
 
+    _getFileIcon( name, extension ) {
+
+        const isNewTabButton = name ? ( name === '+' ) : false;
+        const ext = extension ?? LX.getExtension( name );
+        return ext == 'html' ? "fa-solid fa-code orange" : 
+            ext == "css" ? "fa-solid fa-hashtag dodgerblue" : 
+            ext == "xml" ? "fa-solid fa-rss orange" : 
+            ext == "bat" ? "fa-brands fa-windows lightblue" : 
+            [ "js", "py", "json", "cpp" ].indexOf( ext ) > -1 ? "images/" + ext + ".png" : 
+            !isNewTabButton ? "fa-solid fa-align-left gray" : undefined;
+    }
+
     _onNewTab( e ) {
 
         this.processFocus(false);
 
         LX.addContextMenu( null, e, m => {
             m.add( "Create", this.addTab.bind( this, "unnamed.js", true ) );
-            m.add( "Load", this.loadTab.bind( this, "unnamed.js", true ) );
+            m.add( "Load", this.loadTabFromFile.bind( this, "unnamed.js", true ) );
         });
     }
 
-    addTab(name, selected, title) {
+    addTab( name, selected, title ) {
         
-        if(this.openedTabs[ name ])
-        {
-            this.tabs.select( this.code.tabName );
-            return true;
-        }
+        // If already loaded, set new name...
+        const repeats = Object.keys( editor.loadedTabs ).slice( 1 ).reduce( ( v, key ) => {
+            const noRepeatName = key.replace( /[_\d+]/g, '');
+            return v + ( noRepeatName == name );
+        }, 0 );
+
+        if( repeats > 0 )
+            name = name.split( '.' ).join( '_' + repeats + '.' );
+
+        const isNewTabButton = ( name === '+' );
 
         // Create code content
         let code = document.createElement( 'div' );
@@ -1082,6 +1252,8 @@ class CodeEditor {
         code.tabName = name;
         code.title = title ?? name;
         code.tokens = {};
+        code.style.left = "0px";
+        code.style.top = "0px";
 
         code.addEventListener( 'dragenter', function(e) {
             e.preventDefault();
@@ -1098,24 +1270,39 @@ class CodeEditor {
                 this.loadFile( e.dataTransfer.files[ i ] );
         });
 
+        this.loadedTabs[ name ] = code;
         this.openedTabs[ name ] = code;
+        
+        const tabIcon = this._getFileIcon( name );
 
-        this.tabs.add(name, code, { 'selected': selected, 'fixed': (name === '+') , 'title': code.title, 'onSelect': (e, tabname) => {
+        if( this.explorer && !isNewTabButton )
+        {
+            this.addExplorerItem( { 'id': name, 'skipVisibility': true, 'icon': tabIcon } );
+            this.explorer.frefresh( name );
+        }
 
-            if(tabname == '+')
-            {
-                this._onNewTab( e );
-                return;
-            }
+        this.tabs.add(name, code, { 
+            selected: selected, 
+            fixed: isNewTabButton, 
+            title: code.title, 
+            icon: tabIcon, 
+            onSelect: (e, tabname) => {
 
-            var cursor = cursor ?? this.cursors.children[ 0 ];
-            this.saveCursor( cursor, this.code.cursorState );    
-            this.code = this.openedTabs[ tabname ];
-            this.restoreCursor( cursor, this.code.cursorState );    
-            this.endSelection();
-            this._changeLanguageFromExtension( LX.getExtension( tabname ) );
-            this._refreshCodeInfo( cursor.line, cursor.position );
-        }});
+                if( isNewTabButton )
+                {
+                    this._onNewTab( e );
+                    return;
+                }
+
+                var cursor = cursor ?? this.cursors.children[ 0 ];
+                this.saveCursor( cursor, this.code.cursorState );    
+                this.code = this.loadedTabs[ tabname ];
+                this.restoreCursor( cursor, this.code.cursorState );    
+                this.endSelection();
+                this._changeLanguageFromExtension( LX.getExtension( tabname ) );
+                this._refreshCodeInfo( cursor.line, cursor.position );
+            }
+        });
 
         // Move into the sizer..
         this.codeSizer.appendChild( code );
@@ -1129,9 +1316,77 @@ class CodeEditor {
             this.processLines();
             doAsync( () => this._refreshCodeInfo( 0, 0 ), 50 );
         }
+
+        // Bc it could be overrided..
+        return name;
     }
 
-    loadTab() {
+    loadTab( name ) {
+
+        // Already open...
+        if( this.openedTabs[ name ] )
+        {
+            this.tabs.select( name );
+            return;
+        }
+
+        let code = this.loadedTabs[ name ]
+
+        if( !code )
+        {
+            this.addTab( name, true );
+            // Unload lines from file...
+            if( this._storedLines[ name ] )
+            {
+                this.code.lines = this._storedLines[ name ];
+                delete this._storedLines[ name ];
+            }
+            this._changeLanguageFromExtension( LX.getExtension( name ) );
+            return;
+        }
+
+        this.openedTabs[ name ] = code;
+        
+        const isNewTabButton = ( name === '+' );
+        const tabIcon = this._getFileIcon( name );
+
+        this.tabs.add(name, code, { 
+            selected: true, 
+            fixed: isNewTabButton, 
+            title: code.title, 
+            icon: tabIcon, 
+            onSelect: (e, tabname) => {
+
+                if( isNewTabButton )
+                {
+                    this._onNewTab( e );
+                    return;
+                }
+
+                var cursor = cursor ?? this.cursors.children[ 0 ];
+                this.saveCursor( cursor, this.code.cursorState );    
+                this.code = this.loadedTabs[ tabname ];
+                this.restoreCursor( cursor, this.code.cursorState );    
+                this.endSelection();
+                this._changeLanguageFromExtension( LX.getExtension( tabname ) );
+                this._refreshCodeInfo( cursor.line, cursor.position );
+            }
+        });
+
+        // Move into the sizer..
+        this.codeSizer.appendChild( code );
+        
+        this.endSelection();
+
+        // Select as current...
+        this.code = code;  
+        this.resetCursorPos( CodeEditor.CURSOR_LEFT | CodeEditor.CURSOR_TOP );
+        this.processLines();
+        this._changeLanguageFromExtension( LX.getExtension( name ) );
+        doAsync( () => this._refreshCodeInfo( 0, 0 ), 50 );
+    }
+
+    loadTabFromFile() {
         const input = document.createElement( 'input' );
         input.type = 'file';
         document.body.appendChild( input );
@@ -1221,7 +1476,7 @@ class CodeEditor {
                     this.resetCursorPos( CodeEditor.CURSOR_LEFT );
                     this.cursorToPosition( cursor, from );
                     this.startSelection( cursor );
-                    this.selection.selectInline(from, cursor.line, this.measureString(word));
+                    this.selection.selectInline( from, cursor.line, this.measureString( word ) );
                     this.cursorToString( cursor, word ); // Go to the end of the word
                     break;
                 // Select entire line
@@ -1229,6 +1484,7 @@ class CodeEditor {
                     this.resetCursorPos( CodeEditor.CURSOR_LEFT );
                     e._shiftKey = true;
                     this.actions['End'].callback(cursor.line, cursor, e);
+                    this._tripleClickSelection = true;
                     break;
             }
         }
@@ -1248,8 +1504,8 @@ class CodeEditor {
                     m.add( "Paste", () => {  this._pasteContent(); } );
                     m.add( "" );
                     m.add( "Format/JSON", () => { 
-                        let json = this.toJSONFormat(this.getText());
-                        this.code.lines = json.split("\n"); 
+                        let json = this.toJSONFormat( this.getText() );
+                        this.code.lines = json.split( "\n" ); 
                         this.processLines();
                     } );
                 }
@@ -1285,7 +1541,7 @@ class CodeEditor {
 
         var cursor = this.cursors.children[ 0 ];
 
-        if(e) this.processClick( e, true );
+        if( e ) this.processClick( e, true );
         if( !this.selection )
             this.startSelection( cursor );
 
@@ -1307,20 +1563,25 @@ class CodeEditor {
         // Selection goes down...
         if( deltaY >= 0 )
         {
-            while( deltaY < (this.selections.childElementCount - 1) )            
+            while( deltaY < ( this.selections.childElementCount - 1 ) )
                 deleteElement( this.selections.lastChild );
 
             for(let i = fromY; i <= toY; i++){
 
                 const sId = i - fromY;
+                const isVisible = i >= this.visibleLinesViewport.x && i <= this.visibleLinesViewport.y;
+                let domEl = null;
 
-                // Make sure that the line selection is generated...
-                let domEl = this.selections.childNodes[sId];
-                if(!domEl)
+                if( isVisible )
                 {
-                    domEl = document.createElement( 'div' );
-                    domEl.className = "lexcodeselection";
-                    this.selections.appendChild( domEl );
+                    // Make sure that the line selection is generated...
+                    domEl = this.selections.childNodes[ sId ];
+                    if(!domEl)
+                    {
+                        domEl = document.createElement( 'div' );
+                        domEl.className = "lexcodeselection";
+                        this.selections.appendChild( domEl );
+                    }
                 }
 
                 // Compute new width and selection margins
@@ -1329,67 +1590,80 @@ class CodeEditor {
                 if(sId == 0) // First line 2 cases (single line, multiline)
                 {
                     const reverse = fromX > toX;
-                    if(deltaY == 0) string = !reverse ? this.code.lines[ i ].substring(fromX, toX) : this.code.lines[ i ].substring(toX, fromX);
-                    else string = this.code.lines[ i ].substr(fromX);
+                    if(deltaY == 0) string = !reverse ? this.code.lines[ i ].substring( fromX, toX ) : this.code.lines[ i ].substring(toX, fromX);
+                    else string = this.code.lines[ i ].substr( fromX );
                     const pixels = (reverse && deltaY == 0 ? toX : fromX) * this.charWidth;
-                    domEl.style.left = "calc(" + pixels + "px + " + this.xPadding + ")";
+                    if( isVisible ) domEl.style.left = "calc(" + pixels + "px + " + this.xPadding + ")";
                 }
                 else
                 {
-                    string = (i == toY) ? this.code.lines[ i ].substring(0, toX) : this.code.lines[ i ]; // Last line, any multiple line...
-                    domEl.style.left = this.xPadding;
+                    string = (i == toY) ? this.code.lines[ i ].substring( 0, toX ) : this.code.lines[ i ]; // Last line, any multiple line...
+                    if( isVisible ) domEl.style.left = this.xPadding;
                 }
                 
-                const stringWidth = this.measureString(string);
-                domEl.style.width = (stringWidth || 8) + "px";
-                domEl._top = i * this.lineHeight;
-                domEl.style.top = domEl._top + "px";
+                const stringWidth = this.measureString( string );
                 this.selection.chars += stringWidth / this.charWidth;
+
+                if( isVisible )
+                {
+                    domEl.style.width = (stringWidth || 8) + "px";
+                    domEl._top = i * this.lineHeight;
+                    domEl.style.top = domEl._top + "px";
+                }
             }
         }
         else // Selection goes up...
         {
-            while( Math.abs(deltaY) < (this.selections.childElementCount - 1) )            
+            while( Math.abs( deltaY ) < ( this.selections.childElementCount - 1 ) )            
                 deleteElement( this.selections.firstChild );
 
-            for(let i = toY; i <= fromY; i++){
+            for( let i = toY; i <= fromY; i++ ){
 
                 const sId = i - toY;
+                const isVisible = i >= this.visibleLinesViewport.x && i <= this.visibleLinesViewport.y;
+                let domEl = null;
 
-                // Make sure that the line selection is generated...
-                let domEl = this.selections.childNodes[sId];
-                if(!domEl)
+                if( isVisible )
                 {
-                    domEl = document.createElement( 'div' );
-                    domEl.className = "lexcodeselection";
-                    this.selections.appendChild( domEl );
+                    // Make sure that the line selection is generated...
+                    domEl = this.selections.childNodes[ sId ];
+                    if(!domEl)
+                    {
+                        domEl = document.createElement( 'div' );
+                        domEl.className = "lexcodeselection";
+                        this.selections.appendChild( domEl );
+                    }
                 }
 
                 // Compute new width and selection margins
                 let string;
                 
-                if(sId == 0)
+                if( sId == 0 )
                 {
                     string = this.code.lines[ i ].substr(toX);
                     const pixels = toX * this.charWidth;
-                    domEl.style.left = "calc(" + pixels + "px + " + this.xPadding + ")";
+                    if( isVisible ) domEl.style.left = "calc(" + pixels + "px + " + this.xPadding + ")";
                 }
                 else
                 {
                     string = (i == fromY) ? this.code.lines[ i ].substring(0, fromX) : this.code.lines[ i ]; // Last line, any multiple line...
-                    domEl.style.left = this.xPadding;
+                    if( isVisible ) domEl.style.left = this.xPadding;
                 }
                 
-                const stringWidth = this.measureString(string);
-                domEl.style.width = (stringWidth || 8) + "px";
-                domEl._top = i * this.lineHeight;
-                domEl.style.top = domEl._top + "px";
+                const stringWidth = this.measureString( string );
                 this.selection.chars += stringWidth / this.charWidth;
+                
+                if( isVisible )
+                {
+                    domEl.style.width = (stringWidth || 8) + "px";
+                    domEl._top = i * this.lineHeight;
+                    domEl.style.top = domEl._top + "px";
+                }
             }
         }
     }
 
-    async processKey(e) {
+    async processKey( e ) {
 
         if( !this.code ) 
             return;
@@ -1399,7 +1673,7 @@ class CodeEditor {
         const skip_undo = e.detail.skip_undo ?? false;
 
         // keys with length > 1 are probably special keys
-        if( key.length > 1 && this.specialKeys.indexOf(key) == -1 )
+        if( key.length > 1 && this.specialKeys.indexOf( key ) == -1 )
             return;
 
         let cursor = this.cursors.children[ 0 ];
@@ -1446,7 +1720,6 @@ class CodeEditor {
                     return;
                 const step = this.code.undoSteps.pop();
                 this.code.lines = step.lines;
-                cursor.line = step.line;
                 this.restoreCursor( cursor, step.cursor );
                 this.processLines();
                 return;
@@ -1493,23 +1766,9 @@ class CodeEditor {
 
         // Add undo steps
 
-        const d = new Date();
-        const current = d.getTime();
-
-        if( !skip_undo )
+        if( !skip_undo && this.code.lines.length )
         {
-            if( !this._lastTime ) {
-                this._lastTime = current;
-                this._addUndoStep( cursor );
-            } else {
-                if( (current - this._lastTime) > 3000 && this.code.lines.length){
-                    this._lastTime = null;
-                    this._addUndoStep( cursor );
-                }else{
-                    // If time not enough, reset timer
-                    this._lastTime = current;
-                }
-            }
+            this._addUndoStep( cursor );
         }
 
         //  Some custom cases for word enclosing (), {}, "", '', ...
@@ -1517,7 +1776,7 @@ class CodeEditor {
         const enclosableKeys = ["\"", "'", "(", "{"];
         if( enclosableKeys.indexOf( key ) > -1 )
         {
-            if( this.encloseSelectedWordWithKey(key, lidx, cursor) ) 
+            if( this._encloseSelectedWordWithKey(key, lidx, cursor) ) 
                 return;
         }
 
@@ -1527,7 +1786,6 @@ class CodeEditor {
         if( this.selection )
         {
             this.actions['Backspace'].callback(lidx, cursor, e);
-            lidx = cursor.line; // Update this, since it's from the old code
         }
 
         // Append key
@@ -1567,6 +1825,14 @@ class CodeEditor {
         // Update only the current line, since it's only an appended key
         this.processLine( lidx );
 
+        // We are out of the viewport and max length is different? Resize scrollbars...
+        const maxLineLength = this.getMaxLineLength();
+        const numViewportChars = Math.floor( this.codeScroller.clientWidth / this.charWidth );
+        if( maxLineLength >= numViewportChars && maxLineLength != this._lastMaxLineLength )
+        {
+            this.resize( maxLineLength );
+        }
+
         // Manage autocomplete
 
         if( this.useAutoComplete )
@@ -1587,6 +1853,10 @@ class CodeEditor {
             text_to_copy = "\n" + this.code.lines[ cursor.line ];
         }
         else {
+            
+            // Some selections don't depend on mouse up..
+            if( this.selection ) this.selection.invertIfNecessary();
+
             const separator = "_NEWLINE_";
             let code = this.code.lines.join(separator);
 
@@ -1603,7 +1873,7 @@ class CodeEditor {
             text_to_copy = lines.join('\n');
         }
 
-        navigator.clipboard.writeText(text_to_copy).then(() => console.log("Successfully copied"), (err) => console.error("Error"));
+        navigator.clipboard.writeText( text_to_copy ).then(() => console.log("Successfully copied"), (err) => console.error("Error"));
     }
 
     async _cutContent() {
@@ -1619,6 +1889,10 @@ class CodeEditor {
             this.resetCursorPos( CodeEditor.CURSOR_LEFT );
         }
         else {
+            
+            // Some selections don't depend on mouse up..
+            if( this.selection ) this.selection.invertIfNecessary();
+
             const separator = "_NEWLINE_";
             let code = this.code.lines.join(separator);
 
@@ -1637,7 +1911,7 @@ class CodeEditor {
             this.deleteSelection( cursor );
         }
 
-        navigator.clipboard.writeText(text_to_cut).then(() => console.log("Successfully cut"), (err) => console.error("Error"));
+        navigator.clipboard.writeText( text_to_cut ).then(() => console.log("Successfully cut"), (err) => console.error("Error"));
     }
 
     action( key, deleteSelection, fn ) {
@@ -1662,7 +1936,7 @@ class CodeEditor {
 
     toLocalLine( line ) {
 
-        const d = Math.max( this.viewportRangeStart - this.lineScrollMargin.x, 0 );
+        const d = Math.max( this.firstLineInViewport - this.lineScrollMargin.x, 0 );
         return Math.min( Math.max( line - d, 0 ), this.code.lines.length - 1 );
     }
 
@@ -1672,38 +1946,34 @@ class CodeEditor {
     }
 
     processLines( mode ) {
-
-        mode = mode ?? CodeEditor.KEEP_VISIBLE_LINES;
-
-        // console.clear();
-        console.log("--------------------------------------------");
-
-        const lastScrollTop = this.getScrollTop();
+        
         const start = performance.now();
 
-        var gutter_html = "", code_html = "";
-
+        var gutter_html = "";
+        var code_html = "";
+        
+        // Reset all lines content
         this.code.innerHTML = "";
-
+        
         // Get info about lines in viewport
-        const firstLineInViewport = mode & CodeEditor.UPDATE_VISIBLE_LINES ? 
-                                    ( (lastScrollTop / this.lineHeight)|0 ) : this.viewportRangeStart;
+        const lastScrollTop = this.getScrollTop();
+        this.firstLineInViewport = ( mode ?? CodeEditor.KEEP_VISIBLE_LINES ) & CodeEditor.UPDATE_VISIBLE_LINES ? 
+                                    ( (lastScrollTop / this.lineHeight)|0 ) : this.firstLineInViewport;
         const totalLinesInViewport = ((this.codeScroller.offsetHeight - 36) / this.lineHeight)|0;
-        this.viewportRangeStart = firstLineInViewport;
-
-        const viewportRange = new LX.vec2( 
-            Math.max( firstLineInViewport - this.lineScrollMargin.x, 0 ), 
-            Math.min( firstLineInViewport + totalLinesInViewport + this.lineScrollMargin.y, this.code.lines.length )
+        this.visibleLinesViewport = new LX.vec2( 
+            Math.max( this.firstLineInViewport - this.lineScrollMargin.x, 0 ), 
+            Math.min( this.firstLineInViewport + totalLinesInViewport + this.lineScrollMargin.y, this.code.lines.length )
         );
 
         // Add remaining lines if we are near the end of the scroll
         {
-            const diff = Math.max( this.code.lines.length - viewportRange.y, 0 );
-            if( diff < ( totalLinesInViewport + this.lineScrollMargin.y ) )
-                viewportRange.y += diff;
+            const diff = Math.max( this.code.lines.length - this.visibleLinesViewport.y, 0 );
+            if( diff <= this.lineScrollMargin.y )
+                this.visibleLinesViewport.y += diff;
         }
-            
-        for( let i = viewportRange.x; i < viewportRange.y; ++i )
+        
+        // Process visible lines
+        for( let i = this.visibleLinesViewport.x; i < this.visibleLinesViewport.y; ++i )
         {
             gutter_html += "<span>" + (i + 1) + "</span>";
             code_html += this.processLine( i, true );
@@ -1711,24 +1981,23 @@ class CodeEditor {
         
         this.code.innerHTML = code_html;
             
-        console.log("RANGE:", viewportRange);
-        console.log( "Num lines processed:",  (viewportRange.y - viewportRange.x), performance.now() - start );
-        console.log("--------------------------------------------");
+        // console.log("RANGE:", this.visibleLinesViewport);
+        // console.log( "Num lines processed:",  (this.visibleLinesViewport.y - this.visibleLinesViewport.x), performance.now() - start );
+        // console.log("--------------------------------------------");
 
+        // Update scroll data
         this.codeScroller.scrollTop = lastScrollTop;
+        this.code.style.top = ( this.visibleLinesViewport.x * this.lineHeight ) + "px";
 
-        setTimeout( () => {
-
-            // Update max viewport
-            const scrollWidth = this.getMaxLineLength() * this.charWidth;
-            const scrollHeight = this.code.lines.length * this.lineHeight + 10; // scrollbar offset
-    
-            this.codeSizer.style.minWidth = scrollWidth + "px";
-            this.codeSizer.style.minHeight = scrollHeight + "px";
+        // Update selections
+        if( this.selection )
+            this.processSelection( null, true );
 
-            this.resizeScrollBars( totalLinesInViewport );
+        // Clear tmp vars
+        delete this._buildingString; 
+        delete this._pendingString;
 
-        }, 10 );
+        this.resize();
     }
 
     processLine( linenum, force ) {
@@ -1796,7 +2065,7 @@ class CodeEditor {
                     delete this._buildingBlockComment;
             }
 
-            line_inner_html += this.evaluateToken( token, prev, next, (i == tokensToEvaluate.length - 1) );
+            line_inner_html += this._evaluateToken( token, prev, next, (i == tokensToEvaluate.length - 1) );
         }
 
         return UPDATE_LINE( line_inner_html );
@@ -1829,7 +2098,7 @@ class CodeEditor {
 
         const singleLineCommentToken = this.languages[ this.highlight ].singleLineCommentToken ?? this.defaultSingleLineCommentToken;
         const idx = linestring.indexOf( singleLineCommentToken );
-        
+
         if( idx > -1 )
         {
             const stringKeys = Object.values( this.stringKeys );
@@ -1870,7 +2139,7 @@ class CodeEditor {
             tokensToEvaluate.push( t );
         };
 
-        let iter = linestring.matchAll(/(::|[\[\](){}<>.,;:*"'%@ ])/g);
+        let iter = linestring.matchAll(/(::|[\[\](){}<>.,;:*"'%@!/= ])/g);
         let subtokens = iter.next();
         if( subtokens.value )
         {
@@ -1923,7 +2192,7 @@ class CodeEditor {
         return kindArray[this.highlight] && kindArray[this.highlight][token] != undefined;
     }
 
-    evaluateToken( token, prev, next, isLastToken ) {
+    _evaluateToken( token, prev, next, isLastToken ) {
 
         const highlight = this.highlight.replace(/\s/g, '').replaceAll("+", "p").toLowerCase();
         const customStringKeys = Object.assign( {}, this.stringKeys );
@@ -1950,7 +2219,7 @@ class CodeEditor {
         {
             if( this._buildingString != undefined )
             {
-                this.appendStringToken( token );
+                this._appendStringToken( token );
                 return "";
             }
             return token;
@@ -1967,7 +2236,7 @@ class CodeEditor {
                 token_classname = "cm-com";
             
             else if( this._buildingString != undefined )
-                discardToken = this.appendStringToken( token );
+                discardToken = this._appendStringToken( token );
             
             else if( this._mustHightlightWord( token, this.keywords ) )
                 token_classname = "cm-kwd";
@@ -1981,28 +2250,28 @@ class CodeEditor {
             else if( this._mustHightlightWord( token, this.symbols ) )
                 token_classname = "cm-sym";
 
-            else if( token.substr(0, 2) == singleLineCommentToken )
+            else if( token.substr( 0, singleLineCommentToken.length ) == singleLineCommentToken )
                 token_classname = "cm-com";
 
-            else if( usesBlockComments && token.substr(0, 2) == '/*' )
+            else if( usesBlockComments && token.substr( 0, 2 ) == '/*' )
                 token_classname = "cm-com";
 
-            else if( usesBlockComments && token.substr(token.length - 2) == '*/' )
+            else if( usesBlockComments && token.substr( token.length - 2 ) == '*/' )
                 token_classname = "cm-com";
 
-            else if( this.isNumber(token) || this.isNumber( token.replace(/[px]|[em]|%/g,'') ) )
+            else if( this.isNumber( token ) || this.isNumber( token.replace(/[px]|[em]|%/g,'') ) )
                 token_classname = "cm-dec";
 
-            else if( this.isCSSClass(token, prev, next) )
+            else if( this._isCSSClass( token, prev, next ) )
                 token_classname = "cm-kwd";
 
-            else if ( this.isType(token, prev, next) )
+            else if ( this._isType( token, prev, next ) )
                 token_classname = "cm-typ";
 
-            else if ( highlight == 'batch' && (token == '@' || prev == ':' || prev == '@') )
+            else if ( highlight == 'batch' && ( token == '@' || prev == ':' || prev == '@' ) )
                 token_classname = "cm-kwd";
 
-            else if ( highlight == 'cpp' && token.includes('#') ) // C++ preprocessor
+            else if ( highlight == 'cpp' && token.includes( '#' ) ) // C++ preprocessor
                 token_classname = "cm-ppc";
 
             else if ( highlight == 'cpp' && prev == '<' && (next == '>' || next == '*') ) // Defining template type in C++
@@ -2024,7 +2293,7 @@ class CodeEditor {
             // We finished constructing a string
             if( this._buildingString && ( this._stringEnded || isLastToken ) )
             {
-                token = this.getCurrentString();
+                token = this._getCurrentString();
                 token_classname = "cm-str";
                 discardToken = false;
             }
@@ -2035,6 +2304,9 @@ class CodeEditor {
             if( discardToken )
                 return "";
 
+            token = token.replace( "<", "&lt;" );
+            token = token.replace( ">", "&gt;" );
+
             // No highlighting, no need to put it inside another span..
             if( !token_classname.length )
                 return token;
@@ -2043,7 +2315,7 @@ class CodeEditor {
         }
     }
 
-    appendStringToken( token ) {
+    _appendStringToken( token ) {
 
         if( !this._pendingString )
             this._pendingString = "";
@@ -2053,14 +2325,14 @@ class CodeEditor {
         return true;
     }
 
-    getCurrentString() {
+    _getCurrentString() {
 
         const chars = this._pendingString;
         delete this._pendingString;
         return chars;
     }
 
-    isCSSClass( token, prev, next ) {
+    _isCSSClass( token, prev, next ) {
         return this.highlight == 'CSS' && prev == '.';
     }
 
@@ -2077,7 +2349,7 @@ class CodeEditor {
         return token.length && token != ' ' && !Number.isNaN(+token);
     }
 
-    isType( token, prev, next ) {
+    _isType( token, prev, next ) {
         
         // Common case
         if( this._mustHightlightWord( token, this.types ) )
@@ -2101,7 +2373,7 @@ class CodeEditor {
         }
     }
 
-    encloseSelectedWordWithKey( key, lidx, cursor ) {
+    _encloseSelectedWordWithKey( key, lidx, cursor ) {
 
         if( !this.selection || (this.selection.fromY != this.selection.toY) )
         return false;
@@ -2213,12 +2485,13 @@ class CodeEditor {
         const post = code.slice( index + num_chars );
 
         this.code.lines = ( pre + post ).split( separator );
-        this.processLines();
-
+        
         this.cursorToLine( cursor, this.selection.fromY, true );
         this.cursorToPosition( cursor, this.selection.fromX );
         
         this.endSelection();
+
+        this.processLines();
         this._refreshCodeInfo( cursor.line, cursor.position );
     }
 
@@ -2227,6 +2500,7 @@ class CodeEditor {
         this.selections.classList.remove('show');
         this.selections.innerHTML = "";
         delete this.selection;
+        delete this._tripleClickSelection;
     }
 
     cursorToRight( key, cursor ) {
@@ -2236,14 +2510,15 @@ class CodeEditor {
         cursor._left += this.charWidth;
         cursor.style.left = "calc( " + cursor._left + "px + " + this.xPadding + " )";
         cursor.position++;
+
         this.restartBlink();
         this._refreshCodeInfo( cursor.line, cursor.position );
 
         // Add horizontal scroll
 
         doAsync(() => {
-            var last_char = ((this.codeScroller.clientWidth + this.getScrollLeft()) / this.charWidth)|0;
-            if( cursor.position >= last_char )
+            var viewportSizeX = ( this.codeScroller.clientWidth + this.getScrollLeft() ) - 48; // Gutter offset
+            if( (cursor.position * this.charWidth) >= viewportSizeX )
                 this.setScrollLeft( this.getScrollLeft() + this.charWidth );
         });
     }
@@ -2253,18 +2528,18 @@ class CodeEditor {
         if(!key) return;
         cursor = cursor ?? this.cursors.children[ 0 ];
         cursor._left -= this.charWidth;
-        cursor._left = Math.max(cursor._left, 0);
+        cursor._left = Math.max( cursor._left, 0 );
         cursor.style.left = "calc( " + cursor._left + "px + " + this.xPadding + " )";
         cursor.position--;
-        cursor.position = Math.max(cursor.position, 0);
+        cursor.position = Math.max( cursor.position, 0 );
         this.restartBlink();
         this._refreshCodeInfo( cursor.line, cursor.position );
 
         // Add horizontal scroll
 
         doAsync(() => {
-            var first_char = (this.getScrollLeft() / this.charWidth)|0;
-            if( (cursor.position - 1) < first_char )
+            var viewportSizeX = this.getScrollLeft(); // Gutter offset
+            if( ( ( cursor.position - 1 ) * this.charWidth ) < viewportSizeX )
                 this.setScrollLeft( this.getScrollLeft() - this.charWidth );
         });
     }
@@ -2283,7 +2558,7 @@ class CodeEditor {
         this._refreshCodeInfo( cursor.line, cursor.position );
 
         doAsync(() => {
-            var first_line = (this.getScrollTop() / this.lineHeight)|0;
+            var first_line = ( this.getScrollTop() / this.lineHeight )|0;
             if( (cursor.line - 1) < first_line )
                 this.setScrollTop( this.getScrollTop() - this.lineHeight );
         });
@@ -2302,7 +2577,7 @@ class CodeEditor {
         this._refreshCodeInfo( cursor.line, cursor.position );
 
         doAsync(() => {
-            var last_line = ((this.codeScroller.offsetHeight + this.getScrollTop()) / this.lineHeight)|0;
+            var last_line = ( ( this.codeScroller.offsetHeight + this.getScrollTop() ) / this.lineHeight )|0;
             if( cursor.line >= last_line )
                 this.setScrollTop( this.getScrollTop() + this.lineHeight );
         });
@@ -2344,7 +2619,7 @@ class CodeEditor {
 
         cursor = cursor ?? this.cursors.children[ 0 ];
         cursor.line = state.line ?? 0;
-        cursor.position = state.charPos ?? 0;
+        cursor.position = state.position ?? 0;
 
         cursor._left = state.left ?? 0;
         cursor.style.left = "calc(" + (cursor._left - this.getScrollLeft()) + "px + " + this.xPadding + ")";
@@ -2414,9 +2689,32 @@ class CodeEditor {
         this.setScrollBarValue( 'vertical' );
     }
 
-    resizeScrollBars( numViewportLines ) {
+    resize( pMaxLength ) {
+        
+        setTimeout( () => {
+
+            // Update max viewport
+            const maxLineLength = pMaxLength ?? this.getMaxLineLength();
+            const scrollWidth = maxLineLength * this.charWidth;
+            const scrollHeight = this.code.lines.length * this.lineHeight;
+
+            this._lastMaxLineLength = maxLineLength;
+
+            this.codeSizer.style.minWidth = scrollWidth + "px";
+            this.codeSizer.style.minHeight = scrollHeight + "px";
+
+            this.resizeScrollBars();
+
+            // console.warn("Resize editor viewport");
+
+        }, 10 );
+    }
+
+    resizeScrollBars() {
+
+        const totalLinesInViewport = ((this.codeScroller.offsetHeight - 36) / this.lineHeight)|0;
 
-        if( numViewportLines > this.code.lines.length )
+        if( totalLinesInViewport > this.code.lines.length )
         {
             this.codeScroller.classList.remove( 'with-vscrollbar' );
             this.vScrollbar.root.classList.add( 'scrollbar-unused' );
@@ -2425,13 +2723,12 @@ class CodeEditor {
         {
             this.codeScroller.classList.add( 'with-vscrollbar' );
             this.vScrollbar.root.classList.remove( 'scrollbar-unused' );
-            this.vScrollbar.thumb.size = (numViewportLines / this.code.lines.length);
+            this.vScrollbar.thumb.size = (totalLinesInViewport / this.code.lines.length);
             this.vScrollbar.thumb.style.height = (this.vScrollbar.thumb.size * 100.0) + "%";
         }
 
         const numViewportChars = Math.floor( this.codeScroller.clientWidth / this.charWidth );
-        const line_lengths = this.code.lines.map( value => value.length );
-        const maxLineLength = Math.max(...line_lengths);
+        const maxLineLength = this._lastMaxLineLength;
 
         if( numViewportChars > maxLineLength )
         {
@@ -2625,11 +2922,11 @@ class CodeEditor {
 
         // Add language special keys...
         suggestions = suggestions.concat(   
-            Object.keys( this.builtin[ this.highlight ] ) ?? [],
-            Object.keys( this.keywords[ this.highlight ] ) ?? [],
-            Object.keys( this.statementsAndDeclarations[ this.highlight ] ) ?? [],
-            Object.keys( this.types[ this.highlight ] ) ?? [],
-            Object.keys( this.utils[ this.highlight ] ) ?? []
+            Object.keys( this.builtin[ this.highlight ] ?? {} ),
+            Object.keys( this.keywords[ this.highlight ] ?? {} ),
+            Object.keys( this.statementsAndDeclarations[ this.highlight ] ?? {} ),
+            Object.keys( this.types[ this.highlight ] ?? {} ),
+            Object.keys( this.utils[ this.highlight ] ?? {} )
         );
 
         // Add words in current tab plus remove current word