lexgui 0.1.14 → 0.1.16

package/build/components/codeeditor.js

@@ -29,6 +29,10 @@ function firstNonspaceIndex(str) {
     return str.search(/\S|$/);
 }
 
+function deleteElement(el) {
+    if(el) el.remove();
+}
+
 let ASYNC_ENABLED = true;
 
 function doAsync( fn, ms ) {
@@ -102,10 +106,31 @@ 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 } );
 
@@ -142,6 +167,9 @@ 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');
@@ -170,6 +198,96 @@ class CodeEditor {
             this.cursors.appendChild(cursor);
         }
 
+        // Add custom vertical scroll bar
+        {
+            var scrollbar = document.createElement('div');
+            scrollbar.className = "lexcodescrollbar";
+            this.scrollbar = scrollbar;
+            area.attach(this.scrollbar);
+
+            var scrollbarThumb = document.createElement('div');
+            this.scrollbarThumb = scrollbarThumb;
+            this.scrollbarThumb._top = 0;
+            scrollbar.appendChild(scrollbarThumb);
+
+            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();
+            }
+
+            function inner_mousemove(e)
+            {
+                var dt = (last_pos - e.y);
+                
+                that.applyVerticalScrollFromScrollBar( that.scrollbarThumb._top - dt )
+
+                last_pos = e.y;
+                e.stopPropagation();
+                e.preventDefault();
+            }
+
+            function inner_mouseup(e)
+            {
+                var doc = that.root.ownerDocument;
+                doc.removeEventListener("mousemove", inner_mousemove);
+                doc.removeEventListener("mouseup", inner_mouseup);
+            }
+        }
+
+        // Add custom horizontal scroll bar
+        {
+            var hScrollbar = document.createElement('div');
+            hScrollbar.className = "lexcodescrollbar horizontal";
+            this.hScrollbar = hScrollbar;
+            area.attach(this.hScrollbar);
+
+            var hScrollbarThumb = document.createElement('div');
+            this.hScrollbarThumb = hScrollbarThumb;
+            this.hScrollbarThumb._left = 0;
+            hScrollbar.appendChild(hScrollbarThumb);
+
+            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();
+            }
+
+            function inner_mousemove(e)
+            {
+                var dt = (last_pos - e.x);
+                
+                that.applyHorizontalScrollFromScrollBar( that.hScrollbarThumb._left - dt )
+
+                last_pos = e.x;
+                e.stopPropagation();
+                e.preventDefault();
+            }
+
+            function inner_mouseup(e)
+            {
+                var doc = that.root.ownerDocument;
+                doc.removeEventListener("mousemove", inner_mousemove);
+                doc.removeEventListener("mouseup", inner_mouseup);
+            }
+        }
+
         // Add autocomplete box
         {
             var box = document.createElement('div');
@@ -199,6 +317,7 @@ class CodeEditor {
         this.tabSpaces = 4;
         this.maxUndoSteps = 16;
         this.lineHeight = 20;
+        this.defaultSingleLineCommentToken = "//";
         this.charWidth = 8; //this.measureChar();
         this._lastTime = null;
 
@@ -210,28 +329,48 @@ class CodeEditor {
             "[": "]"
         };
 
+        this.stringKeys = { // adding @ because some words are always true in (e.g. constructor..)
+            "@\"": "\"", 
+            "@'": "'"
+        };
+
         // Scan tokens..
         setInterval( this.scanWordSuggestions.bind(this), 2000 );
 
-        this.languages = [
-            'Plain Text', 'JavaScript', 'C++', 'CSS', 'GLSL', 'WGSL', 'JSON', 'XML', 'Python'
-        ];
+        this.languages = {
+            'Plain Text': { },
+            'JavaScript': { },
+            'C++': { },
+            'CSS': { },
+            'GLSL': { },
+            'WGSL': { },
+            'JSON': { },
+            'XML': { },
+            'Python': { },
+            'Batch': { blockComments: false, singleLineCommentToken: '::' }
+        };
+
         this.specialKeys = [
             'Backspace', 'Enter', 'ArrowUp', 'ArrowDown', 
             'ArrowRight', 'ArrowLeft', 'Delete', 'Home',
             'End', 'Tab', 'Escape'
         ];
+
         this.keywords = {
             'JavaScript': ['var', 'let', 'const', 'this', 'in', 'of', 'true', 'false', 'new', 'function', 'NaN', 'static', 'class', 'constructor', 'null', 'typeof', 'debugger', 'abstract',
                           'arguments', 'extends', 'instanceof'],
-            'C++': ['int', 'float', 'bool', 'const', 'static_cast', 'dynamic_cast', 'new', 'delete', 'void', 'true', 'false', 'auto', 'struct', 'typedef'],
+            'C++': ['int', 'float', 'double', 'bool', 'char', 'wchar_t', 'const', 'static_cast', 'dynamic_cast', 'new', 'delete', 'void', 'true', 'false', 'auto', 'struct', 'typedef', 'nullptr', 
+                    'NULL', 'unsigned'],
+            'JSON': ['true', 'false'],
             'GLSL': ['true', 'false', 'function', 'int', 'float', 'vec2', 'vec3', 'vec4', 'mat2x2', 'mat3x3', 'mat4x4', 'struct'],
             'CSS': ['body', 'html', 'canvas', 'div', 'input', 'span', '.'],
             'WGSL': ['var', 'let', 'true', 'false', 'fn', 'bool', 'u32', 'i32', 'f16', 'f32', 'vec2f', 'vec3f', 'vec4f', 'mat2x2f', 'mat3x3f', 'mat4x4f', 'array', 'atomic', 'struct',
                     'sampler', 'sampler_comparison', 'texture_depth_2d', 'texture_depth_2d_array', 'texture_depth_cube', 'texture_depth_cube_array', 'texture_depth_multisampled_2d',
                     'texture_external', 'texture_1d', 'texture_2d', 'texture_2d_array', 'texture_3d', 'texture_cube', 'texture_cube_array', 'texture_storage_1d', 'texture_storage_2d',
                     'texture_storage_2d_array', 'texture_storage_3d'],
-            'Python': ['False', 'def', 'None', 'True', 'in', 'is', 'and', 'lambda', 'nonlocal', 'not', 'or']
+            'Python': ['False', 'def', 'None', 'True', 'in', 'is', 'and', 'lambda', 'nonlocal', 'not', 'or'],
+            'Batch': ['set', 'SET', 'echo', 'ECHO', 'off', 'OFF', 'del', 'DEL', 'defined', 'DEFINED', 'setlocal', 'SETLOCAL', 'enabledelayedexpansion', 'ENABLEDELAYEDEXPANSION', 'driverquery', 
+                      'DRIVERQUERY', 'print', 'PRINT']
         };
         this.utils = { // These ones don't have hightlight, used as suggestions to autocomplete only...
             'JavaScript': ['querySelector', 'body', 'addEventListener', 'removeEventListener', 'remove', 'sort', 'keys', 'filter', 'isNaN', 'parseFloat', 'parseInt', 'EPSILON', 'isFinite',
@@ -248,7 +387,8 @@ class CodeEditor {
             'Python': ['int', 'type', 'float', 'map', 'list', 'ArithmeticError', 'AssertionError', 'AttributeError', 'Exception', 'EOFError', 'FloatingPointError', 'GeneratorExit', 
                       'ImportError', 'IndentationError', 'IndexError', 'KeyError', 'KeyboardInterrupt', 'LookupError', 'MemoryError', 'NameError', 'NotImplementedError', 'OSError',
                       'OverflowError', 'ReferenceError', 'RuntimeError', 'StopIteration', 'SyntaxError', 'TabError', 'SystemError', 'SystemExit', 'TypeError', 'UnboundLocalError', 
-                      'UnicodeError', 'UnicodeEncodeError', 'UnicodeDecodeError', 'UnicodeTranslateError', 'ValueError', 'ZeroDivisionError' ]
+                      'UnicodeError', 'UnicodeEncodeError', 'UnicodeDecodeError', 'UnicodeTranslateError', 'ValueError', 'ZeroDivisionError' ],
+            'C++': ['uint8_t', 'uint16_t', 'uint32_t']
         };
         this.builtin = {
             'JavaScript': ['document', 'console', 'window', 'navigator', 'performance'],
@@ -257,21 +397,33 @@ class CodeEditor {
         };
         this.statementsAndDeclarations = {
             'JavaScript': ['for', 'if', 'else', 'case', 'switch', 'return', 'while', 'continue', 'break', 'do', 'import', 'from', 'throw', 'async', 'try', 'catch', 'await'],
-            'C++': ['std', 'for', 'if', 'else', 'return', 'continue', 'break', 'case', 'switch', 'while', 'glm'],
+            'C++': ['std', 'for', 'if', 'else', 'return', 'continue', 'break', 'case', 'switch', 'while', 'glm', 'spdlog'],
             'GLSL': ['for', 'if', 'else', 'return', 'continue', 'break'],
             'WGSL': ['const','for', 'if', 'else', 'return', 'continue', 'break', 'storage', 'read', 'uniform'],
-            'Python': ['if', 'raise', 'del', 'import', 'return', 'elif', 'try', 'else', 'while', 'as', 'except', 'with', 'assert', 'finally', 'yield', 'break', 'for', 'class', 'continue', 'global', 'pass']
+            'Python': ['if', 'raise', 'del', 'import', 'return', 'elif', 'try', 'else', 'while', 'as', 'except', 'with', 'assert', 'finally', 'yield', 'break', 'for', 'class', 'continue', 
+                      'global', 'pass'],
+            'Batch': ['if', 'IF', 'for', 'FOR', 'in', 'IN', 'do', 'DO', 'call', 'CALL', 'goto', 'GOTO', 'exit', 'EXIT']
         };
         this.symbols = {
             'JavaScript': ['<', '>', '[', ']', '{', '}', '(', ')', ';', '=', '|', '||', '&', '&&', '?', '??'],
-            'C++': ['<', '>', '[', ']', '{', '}', '(', ')', ';', '=', '|', '||', '&', '&&', '?', '::'],
+            'C++': ['<', '>', '[', ']', '{', '}', '(', ')', ';', '=', '|', '||', '&', '&&', '?', '::', '*', '-', '+'],
             'JSON': ['[', ']', '{', '}', '(', ')'],
             'GLSL': ['[', ']', '{', '}', '(', ')'],
             'WGSL': ['[', ']', '{', '}', '(', ')', '->'],
             'CSS': ['{', '}', '(', ')', '*'],
-            'Python': ['<', '>', '[', ']', '(', ')', '=']
+            'Python': ['<', '>', '[', ']', '(', ')', '='],
+            'Batch': ['[', ']', '(', ')', '%'],
         };
 
+        // Convert reserved word arrays to maps so we can search tokens faster
+
+        for( let lang in this.keywords ) this.keywords[lang] = this.keywords[lang].reduce((a, v) => ({ ...a, [v]: true}), {});
+        for( let lang in this.utils ) this.utils[lang] = this.utils[lang].reduce((a, v) => ({ ...a, [v]: true}), {});
+        for( let lang in this.types ) this.types[lang] = this.types[lang].reduce((a, v) => ({ ...a, [v]: true}), {});
+        for( let lang in this.builtin ) this.builtin[lang] = this.builtin[lang].reduce((a, v) => ({ ...a, [v]: true}), {});
+        for( let lang in this.statementsAndDeclarations ) this.statementsAndDeclarations[lang] = this.statementsAndDeclarations[lang].reduce((a, v) => ({ ...a, [v]: true}), {});
+        for( let lang in this.symbols ) this.symbols[lang] = this.symbols[lang].reduce((a, v) => ({ ...a, [v]: true}), {});
+
         // Action keys
 
         this.action('Escape', false, ( ln, cursor, e ) => {
@@ -355,7 +507,7 @@ class CodeEditor {
             this.resetCursorPos( CodeEditor.CURSOR_LEFT );
             if(idx > 0) this.cursorToString(cursor, prestring);
             this._refreshCodeInfo(cursor.line, cursor.position);
-            this.code.scrollLeft = 0;
+            this.setScrollLeft( 0 );
 
             if( e.shiftKey && !e.cancelShift )
             {
@@ -366,7 +518,7 @@ class CodeEditor {
                 this.startSelection(cursor);
                 var string = this.code.lines[ln].substring(idx, last_pos);
                 this.selection.selectInline(idx, cursor.line, this.measureString(string));
-            } else
+            } else if( !e.keepSelection )
                 this.endSelection();
         });
 
@@ -384,8 +536,8 @@ class CodeEditor {
             this.resetCursorPos( CodeEditor.CURSOR_LEFT );
             this.cursorToString( cursor, this.code.lines[ln] );
 
-            const last_char = ((this.code.scrollLeft + this.code.clientWidth) / this.charWidth)|0;
-            this.code.scrollLeft = cursor.position >= last_char ? (cursor.position - last_char) * this.charWidth : 0;
+            const last_char = (this.code.clientWidth / this.charWidth)|0;
+            this.setScrollLeft( cursor.position >= last_char ? (cursor.position - last_char) * this.charWidth : 0 );
         });
 
         this.action('Enter', true, ( ln, cursor, e ) => {
@@ -442,7 +594,7 @@ class CodeEditor {
 
                     var letter = this.getCharAtPos( cursor );
                     if(!letter) {
-                        this.selection.toX = (this.code.lines[cursor.line].length - 1);
+                        this.selection.toX = this.code.lines[cursor.line].length;
                         this.cursorToPosition(cursor, this.selection.toX);
                     }
                     
@@ -504,7 +656,7 @@ class CodeEditor {
 
             if(e.metaKey) { // Apple devices (Command)
                 e.preventDefault();
-                this.actions[ 'Home' ].callback( ln, cursor );
+                this.actions[ 'Home' ].callback( ln, cursor, e );
             }
             else if(e.ctrlKey) {
                 // Get next word
@@ -548,13 +700,15 @@ class CodeEditor {
                     }
                 }
                 else if( cursor.line > 0 ) {
-
+                    
+                    if( e.shiftKey ) {
+                        if(!this.selection) this.startSelection(cursor);
+                    }
+                        
                     this.lineUp( cursor );
-                    this.resetCursorPos( CodeEditor.CURSOR_LEFT );
-                    this.cursorToPosition( cursor, this.code.lines[cursor.line].length );
+                    this.actions[ 'End' ].callback( cursor.line, cursor, e );
 
                     if( e.shiftKey ) {
-                        if(!this.selection) this.startSelection(cursor);
                         this.selection.toX = cursor.position;
                         this.selection.toY--;
                         this.processSelection(null, true);
@@ -613,17 +767,22 @@ class CodeEditor {
                 }
                 else if( this.code.lines[ cursor.line + 1 ] !== undefined ) {
                     
+                    if( e.shiftKey ) {
+                        if(!this.selection) this.startSelection(cursor);
+                        e.cancelShift = true;
+                        e.keepSelection = true;
+                    }
+
                     this.lineDown( cursor );
-                    e.cancelShift = true;
                     this.actions['Home'].callback(cursor.line, cursor, e);
-                    this.hideAutoCompleteBox();
-
+                    
                     if( e.shiftKey ) {
-                        if(!this.selection) this.startSelection(cursor);
                         this.selection.toX = cursor.position;
                         this.selection.toY++;
                         this.processSelection(null, true);
                     }
+
+                    this.hideAutoCompleteBox();
                 }
             }
         });
@@ -652,7 +811,7 @@ class CodeEditor {
     }
 
     // This can be used to empty all text...
-    setText( text = "" ) {
+    setText( text = "", lang ) {
 
         let new_lines = text.split('\n');
         this.code.lines = [].concat(new_lines);
@@ -663,6 +822,11 @@ class CodeEditor {
         this.cursorToLine(cursor, new_lines.length); // Already substracted 1
         this.cursorToPosition(cursor, lastLine.length);
         this.processLines();
+
+        if( lang )
+        {
+            this._changeLanguage( lang );
+        }
     }
 
     appendText( text ) {
@@ -731,11 +895,13 @@ class CodeEditor {
     loadFile( file ) {
 
         const inner_add_tab = ( text, name, title ) => {
-            this.addTab(name, true, title);
-            text = text.replaceAll('\r', '');
-            this.code.lines = text.split('\n');
-            this.processLines();
-            this._refreshCodeInfo();
+            const existing = this.addTab(name, true, title);
+            if( !existing )
+            {
+                text = text.replaceAll('\r', '');
+                this.code.lines = text.split('\n');
+                this._changeLanguageFromExtension( LX.getExtension(name) );
+            }
         };
 
         if(file.constructor == String)
@@ -744,7 +910,6 @@ class CodeEditor {
             LX.request({ url: filename, success: text => {
 
                 const name = filename.substring(filename.lastIndexOf('/') + 1);
-                this._changeLanguageFromExtension( LX.getExtension(name) );
                 inner_add_tab( text, name, filename );
             } });
         }
@@ -753,12 +918,10 @@ class CodeEditor {
             const fr = new FileReader();
             fr.readAsText( file );
             fr.onload = e => { 
-                this._changeLanguageFromExtension( LX.getExtension(file.name) );
                 const text = e.currentTarget.result;
                 inner_add_tab( text, file.name );
             };
         }
-        
     }
 
     _addUndoStep( cursor )  {
@@ -773,6 +936,8 @@ class CodeEditor {
     }
 
     _changeLanguage( lang ) {
+
+        this.code.lang = lang;
         this.highlight = lang;
         this._refreshCodeInfo();
         this.processLines();
@@ -780,6 +945,9 @@ class CodeEditor {
 
     _changeLanguageFromExtension( ext ) {
         
+        if( !ext )
+        return this._changeLanguage( this.code.lang );
+
         switch(ext.toLowerCase())
         {
             case 'js': return this._changeLanguage('JavaScript');
@@ -791,6 +959,7 @@ class CodeEditor {
             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');
@@ -815,7 +984,7 @@ class CodeEditor {
                 panel.addLabel("Col " + panel.col, { width: "64px" });
                 panel.addButton("<b>{ }</b>", this.highlight, (value, event) => {
                     LX.addContextMenu( "Language", event, m => {
-                        for( const lang of this.languages )
+                        for( const lang of Object.keys(this.languages) )
                             m.add( lang, this._changeLanguage.bind(this) );
                     });
                 }, { width: "25%", nameWidth: "15%" });
@@ -856,48 +1025,48 @@ class CodeEditor {
         if(this.openedTabs[name])
         {
             this.tabs.select( this.code.tabName );
-            return;
+            return true;
         }
 
         // Create code content
         let code = document.createElement('div');
         code.className = 'code';
         code.lines = [""];
+        code.lang = "Plain Text";
         code.cursorState = {};
         code.undoSteps = [];
         code.tabName = name;
         code.title = title ?? name;
-        code.tokens = {}; 
+        code.tokens = {};
+        code.customScroll = new LX.vec2;
 
         code.addEventListener('dragenter', function(e) {
             e.preventDefault();
-            this.classList.add('dragging');
+            this.parentElement.classList.add('dragging');
         });
         code.addEventListener('dragleave', function(e) {
             e.preventDefault();
-            this.classList.remove('dragging');
+            this.parentElement.remove('dragging');
         });
         code.addEventListener('drop', (e) => {
             e.preventDefault();
-            code.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) => {
 
-        code.addEventListener('scroll', (e) => {
-            this.gutter.scrollTop = code.scrollTop;
-            this.gutter.scrollLeft = code.scrollLeft;
+            // Get scroll data
 
-            // Update cursor
-            var cursor = this.cursors.children[0];
-            cursor.style.top = (cursor._top - code.scrollTop) + "px";
-            cursor.style.left = "calc( " + (cursor._left - code.scrollLeft) + "px + " + this.xPadding + ")";
+            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 );
 
-            // Update selection
-            for( let s of this.selections.childNodes ) {
-                s.style.top = (s._top - code.scrollTop) + "px";
-                s.style.left = "calc( " + (s._left - code.scrollLeft) + "px + " + this.xPadding + ")";
-            }
+            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.openedTabs[name] = code;
@@ -919,13 +1088,14 @@ class CodeEditor {
             this._refreshCodeInfo(cursor.line, cursor.position);
 
             // Restore scroll
-            this.gutter.scrollTop = this.code.scrollTop;
-            this.gutter.scrollLeft = this.code.scrollLeft;
+            this.gutter.scrollLeft = this.getScrollLeft();
+            this.gutter.scrollTop = this.getScrollTop();
         }});
         
         this.endSelection();
 
-        if(selected){
+        if( selected )
+        {
             this.code = code;  
             this.resetCursorPos(CodeEditor.CURSOR_LEFT | CodeEditor.CURSOR_TOP);
             this.processLines();
@@ -963,7 +1133,7 @@ class CodeEditor {
 
         var cursor = this.cursors.children[0];
         var code_rect = this.code.getBoundingClientRect();
-        var mouse_pos = [(e.clientX - code_rect.x) + this.getScrollLeft(), (e.clientY - code_rect.y) + this.getScrollTop()];
+        var mouse_pos = [(e.clientX - code_rect.x), (e.clientY - code_rect.y)];
 
         // Discard out of lines click...
         if( e.type != 'contextmenu' )
@@ -974,9 +1144,6 @@ class CodeEditor {
 
         if( e.type == 'mousedown' )
         {
-            if( mouse_pos[0] > this.code.scrollWidth || mouse_pos[1] > this.code.scrollHeight )
-                return; // Scrollbar click
-
             // Left click only...
             if( e.button === 2 )
             {
@@ -1067,7 +1234,7 @@ class CodeEditor {
     processClick(e, skip_refresh = false) {
 
         var code_rect = this.code.getBoundingClientRect();
-        var position = [(e.clientX - code_rect.x) + this.getScrollLeft(), (e.clientY - code_rect.y) + this.getScrollTop()];
+        var position = [(e.clientX - code_rect.x), (e.clientY - code_rect.y)];
         var ln = (position[1] / this.lineHeight)|0;
 
         if(this.code.lines[ln] == undefined) return;
@@ -1079,7 +1246,6 @@ class CodeEditor {
         
         var ch = (position[0] / this.charWidth)|0;
         var string = this.code.lines[ln].slice(0, ch);
-        // this.cursorToString(cursor, string);
         this.cursorToPosition(cursor, string.length);
 
         this.hideAutoCompleteBox();
@@ -1115,7 +1281,7 @@ class CodeEditor {
         if( deltaY >= 0 )
         {
             while( deltaY < (this.selections.childElementCount - 1) )            
-                this.selections.lastChild.remove();
+                deleteElement( this.selections.lastChild );
 
             for(let i = fromY; i <= toY; i++){
 
@@ -1158,7 +1324,7 @@ class CodeEditor {
         else // Selection goes up...
         {
             while( Math.abs(deltaY) < (this.selections.childElementCount - 1) )            
-                this.selections.firstChild.remove();
+                deleteElement( this.selections.firstChild );
 
             for(let i = toY; i <= fromY; i++){
 
@@ -1470,216 +1636,299 @@ class CodeEditor {
         }
     }
 
-    processLines( from ) {
+    processLines( from__legacy ) {
 
-        // const start = performance.now();
+        const start = performance.now();
+
+        var gutter_html = "";
+        var code_html = "";
+
+        this.resizeScrollBars();
 
-        this.gutter.innerHTML = "";
         this.code.innerHTML = "";
+        this.gutter.innerHTML = "";
 
-        for( let i = 0; i < this.code.lines.length; ++i )
+        // Get info about lines in viewport
+        const margin = 20;
+        const firstLineInViewport = (this.getScrollTop() / this.lineHeight)|0;
+        const totalLinesInViewport = ((this.code.parentElement.offsetHeight - 36) / this.lineHeight)|0;
+        const viewportRange = new LX.vec2( 
+            Math.max( firstLineInViewport - margin, 0 ), 
+            Math.min( firstLineInViewport + totalLinesInViewport + margin, this.code.lines.length )
+        );
+
+        for( let i = viewportRange.x; i < viewportRange.y; ++i )
         {
-            this.processLine( i, true );
+            gutter_html += "<span>" + (i + 1) + "</span>";
+            code_html += this.processLine( i, true );
         }
 
-        // console.log( performance.now() - start );
+        this.code.innerHTML = code_html;
+        this.gutter.innerHTML = gutter_html;
+        
+        console.log( "Num lines processed: " + (viewportRange.y - viewportRange.x), performance.now() - start );
     }
 
     processLine( linenum, force ) {
 
-        // if(!force)
-        // {
-        //     this.processLines();
-        //     return;
-        // }
-
-        delete this._building_string; // multi-line strings not supported by now
+        delete this._buildingString; // multi-line strings not supported by now
         
         // It's allowed to process only 1 line to optimize
         let linestring = this.code.lines[ linenum ];
 
-        var pre = document.createElement('pre');
-        pre.dataset['linenum'] = linenum;
-
-        // Line gutter
-        var linenumspan = document.createElement('span');
-        linenumspan.innerHTML = (linenum + 1);
-
-        if( force )
-        {
-            this.gutter.appendChild(linenumspan);
-            this.code.appendChild( pre );
-        } else
+        if( !force )
         {
-            this.gutter.childNodes[ linenum ].remove();
-            this.code.childNodes[ linenum ].remove();
-            this.gutter.insertChildAtIndex( linenumspan, linenum );
+            var pre = document.createElement('pre');
+
+            // 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 );
         }
 
-        var linespan = document.createElement('span');
-        pre.appendChild(linespan);
+        const tokensToEvaluate = this._getTokensFromString( linestring );
 
-        const to_process = this._getTokensFromString( linestring );
+        if( !tokensToEvaluate.length )
+        return "<pre></pre>";
 
-        let line_inner_html = "";
+        var line_inner_html = "";
 
         // Process all tokens
-        for( var i = 0; i < to_process.length; ++i )
+        for( var i = 0; i < tokensToEvaluate.length; ++i )
         {
             let it = i - 1;
-            let prev = to_process[it];
+            let prev = tokensToEvaluate[it];
             while( prev == ' ' ) {
                 it--;
-                prev = to_process[it];
+                prev = tokensToEvaluate[it];
             }
             
             it = i + 1;
-            let next = to_process[it];
-            while( next == ' ' || next == '"') {
+            let next = tokensToEvaluate[it];
+            while( next == ' ' || next == '"' ) {
                 it++;
-                next = to_process[it];
+                next = tokensToEvaluate[it];
             }
             
-            let token = to_process[i];
-            if( token.substr(0, 2) == '/*' )
-                this._building_block_comment = true;
-            if( token.substr(token.length - 2) == '*/' )
-                delete this._building_block_comment;
-            
-            line_inner_html += this.processToken(token, prev, next);
+            const token = tokensToEvaluate[i];
+
+            if( this.languages[ this.highlight ].blockComments ?? true )
+            {
+                if( token.substr(0, 2) == '/*' )
+                    this._buildingBlockComment = true;
+                if( token.substr(token.length - 2) == '*/' )
+                    delete this._buildingBlockComment;
+            }
+
+            line_inner_html += this.evaluateToken(token, prev, next);
+        }
+
+        // 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>";
+        }
+    }
+
+    _processTokens( tokens, offset = 0 ) {
+
+        if( this.highlight == 'C++' )
+        {
+            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];
+                while( this.isNumber( data ) )
+                {
+                    tokens[ idx - 1 ] += tokens[ idx ];
+                    tokens.splice( idx, 1 );
+                    data += tokens[idx];
+                }
+                // Scan for numbers again
+                return this._processTokens( tokens, idx );
+            }
         }
 
-        linespan.innerHTML = line_inner_html;
+        return tokens;
     }
 
     _getTokensFromString( linestring, skipNonWords ) {
 
         // Check if line comment
-        const is_comment = linestring.split('//');
-        linestring = ( is_comment.length > 1 ) ? is_comment[0] : linestring;
+        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 to_process = []; // store in a temp array so we know prev and next tokens...
-
-        for( let t of tokens )
-        {
-            if( !t.length || (skipNonWords && ( t.includes('"') || t.length < 3 )) )
-                continue;
+       //  const tokens = linestring.split(' ').join('¬ ¬').split('¬'); // trick to split without losing spaces
+        
+        let tokensToEvaluate = []; // store in a temp array so we know prev and next tokens...
 
-            if( t == ' ' ) {
-                to_process.push( t );
-                continue;
-            }
+        const pushToken = function( t ) {
+            if( (skipNonWords && ( t.includes('"') || t.length < 3 )) )
+                return;
+            tokensToEvaluate.push( t );
+        };
 
-            let iter = t.matchAll(/(::|[\[\](){}<>.,;:"'])/g);
-            let subtokens = iter.next();
-            if( subtokens.value )
+        let iter = linestring.matchAll(/(::|[\[\](){}<>.,;:*"'%@ ])/g);
+        let subtokens = iter.next();
+        if( subtokens.value )
+        {
+            let idx = 0;
+            while( subtokens.value != undefined )
             {
-                let idx = 0;
-                while( subtokens.value != undefined )
-                {
-                    const _pt = t.substring(idx, subtokens.value.index);
-                    if( _pt.length ) to_process.push( _pt );
-                    to_process.push( subtokens.value[0] );
-                    idx = subtokens.value.index + subtokens.value[0].length;
-                    subtokens = iter.next();
-                    if(!subtokens.value) {
-                        const _at = t.substring(idx);
-                        if( _at.length ) to_process.push( _at );
-                    }
+                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;
+                subtokens = iter.next();
+                if(!subtokens.value) {
+                    const _at = linestring.substring(idx);
+                    if( _at.length ) pushToken( _at );
                 }
             }
-            else to_process.push( t );
         }
+        else tokensToEvaluate.push( linestring );
 
-        if( is_comment.length > 1 && !skipNonWords )
-            to_process.push( "//" + is_comment[1] );
-            
-        return to_process;
-    }
+        // if( usesBlockComments )
+        // {
+        //     var block = false;
+
+        //     if( t.includes('/*') )
+        //     {
+        //         const idx = t.indexOf( '/*' );
+        //         tokensToEvaluate.push( t.substring( 0, idx ), '/*', t.substring( idx + 2 ) );
+        //         block |= true;
+        //     }
+        //     else if( t.includes('*/') )
+        //     {
+        //         const idx = t.indexOf( '*/' );
+        //         tokensToEvaluate.push( t.substring( 0, idx ), '*/', t.substring( idx + 2 ) );
+        //         block |= true;
+        //     }
+
+        //     if( block ) continue;
+        // }
 
-    _mustHightlightWord( token, kindArray ) {
+        if( has_comment.length > 1 && !skipNonWords )
+            pushToken( singleLineCommentToken + has_comment[1] );
 
-        return kindArray[this.highlight] && kindArray[this.highlight].indexOf(token) > -1;
+        // console.log( tokensToEvaluate );
+
+        return this._processTokens( tokensToEvaluate );
     }
 
-    processToken(token, prev, next) {
+    _mustHightlightWord( token, kindArray ) {
 
-        let sString = false;
-        let highlight = this.highlight.replace(/\s/g, '').replaceAll("+", "p").toLowerCase();
-        let inner_html = "", token_classname = "";
+        return kindArray[this.highlight] && kindArray[this.highlight][token] != undefined;
+    }
 
-        if(token == '"' || token == "'")
-        {
-            sString = (this._building_string == token); // stop string if i was building it
-            this._building_string = this._building_string ? this._building_string : token;
-        }
+    evaluateToken( token, prev, next ) {
 
         if(token == ' ')
         {
-            inner_html += token;
+            return token;
         }
         else
         {
-            if( this._building_block_comment )
-                token_classname += "cm-com";
+            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 = "";
+
+            if( this._buildingBlockComment != undefined )
+                token_classname = "cm-com";
             
-            else if( this._building_string  )
-                token_classname += "cm-str";
+            else if( this._buildingString != undefined )
+                token_classname = "cm-str";
             
             else if( this._mustHightlightWord( token, this.keywords ) )
-                token_classname += "cm-kwd";
+                token_classname = "cm-kwd";
 
             else if( this._mustHightlightWord( token, this.builtin ) )
-                token_classname += "cm-bln";
+                token_classname = "cm-bln";
 
             else if( this._mustHightlightWord( token, this.statementsAndDeclarations ) )
-                token_classname += "cm-std";
+                token_classname = "cm-std";
 
             else if( this._mustHightlightWord( token, this.symbols ) )
-                token_classname += "cm-sym";
+                token_classname = "cm-sym";
 
-            else if( token.substr(0, 2) == '//' )
-                token_classname += "cm-com";
+            else if( token.substr(0, 2) == singleLineCommentToken )
+                token_classname = "cm-com";
 
-            else if( token.substr(0, 2) == '/*' )
-                token_classname += "cm-com";
+            else if( usesBlockComments && token.substr(0, 2) == '/*' )
+                token_classname = "cm-com";
 
-            else if( token.substr(token.length - 2) == '*/' )
-                token_classname += "cm-com";
+            else if( usesBlockComments && token.substr(token.length - 2) == '*/' )
+                token_classname = "cm-com";
 
-            else if(  this.isNumber(token) || this.isNumber( token.replace(/[px]|[em]|%/g,'') ) )
-                token_classname += "cm-dec";
+            else if( this.isNumber(token) || this.isNumber( token.replace(/[px]|[em]|%/g,'') ) )
+                token_classname = "cm-dec";
 
             else if( this.isCSSClass(token, prev, next) )
-                token_classname += "cm-kwd";
+                token_classname = "cm-kwd";
 
             else if ( this.isType(token, prev, next) )
-                token_classname += "cm-typ";
+                token_classname = "cm-typ";
 
-            else if ( token[0] != '@' && next == '(' )
-                token_classname += "cm-mtd";
+            else if ( highlight == 'batch' && (token == '@' || prev == ':' || prev == '@') )
+                token_classname = "cm-kwd";
 
             else if ( highlight == 'cpp' && token.includes('#') ) // C++ preprocessor
-                token_classname += "cm-ppc";
+                token_classname = "cm-ppc";
 
-            else if ( highlight == 'cpp' && prev != 'WDWD:' && next == '::' ) // C++ Class
-                token_classname += "cm-typ";
+            else if ( highlight == 'cpp' && prev == '<' && (next == '>' || next == '*') ) // Defining template type in C++
+                token_classname = "cm-typ";
+
+            else if ( highlight == 'cpp' && (next == '::' || prev == '::' && next != '(' )) // C++ Class
+                token_classname = "cm-typ";
 
             else if ( highlight == 'css' && prev == ':' && (next == ';' || next == '!important') ) // CSS value
-                token_classname += "cm-str";
+                token_classname = "cm-str";
 
             else if ( highlight == 'css' && prev == undefined && next == ':' ) // CSS attribute
-                token_classname += "cm-typ";
+                token_classname = "cm-typ";
 
-            token_classname += " " + highlight;
-            inner_html += "<span class=' " + token_classname + "'>" + token + "</span>";
-        }
+            else if ( token[0] != '@' && next == '(' )
+                token_classname = "cm-mtd";
 
-        if(sString) delete this._building_string;
+            this._buildingString = stringEnded ? undefined : this._buildingString;
 
-        return inner_html;
+            return "<span class='" + highlight + " " + token_classname + "'>" + token + "</span>";
+        }
     }
 
     isCSSClass( token, prev, next ) {
@@ -1687,7 +1936,16 @@ class CodeEditor {
     }
 
     isNumber( token ) {
-        return token.length && !Number.isNaN(+token);
+
+        if(this.highlight == 'C++')
+        {
+            if( token.lastChar == 'f' )
+                return this.isNumber( token.substring(0, token.length - 1) )
+            else if( token.lastChar == 'u' )
+                return !(token.includes('.')) && this.isNumber( token.substring(0, token.length - 1) );
+        }
+        
+        return token.length && token != ' ' && !Number.isNaN(+token);
     }
 
     isType( token, prev, next ) {
@@ -1700,9 +1958,13 @@ class CodeEditor {
         {
             return (prev == 'class' && next == '{') || (prev == 'new' && next == '(');
         }
+        else if( this.highlight == 'C++' )
+        {
+            return (prev == 'class' && next == '{') || (prev == 'struct' && next == '{');
+        }
         else if ( this.highlight == 'WGSL' )
         {
-            const is_kwd = (this.keywords[this.highlight] && this.keywords[this.highlight].indexOf(token) == -1);
+            const is_kwd = !this._mustHightlightWord( token, this.keywords );
             return (prev == 'struct' && next == '{') || 
             ( is_kwd && 
                 ( prev == ':' && next == ')' || prev == ':' && next == ',' || prev == '>' && next == '{' 
@@ -1715,7 +1977,7 @@ class CodeEditor {
         if( !this.selection || (this.selection.fromY != this.selection.toY) )
         return false;
         
-        const _lastLeft = cursor._left;
+        this.selection.invertIfNecessary();
 
         // Insert first..
         this.code.lines[lidx] = [
@@ -1851,9 +2113,9 @@ class CodeEditor {
         // Add horizontal scroll
 
         doAsync(() => {
-            var last_char = ((this.code.scrollLeft + this.code.clientWidth) / this.charWidth)|0;
+            var last_char = ((this.code.clientWidth) / this.charWidth)|0;
             if( cursor.position >= last_char )
-                this.code.scrollLeft += this.charWidth;
+                this.setScrollLeft( this.getScrollLeft() + this.charWidth );
         });
     }
 
@@ -1869,10 +2131,12 @@ class CodeEditor {
         this.restartBlink();
         this._refreshCodeInfo( cursor.line, cursor.position );
 
+        // Add horizontal scroll
+
         doAsync(() => {
-            var first_char = (this.code.scrollLeft / this.charWidth)|0;
+            var first_char = (this.getScrollLeft() / this.charWidth)|0;
             if( (cursor.position - 1) < first_char )
-                this.code.scrollLeft -= this.charWidth;
+                this.setScrollLeft( this.getScrollLeft() - this.charWidth );
         });
     }
 
@@ -1890,9 +2154,9 @@ class CodeEditor {
         this._refreshCodeInfo( cursor.line, cursor.position );
 
         doAsync(() => {
-            var first_line = (this.code.scrollTop / this.lineHeight)|0;
+            var first_line = (this.getScrollTop() / this.lineHeight)|0;
             if( (cursor.line - 1) < first_line )
-                this.code.scrollTop -= this.lineHeight;
+                this.setScrollTop( this.getScrollTop() - this.lineHeight );
         });
     }
 
@@ -1909,9 +2173,9 @@ class CodeEditor {
         this._refreshCodeInfo( cursor.line, cursor.position );
 
         doAsync(() => {
-            var last_line = ((this.code.scrollTop  + this.code.offsetHeight) / this.lineHeight)|0;
+            var last_line = ((this.code.parentElement.offsetHeight - 32) / this.lineHeight)|0;
             if( cursor.line >= last_line )
-                this.code.scrollTop += this.lineHeight;
+                this.setScrollTop( this.getScrollTop() + this.lineHeight );
         });
     }
 
@@ -1998,13 +2262,148 @@ class CodeEditor {
     getScrollLeft() {
         
         if(!this.code) return 0;
-        return this.code.scrollLeft;
+        return this.code.customScroll.x;
     }
 
     getScrollTop() {
         
         if(!this.code) return 0;
-        return this.code.scrollTop;
+        return this.code.customScroll.y;
+    }
+
+    setScrollLeft( value, keepScrollBar ) {
+        
+        if(!this.code) return;
+        
+        const realClientWidth = (this.code.clientWidth - this.code.customScroll.x);
+        const maxWidth = Math.max( this.code.scrollWidth - realClientWidth, 0 );
+
+        value = LX.UTILS.clamp( value, 0, maxWidth );
+
+        this.code.style.marginLeft = (-value) + "px";
+
+        if( !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;
+    }
+
+    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 );
+        
+        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;
+    }
+
+    resizeScrollBars() {
+
+        const numViewportLines = Math.floor( (this.code.parentElement.offsetHeight - 36) / this.lineHeight );
+
+        if( numViewportLines > this.code.lines.length )
+        {
+            this.scrollbar.classList.add( 'scrollbar-unused' );
+            this.tabs.area.root.classList.remove( 'with-vscrollbar' );
+        }
+        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) + "%";
+        }
+
+        const numViewportChars = Math.floor( this.code.clientWidth / this.charWidth );
+        const line_lengths = this.code.lines.map( value => value.length );
+        const maxLineLength = Math.max(...line_lengths);
+
+        if( numViewportChars > maxLineLength )
+        {
+            this.hScrollbar.classList.add( 'scrollbar-unused' );
+            this.tabs.area.root.classList.remove( 'with-hscrollbar' );
+        }
+        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) + "%";
+        }
+    }
+
+    setScrollBarValue( value, type = 'vertical' ) {
+
+        if( type == 'vertical' )
+        {
+            const scrollHeight = this.scrollbarThumb.parentElement.offsetHeight;
+            const scrollBarHeight = this.scrollbarThumb.offsetHeight;
+    
+            value = LX.UTILS.clamp( value, 0, ( scrollHeight - scrollBarHeight ) );
+    
+            this.scrollbarThumb._top = value;
+            this.scrollbarThumb.style.top = this.scrollbarThumb._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";
+        }
+    }
+
+    applyHorizontalScrollFromScrollBar( value ) {
+
+        this.setScrollBarValue( value, 'horizontal');
+        this.setScrollLeft( value / this.hScrollbarThumb.size, true );
+    }
+
+    applyVerticalScrollFromScrollBar( value ) {
+
+        this.setScrollBarValue( value );
+        this.setScrollTop( value / this.scrollbarThumb.size, true );
     }
 
     getCharAtPos( cursor, offset = 0 ) {
@@ -2020,7 +2419,7 @@ class CodeEditor {
         const words = this.code.lines[col];
 
         const is_char = (char) => {
-            const exceptions = ['_'];
+            const exceptions = ['_', '#', '!'];
             const code = char.charCodeAt(0);
             return (exceptions.indexOf(char) > - 1) || (code > 47 && code < 58) || (code > 64 && code < 91) || (code > 96 && code < 123);
         }
@@ -2048,7 +2447,7 @@ class CodeEditor {
         test.innerHTML = char;
         document.body.appendChild(test);
         var rect = test.getBoundingClientRect();
-        test.remove();
+        deleteElement( test );
         const bb = [Math.floor(rect.width), Math.floor(rect.height)];
         return get_bb ? bb : bb[0];
     }
@@ -2059,6 +2458,7 @@ class CodeEditor {
     }
 
     runScript( code ) {
+
         var script = document.createElement('script');
         script.type = 'module';
         script.innerHTML = code;
@@ -2115,15 +2515,15 @@ class CodeEditor {
 
         // Add language special keys...
         suggestions = suggestions.concat(   
-            this.builtin[ this.highlight ] ?? [],
-            this.keywords[ this.highlight ] ?? [],
-            this.statementsAndDeclarations[ this.highlight ] ?? [],
-            this.types[ this.highlight ] ?? [],
-            this.utils[ this.highlight ] ?? []
+            Object.keys( this.builtin[ this.highlight ] ) ?? [],
+            Object.keys( this.keywords[ this.highlight ] ) ?? [],
+            Object.keys( this.statementsAndDeclarations[ this.highlight ] ) ?? [],
+            Object.keys( this.types[ this.highlight ] ) ?? [],
+            Object.keys( this.utils[ this.highlight ] ) ?? []
         );
 
         // Add words in current tab plus remove current word
-        suggestions = suggestions.concat( Object.keys(this.code.tokens).filter( a => a != word ) );
+        // suggestions = suggestions.concat( Object.keys(this.code.tokens).filter( a => a != word ) );
 
         // Remove 1/2 char words and duplicates...        
         suggestions = suggestions.filter( (value, index) => value.length > 2 && suggestions.indexOf(value) === index );
@@ -2183,9 +2583,8 @@ class CodeEditor {
         // Show box
         this.autocomplete.classList.toggle('show', true);
         this.autocomplete.classList.toggle('no-scrollbar', !(this.autocomplete.scrollHeight > this.autocomplete.offsetHeight));
-        this.autocomplete.style.left = (cursor._left + 36) + "px";
-        this.autocomplete.style.top = (cursor._top + 48) + "px";
-
+        this.autocomplete.style.left = (cursor._left + 36 - this.getScrollLeft()) + "px";
+        this.autocomplete.style.top = (cursor._top + 48 - this.getScrollTop()) + "px";
 
         this.isAutoCompleteActive = true;
     }