lexgui 0.1.16 → 0.1.17

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,130 +208,119 @@ 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.viewportRangeStart = 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);
-            }
-        }
+                // Scroll down...
+                if( scrollTop > lastScrollTopValue )
+                {
+                    const scrollDownBoundary = (this.viewportRangeStart + this.lineScrollMargin.y) * this.lineHeight;
 
-        // Add custom horizontal scroll bar
-        {
-            var hScrollbar = document.createElement('div');
-            hScrollbar.className = "lexcodescrollbar horizontal";
-            this.hScrollbar = hScrollbar;
-            area.attach(this.hScrollbar);
+                    if( scrollTop > scrollDownBoundary )
+                    {
+                        this.code.style.top = (scrollDownBoundary - this.lineScrollMargin.x * this.lineHeight) + "px";
+                        this.processLines( CodeEditor.UPDATE_VISIBLE_LINES );
+                    }
+                }
+                // Scroll up...
+                else
+                {
+                    const scrollUpBoundary = (this.viewportRangeStart + this.lineScrollMargin.x) * this.lineHeight;
+                    // console.log(scrollTop, scrollUpBoundary)
+    
+                    if( scrollTop <= scrollUpBoundary )
+                    {
+                        this.viewportRangeStart -= this.lineScrollMargin.x;
+                        this.viewportRangeStart = Math.max( this.viewportRangeStart, 0 );
 
-            var hScrollbarThumb = document.createElement('div');
-            this.hScrollbarThumb = hScrollbarThumb;
-            this.hScrollbarThumb._left = 0;
-            hScrollbar.appendChild(hScrollbarThumb);
+                        this.code.style.top = this.viewportRangeStart == 0 ? "0px" : (scrollUpBoundary - this.lineScrollMargin.x * this.lineHeight) + "px";
+                        
+                        this.processLines( CodeEditor.KEEP_VISIBLE_LINES );
+                    }
+                }
 
-            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();
-            }
+                lastScrollTopValue = scrollTop;
+            });
 
-            function inner_mousemove(e)
-            {
-                var dt = (last_pos - e.x);
-                
-                that.applyHorizontalScrollFromScrollBar( that.hScrollbarThumb._left - dt )
+            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 );
+            });
+        }
 
-                last_pos = e.x;
-                e.stopPropagation();
-                e.preventDefault();
-            }
+        // 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 );
+        }
 
-            function inner_mouseup(e)
-            {
-                var doc = that.root.ownerDocument;
-                doc.removeEventListener("mousemove", inner_mousemove);
-                doc.removeEventListener("mouseup", inner_mouseup);
-            }
+        // Add custom vertical scroll bar
+        {
+            this.vScrollbar = new ScrollBar( this, ScrollBar.SCROLLBAR_VERTICAL );
+            area.attach(this.vScrollbar.root);
+        }
+
+        // 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);
@@ -298,10 +328,21 @@ class CodeEditor {
             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 +376,7 @@ class CodeEditor {
         };
 
         // Scan tokens..
-        setInterval( this.scanWordSuggestions.bind(this), 2000 );
+        // setInterval( this.scanWordSuggestions.bind( this ), 2000 );
 
         this.languages = {
             'Plain Text': { },
@@ -426,64 +467,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 +538,53 @@ 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));
+                this.startSelection( cursor );
+                var string = this.code.lines[ ln ].substring( idx, lastX );
+                this.selection.selectInline( idx, cursor.line, this.measureString( string ) );
             } 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);
+                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));
             } 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 );
         });
 
-        this.action('Enter', true, ( ln, cursor, e ) => {
+        this.action( 'Enter', true, ( ln, cursor, e ) => {
 
             // Add word
             if( this.isAutoCompleteActive )
@@ -549,63 +593,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 +659,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 +696,40 @@ 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 );
                 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 +737,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 +746,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 +755,34 @@ 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 );
+                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 +792,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 +803,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 +812,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 +857,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 +875,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 +942,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 +970,18 @@ class CodeEditor {
 
     _addUndoStep( cursor )  {
 
-        var cursor = cursor ?? this.cursors.children[0];
+        var cursor = cursor ?? this.cursors.children[ 0 ];
 
         this.code.undoSteps.push( {
-            lines: LX.deepCopy(this.code.lines),
-            cursor: this.saveCursor(cursor),
+            lines: LX.deepCopy( this.code.lines ),
+            cursor: this.saveCursor( cursor ),
             line: cursor.line
         } );
     }
 
     _changeLanguage( lang ) {
 
-        this.code.lang = lang;
+        this.code.language = lang;
         this.highlight = lang;
         this._refreshCodeInfo();
         this.processLines();
@@ -946,23 +990,23 @@ 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 'txt': 
             default:
-                this._changeLanguage('Plain Text');
+                this._changeLanguage( 'Plain Text' );
         }
     }
 
@@ -974,15 +1018,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 +1047,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,61 +1059,46 @@ 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) {
         
-        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.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] );
-        });
-        code.addEventListener('wheel', (e) => {
-
-            // Get scroll data
-
-            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 );
+                this.loadFile( e.dataTransfer.files[ i ] );
         });
 
-        this.openedTabs[name] = code;
+        this.openedTabs[ name ] = code;
 
         this.tabs.add(name, code, { 'selected': selected, 'fixed': (name === '+') , 'title': code.title, 'onSelect': (e, tabname) => {
 
@@ -1079,38 +1108,37 @@ class CodeEditor {
                 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);    
+            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();
+            this._changeLanguageFromExtension( LX.getExtension( tabname ) );
+            this._refreshCodeInfo( cursor.line, cursor.position );
         }});
+
+        // 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 +1159,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 +1167,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' )
@@ -1231,36 +1259,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)
@@ -1291,7 +1318,7 @@ class CodeEditor {
                 let domEl = this.selections.childNodes[sId];
                 if(!domEl)
                 {
-                    domEl = document.createElement('div');
+                    domEl = document.createElement( 'div' );
                     domEl.className = "lexcodeselection";
                     this.selections.appendChild( domEl );
                 }
@@ -1302,22 +1329,21 @@ 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();
+                    if(deltaY == 0) string = !reverse ? this.code.lines[ i ].substring(fromX, toX) : this.code.lines[ i ].substring(toX, fromX);
+                    else string = this.code.lines[ i ].substr(fromX);
+                    const pixels = (reverse && deltaY == 0 ? toX : fromX) * this.charWidth;
                     domEl.style.left = "calc(" + pixels + "px + " + this.xPadding + ")";
                 }
                 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...
+                    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";
+                domEl._top = i * this.lineHeight;
+                domEl.style.top = domEl._top + "px";
                 this.selection.chars += stringWidth / this.charWidth;
             }
         }
@@ -1334,7 +1360,7 @@ class CodeEditor {
                 let domEl = this.selections.childNodes[sId];
                 if(!domEl)
                 {
-                    domEl = document.createElement('div');
+                    domEl = document.createElement( 'div' );
                     domEl.className = "lexcodeselection";
                     this.selections.appendChild( domEl );
                 }
@@ -1344,20 +1370,20 @@ class CodeEditor {
                 
                 if(sId == 0)
                 {
-                    string = this.code.lines[i].substr(toX);
-                    const pixels = (toX * this.charWidth) - this.getScrollLeft();
+                    string = this.code.lines[ i ].substr(toX);
+                    const pixels = toX * this.charWidth;
                     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...
+                    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";
+                domEl._top = i * this.lineHeight;
+                domEl.style.top = domEl._top + "px";
                 this.selection.chars += stringWidth / this.charWidth;
             }
         }
@@ -1376,9 +1402,9 @@ class CodeEditor {
         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 +1414,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();
@@ -1424,8 +1450,6 @@ class CodeEditor {
                 this.restoreCursor( cursor, step.cursor );
                 this.processLines();
                 return;
-
-                
             }
         }
 
@@ -1509,14 +1533,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('');
         }
 
@@ -1556,11 +1580,11 @@ 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 {
             const separator = "_NEWLINE_";
@@ -1570,7 +1594,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;
@@ -1584,14 +1608,14 @@ class CodeEditor {
 
     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 {
@@ -1602,7 +1626,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;
@@ -1631,70 +1655,117 @@ 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 start = performance.now();
+        const d = Math.max( this.viewportRangeStart - 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 ) {
+
+        mode = mode ?? CodeEditor.KEEP_VISIBLE_LINES;
 
-        var gutter_html = "";
-        var code_html = "";
+        // console.clear();
+        console.log("--------------------------------------------");
 
-        this.resizeScrollBars();
+        const lastScrollTop = this.getScrollTop();
+        const start = performance.now();
+
+        var gutter_html = "", code_html = "";
 
         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 firstLineInViewport = mode & CodeEditor.UPDATE_VISIBLE_LINES ? 
+                                    ( (lastScrollTop / this.lineHeight)|0 ) : this.viewportRangeStart;
+        const totalLinesInViewport = ((this.codeScroller.offsetHeight - 36) / this.lineHeight)|0;
+        this.viewportRangeStart = firstLineInViewport;
+
         const viewportRange = new LX.vec2( 
-            Math.max( firstLineInViewport - margin, 0 ), 
-            Math.min( firstLineInViewport + totalLinesInViewport + margin, this.code.lines.length )
+            Math.max( firstLineInViewport - this.lineScrollMargin.x, 0 ), 
+            Math.min( firstLineInViewport + totalLinesInViewport + this.lineScrollMargin.y, this.code.lines.length )
         );
 
+        // Add remaining lines if we are near the end of the scroll
+        {
+            const diff = Math.max( this.code.lines.length - viewportRange.y, 0 );
+            if( diff < ( totalLinesInViewport + this.lineScrollMargin.y ) )
+                viewportRange.y += diff;
+        }
+            
         for( let i = viewportRange.x; i < viewportRange.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:", viewportRange);
+        console.log( "Num lines processed:",  (viewportRange.y - viewportRange.x), performance.now() - start );
+        console.log("--------------------------------------------");
+
+        this.codeScroller.scrollTop = lastScrollTop;
+
+        setTimeout( () => {
+
+            // Update max viewport
+            const scrollWidth = this.getMaxLineLength() * this.charWidth;
+            const scrollHeight = this.code.lines.length * this.lineHeight + 10; // scrollbar offset
+    
+            this.codeSizer.style.minWidth = scrollWidth + "px";
+            this.codeSizer.style.minHeight = scrollHeight + "px";
+
+            this.resizeScrollBars( totalLinesInViewport );
+
+        }, 10 );
     }
 
     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 +1773,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 +1825,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 tokens = linestring.split(' ').join('¬ ¬').split('¬'); // trick to split without losing spaces
+        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;
+
         let tokensToEvaluate = []; // store in a temp array so we know prev and next tokens...
 
         const pushToken = function( t ) {
@@ -1790,8 +1879,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 +1910,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 +1923,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";
@@ -1922,15 +2017,49 @@ 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 "";
+
+            // No highlighting, no need to put it inside another span..
+            if( !token_classname.length )
+                return token;
 
             return "<span class='" + highlight + " " + token_classname + "'>" + token + "</span>";
         }
     }
 
+    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 == '.';
     }
@@ -1980,10 +2109,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 +2129,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 +2147,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 +2186,40 @@ 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);
+        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);
+        this.code.lines = ( pre + post ).split( separator );
+        this.processLines();
 
-        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();
-
-        this._refreshCodeInfo(cursor.line, cursor.position);
+        this._refreshCodeInfo( cursor.line, cursor.position );
     }
 
     endSelection() {
@@ -2102,10 +2231,10 @@ 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 );
@@ -2113,7 +2242,7 @@ class CodeEditor {
         // Add horizontal scroll
 
         doAsync(() => {
-            var last_char = ((this.code.clientWidth) / this.charWidth)|0;
+            var last_char = ((this.codeScroller.clientWidth + this.getScrollLeft()) / this.charWidth)|0;
             if( cursor.position >= last_char )
                 this.setScrollLeft( this.getScrollLeft() + this.charWidth );
         });
@@ -2122,10 +2251,10 @@ 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.style.left = "calc( " + cursor._left + "px + " + this.xPadding + " )";
         cursor.position--;
         cursor.position = Math.max(cursor.position, 0);
         this.restartBlink();
@@ -2142,10 +2271,10 @@ class CodeEditor {
 
     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)
@@ -2162,9 +2291,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 +2302,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 +2310,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 +2319,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 +2342,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._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 +2365,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 +2390,141 @@ 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 ) {
-        
-        if(!this.code) return;
+    setScrollLeft( value ) {
         
-        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( !keepScrollBar )
-        {
-            const scrollWidth = this.hScrollbarThumb.parentElement.offsetWidth;
-            const scrollBarWidth = this.hScrollbarThumb.offsetWidth;
-            this.setScrollBarValue( ( scrollWidth - scrollBarWidth ) * ( value / maxWidth ), 'horizontal' );
-        }
-
-        // Update cursor
-        var cursor = this.cursors.children[0];
-        cursor.style.left = "calc( " + (cursor._left - value) + "px + " + this.xPadding + ")";
-
-        // Update selection
-        for( let s of this.selections.childNodes ) {
-            s.style.left = "calc( " + (s._left - value) + "px + " + this.xPadding + ")";
-        }
-
-        this.code.customScroll.x = value;
+        if(!this.codeScroller) return;
+        this.codeScroller.scrollLeft = value;
+        this.setScrollBarValue( 'horizontal', 0 );
     }
 
-    setScrollTop( value, keepScrollBar ) {
-        
-        if(!this.code) return;
-
-        const realClientHeight = this.code.parentElement.offsetHeight - 36;
-        const maxHeight = Math.max( this.code.scrollHeight - realClientHeight, 0 );
-        
-        value = LX.UTILS.clamp( value, 0, maxHeight );
+    setScrollTop( value ) {
         
-        this.gutter.scrollTop = value;
-        
-        this.code.style.marginTop = (-value) + "px";
-
-        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 ) )
-        }
-
-        // 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;
+        if(!this.codeScroller) return;
+        this.codeScroller.scrollTop = value;
+        this.setScrollBarValue( 'vertical' );
     }
 
-    resizeScrollBars() {
-
-        const numViewportLines = Math.floor( (this.code.parentElement.offsetHeight - 36) / this.lineHeight );
+    resizeScrollBars( numViewportLines ) {
 
         if( numViewportLines > 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 = (numViewportLines / 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 numViewportChars = Math.floor( this.codeScroller.clientWidth / this.charWidth );
         const line_lengths = this.code.lines.map( value => value.length );
         const maxLineLength = Math.max(...line_lengths);
 
         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.hScrollbar.thumb._left = LX.UTILS.clamp( value, 0, ( scrollBarWidth - scrollThumbWidth ) );
+        this.hScrollbar.thumb.style.left = this.hScrollbar.thumb._left + "px";
 
-        this.setScrollBarValue( value, 'horizontal');
-        this.setScrollLeft( value / this.hScrollbarThumb.size, true );
+        // 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 +2559,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 +2572,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 +2583,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 + '"');
             }
         }
 
@@ -2622,7 +2732,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 = "";