lexgui 0.1.16 → 0.1.18

package/build/components/codeeditor.js

@@ -13,23 +13,23 @@ function flushCss(element) {
     element.offsetHeight;
 }
 
-function swapElements (obj, a, b) {
+function swapElements( obj, a, b ) {
     [obj[a], obj[b]] = [obj[b], obj[a]];
 }
 
-function swapArrayElements (array, id0, id1) {
+function swapArrayElements( array, id0, id1 ) {
     [array[id0], array[id1]] = [array[id1], array[id0]];
 };
 
-function sliceChar(str, idx) {
+function sliceChar( str, idx ) {
     return str.substr(0, idx) + str.substr(idx + 1);
 }
 
-function firstNonspaceIndex(str) {
+function firstNonspaceIndex( str ) {
     return str.search(/\S|$/);
 }
 
-function deleteElement(el) {
+function deleteElement( el ) {
     if(el) el.remove();
 }
 
@@ -42,9 +42,9 @@ function doAsync( fn, ms ) {
         fn();
 }
 
-class ISelection {
+class CodeSelection {
 
-    constructor(editor, ix, iy) {
+    constructor( editor, ix, iy ) {
 
         this.editor = editor;
         this.chars  = 0;
@@ -66,25 +66,83 @@ class ISelection {
             swapElements(this, 'fromY', 'toY');
     }
 
-    selectInline(x, y, width) {
+    selectInline( x, y, width ) {
         
         this.chars = width / this.editor.charWidth;
         this.fromX = x;
         this.toX = x + this.chars;
         this.fromY = this.toY = y;
 
-        var domEl = document.createElement('div');
+        var domEl = document.createElement( 'div' );
         domEl.className = "lexcodeselection";
         
-        domEl._top = 4 + y * this.editor.lineHeight;
-        domEl.style.top = (domEl._top - this.editor.getScrollTop()) + "px";
+        domEl._top = y * this.editor.lineHeight;
+        domEl.style.top = domEl._top + "px";
         domEl._left = x * this.editor.charWidth;
-        domEl.style.left = "calc(" + (domEl._left - this.editor.getScrollLeft()) + "px + " + this.editor.xPadding + ")";
+        domEl.style.left = "calc(" + domEl._left + "px + " + this.editor.xPadding + ")";
         domEl.style.width = width + "px";
         this.editor.selections.appendChild(domEl);
     }
 };
 
+class ScrollBar {
+
+    static SCROLLBAR_VERTICAL       = 1;
+    static SCROLLBAR_HORIZONTAL     = 2;
+
+    constructor( editor, type ) {
+
+        this.editor = editor;
+        this.type = type;
+
+        this.root = document.createElement( 'div' );
+        this.root.className = "lexcodescrollbar";
+        if( type & ScrollBar.SCROLLBAR_HORIZONTAL ) 
+            this.root.classList.add( 'horizontal' );
+
+        this.thumb = document.createElement( 'div' );
+        this.thumb._top = 0;
+        this.thumb._left = 0;
+        this.root.appendChild( this.thumb );
+
+        this.thumb.addEventListener( "mousedown", inner_mousedown );
+            
+        this.lastPosition = new LX.vec2( 0, 0 );
+
+        let that = this;
+        
+        function inner_mousedown( e )
+        {
+            var doc = editor.root.ownerDocument;
+            doc.addEventListener( "mousemove",inner_mousemove );
+            doc.addEventListener( "mouseup",inner_mouseup );
+            that.lastPosition.set( e.x, e.y );
+            e.stopPropagation();
+            e.preventDefault();
+        }
+
+        function inner_mousemove( e )
+        {
+            var dt = that.lastPosition.sub( new LX.vec2( e.x, e.y ) );
+            if( that.type & ScrollBar.SCROLLBAR_VERTICAL ) 
+                editor.updateVerticalScrollFromScrollBar( dt.y )
+            else
+                editor.updateHorizontalScrollFromScrollBar( dt.x )
+            that.lastPosition.set( e.x, e.y );
+            e.stopPropagation();
+            e.preventDefault();
+        }
+
+        function inner_mouseup( e )
+        {
+            var doc = editor.root.ownerDocument;
+            doc.removeEventListener( "mousemove", inner_mousemove );
+            doc.removeEventListener( "mouseup", inner_mouseup );
+        }
+    }
+
+}
+
 /**
  * @class CodeEditor
  */
@@ -96,6 +154,9 @@ class CodeEditor {
     static CURSOR_LEFT  = 1;
     static CURSOR_TOP   = 2;
 
+    static KEEP_VISIBLE_LINES   = 1;
+    static UPDATE_VISIBLE_LINES = 2;
+
     static WORD_TYPE_METHOD = 0;
     static WORD_TYPE_CLASS  = 1;
 
@@ -106,35 +167,14 @@ class CodeEditor {
 
     constructor( area, options = {} ) {
 
-        // var a = [];
-
-        // var map = {};
-
-        // for( var i = 0; i < 1000000; ++i )
-        // map[i] = 1;
-
-        // const start = performance.now();
-
-        // for( var i = 0; i < 3000; ++i ) {
-        //     const b = map[Math.floor( Math.random() * 1000000 )];
-        // }
-
-        // console.log( performance.now() - start );
-
-
-        // debugger;
-
-
         window.editor = this;
 
         CodeEditor.__instances.push( this );
 
-        var that = this;
-
         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 ] } );
         this.tabs.root.addEventListener( 'dblclick', (e) => {
             if( options.allow_add_scripts ?? true ) {
                 e.preventDefault();
@@ -142,10 +182,11 @@ class CodeEditor {
             }
         } );
 
+        // Full editor
         area.root.classList.add('codebasearea');
-        this.gutter = document.createElement('div');
-        this.gutter.className = "lexcodegutter";
-        area.attach( this.gutter );
+
+        // Code area
+        this.tabs.area.root.classList.add( 'codetabsarea' );
 
         this.root = this.area.root;
         this.root.tabIndex = -1;
@@ -156,9 +197,9 @@ class CodeEditor {
 
         if( !this.disableEdition )
         {
-            this.root.addEventListener( 'keydown', this.processKey.bind(this), true);
-            this.root.addEventListener( 'focus', this.processFocus.bind(this, true) );
-            this.root.addEventListener( 'focusout', this.processFocus.bind(this, false) );
+            this.root.addEventListener( 'keydown', this.processKey.bind( this), true );
+            this.root.addEventListener( 'focus', this.processFocus.bind( this, true ) );
+            this.root.addEventListener( 'focusout', this.processFocus.bind( this, false ) );
         }
        
         this.root.addEventListener( 'mousedown', this.processMouse.bind(this) );
@@ -167,141 +208,134 @@ class CodeEditor {
         this.root.addEventListener( 'click', this.processMouse.bind(this) );
         this.root.addEventListener( 'contextmenu', this.processMouse.bind(this) );
 
-        // Take into account the scrollbar..
-        this.tabs.area.root.classList.add( 'codetabsarea' );
-
         // Cursors and selection
 
-        this.cursors = document.createElement('div');
+        this.cursors = document.createElement( 'div' );
         this.cursors.className = 'cursors';
-        this.tabs.area.attach(this.cursors);
+        this.tabs.area.attach( this.cursors );
 
-        this.selections = document.createElement('div');
+        this.selections = document.createElement( 'div' );
         this.selections.className = 'selections';
-        this.tabs.area.attach(this.selections);
+        this.tabs.area.attach( this.selections );
 
         // Css char synchronization
-        this.xPadding = "0.25em";
+        this.xPadding = "48px";
 
         // Add main cursor
         {
-            var cursor = document.createElement('div');
+            var cursor = document.createElement( 'div' );
             cursor.className = "cursor";
             cursor.innerHTML = "&nbsp;";
             cursor._left = 0;
             cursor.style.left = this.xPadding;
-            cursor._top = 4;
-            cursor.style.top = "4px";
+            cursor._top = 0;
+            cursor.style.top = cursor._top + "px";
             cursor.position = 0;
-            cursor.line = 0;
-            cursor.print = (function() { console.log( this.line, this.position ) }).bind(cursor);
-            this.cursors.appendChild(cursor);
+            cursor._line = 0;
+            cursor.print = (function() { console.log( this.line, this.position ) }).bind( cursor );
+
+            Object.defineProperty( cursor, 'line', {
+                get: (v) => { return this._line },
+                set: (v) => { this._line = v; }
+            } );
+
+            this.cursors.appendChild( cursor );
         }
 
-        // Add custom vertical scroll bar
+        // Scroll stuff
         {
-            var scrollbar = document.createElement('div');
-            scrollbar.className = "lexcodescrollbar";
-            this.scrollbar = scrollbar;
-            area.attach(this.scrollbar);
+            this.codeScroller = this.tabs.area.root;
+            this.firstLineInViewport = 0;
+            this.lineScrollMargin = new LX.vec2( 20, 20 ); // [ mUp, mDown ]
+            window.scroller = this.codeScroller;
 
-            var scrollbarThumb = document.createElement('div');
-            this.scrollbarThumb = scrollbarThumb;
-            this.scrollbarThumb._top = 0;
-            scrollbar.appendChild(scrollbarThumb);
+            let lastScrollTopValue = -1;
+            this.codeScroller.addEventListener( 'scroll', e => {
 
-            this.scrollbarThumb.addEventListener("mousedown", inner_mousedown);
-            
-            var last_pos = 0;
-            
-            function inner_mousedown(e)
-            {
-                var doc = that.root.ownerDocument;
-                doc.addEventListener("mousemove",inner_mousemove);
-                doc.addEventListener("mouseup",inner_mouseup);
-                last_pos = e.y;
-                e.stopPropagation();
-                e.preventDefault();
-            }
+                if( this._discardScroll )
+                {
+                    this._discardScroll = false;
+                    return;
+                }
 
-            function inner_mousemove(e)
-            {
-                var dt = (last_pos - e.y);
-                
-                that.applyVerticalScrollFromScrollBar( that.scrollbarThumb._top - dt )
+                this.setScrollBarValue( 'vertical' );
 
-                last_pos = e.y;
-                e.stopPropagation();
-                e.preventDefault();
-            }
+                const scrollTop = this.getScrollTop();
 
-            function inner_mouseup(e)
-            {
-                var doc = that.root.ownerDocument;
-                doc.removeEventListener("mousemove", inner_mousemove);
-                doc.removeEventListener("mouseup", inner_mouseup);
-            }
-        }
-
-        // Add custom horizontal scroll bar
-        {
-            var hScrollbar = document.createElement('div');
-            hScrollbar.className = "lexcodescrollbar horizontal";
-            this.hScrollbar = hScrollbar;
-            area.attach(this.hScrollbar);
+                // Scroll down...
+                if( scrollTop > lastScrollTopValue )
+                {
+                    if( this.visibleLinesViewport.y < (this.code.lines.length - 1) )
+                    {
+                        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 = parseInt( this.code.style.top );
+                    if( scrollTop < scrollUpBoundary )
+                        this.processLines( CodeEditor.UPDATE_VISIBLE_LINES );
+                }
 
-            var hScrollbarThumb = document.createElement('div');
-            this.hScrollbarThumb = hScrollbarThumb;
-            this.hScrollbarThumb._left = 0;
-            hScrollbar.appendChild(hScrollbarThumb);
+                lastScrollTopValue = scrollTop;
+            });
 
-            this.hScrollbarThumb.addEventListener("mousedown", inner_mousedown);
-            
-            var last_pos = 0;
-            
-            function inner_mousedown(e)
-            {
-                var doc = that.root.ownerDocument;
-                doc.addEventListener("mousemove",inner_mousemove);
-                doc.addEventListener("mouseup",inner_mouseup);
-                last_pos = e.x;
-                e.stopPropagation();
-                e.preventDefault();
-            }
+            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 );
+            });
+        }
 
-            function inner_mousemove(e)
-            {
-                var dt = (last_pos - e.x);
-                
-                that.applyHorizontalScrollFromScrollBar( that.hScrollbarThumb._left - dt )
+        // This is only the container, line numbers are in the same line div
+        {
+            this.gutter = document.createElement( 'div' );
+            this.gutter.className = "lexcodegutter";
+            area.attach( this.gutter );
+        }
 
-                last_pos = e.x;
-                e.stopPropagation();
-                e.preventDefault();
-            }
+        // Add custom vertical scroll bar
+        {
+            this.vScrollbar = new ScrollBar( this, ScrollBar.SCROLLBAR_VERTICAL );
+            area.attach( this.vScrollbar.root );
+        }
 
-            function inner_mouseup(e)
-            {
-                var doc = that.root.ownerDocument;
-                doc.removeEventListener("mousemove", inner_mousemove);
-                doc.removeEventListener("mouseup", inner_mouseup);
-            }
+        // Add custom horizontal scroll bar
+        {
+            this.hScrollbar = new ScrollBar( this, ScrollBar.SCROLLBAR_HORIZONTAL );
+            area.attach( this.hScrollbar.root );
         }
 
         // Add autocomplete box
         {
-            var box = document.createElement('div');
+            var box = document.createElement( 'div' );
             box.className = "autocomplete";
             this.autocomplete = box;
-            this.tabs.area.attach(box);
+            this.tabs.area.attach( box );
 
             this.isAutoCompleteActive = false;
         }
 
+        // Add code-sizer
+        {
+            this.codeSizer = document.createElement( 'div' );
+            this.codeSizer.className = "code-sizer";
+            
+            // Append all childs
+            while( this.codeScroller.firstChild )
+                this.codeSizer.appendChild( this.codeScroller.firstChild );
+
+            this.codeScroller.appendChild( this.codeSizer );
+        }
+
         // State
 
         this.state = {
-            overwrite: false,
             focused: false,
             selectingText: false
         }
@@ -335,7 +369,7 @@ class CodeEditor {
         };
 
         // Scan tokens..
-        setInterval( this.scanWordSuggestions.bind(this), 2000 );
+        // setInterval( this.scanWordSuggestions.bind( this ), 2000 );
 
         this.languages = {
             'Plain Text': { },
@@ -346,7 +380,8 @@ class CodeEditor {
             'WGSL': { },
             'JSON': { },
             'XML': { },
-            'Python': { },
+            'Python': { singleLineCommentToken: '#' },
+            'HTML': { },
             'Batch': { blockComments: false, singleLineCommentToken: '::' }
         };
 
@@ -370,7 +405,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',
@@ -387,13 +423,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'],
@@ -413,6 +450,7 @@ class CodeEditor {
             'CSS': ['{', '}', '(', ')', '*'],
             'Python': ['<', '>', '[', ']', '(', ')', '='],
             'Batch': ['[', ']', '(', ')', '%'],
+            'HTML': ['<', '>', '/']
         };
 
         // Convert reserved word arrays to maps so we can search tokens faster
@@ -426,64 +464,67 @@ class CodeEditor {
 
         // Action keys
 
-        this.action('Escape', false, ( ln, cursor, e ) => {
+        this.action( 'Escape', false, ( ln, cursor, e ) => {
             this.hideAutoCompleteBox();
         });
 
-        this.action('Backspace', false, ( ln, cursor, e ) => {
+        this.action( 'Backspace', false, ( ln, cursor, e ) => {
 
-            this._addUndoStep(cursor);
+            this._addUndoStep( cursor );
 
-            if(this.selection) {
-                this.deleteSelection(cursor);
+            if( this.selection ) {
+                this.deleteSelection( cursor );
                 // Remove entire line when selecting with triple click
-                if(this.code.lines[ln] && !this.code.lines[ln].length) 
-                    this.actions['Backspace'].callback(ln, cursor, e);
+                if(this.code.lines[ ln ] != undefined && !this.code.lines[ ln ].length) 
+                {
+                    this.actions['Backspace'].callback( ln, cursor, e );
+                    this.lineDown( cursor, true );
+                }
             }
             else {
                 var letter = this.getCharAtPos( cursor, -1 );
-                if(letter) {
-                    this.code.lines[ln] = sliceChar( this.code.lines[ln], cursor.position - 1 );
+                if( letter ) {
+                    this.code.lines[ ln ] = sliceChar( this.code.lines[ ln ], cursor.position - 1 );
                     this.cursorToLeft( letter );
-                    this.processLine(ln);
+                    this.processLine( ln );
                     if( this.useAutoComplete )
                         this.showAutoCompleteBox( 'foo', cursor );
                 } 
-                else if(this.code.lines[ln - 1] != undefined) {
+                else if( this.code.lines[ ln - 1 ] != undefined ) {
                     this.lineUp();
-                    this.actions['End'].callback(cursor.line, cursor, e);
+                    this.actions[ 'End' ].callback( cursor.line, cursor, e );
                     // Move line on top
-                    this.code.lines[ln - 1] += this.code.lines[ln];
-                    this.code.lines.splice(ln, 1);
-                    this.processLines(ln - 1);
+                    this.code.lines[ ln - 1 ] += this.code.lines[ ln ];
+                    this.code.lines.splice( ln, 1 );
+                    this.processLines();
                 }
             }
         });
 
-        this.action('Delete', false, ( ln, cursor, e ) => {
+        this.action( 'Delete', false, ( ln, cursor, e ) => {
 
             this._addUndoStep( cursor );
             
             if(this.selection) {
                 // Use 'Backspace' as it's the same callback...
-                this.actions['Backspace'].callback(ln, cursor, e);
+                this.actions['Backspace'].callback( ln, cursor, e );
             }
             else
             {
                 var letter = this.getCharAtPos( cursor );
-                if(letter) {
-                    this.code.lines[ln] = sliceChar( this.code.lines[ln], cursor.position );
-                    this.processLine(ln);
+                if( letter ) {
+                    this.code.lines[ ln ] = sliceChar( this.code.lines[ ln ], cursor.position );
+                    this.processLine( ln );
                 } 
-                else if(this.code.lines[ln + 1] != undefined) {
-                    this.code.lines[ln] += this.code.lines[ln + 1];
-                    this.code.lines.splice(ln + 1, 1);
-                    this.processLines(ln);
+                else if(this.code.lines[ ln + 1 ] != undefined) {
+                    this.code.lines[ ln ] += this.code.lines[ ln + 1 ];
+                    this.code.lines.splice( ln + 1, 1 );
+                    this.processLines();
                 }
             }
         });
 
-        this.action('Tab', true, ( ln, cursor, e ) => {
+        this.action( 'Tab', true, ( ln, cursor, e ) => {
             
             if( this.isAutoCompleteActive )
             {
@@ -494,53 +535,66 @@ class CodeEditor {
             }
         });
 
-        this.action('Home', false, ( ln, cursor, e ) => {
+        this.action( 'Home', false, ( ln, cursor, e ) => {
             
-            let idx = firstNonspaceIndex(this.code.lines[ln]);
+            let idx = firstNonspaceIndex( this.code.lines[ ln ] );
 
             // We already are in the first non space index...
             if(idx == cursor.position) idx = 0;
 
-            const prestring = this.code.lines[ln].substring(0, idx);
-            let last_pos = cursor.position;
+            const prestring = this.code.lines[ ln ].substring( 0, idx );
+            let lastX = cursor.position;
 
             this.resetCursorPos( CodeEditor.CURSOR_LEFT );
-            if(idx > 0) this.cursorToString(cursor, prestring);
-            this._refreshCodeInfo(cursor.line, cursor.position);
+            if(idx > 0) this.cursorToString( cursor, prestring );
+            this._refreshCodeInfo( cursor.line, cursor.position );
             this.setScrollLeft( 0 );
 
             if( e.shiftKey && !e.cancelShift )
             {
                 // Get last selection range
-                if(this.selection) 
-                last_pos += this.selection.chars;
+                if( this.selection ) 
+                lastX += this.selection.chars;
 
-                this.startSelection(cursor);
-                var string = this.code.lines[ln].substring(idx, last_pos);
-                this.selection.selectInline(idx, cursor.line, this.measureString(string));
+                if( !this.selection )
+                    this.startSelection( cursor );
+                var string = this.code.lines[ ln ].substring( idx, lastX );
+                if( this.selection.sameLine() )
+                    this.selection.selectInline( idx, cursor.line, this.measureString( string ) );
+                else
+                {
+                    this.processSelection();
+                }
             } else if( !e.keepSelection )
                 this.endSelection();
         });
 
-        this.action('End', false, ( ln, cursor, e ) => {
+        this.action( 'End', false, ( ln, cursor, e ) => {
             
             if( e.shiftKey || e._shiftKey ) {
                 
-                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));
+                var string = this.code.lines[ ln ].substring( cursor.position );
+                if( !this.selection )
+                    this.startSelection( cursor );
+                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] );
+            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 ) => {
+        this.action( 'Enter', true, ( ln, cursor, e ) => {
 
             // Add word
             if( this.isAutoCompleteActive )
@@ -549,63 +603,63 @@ class CodeEditor {
                 return;
             }
 
-            if(e.ctrlKey)
+            if( e.ctrlKey )
             {
                 this.onrun( this.getText() );
                 return;
             }
 
-            this._addUndoStep(cursor);
+            this._addUndoStep( cursor );
 
             var _c0 = this.getCharAtPos( cursor, -1 );
             var _c1 = this.getCharAtPos( cursor );
 
-            this.code.lines.splice(cursor.line + 1, 0, "");
-            this.code.lines[cursor.line + 1] = this.code.lines[ln].substr( cursor.position ); // new line (below)
-            this.code.lines[ln] = this.code.lines[ln].substr( 0, cursor.position ); // line above
-            this.lineDown(cursor, true);
+            this.code.lines.splice( cursor.line + 1, 0, "" );
+            this.code.lines[cursor.line + 1] = this.code.lines[ ln ].substr( cursor.position ); // new line (below)
+            this.code.lines[ ln ] = this.code.lines[ ln ].substr( 0, cursor.position ); // line above
+            this.lineDown( cursor, true );
 
             // Check indentation
-            var spaces = firstNonspaceIndex(this.code.lines[ln]);
+            var spaces = firstNonspaceIndex( this.code.lines[ ln ]);
             var tabs = Math.floor( spaces / this.tabSpaces );
 
             if( _c0 == '{' && _c1 == '}' ) {
-                this.code.lines.splice(cursor.line, 0, "");
-                this.addSpaceTabs(tabs + 1);
-                this.code.lines[cursor.line + 1] = " ".repeat(spaces) + this.code.lines[cursor.line + 1];
+                this.code.lines.splice( cursor.line, 0, "" );
+                this.addSpaceTabs( tabs + 1 );
+                this.code.lines[ cursor.line + 1 ] = " ".repeat(spaces) + this.code.lines[ cursor.line + 1 ];
             } else {
-                this.addSpaceTabs(tabs);
+                this.addSpaceTabs( tabs );
             }
 
-            this.processLines( ln );
+            this.processLines();
         });
 
-        this.action('ArrowUp', false, ( ln, cursor, e ) => {
+        this.action( 'ArrowUp', false, ( ln, cursor, e ) => {
 
             // Move cursor..
             if( !this.isAutoCompleteActive )
             {
                 if( e.shiftKey ) {
-                    if(!this.selection)
-                        this.startSelection(cursor);
+                    if( !this.selection )
+                        this.startSelection( cursor );
 
-                    this.selection.toY = (this.selection.toY > 0) ? (this.selection.toY - 1) : 0;
-                    this.cursorToLine(cursor, this.selection.toY);
+                    this.selection.toY = ( this.selection.toY > 0 ) ? ( this.selection.toY - 1 ) : 0;
+                    this.cursorToLine( cursor, this.selection.toY );
 
                     var letter = this.getCharAtPos( cursor );
-                    if(!letter) {
-                        this.selection.toX = this.code.lines[cursor.line].length;
-                        this.cursorToPosition(cursor, this.selection.toX);
+                    if( !letter ) {
+                        this.selection.toX = this.code.lines[ cursor.line ].length;
+                        this.cursorToPosition( cursor, this.selection.toX );
                     }
                     
-                    this.processSelection(null, true);
+                    this.processSelection( null, true );
 
                 } else {
                     this.endSelection();
                     this.lineUp();
                     // Go to end of line if out of line
                     var letter = this.getCharAtPos( cursor );
-                    if(!letter) this.actions['End'].callback(cursor.line, cursor, e);
+                    if( !letter ) this.actions['End'].callback( cursor.line, cursor, e );
                 }
             } 
             // Move up autocomplete selection
@@ -615,34 +669,34 @@ class CodeEditor {
             }
         });
 
-        this.action('ArrowDown', false, ( ln, cursor, e ) => {
+        this.action( 'ArrowDown', false, ( ln, cursor, e ) => {
 
             // Move cursor..
             if( !this.isAutoCompleteActive )
             {
                 if( e.shiftKey ) {
-                    if(!this.selection)
-                        this.startSelection(cursor);
+                    if( !this.selection )
+                        this.startSelection( cursor );
 
                     this.selection.toY = this.selection.toY < this.code.lines.length - 1 ? this.selection.toY + 1 : this.code.lines.length - 1;
-                    this.cursorToLine(cursor, this.selection.toY);
+                    this.cursorToLine( cursor, this.selection.toY );
                     
                     var letter = this.getCharAtPos( cursor );
-                    if(!letter) {
-                        this.selection.toX = Math.max(this.code.lines[cursor.line].length - 1, 0);
+                    if( !letter ) {
+                        this.selection.toX = Math.max(this.code.lines[ cursor.line ].length - 1, 0);
                         this.cursorToPosition(cursor, this.selection.toX);
                     }
 
-                    this.processSelection(null, true);
+                    this.processSelection( null, true );
                 } else {
     
                     if( this.code.lines[ ln + 1 ] == undefined ) 
                         return;
                     this.endSelection();
-                    this.lineDown();
+                    this.lineDown( cursor );
                     // Go to end of line if out of line
                     var letter = this.getCharAtPos( cursor );
-                    if(!letter) this.actions['End'].callback(cursor.line, cursor, e);
+                    if( !letter ) this.actions['End'].callback(cursor.line, cursor, e);
                 }
             } 
             // Move down autocomplete selection
@@ -652,40 +706,41 @@ class CodeEditor {
             }
         });
 
-        this.action('ArrowLeft', false, ( ln, cursor, e ) => {
+        this.action( 'ArrowLeft', false, ( ln, cursor, e ) => {
 
-            if(e.metaKey) { // Apple devices (Command)
+            if( e.metaKey ) { // Apple devices (Command)
                 e.preventDefault();
                 this.actions[ 'Home' ].callback( ln, cursor, e );
             }
-            else if(e.ctrlKey) {
+            else if( e.ctrlKey ) {
                 // Get next word
                 const [word, from, to] = this.getWordAtPos( cursor, -1 );
                 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();
             }
             else {
                 var letter = this.getCharAtPos( cursor, -1 );
-                if(letter) {
+                if( letter ) {
                     if( e.shiftKey ) {
-                        if(!this.selection) this.startSelection(cursor);
-                        if( ((cursor.position - 1) < this.selection.fromX) && this.selection.sameLine() )
+                        if( !this.selection ) this.startSelection( cursor );
+                        if( ( ( cursor.position - 1 ) < this.selection.fromX ) && this.selection.sameLine() )
                             this.selection.fromX--;
-                        else if( (cursor.position - 1) == this.selection.fromX && this.selection.sameLine() ) {
+                        else if( ( cursor.position - 1 ) == this.selection.fromX && this.selection.sameLine() ) {
                             this.cursorToLeft( letter, cursor );
                             this.endSelection();
                             return;
                         }
                         else this.selection.toX--;
                         this.cursorToLeft( letter, cursor );
-                        this.processSelection(null, true);
+                        this.processSelection( null, true );
                     }
                     else {
-                        if(!this.selection) {
+                        if( !this.selection ) {
                             this.cursorToLeft( letter, cursor );
                             if( this.useAutoComplete && this.isAutoCompleteActive )
                                 this.showAutoCompleteBox( 'foo', cursor );
@@ -693,8 +748,8 @@ class CodeEditor {
                         else {
                             this.selection.invertIfNecessary();
                             this.resetCursorPos( CodeEditor.CURSOR_LEFT | CodeEditor.CURSOR_TOP );
-                            this.cursorToLine(cursor, this.selection.fromY, true);
-                            this.cursorToPosition(cursor, this.selection.fromX);
+                            this.cursorToLine( cursor, this.selection.fromY, true );
+                            this.cursorToPosition( cursor, this.selection.fromX );
                             this.endSelection();
                         }
                     }
@@ -702,7 +757,7 @@ class CodeEditor {
                 else if( cursor.line > 0 ) {
                     
                     if( e.shiftKey ) {
-                        if(!this.selection) this.startSelection(cursor);
+                        if( !this.selection ) this.startSelection( cursor );
                     }
                         
                     this.lineUp( cursor );
@@ -711,34 +766,35 @@ class CodeEditor {
                     if( e.shiftKey ) {
                         this.selection.toX = cursor.position;
                         this.selection.toY--;
-                        this.processSelection(null, true);
+                        this.processSelection( null, true );
                     }
                 }
             }
         });
 
-        this.action('ArrowRight', false, ( ln, cursor, e ) => {
+        this.action( 'ArrowRight', false, ( ln, cursor, e ) => {
 
-            if(e.metaKey) { // Apple devices (Command)
+            if( e.metaKey ) { // Apple devices (Command)
                 e.preventDefault();
                 this.actions[ 'End' ].callback( ln, cursor );
-            } else if(e.ctrlKey) {
+            } else if( e.ctrlKey ) {
                 // Get next word
-                const [word, from, to] = this.getWordAtPos( cursor );
+                const [ word, from, to ] = this.getWordAtPos( cursor );
                 var diff = cursor.position - from;
-                var substr = word.substr(diff);
+                var substr = word.substr( diff );
                 // Selections...
-                if( e.shiftKey ) if(!this.selection) this.startSelection(cursor);
-                this.cursorToString(cursor, substr);
+                if( e.shiftKey ) { if( !this.selection ) this.startSelection( cursor ); }
+                else this.endSelection();
+                this.cursorToString( cursor, substr);
                 if( e.shiftKey ) this.processSelection();
             } else {
                 var letter = this.getCharAtPos( cursor );
-                if(letter) {
+                if( letter ) {
                     if( e.shiftKey ) {
-                        if(!this.selection) this.startSelection(cursor);
+                        if( !this.selection ) this.startSelection( cursor );
                         var keep_range = false;
                         if( cursor.position == this.selection.fromX ) {
-                            if( (cursor.position + 1) == this.selection.toX && this.selection.sameLine() ) {
+                            if( ( cursor.position + 1 ) == this.selection.toX && this.selection.sameLine() ) {
                                 this.cursorToRight( letter, cursor );
                                 this.endSelection();
                                 return;
@@ -748,9 +804,9 @@ class CodeEditor {
                             } else this.selection.toX++;
                         }
                         this.cursorToRight( letter, cursor );
-                        this.processSelection(null, keep_range);
+                        this.processSelection( null, keep_range );
                     }else{
-                        if(!this.selection) {
+                        if( !this.selection ) {
                             this.cursorToRight( letter, cursor );
                             if( this.useAutoComplete && this.isAutoCompleteActive )
                                 this.showAutoCompleteBox( 'foo', cursor );
@@ -759,8 +815,8 @@ class CodeEditor {
                         {
                             this.selection.invertIfNecessary();
                             this.resetCursorPos( CodeEditor.CURSOR_LEFT | CodeEditor.CURSOR_TOP );
-                            this.cursorToLine(cursor, this.selection.toY);
-                            this.cursorToPosition(cursor, this.selection.toX);
+                            this.cursorToLine( cursor, this.selection.toY );
+                            this.cursorToPosition( cursor, this.selection.toX );
                             this.endSelection();
                         }
                     }
@@ -768,18 +824,18 @@ class CodeEditor {
                 else if( this.code.lines[ cursor.line + 1 ] !== undefined ) {
                     
                     if( e.shiftKey ) {
-                        if(!this.selection) this.startSelection(cursor);
+                        if( !this.selection ) this.startSelection( cursor );
                         e.cancelShift = true;
                         e.keepSelection = true;
                     }
 
                     this.lineDown( cursor );
-                    this.actions['Home'].callback(cursor.line, cursor, e);
+                    this.actions['Home'].callback( cursor.line, cursor, e );
                     
                     if( e.shiftKey ) {
                         this.selection.toX = cursor.position;
                         this.selection.toY++;
-                        this.processSelection(null, true);
+                        this.processSelection( null, true );
                     }
 
                     this.hideAutoCompleteBox();
@@ -813,14 +869,14 @@ class CodeEditor {
     // This can be used to empty all text...
     setText( text = "", lang ) {
 
-        let new_lines = text.split('\n');
-        this.code.lines = [].concat(new_lines);
+        let new_lines = text.split( '\n' );
+        this.code.lines = [].concat( new_lines );
 
-        let cursor = this.cursors.children[0];
+        let cursor = this.cursors.children[ 0 ];
         let lastLine = new_lines.pop();
 
-        this.cursorToLine(cursor, new_lines.length); // Already substracted 1
-        this.cursorToPosition(cursor, lastLine.length);
+        this.cursorToLine( cursor, new_lines.length ); // Already substracted 1
+        this.cursorToPosition( cursor, lastLine.length );
         this.processLines();
 
         if( lang )
@@ -831,64 +887,64 @@ class CodeEditor {
 
     appendText( text ) {
 
-        let cursor = this.cursors.children[0];
+        let cursor = this.cursors.children[ 0 ];
         let lidx = cursor.line;
 
         if( this.selection ) {
-            this.deleteSelection(cursor);
+            this.deleteSelection( cursor );
             lidx = cursor.line;
         }
 
         this.endSelection();
 
-        const new_lines = text.split('\n');
+        const new_lines = text.split( '\n' );
 
         // Pasting Multiline...
-        if(new_lines.length != 1)
+        if( new_lines.length != 1 )
         {
             let num_lines = new_lines.length;
-            console.assert(num_lines > 0);
+            console.assert( num_lines > 0 );
             const first_line = new_lines.shift();
             num_lines--;
 
-            const remaining = this.code.lines[lidx].slice(cursor.position);
+            const remaining = this.code.lines[ lidx ].slice( cursor.position );
 
             // Add first line
-            this.code.lines[lidx] = [
-                this.code.lines[lidx].slice(0, cursor.position), 
+            this.code.lines[ lidx ] = [
+                this.code.lines[ lidx ].slice( 0, cursor.position ), 
                 first_line
             ].join('');
 
-            this.cursorToPosition(cursor, (cursor.position + first_line.length));
+            this.cursorToPosition( cursor, ( cursor.position + first_line.length ) );
 
             // Enter next lines...
 
             let _text = null;
 
             for( var i = 0; i < new_lines.length; ++i ) {
-                _text = new_lines[i];
-                this.cursorToLine(cursor, cursor.line++, true);
+                _text = new_lines[ i ];
+                this.cursorToLine( cursor, cursor.line++, true );
                 // Add remaining...
                 if( i == (new_lines.length - 1) )
                     _text += remaining;
-                this.code.lines.splice( 1 + lidx + i, 0, _text);
+                this.code.lines.splice( 1 + lidx + i, 0, _text );
             }
 
-            if(_text) this.cursorToPosition(cursor, _text.length);
-            this.cursorToLine(cursor, cursor.line + num_lines);
-            this.processLines(lidx);
+            if( _text ) this.cursorToPosition( cursor, _text.length );
+            this.cursorToLine( cursor, cursor.line + num_lines );
+            this.processLines();
         }
         // Pasting one line...
         else
         {
-            this.code.lines[lidx] = [
-                this.code.lines[lidx].slice(0, cursor.position), 
-                new_lines[0], 
-                this.code.lines[lidx].slice(cursor.position)
+            this.code.lines[ lidx ] = [
+                this.code.lines[ lidx ].slice( 0, cursor.position ), 
+                new_lines[ 0 ], 
+                this.code.lines[ lidx ].slice( cursor.position )
             ].join('');
 
-            this.cursorToPosition(cursor, (cursor.position + new_lines[0].length));
-            this.processLine(lidx);
+            this.cursorToPosition( cursor, ( cursor.position + new_lines[ 0 ].length ) );
+            this.processLine( lidx );
         }
     }
 
@@ -898,18 +954,18 @@ class CodeEditor {
             const existing = this.addTab(name, true, title);
             if( !existing )
             {
-                text = text.replaceAll('\r', '');
-                this.code.lines = text.split('\n');
-                this._changeLanguageFromExtension( LX.getExtension(name) );
+                text = text.replaceAll( '\r', '' );
+                this.code.lines = text.split( '\n' );
+                this._changeLanguageFromExtension( LX.getExtension( name ) );
             }
         };
 
-        if(file.constructor == String)
+        if( file.constructor == String )
         {
             let filename = file;
             LX.request({ url: filename, success: text => {
 
-                const name = filename.substring(filename.lastIndexOf('/') + 1);
+                const name = filename.substring(filename.lastIndexOf( '/' ) + 1);
                 inner_add_tab( text, name, filename );
             } });
         }
@@ -926,18 +982,34 @@ class CodeEditor {
 
     _addUndoStep( cursor )  {
 
-        var cursor = cursor ?? this.cursors.children[0];
+        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
+            lines: LX.deepCopy( this.code.lines ),
+            cursor: this.saveCursor( cursor ),
+            line: cursor.line,
+            position: cursor.position
         } );
     }
 
     _changeLanguage( lang ) {
 
-        this.code.lang = lang;
+        this.code.language = lang;
         this.highlight = lang;
         this._refreshCodeInfo();
         this.processLines();
@@ -946,23 +1018,24 @@ class CodeEditor {
     _changeLanguageFromExtension( ext ) {
         
         if( !ext )
-        return this._changeLanguage( this.code.lang );
-
-        switch(ext.toLowerCase())
-        {
-            case 'js': return this._changeLanguage('JavaScript');
-            case 'cpp': return this._changeLanguage('C++');
-            case 'h': return this._changeLanguage('C++');
-            case 'glsl': return this._changeLanguage('GLSL');
-            case 'css': return this._changeLanguage('CSS');
-            case 'json': return this._changeLanguage('JSON');
-            case 'xml': return this._changeLanguage('XML');
-            case 'wgsl': return this._changeLanguage('WGSL');
-            case 'py': return this._changeLanguage('Python');
-            case 'bat': return this._changeLanguage('Batch');
+        return this._changeLanguage( this.code.language );
+
+        switch( ext.toLowerCase() )
+        {
+            case 'js': return this._changeLanguage( 'JavaScript' );
+            case 'cpp': return this._changeLanguage( 'C++' );
+            case 'h': return this._changeLanguage( 'C++' );
+            case 'glsl': return this._changeLanguage( 'GLSL' );
+            case 'css': return this._changeLanguage( 'CSS' );
+            case 'json': return this._changeLanguage( 'JSON' );
+            case 'xml': return this._changeLanguage( 'XML' );
+            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');
+                this._changeLanguage( 'Plain Text' );
         }
     }
 
@@ -974,15 +1047,15 @@ class CodeEditor {
             panel.ln = 0;
             panel.col = 0;
 
-            this._refreshCodeInfo = (ln = panel.ln, col = panel.col) => {
+            this._refreshCodeInfo = ( ln = panel.ln, col = panel.col ) => {
                 panel.ln = ln + 1;
                 panel.col = col + 1;
                 panel.clear();
                 panel.sameLine();
-                panel.addLabel(this.code.title, { float: 'right' });
-                panel.addLabel("Ln " + panel.ln, { width: "64px" });
-                panel.addLabel("Col " + panel.col, { width: "64px" });
-                panel.addButton("<b>{ }</b>", this.highlight, (value, event) => {
+                panel.addLabel( this.code.title, { float: 'right' });
+                panel.addLabel( "Ln " + panel.ln, { width: "64px" });
+                panel.addLabel( "Col " + panel.col, { width: "64px" });
+                panel.addButton( "<b>{ }</b>", this.highlight, ( value, event ) => {
                     LX.addContextMenu( "Language", event, m => {
                         for( const lang of Object.keys(this.languages) )
                             m.add( lang, this._changeLanguage.bind(this) );
@@ -1003,8 +1076,8 @@ class CodeEditor {
 
                 // Change css a little bit...
                 this.gutter.style.height = "calc(100% - 38px)";
-                this.root.querySelectorAll('.code').forEach( e => e.style.height = "calc(100% - 6px)" );
-                this.root.querySelector('.lexareatabscontent').style.height = "calc(100% - 23px)";
+                this.root.querySelectorAll( '.code' ).forEach( e => e.style.height = "calc(100% - 6px)" );
+                this.root.querySelector( '.lexareatabscontent' ).style.height = "calc(100% - 23px)";
 
             }, 100);
         }
@@ -1015,102 +1088,98 @@ class CodeEditor {
         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( "Create", this.addTab.bind( this, "unnamed.js", true ) );
+            m.add( "Load", this.loadTab.bind( this, "unnamed.js", true ) );
         });
     }
 
-    addTab(name, selected, title) {
+    addTab( name, selected, title ) {
         
-        if(this.openedTabs[name])
+        if(this.openedTabs[ name ])
         {
             this.tabs.select( this.code.tabName );
             return true;
         }
 
         // Create code content
-        let code = document.createElement('div');
+        let code = document.createElement( 'div' );
         code.className = 'code';
-        code.lines = [""];
-        code.lang = "Plain Text";
+        code.lines = [ "" ];
+        code.language = "Plain Text";
         code.cursorState = {};
         code.undoSteps = [];
         code.tabName = name;
         code.title = title ?? name;
         code.tokens = {};
-        code.customScroll = new LX.vec2;
+        code.style.left = "0px";
+        code.style.top = "0px";
 
-        code.addEventListener('dragenter', function(e) {
+        code.addEventListener( 'dragenter', function(e) {
             e.preventDefault();
-            this.parentElement.classList.add('dragging');
+            this.parentElement.classList.add( 'dragging' );
         });
-        code.addEventListener('dragleave', function(e) {
+        code.addEventListener( 'dragleave', function(e) {
             e.preventDefault();
-            this.parentElement.remove('dragging');
+            this.parentElement.remove( 'dragging' );
         });
-        code.addEventListener('drop', (e) => {
+        code.addEventListener( 'drop', e => {
             e.preventDefault();
-            code.parentElement.classList.remove('dragging');
+            code.parentElement.classList.remove( 'dragging' );
             for( let i = 0; i < e.dataTransfer.files.length; ++i )
-                this.loadFile( e.dataTransfer.files[i] );
+                this.loadFile( e.dataTransfer.files[ i ] );
         });
-        code.addEventListener('wheel', (e) => {
 
-            // Get scroll data
+        this.openedTabs[ name ] = code;
 
-            const dX = (e.deltaY > 0.0 ? 1.0 : -1.0) * 20.0 * ( e.shiftKey ? 1.0 : 0.0 );
-            const dY = (e.deltaY > 0.0 ? 1.0 : -1.0) * 40.0 * ( e.shiftKey ? 0.0 : 1.0 );
-
-            var new_scroll = code.customScroll.add( new LX.vec2( dX, dY ), new LX.vec2() );
-            
-            // Update state
-            
-            if( new_scroll.x != this.getScrollLeft()) this.setScrollLeft( new_scroll.x );
-            if( new_scroll.y != this.getScrollTop()) this.setScrollTop( new_scroll.y );
-        });
+        const ext = LX.getExtension( name );
 
-        this.openedTabs[name] = code;
+        this.tabs.add(name, code, { 
+            selected: selected, 
+            fixed: (name === '+') , 
+            title: code.title, 
+            icon:   ext == 'html' ? "fa-solid fa-code orange" : 
+                    ext == 'js' ? "images/js.png" :
+                    ext == 'py' ? "images/py.png" : undefined, 
+            onSelect: (e, tabname) => {
 
-        this.tabs.add(name, code, { 'selected': selected, 'fixed': (name === '+') , 'title': code.title, 'onSelect': (e, tabname) => {
+                if(tabname == '+')
+                {
+                    this._onNewTab( e );
+                    return;
+                }
 
-            if(tabname == '+')
-            {
-                this._onNewTab( e );
-                return;
+                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 );
             }
+        });
 
-            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);
-
-            // Restore scroll
-            this.gutter.scrollLeft = this.getScrollLeft();
-            this.gutter.scrollTop = this.getScrollTop();
-        }});
+        // Move into the sizer..
+        this.codeSizer.appendChild( code );
         
         this.endSelection();
 
         if( selected )
         {
             this.code = code;  
-            this.resetCursorPos(CodeEditor.CURSOR_LEFT | CodeEditor.CURSOR_TOP);
+            this.resetCursorPos( CodeEditor.CURSOR_LEFT | CodeEditor.CURSOR_TOP );
             this.processLines();
-            doAsync( () => this._refreshCodeInfo(0, 0), 50 );
+            doAsync( () => this._refreshCodeInfo( 0, 0 ), 50 );
         }
     }
 
     loadTab() {
-        const input = document.createElement('input');
+        const input = document.createElement( 'input' );
         input.type = 'file';
-        document.body.appendChild(input);
+        document.body.appendChild( input );
         input.click();
-        input.addEventListener('change', (e) => {
-            if (e.target.files[0]) {
-                this.loadFile( e.target.files[0] );
+        input.addEventListener('change', e => {
+            if (e.target.files[ 0 ]) {
+                this.loadFile( e.target.files[ 0 ] );
             }
             input.remove();
         });
@@ -1131,7 +1200,7 @@ class CodeEditor {
         if( !e.target.classList.contains('code') ) return;
         if( !this.code ) return;
 
-        var cursor = this.cursors.children[0];
+        var cursor = this.cursors.children[ 0 ];
         var code_rect = this.code.getBoundingClientRect();
         var mouse_pos = [(e.clientX - code_rect.x), (e.clientY - code_rect.y)];
 
@@ -1139,7 +1208,7 @@ class CodeEditor {
         if( e.type != 'contextmenu' )
         {
             var ln = (mouse_pos[1] / this.lineHeight)|0;
-            if(this.code.lines[ln] == undefined) return;
+            if(this.code.lines[ ln ] == undefined) return;
         }
 
         if( e.type == 'mousedown' )
@@ -1193,7 +1262,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
@@ -1220,8 +1289,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();
                     } );
                 }
@@ -1231,36 +1300,35 @@ class CodeEditor {
         }
     }
 
-    processClick(e, skip_refresh = false) {
+    processClick( e, skip_refresh = false ) {
 
-        var code_rect = this.code.getBoundingClientRect();
-        var position = [(e.clientX - code_rect.x), (e.clientY - code_rect.y)];
-        var ln = (position[1] / this.lineHeight)|0;
+        var cursor = this.cursors.children[ 0 ];
+        var code_rect = this.codeScroller.getBoundingClientRect();
+        var position = [( e.clientX - code_rect.x ) + this.getScrollLeft(), (e.clientY - code_rect.y) + this.getScrollTop()];
+        var ln = (position[ 1 ] / this.lineHeight)|0;
 
-        if(this.code.lines[ln] == undefined) return;
+        if( this.code.lines[ ln ] == undefined )
+            return;
         
-        var cursor = this.cursors.children[0];
-        cursor.line = ln;
-
-        this.cursorToLine(cursor, ln, true);
+        this.cursorToLine( cursor, ln, true );
         
-        var ch = (position[0] / this.charWidth)|0;
-        var string = this.code.lines[ln].slice(0, ch);
-        this.cursorToPosition(cursor, string.length);
+        var ch = ( ( position[ 0 ] - parseInt( this.xPadding ) + 3) / this.charWidth )|0;
+        var string = this.code.lines[ ln ].slice( 0, ch );
+        this.cursorToPosition( cursor, string.length );
 
         this.hideAutoCompleteBox();
         
-        if(!skip_refresh) 
+        if( !skip_refresh ) 
             this._refreshCodeInfo( ln, cursor.position );
     }
 
     processSelection( e, keep_range ) {
 
-        var cursor = this.cursors.children[0];
+        var cursor = this.cursors.children[ 0 ];
 
-        if(e) this.processClick(e, true);
+        if( e ) this.processClick( e, true );
         if( !this.selection )
-            this.startSelection(cursor);
+            this.startSelection( cursor );
 
         // Update selection
         if(!keep_range)
@@ -1280,20 +1348,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
@@ -1302,68 +1375,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);
-                    const pixels = ((reverse && deltaY == 0 ? toX : fromX) * this.charWidth) - this.getScrollLeft();
-                    domEl.style.left = "calc(" + pixels + "px + " + this.xPadding + ")";
+                    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;
+                    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...
-                    const pixels = -this.getScrollLeft();
-                    domEl.style.left = "calc(" + pixels + "px + " + 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 = 4 + i * this.lineHeight;
-                domEl.style.top = (domEl._top - this.getScrollTop()) + "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) - this.getScrollLeft();
-                    domEl.style.left = "calc(" + pixels + "px + " + this.xPadding + ")";
+                    string = this.code.lines[ i ].substr(toX);
+                    const pixels = toX * this.charWidth;
+                    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 = "calc(" + (-this.getScrollLeft()) + "px + " + this.xPadding + ")";
+                    string = (i == fromY) ? this.code.lines[ i ].substring(0, fromX) : 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 = 4 + i * this.lineHeight;
-                domEl.style.top = (domEl._top - this.getScrollTop()) + "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;
@@ -1373,12 +1458,12 @@ 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];
+        let cursor = this.cursors.children[ 0 ];
         let lidx = cursor.line;
-        this.code.lines[lidx] = this.code.lines[lidx] ?? "";
+        this.code.lines[ lidx ] = this.code.lines[ lidx ] ?? "";
 
         // Check combinations
 
@@ -1388,22 +1473,22 @@ class CodeEditor {
             case 'a': // select all
                 e.preventDefault();
                 this.resetCursorPos( CodeEditor.CURSOR_LEFT | CodeEditor.CURSOR_TOP );
-                this.startSelection(cursor);
+                this.startSelection( cursor );
                 const nlines = this.code.lines.length - 1;
-                this.selection.toX = this.code.lines[nlines].length;
+                this.selection.toX = this.code.lines[ nlines ].length;
                 this.selection.toY = nlines;
-                this.processSelection(null, true);
-                this.cursorToPosition(cursor, this.selection.toX);
-                this.cursorToLine(cursor, this.selection.toY);
+                this.processSelection( null, true );
+                this.cursorToPosition( cursor, this.selection.toX );
+                this.cursorToLine( cursor, this.selection.toY );
                 break;
             case 'c': // copy
                 this._copyContent();
                 return;
             case 'd': // duplicate line
                 e.preventDefault();
-                this.code.lines.splice(lidx, 0, this.code.lines[lidx]);
+                this.code.lines.splice( lidx, 0, this.code.lines[ lidx ] );
                 this.lineDown( cursor );
-                this.processLines(lidx);
+                this.processLines();
                 return;
             case 's': // save
                 e.preventDefault();
@@ -1420,12 +1505,9 @@ 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;
-
-                
             }
         }
 
@@ -1469,23 +1551,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 (), {}, "", '', ...
@@ -1493,7 +1561,7 @@ class CodeEditor {
         const enclosableKeys = ["\"", "'", "(", "{"];
         if( enclosableKeys.indexOf( key ) > -1 )
         {
-            if( this.encloseSelectedWordWithKey(key, lidx, cursor) ) 
+            if( this._encloseSelectedWordWithKey(key, lidx, cursor) ) 
                 return;
         }
 
@@ -1509,14 +1577,14 @@ class CodeEditor {
         // Append key
 
         const isPairKey = (Object.values( this.pairKeys ).indexOf( key ) > -1) && !this.wasKeyPaired;
-        const sameKeyNext = isPairKey && (this.code.lines[lidx][cursor.position] === key);
+        const sameKeyNext = isPairKey && (this.code.lines[ lidx ][cursor.position] === key);
 
         if( !sameKeyNext )
         {
-            this.code.lines[lidx] = [
-                this.code.lines[lidx].slice(0, cursor.position), 
+            this.code.lines[ lidx ] = [
+                this.code.lines[ lidx ].slice(0, cursor.position), 
                 key, 
-                this.code.lines[lidx].slice(cursor.position)
+                this.code.lines[ lidx ].slice(cursor.position)
             ].join('');
         }
 
@@ -1543,6 +1611,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 )
@@ -1556,13 +1632,17 @@ class CodeEditor {
 
     async _copyContent() {
 
-        let cursor = this.cursors.children[0];
+        let cursor = this.cursors.children[ 0 ];
         let text_to_copy = "";
 
         if( !this.selection ) {
-            text_to_copy = "\n" + this.code.lines[cursor.line];
+            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);
 
@@ -1570,7 +1650,7 @@ class CodeEditor {
             let index = 0;
             
             for(let i = 0; i <= this.selection.fromY; i++)
-                index += (i == this.selection.fromY ? this.selection.fromX : this.code.lines[i].length);
+                index += (i == this.selection.fromY ? this.selection.fromX : this.code.lines[ i ].length);
 
             index += this.selection.fromY * separator.length; 
             const num_chars = this.selection.chars + (this.selection.toY - this.selection.fromY) * separator.length;
@@ -1579,22 +1659,26 @@ 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() {
 
-        let cursor = this.cursors.children[0];
+        let cursor = this.cursors.children[ 0 ];
         let lidx = cursor.line;
         let text_to_cut = "";
 
         if( !this.selection ) {
-            text_to_cut = "\n" + this.code.lines[cursor.line];
-            this.code.lines.splice(lidx, 1);
-            this.processLines(lidx);
+            text_to_cut = "\n" + this.code.lines[ cursor.line ];
+            this.code.lines.splice( lidx, 1 );
+            this.processLines();
             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);
 
@@ -1602,7 +1686,7 @@ class CodeEditor {
             let index = 0;
             
             for(let i = 0; i <= this.selection.fromY; i++)
-                index += (i == this.selection.fromY ? this.selection.fromX : this.code.lines[i].length);
+                index += (i == this.selection.fromY ? this.selection.fromX : this.code.lines[ i ].length);
 
             index += this.selection.fromY * separator.length; 
             const num_chars = this.selection.chars + (this.selection.toY - this.selection.fromY) * separator.length;
@@ -1613,7 +1697,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 ) {
@@ -1631,70 +1715,112 @@ class CodeEditor {
         for( let i = 0; i < this.code.lines.length; ++i )
         {
             const linestring = this.code.lines[ i ];
-            const tokens = this._getTokensFromString( linestring, true );
+            const tokens = this._getTokensFromLine( linestring, true );
             tokens.forEach( t => this.code.tokens[ t ] = 1 );
         }
     }
 
-    processLines( from__legacy ) {
+    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() {
+
+        return Math.max(...this.code.lines.map( v => v.length ));
+    }
 
+    processLines( mode ) {
+        
         const start = performance.now();
 
         var gutter_html = "";
         var code_html = "";
-
-        this.resizeScrollBars();
-
+        
+        // Reset all lines content
         this.code.innerHTML = "";
-        this.gutter.innerHTML = "";
-
+        
         // Get info about lines in viewport
-        const margin = 20;
-        const firstLineInViewport = (this.getScrollTop() / this.lineHeight)|0;
-        const totalLinesInViewport = ((this.code.parentElement.offsetHeight - 36) / this.lineHeight)|0;
-        const viewportRange = new LX.vec2( 
-            Math.max( firstLineInViewport - margin, 0 ), 
-            Math.min( firstLineInViewport + totalLinesInViewport + margin, this.code.lines.length )
+        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.visibleLinesViewport = new LX.vec2( 
+            Math.max( this.firstLineInViewport - this.lineScrollMargin.x, 0 ), 
+            Math.min( this.firstLineInViewport + totalLinesInViewport + this.lineScrollMargin.y, this.code.lines.length )
         );
 
-        for( let i = viewportRange.x; i < viewportRange.y; ++i )
+        // Add remaining lines if we are near the end of the scroll
+        {
+            const diff = Math.max( this.code.lines.length - this.visibleLinesViewport.y, 0 );
+            if( diff <= this.lineScrollMargin.y )
+                this.visibleLinesViewport.y += diff;
+        }
+        
+        // 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 );
         }
-
-        this.code.innerHTML = code_html;
-        this.gutter.innerHTML = gutter_html;
         
-        console.log( "Num lines processed: " + (viewportRange.y - viewportRange.x), performance.now() - start );
+        this.code.innerHTML = code_html;
+            
+        // 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";
+
+        // Update selections
+        if( this.selection )
+            this.processSelection( null, true );
+
+        // Clear tmp vars
+        delete this._buildingString; 
+        delete this._pendingString;
+
+        this.resize();
     }
 
     processLine( linenum, force ) {
 
-        delete this._buildingString; // multi-line strings not supported by now
+        const local_line_num =  this.toLocalLine( linenum );
+        const gutter_line = "<span class='line-gutter'>" + (linenum + 1) + "</span>";
+
+        const UPDATE_LINE = ( html ) => {
+            if( !force ) // Single line update
+                this.code.childNodes[ local_line_num ].innerHTML = gutter_line + html;
+            else // Update all lines at once
+                return "<pre>" + ( gutter_line + html ) + "</pre>";
+        }
+
+        // multi-line strings not supported by now
+        delete this._buildingString; 
+        delete this._pendingString;
         
-        // It's allowed to process only 1 line to optimize
         let linestring = this.code.lines[ linenum ];
 
+        // Single line
         if( !force )
         {
-            var pre = document.createElement('pre');
+            deleteElement( this.code.childNodes[ local_line_num ] );
+            this.code.insertChildAtIndex( document.createElement( 'pre' ), local_line_num );
+        }
 
-            // Single code line
-            deleteElement( this.code.childNodes[ linenum ] );
-            this.code.insertChildAtIndex( pre, linenum );
-            
-            // Gutter
-            deleteElement( this.gutter.childNodes[ linenum ] );
-            var linenumspan = document.createElement('span');
-            linenumspan.innerHTML = (linenum + 1);
-            this.gutter.insertChildAtIndex( linenumspan, linenum );
+        // Early out check for no highlighting languages
+        if( this.highlight == 'Plain Text' )
+        {
+            return UPDATE_LINE( linestring );
         }
 
-        const tokensToEvaluate = this._getTokensFromString( linestring );
+        const tokensToEvaluate = this._getTokensFromLine( linestring );
 
         if( !tokensToEvaluate.length )
-        return "<pre></pre>";
+        return "<pre><span class='line-gutter'>" + linenum + "</span></pre>";
 
         var line_inner_html = "";
 
@@ -1702,58 +1828,49 @@ class CodeEditor {
         for( var i = 0; i < tokensToEvaluate.length; ++i )
         {
             let it = i - 1;
-            let prev = tokensToEvaluate[it];
+            let prev = tokensToEvaluate[ it ];
             while( prev == ' ' ) {
                 it--;
-                prev = tokensToEvaluate[it];
+                prev = tokensToEvaluate[ it ];
             }
             
             it = i + 1;
-            let next = tokensToEvaluate[it];
+            let next = tokensToEvaluate[ it ];
             while( next == ' ' || next == '"' ) {
                 it++;
-                next = tokensToEvaluate[it];
+                next = tokensToEvaluate[ it ];
             }
             
-            const token = tokensToEvaluate[i];
+            const token = tokensToEvaluate[ i ];
 
             if( this.languages[ this.highlight ].blockComments ?? true )
             {
-                if( token.substr(0, 2) == '/*' )
+                if( token.substr( 0, 2 ) == '/*' )
                     this._buildingBlockComment = true;
-                if( token.substr(token.length - 2) == '*/' )
+                if( token.substr( token.length - 2 ) == '*/' )
                     delete this._buildingBlockComment;
             }
 
-            line_inner_html += this.evaluateToken(token, prev, next);
+            line_inner_html += this._evaluateToken( token, prev, next, (i == tokensToEvaluate.length - 1) );
         }
 
-        // Single line update
-        if( !force )
-        {
-            this.code.childNodes[ linenum ].innerHTML = line_inner_html;
-        }
-        // Update all lines at once
-        else
-        {
-            return "<pre>" + line_inner_html + "</pre>";
-        }
+        return UPDATE_LINE( line_inner_html );
     }
 
     _processTokens( tokens, offset = 0 ) {
 
         if( this.highlight == 'C++' )
         {
-            var idx = tokens.slice(offset).findIndex( (value, index) => this.isNumber(value) );
+            var idx = tokens.slice( offset ).findIndex( ( value, index ) => this.isNumber( value ) );
             if( idx > -1 )
             {
                 idx += offset; // Add offset to compute within the whole array of tokens
-                let data = tokens[idx] + tokens[++idx];
+                let data = tokens[ idx ] + tokens[ ++idx ];
                 while( this.isNumber( data ) )
                 {
                     tokens[ idx - 1 ] += tokens[ idx ];
                     tokens.splice( idx, 1 );
-                    data += tokens[idx];
+                    data += tokens[ idx ];
                 }
                 // Scan for numbers again
                 return this._processTokens( tokens, idx );
@@ -1763,16 +1880,43 @@ class CodeEditor {
         return tokens;
     }
 
-    _getTokensFromString( linestring, skipNonWords ) {
+    _lineHasComment( linestring ) {
 
-        // Check if line comment
         const singleLineCommentToken = this.languages[ this.highlight ].singleLineCommentToken ?? this.defaultSingleLineCommentToken;
-        const usesBlockComments = this.languages[ this.highlight ].blockComments ?? true;
-        const has_comment = linestring.split(singleLineCommentToken);
-        linestring = ( has_comment.length > 1 ) ? has_comment[0] : linestring;
+        const idx = linestring.indexOf( singleLineCommentToken );
+
+        if( idx > -1 )
+        {
+            const stringKeys = Object.values( this.stringKeys );
+            // Count times we started a string BEFORE the comment
+            var err = false;
+            err |= stringKeys.some( function(v) { 
+                var re = new RegExp( v, "g" ); 
+                var matches = (linestring.substring( 0, idx ).match( re ) || []);
+                return (matches.length % 2) !== 0; 
+            } );
+            err |= stringKeys.some( function(v) { 
+                var re = new RegExp( v, "g" ); 
+                var matches = (linestring.substring( idx ).match( re ) || []);
+                return (matches.length % 2) !== 0; 
+            } );
+            return err ? undefined : idx;
+        }
+    }
+
+    _getTokensFromLine( linestring, skipNonWords ) {
+
+        // Check if line comment
+        const ogLine = linestring;
+        const hasCommentIdx = this._lineHasComment( linestring );
+
+        if( hasCommentIdx != undefined )
+        {
+            linestring = ogLine.substring( 0, hasCommentIdx );
+        }
+
+        // const usesBlockComments = this.languages[ this.highlight ].blockComments ?? true;
 
-       //  const tokens = linestring.split(' ').join('¬ ¬').split('¬'); // trick to split without losing spaces
-        
         let tokensToEvaluate = []; // store in a temp array so we know prev and next tokens...
 
         const pushToken = function( t ) {
@@ -1781,7 +1925,7 @@ class CodeEditor {
             tokensToEvaluate.push( t );
         };
 
-        let iter = linestring.matchAll(/(::|[\[\](){}<>.,;:*"'%@ ])/g);
+        let iter = linestring.matchAll(/(::|[\[\](){}<>.,;:*"'%@!/= ])/g);
         let subtokens = iter.next();
         if( subtokens.value )
         {
@@ -1790,8 +1934,8 @@ class CodeEditor {
             {
                 const _pt = linestring.substring(idx, subtokens.value.index);
                 if( _pt.length ) pushToken( _pt );
-                pushToken( subtokens.value[0] );
-                idx = subtokens.value.index + subtokens.value[0].length;
+                pushToken( subtokens.value[ 0 ] );
+                idx = subtokens.value.index + subtokens.value[ 0 ].length;
                 subtokens = iter.next();
                 if(!subtokens.value) {
                     const _at = linestring.substring(idx);
@@ -1821,10 +1965,10 @@ class CodeEditor {
         //     if( block ) continue;
         // }
 
-        if( has_comment.length > 1 && !skipNonWords )
-            pushToken( singleLineCommentToken + has_comment[1] );
-
-        // console.log( tokensToEvaluate );
+        if( hasCommentIdx != undefined )
+        {
+            pushToken( ogLine.substring( hasCommentIdx ) );
+        }
 
         return this._processTokens( tokensToEvaluate );
     }
@@ -1834,45 +1978,51 @@ class CodeEditor {
         return kindArray[this.highlight] && kindArray[this.highlight][token] != undefined;
     }
 
-    evaluateToken( token, prev, next ) {
+    _evaluateToken( token, prev, next, isLastToken ) {
+
+        const highlight = this.highlight.replace(/\s/g, '').replaceAll("+", "p").toLowerCase();
+        const customStringKeys = Object.assign( {}, this.stringKeys );
+
+        if( highlight == 'cpp' && prev && prev.includes('#') ) // preprocessor code..
+        {
+            customStringKeys['@<'] = '>';
+        }
+
+        // Manage strings
+        this._stringEnded = false;
+        if( this._buildingString != undefined )
+        {
+            const idx = Object.values(customStringKeys).indexOf( token );
+            this._stringEnded = (idx > -1) && (idx == Object.values(customStringKeys).indexOf( customStringKeys[ '@' + this._buildingString ] ));
+        } 
+        else if( customStringKeys[ '@' + token ] )
+        {   
+            // Start new string
+            this._buildingString = token;
+        }
 
         if(token == ' ')
         {
+            if( this._buildingString != undefined )
+            {
+                this._appendStringToken( token );
+                return "";
+            }
             return token;
         }
         else
         {
-            let stringEnded = false;
-            let highlight = this.highlight.replace(/\s/g, '').replaceAll("+", "p").toLowerCase();
-
             const singleLineCommentToken = this.languages[ this.highlight ].singleLineCommentToken ?? this.defaultSingleLineCommentToken;
             const usesBlockComments = this.languages[ this.highlight ].blockComments ?? true;
-            const customStringKeys = Object.assign( {}, this.stringKeys );
-
-            if( highlight == 'cpp' && prev && prev.includes('#') ) // preprocessor code..
-            {
-                customStringKeys['@<'] = '>';
-            }
-
-            // Manage strings
-            if( this._buildingString != undefined )
-            {
-                const idx = Object.values(customStringKeys).indexOf( token );
-                stringEnded = (idx > -1) && (idx == Object.values(customStringKeys).indexOf( customStringKeys[ '@' + this._buildingString ] ));
-            } 
-            else if( customStringKeys[ '@' + token ] )
-            {   
-                // Start new string
-                this._buildingString = token;
-            }
-
+            
             let token_classname = "";
+            let discardToken = false;
 
             if( this._buildingBlockComment != undefined )
                 token_classname = "cm-com";
             
             else if( this._buildingString != undefined )
-                token_classname = "cm-str";
+                discardToken = this._appendStringToken( token );
             
             else if( this._mustHightlightWord( token, this.keywords ) )
                 token_classname = "cm-kwd";
@@ -1886,28 +2036,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++
@@ -1922,16 +2072,53 @@ class CodeEditor {
             else if ( highlight == 'css' && prev == undefined && next == ':' ) // CSS attribute
                 token_classname = "cm-typ";
 
-            else if ( token[0] != '@' && next == '(' )
+            else if ( token[ 0 ] != '@' && token[ 0 ] != ',' && next == '(' )
                 token_classname = "cm-mtd";
 
-            this._buildingString = stringEnded ? undefined : this._buildingString;
+
+            // We finished constructing a string
+            if( this._buildingString && ( this._stringEnded || isLastToken ) )
+            {
+                token = this._getCurrentString();
+                token_classname = "cm-str";
+                discardToken = false;
+            }
+
+            // Update state
+            this._buildingString = this._stringEnded ? undefined : this._buildingString;
+
+            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;
 
             return "<span class='" + highlight + " " + token_classname + "'>" + token + "</span>";
         }
     }
 
-    isCSSClass( token, prev, next ) {
+    _appendStringToken( token ) {
+
+        if( !this._pendingString )
+            this._pendingString = "";
+
+        this._pendingString += token;
+
+        return true;
+    }
+
+    _getCurrentString() {
+
+        const chars = this._pendingString;
+        delete this._pendingString;
+        return chars;
+    }
+
+    _isCSSClass( token, prev, next ) {
         return this.highlight == 'CSS' && prev == '.';
     }
 
@@ -1948,7 +2135,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 ) )
@@ -1972,7 +2159,7 @@ class CodeEditor {
         }
     }
 
-    encloseSelectedWordWithKey( key, lidx, cursor ) {
+    _encloseSelectedWordWithKey( key, lidx, cursor ) {
 
         if( !this.selection || (this.selection.fromY != this.selection.toY) )
         return false;
@@ -1980,10 +2167,10 @@ class CodeEditor {
         this.selection.invertIfNecessary();
 
         // Insert first..
-        this.code.lines[lidx] = [
-            this.code.lines[lidx].slice(0, this.selection.fromX), 
+        this.code.lines[ lidx ] = [
+            this.code.lines[ lidx ].slice(0, this.selection.fromX), 
             key, 
-            this.code.lines[lidx].slice(this.selection.fromX)
+            this.code.lines[ lidx ].slice(this.selection.fromX)
         ].join('');
 
         // Go to the end of the word
@@ -2000,10 +2187,10 @@ class CodeEditor {
         }
 
         // Insert the other
-        this.code.lines[lidx] = [
-            this.code.lines[lidx].slice(0, cursor.position), 
+        this.code.lines[ lidx ] = [
+            this.code.lines[ lidx ].slice(0, cursor.position), 
             key, 
-            this.code.lines[lidx].slice(cursor.position)
+            this.code.lines[ lidx ].slice(cursor.position)
         ].join('');
 
         // Recompute and reposition current selection
@@ -2018,19 +2205,19 @@ class CodeEditor {
         return true;
     }
 
-    lineUp(cursor, resetLeft) {
+    lineUp( cursor, resetLeft ) {
 
-        cursor = cursor ?? this.cursors.children[0];
+        cursor = cursor ?? this.cursors.children[ 0 ];
         cursor.line--;
-        cursor.line = Math.max(0, cursor.line);
-        this.cursorToTop(cursor, resetLeft);
+        cursor.line = Math.max( 0, cursor.line );
+        this.cursorToTop( cursor, resetLeft );
     }
 
-    lineDown(cursor, resetLeft) {
+    lineDown( cursor, resetLeft ) {
 
-        cursor = cursor ?? this.cursors.children[0];
+        cursor = cursor ?? this.cursors.children[ 0 ];
         cursor.line++;
-        this.cursorToBottom(cursor, resetLeft);
+        this.cursorToBottom( cursor, resetLeft );
     }
 
     restartBlink() {
@@ -2057,40 +2244,41 @@ class CodeEditor {
         this.selections.classList.add('show');
 
         // Create new selection instance
-        this.selection = new ISelection(this, cursor.position, cursor.line);
+        this.selection = new CodeSelection(this, cursor.position, cursor.line);
     }
 
     deleteSelection( cursor ) {
 
         // I think it's not necessary but... 
-        if(this.disableEdition) 
+        if( this.disableEdition ) 
             return;
 
         // Some selections don't depend on mouse up..
-        if(this.selection) this.selection.invertIfNecessary();
+        if( this.selection ) this.selection.invertIfNecessary();
 
         const separator = "_NEWLINE_";
-        let code = this.code.lines.join(separator);
+        let code = this.code.lines.join( separator );
 
         // Get linear start index
         let index = 0;
         for(let i = 0; i <= this.selection.fromY; i++)
-            index += (i == this.selection.fromY ? this.selection.fromX : this.code.lines[i].length);
+            index += (i == this.selection.fromY ? this.selection.fromX : this.code.lines[ i ].length);
 
         index += this.selection.fromY * separator.length; 
 
         const num_chars = this.selection.chars + (this.selection.toY - this.selection.fromY) * separator.length;
-        const pre = code.slice(0, index);
-        const post = code.slice(index + num_chars);
-
-        this.code.lines = (pre + post).split(separator);
-        this.processLines(this.selection.fromY);
+        const pre = code.slice( 0, index );
+        const post = code.slice( index + num_chars );
 
-        this.cursorToLine(cursor, this.selection.fromY, true);
-        this.cursorToPosition(cursor, this.selection.fromX);
+        this.code.lines = ( pre + post ).split( separator );
+        
+        this.cursorToLine( cursor, this.selection.fromY, true );
+        this.cursorToPosition( cursor, this.selection.fromX );
+        
         this.endSelection();
 
-        this._refreshCodeInfo(cursor.line, cursor.position);
+        this.processLines();
+        this._refreshCodeInfo( cursor.line, cursor.position );
     }
 
     endSelection() {
@@ -2102,19 +2290,20 @@ class CodeEditor {
 
     cursorToRight( key, cursor ) {
 
-        if(!key) return;
-        cursor = cursor ?? this.cursors.children[0];
+        if( !key ) return;
+        cursor = cursor ?? this.cursors.children[ 0 ];
         cursor._left += this.charWidth;
-        cursor.style.left = "calc(" + (cursor._left - this.getScrollLeft()) + "px + " + this.xPadding + ")";
+        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.code.clientWidth) / 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 );
         });
     }
@@ -2122,30 +2311,30 @@ class CodeEditor {
     cursorToLeft( key, cursor ) {
 
         if(!key) return;
-        cursor = cursor ?? this.cursors.children[0];
+        cursor = cursor ?? this.cursors.children[ 0 ];
         cursor._left -= this.charWidth;
-        cursor._left = Math.max(cursor._left, 0);
-        cursor.style.left = "calc(" + (cursor._left - this.getScrollLeft()) + "px + " + this.xPadding + ")";
+        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 );
         });
     }
 
     cursorToTop( cursor, resetLeft = false ) {
 
-        cursor = cursor ?? this.cursors.children[0];
+        cursor = cursor ?? this.cursors.children[ 0 ];
         cursor._top -= this.lineHeight;
-        cursor._top = Math.max(cursor._top, 4);
-        cursor.style.top = "calc(" + (cursor._top - this.getScrollTop()) + "px)";
+        cursor._top = Math.max(cursor._top, 0);
+        cursor.style.top = "calc(" + cursor._top + "px)";
         this.restartBlink();
         
         if(resetLeft)
@@ -2154,7 +2343,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 );
         });
@@ -2162,9 +2351,9 @@ class CodeEditor {
 
     cursorToBottom( cursor, resetLeft = false ) {
 
-        cursor = cursor ?? this.cursors.children[0];
+        cursor = cursor ?? this.cursors.children[ 0 ];
         cursor._top += this.lineHeight;
-        cursor.style.top = "calc(" + (cursor._top - this.getScrollTop()) + "px)";
+        cursor.style.top = "calc(" + cursor._top + "px)";
         this.restartBlink();
 
         if(resetLeft)
@@ -2173,7 +2362,7 @@ class CodeEditor {
         this._refreshCodeInfo( cursor.line, cursor.position );
 
         doAsync(() => {
-            var last_line = ((this.code.parentElement.offsetHeight - 32) / 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 );
         });
@@ -2181,7 +2370,7 @@ class CodeEditor {
 
     cursorToString( cursor, text, reverse ) {
 
-        cursor = cursor ?? this.cursors.children[0];
+        cursor = cursor ?? this.cursors.children[ 0 ];
         for( let char of text ) 
             reverse ? this.cursorToLeft(char) : this.cursorToRight(char);
     }
@@ -2190,20 +2379,20 @@ class CodeEditor {
 
         cursor.position = position;
         cursor._left = position * this.charWidth;
-        cursor.style.left = "calc(" + (cursor._left - this.getScrollLeft()) + "px + " + this.xPadding + ")";
+        cursor.style.left = "calc(" + cursor._left + "px + " + this.xPadding + ")";
     }
 
     cursorToLine( cursor, line, resetLeft = false ) {
 
         cursor.line = line;
-        cursor._top = 4 + this.lineHeight * line;
-        cursor.style.top = (cursor._top - this.getScrollTop()) + "px";
+        cursor._top = this.lineHeight * line;
+        cursor.style.top = cursor._top + "px";
         if(resetLeft) this.resetCursorPos( CodeEditor.CURSOR_LEFT, cursor );
     }
 
     saveCursor( cursor, state = {} ) {
 
-        var cursor = cursor ?? this.cursors.children[0];
+        var cursor = cursor ?? this.cursors.children[ 0 ];
         state.top = cursor._top;
         state.left = cursor._left;
         state.line = cursor.line;
@@ -2213,19 +2402,19 @@ class CodeEditor {
 
     restoreCursor( cursor, state ) {
 
-        cursor = cursor ?? this.cursors.children[0];
+        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 + ")";
-        cursor._top = state.top ?? 4;
+        cursor._top = state.top ?? 0;
         cursor.style.top = "calc(" + (cursor._top - this.getScrollTop()) + "px)";
     }
 
     resetCursorPos( flag, cursor ) {
         
-        cursor = cursor ?? this.cursors.children[0];
+        cursor = cursor ?? this.cursors.children[ 0 ];
 
         if( flag & CodeEditor.CURSOR_LEFT )
         {
@@ -2236,7 +2425,7 @@ class CodeEditor {
 
         if( flag & CodeEditor.CURSOR_TOP )
         {
-            cursor._top = 4;
+            cursor._top = 0;
             cursor.style.top = (cursor._top - this.getScrollTop()) + "px";
             cursor.line = 0;
         }
@@ -2261,160 +2450,163 @@ class CodeEditor {
 
     getScrollLeft() {
         
-        if(!this.code) return 0;
-        return this.code.customScroll.x;
+        if(!this.codeScroller) return 0;
+        return this.codeScroller.scrollLeft;
     }
 
     getScrollTop() {
         
-        if(!this.code) return 0;
-        return this.code.customScroll.y;
+        if(!this.codeScroller) return 0;
+        return this.codeScroller.scrollTop;
     }
 
-    setScrollLeft( value, keepScrollBar ) {
+    setScrollLeft( value ) {
         
-        if(!this.code) return;
-        
-        const realClientWidth = (this.code.clientWidth - this.code.customScroll.x);
-        const maxWidth = Math.max( this.code.scrollWidth - realClientWidth, 0 );
-
-        value = LX.UTILS.clamp( value, 0, maxWidth );
-
-        this.code.style.marginLeft = (-value) + "px";
+        if(!this.codeScroller) return;
+        this.codeScroller.scrollLeft = value;
+        this.setScrollBarValue( 'horizontal', 0 );
+    }
 
-        if( !keepScrollBar )
-        {
-            const scrollWidth = this.hScrollbarThumb.parentElement.offsetWidth;
-            const scrollBarWidth = this.hScrollbarThumb.offsetWidth;
-            this.setScrollBarValue( ( scrollWidth - scrollBarWidth ) * ( value / maxWidth ), 'horizontal' );
-        }
+    setScrollTop( value ) {
+        
+        if(!this.codeScroller) return;
+        this.codeScroller.scrollTop = value;
+        this.setScrollBarValue( 'vertical' );
+    }
 
-        // Update cursor
-        var cursor = this.cursors.children[0];
-        cursor.style.left = "calc( " + (cursor._left - value) + "px + " + this.xPadding + ")";
+    resize( pMaxLength ) {
+        
+        setTimeout( () => {
 
-        // Update selection
-        for( let s of this.selections.childNodes ) {
-            s.style.left = "calc( " + (s._left - value) + "px + " + this.xPadding + ")";
-        }
+            // Update max viewport
+            const maxLineLength = pMaxLength ?? this.getMaxLineLength();
+            const scrollWidth = maxLineLength * this.charWidth;
+            const scrollHeight = this.code.lines.length * this.lineHeight;
 
-        this.code.customScroll.x = value;
-    }
+            this._lastMaxLineLength = maxLineLength;
 
-    setScrollTop( value, keepScrollBar ) {
-        
-        if(!this.code) return;
+            this.codeSizer.style.minWidth = scrollWidth + "px";
+            this.codeSizer.style.minHeight = scrollHeight + "px";
 
-        const realClientHeight = this.code.parentElement.offsetHeight - 36;
-        const maxHeight = Math.max( this.code.scrollHeight - realClientHeight, 0 );
-        
-        value = LX.UTILS.clamp( value, 0, maxHeight );
-        
-        this.gutter.scrollTop = value;
-        
-        this.code.style.marginTop = (-value) + "px";
+            this.resizeScrollBars();
 
-        if( !keepScrollBar )
-        {
-            const scrollHeight = this.scrollbarThumb.parentElement.offsetHeight;
-            const scrollBarHeight = this.scrollbarThumb.offsetHeight;
-            // this.setScrollBarValue( ( scrollHeight - scrollBarHeight ) * ( value / maxHeight ) )
-            const firstLineInViewport = (this.getScrollTop() / this.lineHeight)|0;
-            this.setScrollBarValue( ( scrollHeight - scrollBarHeight ) * ( firstLineInViewport / this.code.lines.length ) )
-        }
+            // console.warn("Resize editor viewport");
 
-        // Update cursor
-        var cursor = this.cursors.children[0];
-        cursor.style.top = (cursor._top - value) + "px";
-        
-        // Update selection
-        for( let s of this.selections.childNodes ) {
-            s.style.top = (s._top - value) + "px";
-        }
-        
-        this.code.customScroll.y = value;
+        }, 10 );
     }
 
     resizeScrollBars() {
 
-        const numViewportLines = Math.floor( (this.code.parentElement.offsetHeight - 36) / this.lineHeight );
+        const totalLinesInViewport = ((this.codeScroller.offsetHeight - 36) / this.lineHeight)|0;
 
-        if( numViewportLines > this.code.lines.length )
+        if( totalLinesInViewport > this.code.lines.length )
         {
-            this.scrollbar.classList.add( 'scrollbar-unused' );
-            this.tabs.area.root.classList.remove( 'with-vscrollbar' );
+            this.codeScroller.classList.remove( 'with-vscrollbar' );
+            this.vScrollbar.root.classList.add( 'scrollbar-unused' );
         }
         else
         {
-            this.scrollbar.classList.remove( 'scrollbar-unused' );
-            this.tabs.area.root.classList.add( 'with-vscrollbar' );
-            this.scrollbarThumb.size = (numViewportLines / this.code.lines.length);
-            this.scrollbarThumb.style.height = (this.scrollbarThumb.size * 100.0) + "%";
+            this.codeScroller.classList.add( 'with-vscrollbar' );
+            this.vScrollbar.root.classList.remove( 'scrollbar-unused' );
+            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.code.clientWidth / this.charWidth );
-        const line_lengths = this.code.lines.map( value => value.length );
-        const maxLineLength = Math.max(...line_lengths);
+        const numViewportChars = Math.floor( this.codeScroller.clientWidth / this.charWidth );
+        const maxLineLength = this._lastMaxLineLength;
 
         if( numViewportChars > maxLineLength )
         {
-            this.hScrollbar.classList.add( 'scrollbar-unused' );
-            this.tabs.area.root.classList.remove( 'with-hscrollbar' );
+            this.codeScroller.classList.remove( 'with-hscrollbar' );
+            this.hScrollbar.root.classList.add( 'scrollbar-unused' );
         }
         else
         {
-            this.hScrollbar.classList.remove( 'scrollbar-unused' );
-            this.tabs.area.root.classList.add( 'with-hscrollbar' );
-            this.hScrollbarThumb.size = (numViewportChars / maxLineLength);
-            this.hScrollbarThumb.style.width = (this.hScrollbarThumb.size * 100.0) + "%";
+            this.codeScroller.classList.add( 'with-hscrollbar' );
+            this.hScrollbar.root.classList.remove( 'scrollbar-unused' );
+            this.hScrollbar.thumb.size = (numViewportChars / maxLineLength);
+            this.hScrollbar.thumb.style.width = (this.hScrollbar.thumb.size * 100.0) + "%";
         }
     }
 
-    setScrollBarValue( value, type = 'vertical' ) {
+    setScrollBarValue( type = 'vertical', value ) {
 
         if( type == 'vertical' )
         {
-            const scrollHeight = this.scrollbarThumb.parentElement.offsetHeight;
-            const scrollBarHeight = this.scrollbarThumb.offsetHeight;
+            const scrollBarHeight = this.vScrollbar.thumb.parentElement.offsetHeight;
+            const scrollThumbHeight = this.vScrollbar.thumb.offsetHeight;
     
-            value = LX.UTILS.clamp( value, 0, ( scrollHeight - scrollBarHeight ) );
-    
-            this.scrollbarThumb._top = value;
-            this.scrollbarThumb.style.top = this.scrollbarThumb._top + "px";
+            const scrollHeight = this.codeScroller.scrollHeight - this.codeScroller.clientHeight;
+            const currentScroll = this.codeScroller.scrollTop;
+
+            this.vScrollbar.thumb._top = ( currentScroll / scrollHeight ) * ( scrollBarHeight - scrollThumbHeight );
+            this.vScrollbar.thumb.style.top = this.vScrollbar.thumb._top + "px";
         }
         else
         {
-            const scrollWidth = this.hScrollbarThumb.parentElement.offsetWidth;
-            const scrollBarWidth = this.hScrollbarThumb.offsetWidth;
-    
-            value = LX.UTILS.clamp( value, 0, ( scrollWidth - scrollBarWidth ) );
-    
-            this.hScrollbarThumb._left = value;
-            this.hScrollbarThumb.style.left = this.hScrollbarThumb._left + "px";
+            this.codeScroller.scrollLeft += value;
+
+            const scrollBarWidth = this.hScrollbar.thumb.parentElement.offsetWidth;
+            const scrollThumbWidth = this.hScrollbar.thumb.offsetWidth;
+
+            const scrollWidth = this.codeScroller.scrollWidth - this.codeScroller.clientWidth;
+            const currentScroll = this.codeScroller.scrollLeft;
+
+            this.hScrollbar.thumb._left = ( currentScroll / scrollWidth ) * ( scrollBarWidth - scrollThumbWidth );
+            this.hScrollbar.thumb.style.left = this.hScrollbar.thumb._left + "px";
         }
     }
 
-    applyHorizontalScrollFromScrollBar( value ) {
+    updateHorizontalScrollFromScrollBar( value ) {
+
+        value = this.hScrollbar.thumb._left - value;
+
+        // Move scrollbar thumb
+
+        const scrollBarWidth = this.hScrollbar.thumb.parentElement.offsetWidth;
+        const scrollThumbWidth = this.hScrollbar.thumb.offsetWidth;
 
-        this.setScrollBarValue( value, 'horizontal');
-        this.setScrollLeft( value / this.hScrollbarThumb.size, true );
+        this.hScrollbar.thumb._left = LX.UTILS.clamp( value, 0, ( scrollBarWidth - scrollThumbWidth ) );
+        this.hScrollbar.thumb.style.left = this.hScrollbar.thumb._left + "px";
+
+        // Scroll code
+
+        const scrollWidth = this.codeScroller.scrollWidth - this.codeScroller.clientWidth;
+        const currentScroll = (this.hScrollbar.thumb._left * scrollWidth) / ( scrollBarWidth - scrollThumbWidth );
+        this.codeScroller.scrollLeft = currentScroll;
+        
+
+        this._discardScroll = true;
     }
 
-    applyVerticalScrollFromScrollBar( value ) {
+    updateVerticalScrollFromScrollBar( value ) {
+        
+        value = this.vScrollbar.thumb._top - value;
+
+        // Move scrollbar thumb
+
+        const scrollBarHeight = this.vScrollbar.thumb.parentElement.offsetHeight;
+        const scrollThumbHeight = this.vScrollbar.thumb.offsetHeight;
+
+        this.vScrollbar.thumb._top = LX.UTILS.clamp( value, 0, ( scrollBarHeight - scrollThumbHeight ) );
+        this.vScrollbar.thumb.style.top = this.vScrollbar.thumb._top + "px";
+
+        // Scroll code
 
-        this.setScrollBarValue( value );
-        this.setScrollTop( value / this.scrollbarThumb.size, true );
+        const scrollHeight = this.codeScroller.scrollHeight - this.codeScroller.clientHeight;
+        const currentScroll = (this.vScrollbar.thumb._top * scrollHeight) / ( scrollBarHeight - scrollThumbHeight );
+        this.codeScroller.scrollTop = currentScroll;
     }
 
     getCharAtPos( cursor, offset = 0 ) {
         
-        cursor = cursor ?? this.cursors.children[0];
-        return this.code.lines[cursor.line][cursor.position + offset];
+        cursor = cursor ?? this.cursors.children[ 0 ];
+        return this.code.lines[ cursor.line ][cursor.position + offset];
     }
 
     getWordAtPos( cursor, offset = 0 ) {
         
-        cursor = cursor ?? this.cursors.children[0];
+        cursor = cursor ?? this.cursors.children[ 0 ];
         const col = cursor.line;
         const words = this.code.lines[col];
 
@@ -2449,7 +2641,7 @@ class CodeEditor {
         var rect = test.getBoundingClientRect();
         deleteElement( test );
         const bb = [Math.floor(rect.width), Math.floor(rect.height)];
-        return get_bb ? bb : bb[0];
+        return get_bb ? bb : bb[ 0 ];
     }
 
     measureString( str ) {
@@ -2462,10 +2654,10 @@ class CodeEditor {
         var script = document.createElement('script');
         script.type = 'module';
         script.innerHTML = code;
-        // script.src = url[i] + ( version ? "?version=" + version : "" );
+        // script.src = url[ i ] + ( version ? "?version=" + version : "" );
         script.async = false;
         // script.onload = function(e) { };
-        document.getElementsByTagName('head')[0].appendChild(script);
+        document.getElementsByTagName('head')[ 0 ].appendChild(script);
     }
 
     toJSONFormat( text ) {
@@ -2473,19 +2665,19 @@ class CodeEditor {
         let params = text.split(":");
 
         for(let i = 0; i < params.length; i++) {
-            let key = params[i].split(',');
+            let key = params[ i ].split(',');
             if(key.length > 1) {
                 if(key[key.length-1].includes("]"))
                     continue;
                 key = key[key.length-1];
             }
-            else if(key[0].includes("}"))
+            else if(key[ 0 ].includes("}"))
                 continue;
             else
-                key = key[0];
+                key = key[ 0 ];
             key = key.replaceAll(/[{}\n\r]/g,"").replaceAll(" ","")
-            if(key[0] != '"' && key[key.length - 1] != '"') {
-                params[i] = params[i].replace(key, '"' + key + '"');
+            if(key[ 0 ] != '"' && key[key.length - 1] != '"') {
+                params[ i ] = params[ i ].replace(key, '"' + key + '"');
             }
         }
 
@@ -2515,11 +2707,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
@@ -2622,7 +2814,7 @@ class CodeEditor {
 
         for( let i = 0; i < this.autocomplete.childElementCount; ++i )
         {
-            const child = this.autocomplete.childNodes[i];
+            const child = this.autocomplete.childNodes[ i ];
             if( child.classList.contains('selected') )
             {
                 var word = "";