lexgui 0.1.17 → 0.1.18

package/build/components/codeeditor.js

@@ -245,12 +245,12 @@ class CodeEditor {
         // Scroll stuff
         {
             this.codeScroller = this.tabs.area.root;
-            this.viewportRangeStart = 0;
+            this.firstLineInViewport = 0;
             this.lineScrollMargin = new LX.vec2( 20, 20 ); // [ mUp, mDown ]
             window.scroller = this.codeScroller;
 
             let lastScrollTopValue = -1;
-            this.codeScroller.addEventListener( 'scroll', (e) => {
+            this.codeScroller.addEventListener( 'scroll', e => {
 
                 if( this._discardScroll )
                 {
@@ -265,36 +265,29 @@ class CodeEditor {
                 // Scroll down...
                 if( scrollTop > lastScrollTopValue )
                 {
-                    const scrollDownBoundary = (this.viewportRangeStart + this.lineScrollMargin.y) * this.lineHeight;
-
-                    if( scrollTop > scrollDownBoundary )
+                    if( this.visibleLinesViewport.y < (this.code.lines.length - 1) )
                     {
-                        this.code.style.top = (scrollDownBoundary - this.lineScrollMargin.x * this.lineHeight) + "px";
-                        this.processLines( CodeEditor.UPDATE_VISIBLE_LINES );
+                        const totalLinesInViewport = ((this.codeScroller.offsetHeight - 36) / this.lineHeight)|0;
+                        const scrollDownBoundary = 
+                            ( Math.max( this.visibleLinesViewport.y - totalLinesInViewport, 0 ) - 1 ) * this.lineHeight; 
+
+                        if( scrollTop >= scrollDownBoundary )
+                            this.processLines( CodeEditor.UPDATE_VISIBLE_LINES );
                     }
                 }
                 // Scroll up...
                 else
                 {
-                    const scrollUpBoundary = (this.viewportRangeStart + this.lineScrollMargin.x) * this.lineHeight;
-                    // console.log(scrollTop, scrollUpBoundary)
-    
-                    if( scrollTop <= scrollUpBoundary )
-                    {
-                        this.viewportRangeStart -= this.lineScrollMargin.x;
-                        this.viewportRangeStart = Math.max( this.viewportRangeStart, 0 );
-
-                        this.code.style.top = this.viewportRangeStart == 0 ? "0px" : (scrollUpBoundary - this.lineScrollMargin.x * this.lineHeight) + "px";
-                        
-                        this.processLines( CodeEditor.KEEP_VISIBLE_LINES );
-                    }
+                    const scrollUpBoundary = parseInt( this.code.style.top );
+                    if( scrollTop < scrollUpBoundary )
+                        this.processLines( CodeEditor.UPDATE_VISIBLE_LINES );
                 }
 
                 lastScrollTopValue = scrollTop;
             });
 
-            this.codeScroller.addEventListener( 'wheel', (e) => {
-                const dX = (e.deltaY > 0.0 ? 10.0 : -10.0) * ( e.shiftKey ? 1.0 : 0.0 );
+            this.codeScroller.addEventListener( 'wheel', e => {
+                const dX = ( e.deltaY > 0.0 ? 10.0 : -10.0 ) * ( e.shiftKey ? 1.0 : 0.0 );
                 if( dX != 0.0 ) this.setScrollBarValue( 'horizontal', dX );
             });
         }
@@ -309,13 +302,13 @@ class CodeEditor {
         // Add custom vertical scroll bar
         {
             this.vScrollbar = new ScrollBar( this, ScrollBar.SCROLLBAR_VERTICAL );
-            area.attach(this.vScrollbar.root);
+            area.attach( this.vScrollbar.root );
         }
 
         // Add custom horizontal scroll bar
         {
             this.hScrollbar = new ScrollBar( this, ScrollBar.SCROLLBAR_HORIZONTAL );
-            area.attach(this.hScrollbar.root);
+            area.attach( this.hScrollbar.root );
         }
 
         // Add autocomplete box
@@ -323,7 +316,7 @@ class CodeEditor {
             var box = document.createElement( 'div' );
             box.className = "autocomplete";
             this.autocomplete = box;
-            this.tabs.area.attach(box);
+            this.tabs.area.attach( box );
 
             this.isAutoCompleteActive = false;
         }
@@ -387,7 +380,8 @@ class CodeEditor {
             'WGSL': { },
             'JSON': { },
             'XML': { },
-            'Python': { },
+            'Python': { singleLineCommentToken: '#' },
+            'HTML': { },
             'Batch': { blockComments: false, singleLineCommentToken: '::' }
         };
 
@@ -411,7 +405,8 @@ class CodeEditor {
                     'texture_storage_2d_array', 'texture_storage_3d'],
             'Python': ['False', 'def', 'None', 'True', 'in', 'is', 'and', 'lambda', 'nonlocal', 'not', 'or'],
             'Batch': ['set', 'SET', 'echo', 'ECHO', 'off', 'OFF', 'del', 'DEL', 'defined', 'DEFINED', 'setlocal', 'SETLOCAL', 'enabledelayedexpansion', 'ENABLEDELAYEDEXPANSION', 'driverquery', 
-                      'DRIVERQUERY', 'print', 'PRINT']
+                      'DRIVERQUERY', 'print', 'PRINT'],
+            'HTML': ['html', 'meta', 'title', 'link', 'script', 'body', 'DOCTYPE', 'head'],
         };
         this.utils = { // These ones don't have hightlight, used as suggestions to autocomplete only...
             'JavaScript': ['querySelector', 'body', 'addEventListener', 'removeEventListener', 'remove', 'sort', 'keys', 'filter', 'isNaN', 'parseFloat', 'parseInt', 'EPSILON', 'isFinite',
@@ -428,13 +423,14 @@ class CodeEditor {
             'Python': ['int', 'type', 'float', 'map', 'list', 'ArithmeticError', 'AssertionError', 'AttributeError', 'Exception', 'EOFError', 'FloatingPointError', 'GeneratorExit', 
                       'ImportError', 'IndentationError', 'IndexError', 'KeyError', 'KeyboardInterrupt', 'LookupError', 'MemoryError', 'NameError', 'NotImplementedError', 'OSError',
                       'OverflowError', 'ReferenceError', 'RuntimeError', 'StopIteration', 'SyntaxError', 'TabError', 'SystemError', 'SystemExit', 'TypeError', 'UnboundLocalError', 
-                      'UnicodeError', 'UnicodeEncodeError', 'UnicodeDecodeError', 'UnicodeTranslateError', 'ValueError', 'ZeroDivisionError' ],
+                      'UnicodeError', 'UnicodeEncodeError', 'UnicodeDecodeError', 'UnicodeTranslateError', 'ValueError', 'ZeroDivisionError'],
             'C++': ['uint8_t', 'uint16_t', 'uint32_t']
         };
         this.builtin = {
             'JavaScript': ['document', 'console', 'window', 'navigator', 'performance'],
             'CSS': ['*', '!important'],
-            'C++': ['vector', 'list', 'map']
+            'C++': ['vector', 'list', 'map'],
+            'HTML': ['type', 'xmlns', 'PUBLIC', 'http-equiv', 'src', 'lang', 'href', 'rel', 'content', 'xml'], // attributes
         };
         this.statementsAndDeclarations = {
             'JavaScript': ['for', 'if', 'else', 'case', 'switch', 'return', 'while', 'continue', 'break', 'do', 'import', 'from', 'throw', 'async', 'try', 'catch', 'await'],
@@ -454,6 +450,7 @@ class CodeEditor {
             'CSS': ['{', '}', '(', ')', '*'],
             'Python': ['<', '>', '[', ']', '(', ')', '='],
             'Batch': ['[', ']', '(', ')', '%'],
+            'HTML': ['<', '>', '/']
         };
 
         // Convert reserved word arrays to maps so we can search tokens faster
@@ -559,9 +556,15 @@ class CodeEditor {
                 if( this.selection ) 
                 lastX += this.selection.chars;
 
-                this.startSelection( cursor );
+                if( !this.selection )
+                    this.startSelection( cursor );
                 var string = this.code.lines[ ln ].substring( idx, lastX );
-                this.selection.selectInline( idx, cursor.line, this.measureString( string ) );
+                if( this.selection.sameLine() )
+                    this.selection.selectInline( idx, cursor.line, this.measureString( string ) );
+                else
+                {
+                    this.processSelection();
+                }
             } else if( !e.keepSelection )
                 this.endSelection();
         });
@@ -570,18 +573,25 @@ class CodeEditor {
             
             if( e.shiftKey || e._shiftKey ) {
                 
-                var string = this.code.lines[ ln ].substring(cursor.position);
+                var string = this.code.lines[ ln ].substring( cursor.position );
                 if( !this.selection )
                     this.startSelection( cursor );
-                this.selection.selectInline(cursor.position, cursor.line, this.measureString(string));
+                if( this.selection.sameLine() )
+                    this.selection.selectInline(cursor.position, cursor.line, this.measureString( string ));
+                else
+                {
+                    this.resetCursorPos( CodeEditor.CURSOR_LEFT );
+                    this.cursorToString( cursor, this.code.lines[ ln ] );            
+                    this.processSelection();
+                }
             } else 
                 this.endSelection();
 
             this.resetCursorPos( CodeEditor.CURSOR_LEFT );
             this.cursorToString( cursor, this.code.lines[ ln ] );
 
-            const last_char = (this.code.clientWidth / this.charWidth)|0;
-            this.setScrollLeft( cursor.position >= last_char ? (cursor.position - last_char) * this.charWidth : 0 );
+            const last_char = ( this.code.clientWidth / this.charWidth )|0;
+            this.setScrollLeft( cursor.position >= last_char ? ( cursor.position - last_char ) * this.charWidth : 0 );
         });
 
         this.action( 'Enter', true, ( ln, cursor, e ) => {
@@ -708,7 +718,8 @@ class CodeEditor {
                 var diff = Math.max(cursor.position - from, 1);
                 var substr = word.substr(0, diff);
                 // Selections...
-                if( e.shiftKey ) if( !this.selection ) this.startSelection( cursor );
+                if( e.shiftKey ) { if( !this.selection ) this.startSelection( cursor ); }
+                else this.endSelection();
                 this.cursorToString(cursor, substr, true);
                 if( e.shiftKey ) this.processSelection();
             }
@@ -772,7 +783,8 @@ class CodeEditor {
                 var diff = cursor.position - from;
                 var substr = word.substr( diff );
                 // Selections...
-                if( e.shiftKey ) if( !this.selection ) this.startSelection( cursor );
+                if( e.shiftKey ) { if( !this.selection ) this.startSelection( cursor ); }
+                else this.endSelection();
                 this.cursorToString( cursor, substr);
                 if( e.shiftKey ) this.processSelection();
             } else {
@@ -970,12 +982,28 @@ class CodeEditor {
 
     _addUndoStep( cursor )  {
 
+        const d = new Date();
+        const current = d.getTime();
+
+        if( !this._lastTime ) {
+            this._lastTime = current;
+        } else {
+            if( ( current - this._lastTime ) > 3000 ){
+                this._lastTime = null;
+            } else {
+                // If time not enough, reset timer
+                this._lastTime = current;
+                return;
+            }
+        }
+
         var cursor = cursor ?? this.cursors.children[ 0 ];
 
         this.code.undoSteps.push( {
             lines: LX.deepCopy( this.code.lines ),
             cursor: this.saveCursor( cursor ),
-            line: cursor.line
+            line: cursor.line,
+            position: cursor.position
         } );
     }
 
@@ -1004,6 +1032,7 @@ class CodeEditor {
             case 'wgsl': return this._changeLanguage( 'WGSL' );
             case 'py': return this._changeLanguage( 'Python' );
             case 'bat': return this._changeLanguage( 'Batch' );
+            case 'html': return this._changeLanguage( 'HTML' );
             case 'txt': 
             default:
                 this._changeLanguage( 'Plain Text' );
@@ -1064,7 +1093,7 @@ class CodeEditor {
         });
     }
 
-    addTab(name, selected, title) {
+    addTab( name, selected, title ) {
         
         if(this.openedTabs[ name ])
         {
@@ -1082,6 +1111,8 @@ class CodeEditor {
         code.tabName = name;
         code.title = title ?? name;
         code.tokens = {};
+        code.style.left = "0px";
+        code.style.top = "0px";
 
         code.addEventListener( 'dragenter', function(e) {
             e.preventDefault();
@@ -1100,22 +1131,32 @@ class CodeEditor {
 
         this.openedTabs[ name ] = code;
 
-        this.tabs.add(name, code, { 'selected': selected, 'fixed': (name === '+') , 'title': code.title, 'onSelect': (e, tabname) => {
+        const ext = LX.getExtension( name );
 
-            if(tabname == '+')
-            {
-                this._onNewTab( e );
-                return;
-            }
+        this.tabs.add(name, code, { 
+            selected: selected, 
+            fixed: (name === '+') , 
+            title: code.title, 
+            icon:   ext == 'html' ? "fa-solid fa-code orange" : 
+                    ext == 'js' ? "images/js.png" :
+                    ext == 'py' ? "images/py.png" : undefined, 
+            onSelect: (e, tabname) => {
 
-            var cursor = cursor ?? this.cursors.children[ 0 ];
-            this.saveCursor( cursor, this.code.cursorState );    
-            this.code = this.openedTabs[ tabname ];
-            this.restoreCursor( cursor, this.code.cursorState );    
-            this.endSelection();
-            this._changeLanguageFromExtension( LX.getExtension( tabname ) );
-            this._refreshCodeInfo( cursor.line, cursor.position );
-        }});
+                if(tabname == '+')
+                {
+                    this._onNewTab( e );
+                    return;
+                }
+
+                var cursor = cursor ?? this.cursors.children[ 0 ];
+                this.saveCursor( cursor, this.code.cursorState );    
+                this.code = this.openedTabs[ tabname ];
+                this.restoreCursor( cursor, this.code.cursorState );    
+                this.endSelection();
+                this._changeLanguageFromExtension( LX.getExtension( tabname ) );
+                this._refreshCodeInfo( cursor.line, cursor.position );
+            }
+        });
 
         // Move into the sizer..
         this.codeSizer.appendChild( code );
@@ -1221,7 +1262,7 @@ class CodeEditor {
                     this.resetCursorPos( CodeEditor.CURSOR_LEFT );
                     this.cursorToPosition( cursor, from );
                     this.startSelection( cursor );
-                    this.selection.selectInline(from, cursor.line, this.measureString(word));
+                    this.selection.selectInline( from, cursor.line, this.measureString( word ) );
                     this.cursorToString( cursor, word ); // Go to the end of the word
                     break;
                 // Select entire line
@@ -1248,8 +1289,8 @@ class CodeEditor {
                     m.add( "Paste", () => {  this._pasteContent(); } );
                     m.add( "" );
                     m.add( "Format/JSON", () => { 
-                        let json = this.toJSONFormat(this.getText());
-                        this.code.lines = json.split("\n"); 
+                        let json = this.toJSONFormat( this.getText() );
+                        this.code.lines = json.split( "\n" ); 
                         this.processLines();
                     } );
                 }
@@ -1285,7 +1326,7 @@ class CodeEditor {
 
         var cursor = this.cursors.children[ 0 ];
 
-        if(e) this.processClick( e, true );
+        if( e ) this.processClick( e, true );
         if( !this.selection )
             this.startSelection( cursor );
 
@@ -1307,20 +1348,25 @@ class CodeEditor {
         // Selection goes down...
         if( deltaY >= 0 )
         {
-            while( deltaY < (this.selections.childElementCount - 1) )            
+            while( deltaY < ( this.selections.childElementCount - 1 ) )
                 deleteElement( this.selections.lastChild );
 
             for(let i = fromY; i <= toY; i++){
 
                 const sId = i - fromY;
+                const isVisible = i >= this.visibleLinesViewport.x && i <= this.visibleLinesViewport.y;
+                let domEl = null;
 
-                // Make sure that the line selection is generated...
-                let domEl = this.selections.childNodes[sId];
-                if(!domEl)
+                if( isVisible )
                 {
-                    domEl = document.createElement( 'div' );
-                    domEl.className = "lexcodeselection";
-                    this.selections.appendChild( domEl );
+                    // Make sure that the line selection is generated...
+                    domEl = this.selections.childNodes[ sId ];
+                    if(!domEl)
+                    {
+                        domEl = document.createElement( 'div' );
+                        domEl.className = "lexcodeselection";
+                        this.selections.appendChild( domEl );
+                    }
                 }
 
                 // Compute new width and selection margins
@@ -1329,67 +1375,80 @@ class CodeEditor {
                 if(sId == 0) // First line 2 cases (single line, multiline)
                 {
                     const reverse = fromX > toX;
-                    if(deltaY == 0) string = !reverse ? this.code.lines[ i ].substring(fromX, toX) : this.code.lines[ i ].substring(toX, fromX);
-                    else string = this.code.lines[ i ].substr(fromX);
+                    if(deltaY == 0) string = !reverse ? this.code.lines[ i ].substring( fromX, toX ) : this.code.lines[ i ].substring(toX, fromX);
+                    else string = this.code.lines[ i ].substr( fromX );
                     const pixels = (reverse && deltaY == 0 ? toX : fromX) * this.charWidth;
-                    domEl.style.left = "calc(" + pixels + "px + " + this.xPadding + ")";
+                    if( isVisible ) domEl.style.left = "calc(" + pixels + "px + " + this.xPadding + ")";
                 }
                 else
                 {
-                    string = (i == toY) ? this.code.lines[ i ].substring(0, toX) : this.code.lines[ i ]; // Last line, any multiple line...
-                    domEl.style.left = this.xPadding;
+                    string = (i == toY) ? this.code.lines[ i ].substring( 0, toX ) : this.code.lines[ i ]; // Last line, any multiple line...
+                    if( isVisible ) domEl.style.left = this.xPadding;
                 }
                 
-                const stringWidth = this.measureString(string);
-                domEl.style.width = (stringWidth || 8) + "px";
-                domEl._top = i * this.lineHeight;
-                domEl.style.top = domEl._top + "px";
+                const stringWidth = this.measureString( string );
                 this.selection.chars += stringWidth / this.charWidth;
+
+                if( isVisible )
+                {
+                    domEl.style.width = (stringWidth || 8) + "px";
+                    domEl._top = i * this.lineHeight;
+                    domEl.style.top = domEl._top + "px";
+                }
             }
         }
         else // Selection goes up...
         {
-            while( Math.abs(deltaY) < (this.selections.childElementCount - 1) )            
+            while( Math.abs( deltaY ) < ( this.selections.childElementCount - 1 ) )            
                 deleteElement( this.selections.firstChild );
 
-            for(let i = toY; i <= fromY; i++){
+            for( let i = toY; i <= fromY; i++ ){
 
                 const sId = i - toY;
+                const isVisible = i >= this.visibleLinesViewport.x && i <= this.visibleLinesViewport.y;
+                let domEl = null;
 
-                // Make sure that the line selection is generated...
-                let domEl = this.selections.childNodes[sId];
-                if(!domEl)
+                if( isVisible )
                 {
-                    domEl = document.createElement( 'div' );
-                    domEl.className = "lexcodeselection";
-                    this.selections.appendChild( domEl );
+                    // Make sure that the line selection is generated...
+                    domEl = this.selections.childNodes[ sId ];
+                    if(!domEl)
+                    {
+                        domEl = document.createElement( 'div' );
+                        domEl.className = "lexcodeselection";
+                        this.selections.appendChild( domEl );
+                    }
                 }
 
                 // Compute new width and selection margins
                 let string;
                 
-                if(sId == 0)
+                if( sId == 0 )
                 {
                     string = this.code.lines[ i ].substr(toX);
                     const pixels = toX * this.charWidth;
-                    domEl.style.left = "calc(" + pixels + "px + " + this.xPadding + ")";
+                    if( isVisible ) domEl.style.left = "calc(" + pixels + "px + " + this.xPadding + ")";
                 }
                 else
                 {
                     string = (i == fromY) ? this.code.lines[ i ].substring(0, fromX) : this.code.lines[ i ]; // Last line, any multiple line...
-                    domEl.style.left = this.xPadding;
+                    if( isVisible ) domEl.style.left = this.xPadding;
                 }
                 
-                const stringWidth = this.measureString(string);
-                domEl.style.width = (stringWidth || 8) + "px";
-                domEl._top = i * this.lineHeight;
-                domEl.style.top = domEl._top + "px";
+                const stringWidth = this.measureString( string );
                 this.selection.chars += stringWidth / this.charWidth;
+                
+                if( isVisible )
+                {
+                    domEl.style.width = (stringWidth || 8) + "px";
+                    domEl._top = i * this.lineHeight;
+                    domEl.style.top = domEl._top + "px";
+                }
             }
         }
     }
 
-    async processKey(e) {
+    async processKey( e ) {
 
         if( !this.code ) 
             return;
@@ -1399,7 +1458,7 @@ class CodeEditor {
         const skip_undo = e.detail.skip_undo ?? false;
 
         // keys with length > 1 are probably special keys
-        if( key.length > 1 && this.specialKeys.indexOf(key) == -1 )
+        if( key.length > 1 && this.specialKeys.indexOf( key ) == -1 )
             return;
 
         let cursor = this.cursors.children[ 0 ];
@@ -1446,7 +1505,6 @@ class CodeEditor {
                     return;
                 const step = this.code.undoSteps.pop();
                 this.code.lines = step.lines;
-                cursor.line = step.line;
                 this.restoreCursor( cursor, step.cursor );
                 this.processLines();
                 return;
@@ -1493,23 +1551,9 @@ class CodeEditor {
 
         // Add undo steps
 
-        const d = new Date();
-        const current = d.getTime();
-
-        if( !skip_undo )
+        if( !skip_undo && this.code.lines.length )
         {
-            if( !this._lastTime ) {
-                this._lastTime = current;
-                this._addUndoStep( cursor );
-            } else {
-                if( (current - this._lastTime) > 3000 && this.code.lines.length){
-                    this._lastTime = null;
-                    this._addUndoStep( cursor );
-                }else{
-                    // If time not enough, reset timer
-                    this._lastTime = current;
-                }
-            }
+            this._addUndoStep( cursor );
         }
 
         //  Some custom cases for word enclosing (), {}, "", '', ...
@@ -1517,7 +1561,7 @@ class CodeEditor {
         const enclosableKeys = ["\"", "'", "(", "{"];
         if( enclosableKeys.indexOf( key ) > -1 )
         {
-            if( this.encloseSelectedWordWithKey(key, lidx, cursor) ) 
+            if( this._encloseSelectedWordWithKey(key, lidx, cursor) ) 
                 return;
         }
 
@@ -1567,6 +1611,14 @@ class CodeEditor {
         // Update only the current line, since it's only an appended key
         this.processLine( lidx );
 
+        // We are out of the viewport and max length is different? Resize scrollbars...
+        const maxLineLength = this.getMaxLineLength();
+        const numViewportChars = Math.floor( this.codeScroller.clientWidth / this.charWidth );
+        if( maxLineLength >= numViewportChars && maxLineLength != this._lastMaxLineLength )
+        {
+            this.resize( maxLineLength );
+        }
+
         // Manage autocomplete
 
         if( this.useAutoComplete )
@@ -1587,6 +1639,10 @@ class CodeEditor {
             text_to_copy = "\n" + this.code.lines[ cursor.line ];
         }
         else {
+            
+            // Some selections don't depend on mouse up..
+            if( this.selection ) this.selection.invertIfNecessary();
+
             const separator = "_NEWLINE_";
             let code = this.code.lines.join(separator);
 
@@ -1603,7 +1659,7 @@ class CodeEditor {
             text_to_copy = lines.join('\n');
         }
 
-        navigator.clipboard.writeText(text_to_copy).then(() => console.log("Successfully copied"), (err) => console.error("Error"));
+        navigator.clipboard.writeText( text_to_copy ).then(() => console.log("Successfully copied"), (err) => console.error("Error"));
     }
 
     async _cutContent() {
@@ -1619,6 +1675,10 @@ class CodeEditor {
             this.resetCursorPos( CodeEditor.CURSOR_LEFT );
         }
         else {
+            
+            // Some selections don't depend on mouse up..
+            if( this.selection ) this.selection.invertIfNecessary();
+
             const separator = "_NEWLINE_";
             let code = this.code.lines.join(separator);
 
@@ -1637,7 +1697,7 @@ class CodeEditor {
             this.deleteSelection( cursor );
         }
 
-        navigator.clipboard.writeText(text_to_cut).then(() => console.log("Successfully cut"), (err) => console.error("Error"));
+        navigator.clipboard.writeText( text_to_cut ).then(() => console.log("Successfully cut"), (err) => console.error("Error"));
     }
 
     action( key, deleteSelection, fn ) {
@@ -1662,7 +1722,7 @@ class CodeEditor {
 
     toLocalLine( line ) {
 
-        const d = Math.max( this.viewportRangeStart - this.lineScrollMargin.x, 0 );
+        const d = Math.max( this.firstLineInViewport - this.lineScrollMargin.x, 0 );
         return Math.min( Math.max( line - d, 0 ), this.code.lines.length - 1 );
     }
 
@@ -1672,38 +1732,34 @@ class CodeEditor {
     }
 
     processLines( mode ) {
-
-        mode = mode ?? CodeEditor.KEEP_VISIBLE_LINES;
-
-        // console.clear();
-        console.log("--------------------------------------------");
-
-        const lastScrollTop = this.getScrollTop();
+        
         const start = performance.now();
 
-        var gutter_html = "", code_html = "";
-
+        var gutter_html = "";
+        var code_html = "";
+        
+        // Reset all lines content
         this.code.innerHTML = "";
-
+        
         // Get info about lines in viewport
-        const firstLineInViewport = mode & CodeEditor.UPDATE_VISIBLE_LINES ? 
-                                    ( (lastScrollTop / this.lineHeight)|0 ) : this.viewportRangeStart;
+        const lastScrollTop = this.getScrollTop();
+        this.firstLineInViewport = ( mode ?? CodeEditor.KEEP_VISIBLE_LINES ) & CodeEditor.UPDATE_VISIBLE_LINES ? 
+                                    ( (lastScrollTop / this.lineHeight)|0 ) : this.firstLineInViewport;
         const totalLinesInViewport = ((this.codeScroller.offsetHeight - 36) / this.lineHeight)|0;
-        this.viewportRangeStart = firstLineInViewport;
-
-        const viewportRange = new LX.vec2( 
-            Math.max( firstLineInViewport - this.lineScrollMargin.x, 0 ), 
-            Math.min( firstLineInViewport + totalLinesInViewport + this.lineScrollMargin.y, this.code.lines.length )
+        this.visibleLinesViewport = new LX.vec2( 
+            Math.max( this.firstLineInViewport - this.lineScrollMargin.x, 0 ), 
+            Math.min( this.firstLineInViewport + totalLinesInViewport + this.lineScrollMargin.y, this.code.lines.length )
         );
 
         // Add remaining lines if we are near the end of the scroll
         {
-            const diff = Math.max( this.code.lines.length - viewportRange.y, 0 );
-            if( diff < ( totalLinesInViewport + this.lineScrollMargin.y ) )
-                viewportRange.y += diff;
+            const diff = Math.max( this.code.lines.length - this.visibleLinesViewport.y, 0 );
+            if( diff <= this.lineScrollMargin.y )
+                this.visibleLinesViewport.y += diff;
         }
-            
-        for( let i = viewportRange.x; i < viewportRange.y; ++i )
+        
+        // Process visible lines
+        for( let i = this.visibleLinesViewport.x; i < this.visibleLinesViewport.y; ++i )
         {
             gutter_html += "<span>" + (i + 1) + "</span>";
             code_html += this.processLine( i, true );
@@ -1711,24 +1767,23 @@ class CodeEditor {
         
         this.code.innerHTML = code_html;
             
-        console.log("RANGE:", viewportRange);
-        console.log( "Num lines processed:",  (viewportRange.y - viewportRange.x), performance.now() - start );
-        console.log("--------------------------------------------");
+        // console.log("RANGE:", this.visibleLinesViewport);
+        // console.log( "Num lines processed:",  (this.visibleLinesViewport.y - this.visibleLinesViewport.x), performance.now() - start );
+        // console.log("--------------------------------------------");
 
+        // Update scroll data
         this.codeScroller.scrollTop = lastScrollTop;
+        this.code.style.top = ( this.visibleLinesViewport.x * this.lineHeight ) + "px";
 
-        setTimeout( () => {
-
-            // Update max viewport
-            const scrollWidth = this.getMaxLineLength() * this.charWidth;
-            const scrollHeight = this.code.lines.length * this.lineHeight + 10; // scrollbar offset
-    
-            this.codeSizer.style.minWidth = scrollWidth + "px";
-            this.codeSizer.style.minHeight = scrollHeight + "px";
+        // Update selections
+        if( this.selection )
+            this.processSelection( null, true );
 
-            this.resizeScrollBars( totalLinesInViewport );
+        // Clear tmp vars
+        delete this._buildingString; 
+        delete this._pendingString;
 
-        }, 10 );
+        this.resize();
     }
 
     processLine( linenum, force ) {
@@ -1796,7 +1851,7 @@ class CodeEditor {
                     delete this._buildingBlockComment;
             }
 
-            line_inner_html += this.evaluateToken( token, prev, next, (i == tokensToEvaluate.length - 1) );
+            line_inner_html += this._evaluateToken( token, prev, next, (i == tokensToEvaluate.length - 1) );
         }
 
         return UPDATE_LINE( line_inner_html );
@@ -1829,7 +1884,7 @@ class CodeEditor {
 
         const singleLineCommentToken = this.languages[ this.highlight ].singleLineCommentToken ?? this.defaultSingleLineCommentToken;
         const idx = linestring.indexOf( singleLineCommentToken );
-        
+
         if( idx > -1 )
         {
             const stringKeys = Object.values( this.stringKeys );
@@ -1870,7 +1925,7 @@ class CodeEditor {
             tokensToEvaluate.push( t );
         };
 
-        let iter = linestring.matchAll(/(::|[\[\](){}<>.,;:*"'%@ ])/g);
+        let iter = linestring.matchAll(/(::|[\[\](){}<>.,;:*"'%@!/= ])/g);
         let subtokens = iter.next();
         if( subtokens.value )
         {
@@ -1923,7 +1978,7 @@ class CodeEditor {
         return kindArray[this.highlight] && kindArray[this.highlight][token] != undefined;
     }
 
-    evaluateToken( token, prev, next, isLastToken ) {
+    _evaluateToken( token, prev, next, isLastToken ) {
 
         const highlight = this.highlight.replace(/\s/g, '').replaceAll("+", "p").toLowerCase();
         const customStringKeys = Object.assign( {}, this.stringKeys );
@@ -1950,7 +2005,7 @@ class CodeEditor {
         {
             if( this._buildingString != undefined )
             {
-                this.appendStringToken( token );
+                this._appendStringToken( token );
                 return "";
             }
             return token;
@@ -1967,7 +2022,7 @@ class CodeEditor {
                 token_classname = "cm-com";
             
             else if( this._buildingString != undefined )
-                discardToken = this.appendStringToken( token );
+                discardToken = this._appendStringToken( token );
             
             else if( this._mustHightlightWord( token, this.keywords ) )
                 token_classname = "cm-kwd";
@@ -1981,28 +2036,28 @@ class CodeEditor {
             else if( this._mustHightlightWord( token, this.symbols ) )
                 token_classname = "cm-sym";
 
-            else if( token.substr(0, 2) == singleLineCommentToken )
+            else if( token.substr( 0, singleLineCommentToken.length ) == singleLineCommentToken )
                 token_classname = "cm-com";
 
-            else if( usesBlockComments && token.substr(0, 2) == '/*' )
+            else if( usesBlockComments && token.substr( 0, 2 ) == '/*' )
                 token_classname = "cm-com";
 
-            else if( usesBlockComments && token.substr(token.length - 2) == '*/' )
+            else if( usesBlockComments && token.substr( token.length - 2 ) == '*/' )
                 token_classname = "cm-com";
 
-            else if( this.isNumber(token) || this.isNumber( token.replace(/[px]|[em]|%/g,'') ) )
+            else if( this.isNumber( token ) || this.isNumber( token.replace(/[px]|[em]|%/g,'') ) )
                 token_classname = "cm-dec";
 
-            else if( this.isCSSClass(token, prev, next) )
+            else if( this._isCSSClass( token, prev, next ) )
                 token_classname = "cm-kwd";
 
-            else if ( this.isType(token, prev, next) )
+            else if ( this._isType( token, prev, next ) )
                 token_classname = "cm-typ";
 
-            else if ( highlight == 'batch' && (token == '@' || prev == ':' || prev == '@') )
+            else if ( highlight == 'batch' && ( token == '@' || prev == ':' || prev == '@' ) )
                 token_classname = "cm-kwd";
 
-            else if ( highlight == 'cpp' && token.includes('#') ) // C++ preprocessor
+            else if ( highlight == 'cpp' && token.includes( '#' ) ) // C++ preprocessor
                 token_classname = "cm-ppc";
 
             else if ( highlight == 'cpp' && prev == '<' && (next == '>' || next == '*') ) // Defining template type in C++
@@ -2024,7 +2079,7 @@ class CodeEditor {
             // We finished constructing a string
             if( this._buildingString && ( this._stringEnded || isLastToken ) )
             {
-                token = this.getCurrentString();
+                token = this._getCurrentString();
                 token_classname = "cm-str";
                 discardToken = false;
             }
@@ -2035,6 +2090,9 @@ class CodeEditor {
             if( discardToken )
                 return "";
 
+            token = token.replace( "<", "&lt;" );
+            token = token.replace( ">", "&gt;" );
+
             // No highlighting, no need to put it inside another span..
             if( !token_classname.length )
                 return token;
@@ -2043,7 +2101,7 @@ class CodeEditor {
         }
     }
 
-    appendStringToken( token ) {
+    _appendStringToken( token ) {
 
         if( !this._pendingString )
             this._pendingString = "";
@@ -2053,14 +2111,14 @@ class CodeEditor {
         return true;
     }
 
-    getCurrentString() {
+    _getCurrentString() {
 
         const chars = this._pendingString;
         delete this._pendingString;
         return chars;
     }
 
-    isCSSClass( token, prev, next ) {
+    _isCSSClass( token, prev, next ) {
         return this.highlight == 'CSS' && prev == '.';
     }
 
@@ -2077,7 +2135,7 @@ class CodeEditor {
         return token.length && token != ' ' && !Number.isNaN(+token);
     }
 
-    isType( token, prev, next ) {
+    _isType( token, prev, next ) {
         
         // Common case
         if( this._mustHightlightWord( token, this.types ) )
@@ -2101,7 +2159,7 @@ class CodeEditor {
         }
     }
 
-    encloseSelectedWordWithKey( key, lidx, cursor ) {
+    _encloseSelectedWordWithKey( key, lidx, cursor ) {
 
         if( !this.selection || (this.selection.fromY != this.selection.toY) )
         return false;
@@ -2213,12 +2271,13 @@ class CodeEditor {
         const post = code.slice( index + num_chars );
 
         this.code.lines = ( pre + post ).split( separator );
-        this.processLines();
-
+        
         this.cursorToLine( cursor, this.selection.fromY, true );
         this.cursorToPosition( cursor, this.selection.fromX );
         
         this.endSelection();
+
+        this.processLines();
         this._refreshCodeInfo( cursor.line, cursor.position );
     }
 
@@ -2236,14 +2295,15 @@ class CodeEditor {
         cursor._left += this.charWidth;
         cursor.style.left = "calc( " + cursor._left + "px + " + this.xPadding + " )";
         cursor.position++;
+
         this.restartBlink();
         this._refreshCodeInfo( cursor.line, cursor.position );
 
         // Add horizontal scroll
 
         doAsync(() => {
-            var last_char = ((this.codeScroller.clientWidth + this.getScrollLeft()) / this.charWidth)|0;
-            if( cursor.position >= last_char )
+            var viewportSizeX = ( this.codeScroller.clientWidth + this.getScrollLeft() ) - 48; // Gutter offset
+            if( (cursor.position * this.charWidth) >= viewportSizeX )
                 this.setScrollLeft( this.getScrollLeft() + this.charWidth );
         });
     }
@@ -2253,18 +2313,18 @@ class CodeEditor {
         if(!key) return;
         cursor = cursor ?? this.cursors.children[ 0 ];
         cursor._left -= this.charWidth;
-        cursor._left = Math.max(cursor._left, 0);
+        cursor._left = Math.max( cursor._left, 0 );
         cursor.style.left = "calc( " + cursor._left + "px + " + this.xPadding + " )";
         cursor.position--;
-        cursor.position = Math.max(cursor.position, 0);
+        cursor.position = Math.max( cursor.position, 0 );
         this.restartBlink();
         this._refreshCodeInfo( cursor.line, cursor.position );
 
         // Add horizontal scroll
 
         doAsync(() => {
-            var first_char = (this.getScrollLeft() / this.charWidth)|0;
-            if( (cursor.position - 1) < first_char )
+            var viewportSizeX = this.getScrollLeft(); // Gutter offset
+            if( ( ( cursor.position - 1 ) * this.charWidth ) < viewportSizeX )
                 this.setScrollLeft( this.getScrollLeft() - this.charWidth );
         });
     }
@@ -2283,7 +2343,7 @@ class CodeEditor {
         this._refreshCodeInfo( cursor.line, cursor.position );
 
         doAsync(() => {
-            var first_line = (this.getScrollTop() / this.lineHeight)|0;
+            var first_line = ( this.getScrollTop() / this.lineHeight )|0;
             if( (cursor.line - 1) < first_line )
                 this.setScrollTop( this.getScrollTop() - this.lineHeight );
         });
@@ -2302,7 +2362,7 @@ class CodeEditor {
         this._refreshCodeInfo( cursor.line, cursor.position );
 
         doAsync(() => {
-            var last_line = ((this.codeScroller.offsetHeight + this.getScrollTop()) / this.lineHeight)|0;
+            var last_line = ( ( this.codeScroller.offsetHeight + this.getScrollTop() ) / this.lineHeight )|0;
             if( cursor.line >= last_line )
                 this.setScrollTop( this.getScrollTop() + this.lineHeight );
         });
@@ -2344,7 +2404,7 @@ class CodeEditor {
 
         cursor = cursor ?? this.cursors.children[ 0 ];
         cursor.line = state.line ?? 0;
-        cursor.position = state.charPos ?? 0;
+        cursor.position = state.position ?? 0;
 
         cursor._left = state.left ?? 0;
         cursor.style.left = "calc(" + (cursor._left - this.getScrollLeft()) + "px + " + this.xPadding + ")";
@@ -2414,9 +2474,32 @@ class CodeEditor {
         this.setScrollBarValue( 'vertical' );
     }
 
-    resizeScrollBars( numViewportLines ) {
+    resize( pMaxLength ) {
+        
+        setTimeout( () => {
+
+            // Update max viewport
+            const maxLineLength = pMaxLength ?? this.getMaxLineLength();
+            const scrollWidth = maxLineLength * this.charWidth;
+            const scrollHeight = this.code.lines.length * this.lineHeight;
+
+            this._lastMaxLineLength = maxLineLength;
+
+            this.codeSizer.style.minWidth = scrollWidth + "px";
+            this.codeSizer.style.minHeight = scrollHeight + "px";
+
+            this.resizeScrollBars();
+
+            // console.warn("Resize editor viewport");
+
+        }, 10 );
+    }
+
+    resizeScrollBars() {
+
+        const totalLinesInViewport = ((this.codeScroller.offsetHeight - 36) / this.lineHeight)|0;
 
-        if( numViewportLines > this.code.lines.length )
+        if( totalLinesInViewport > this.code.lines.length )
         {
             this.codeScroller.classList.remove( 'with-vscrollbar' );
             this.vScrollbar.root.classList.add( 'scrollbar-unused' );
@@ -2425,13 +2508,12 @@ class CodeEditor {
         {
             this.codeScroller.classList.add( 'with-vscrollbar' );
             this.vScrollbar.root.classList.remove( 'scrollbar-unused' );
-            this.vScrollbar.thumb.size = (numViewportLines / this.code.lines.length);
+            this.vScrollbar.thumb.size = (totalLinesInViewport / this.code.lines.length);
             this.vScrollbar.thumb.style.height = (this.vScrollbar.thumb.size * 100.0) + "%";
         }
 
         const numViewportChars = Math.floor( this.codeScroller.clientWidth / this.charWidth );
-        const line_lengths = this.code.lines.map( value => value.length );
-        const maxLineLength = Math.max(...line_lengths);
+        const maxLineLength = this._lastMaxLineLength;
 
         if( numViewportChars > maxLineLength )
         {
@@ -2625,11 +2707,11 @@ class CodeEditor {
 
         // Add language special keys...
         suggestions = suggestions.concat(   
-            Object.keys( this.builtin[ this.highlight ] ) ?? [],
-            Object.keys( this.keywords[ this.highlight ] ) ?? [],
-            Object.keys( this.statementsAndDeclarations[ this.highlight ] ) ?? [],
-            Object.keys( this.types[ this.highlight ] ) ?? [],
-            Object.keys( this.utils[ this.highlight ] ) ?? []
+            Object.keys( this.builtin[ this.highlight ] ?? {} ),
+            Object.keys( this.keywords[ this.highlight ] ?? {} ),
+            Object.keys( this.statementsAndDeclarations[ this.highlight ] ?? {} ),
+            Object.keys( this.types[ this.highlight ] ?? {} ),
+            Object.keys( this.utils[ this.highlight ] ?? {} )
         );
 
         // Add words in current tab plus remove current word

package/build/lexgui.css

@@ -9,7 +9,7 @@
   --global-color-primary: #232323;
   --global-color-secondary: #343434;
   --global-color-terciary: #444;
-	--global-branch-darker: #28282a;
+	--global-branch-darker: #252525;
 	--branch-title-background: #2e3338;
   --branch-title-inactive-background: #42484e;
   --global-button-color: #4e4e4e;
@@ -21,6 +21,9 @@
   --transition-time: 1000;
 } 
 
+/* Some global colors */
+.orange { color: orange }
+
 ::-webkit-scrollbar {
   height: 3px;
   width: 4px;
@@ -2002,6 +2005,7 @@ meter::-webkit-meter-even-less-good-value {
   -ms-user-select: none; /* IE 10+ */
   user-select: none; /* Standard syntax */
   transition: 0.2s;
+  line-height: 16px;
 }
 
 .lexareatabs.row {
@@ -2692,6 +2696,19 @@ ul.lexassetscontent {
   padding: 0px;
 }
 
+.codebasearea .lexareatab i {
+  font-size: 10px;
+  margin-right: 4px;
+  vertical-align: middle;
+}
+
+.codebasearea .lexareatab img {
+  width: 12px;
+  height: 12px;
+  margin-right: 4px;
+  vertical-align: middle;
+}
+
 .lexcodeeditor ::-webkit-scrollbar {
   width: 6px;
   height: 6px;
@@ -2751,10 +2768,6 @@ ul.lexassetscontent {
   width: calc( 100% - 10px ) !important;
 }
 
-/* .lexcodeeditor .codetabsarea.with-hscrollbar {
-  height: calc( 100% - 72px ) !important;
-} */
-
 .lexcodeeditor .codetabsarea.dragging {
   background-color: var(--global-color-secondary);
 }
@@ -2786,7 +2799,7 @@ ul.lexassetscontent {
   font-family: 'Inconsolata', monospace;
   font-size: inherit;
   font-weight: bold;
-  margin: 4px 0px;
+  margin: 0px 0px;
   white-space: pre;
   word-wrap: normal;
   line-height: inherit;
@@ -2794,7 +2807,7 @@ ul.lexassetscontent {
   position: relative;
   overflow: visible;
   -webkit-tap-highlight-color: transparent;
-  height: 16px;
+  height: 20px;
   pointer-events: none;
 }
 
@@ -2819,9 +2832,9 @@ ul.lexassetscontent {
 pre .line-gutter {
   color: #888;
   width: 48px;
-  height: 16px;
+  height: 20px;
   font-size: 14px;
-  line-height: 22px;
+  line-height: 20px;
   text-align: center;
   -webkit-user-select: none; /* Safari 3.1+ */
   -moz-user-select: none; /* Firefox 2+ */
@@ -2843,7 +2856,6 @@ pre .line-gutter {
   margin: 0;
   padding: 0;
   position: relative;
-  z-index: 3;
   pointer-events: none;
 }
 
@@ -2867,7 +2879,7 @@ pre .line-gutter {
   z-index: 0 !important;
   left: 0px;
   top: 0px;
-  height: 18px;
+  height: 20px;
 }
 
 .lexcodescrollbar {
@@ -2881,6 +2893,7 @@ pre .line-gutter {
   margin-top: 26px;
   z-index: 1 !important;
   right: 0px;
+  pointer-events: none;
 }
 
 .lexcodescrollbar.horizontal {
@@ -2906,6 +2919,7 @@ pre .line-gutter {
   width: 10px;
   height: 10px;
   transition: linear 0.1s background-color;
+  pointer-events: all;
 }
 
 .lexcodescrollbar div:hover { /* thumb */
@@ -2961,7 +2975,7 @@ pre .line-gutter {
   margin: 0;
   pointer-events: unset;
   cursor: default;
-  height: 18px;
+  height: 22px;
 }
 
 .lexcodeeditor .autocomplete pre a {
@@ -3073,9 +3087,10 @@ pre .line-gutter {
 .cm-sym.batch { color: #dfd85e; } /* symbol */
 .cm-mtd.batch { color: inherit } /* method */
 
-/* plain color */
-.cm-str.plaintext, .cm-kwd.plaintext, .cm-com.plaintext, .cm-typ.plaintext, .cm-std.plaintext, 
-.cm-bln.plaintext, .cm-dec.plaintext, .cm-sym.plaintext, .cm-mtd.plaintext { color: inherit; }
+.cm-str.html { color: #ca7d59; } /* string */
+.cm-kwd.html { color: #2194ce; } /* keyword */
+.cm-bln.html { color: #b4d7ec; } /* builtin */
+.cm-sym.html { color: #929292; } /* symbol */
 
 
 /* Node Graph */

package/build/lexgui.js

@@ -12,7 +12,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
     */
 
     var LX = global.LX = {
-        version: "0.1.17",
+        version: "0.1.18",
         ready: false,
         components: [], // specific pre-build components
         signals: {} // events and triggers
@@ -1541,11 +1541,23 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             contentEl.style.display = isSelected ? "block" : "none";
             contentEl.classList.add("lextabcontent");
 
+            // Process icon
+            if( options.icon )
+            {
+                if( options.icon.includes( 'fa-' ) ) // It's fontawesome icon...
+                    options.icon = "<i class='" + options.icon + "'></i>";
+                else // an image..
+                {
+                    const rootPath = "https://raw.githubusercontent.com/jxarco/lexgui.js/master/";
+                    options.icon = "<img src='" + ( rootPath + options.icon ) + "'>";
+                }
+            }
+
             // Create tab
             let tabEl = document.createElement('span');
             tabEl.dataset["name"] = name;
             tabEl.className = "lexareatab" + (isSelected ? " selected" : "");
-            tabEl.innerHTML = name;
+            tabEl.innerHTML = (options.icon ?? "") + name;
             tabEl.id = name.replace(/\s/g, '') + Tabs.TAB_ID++;
             tabEl.title = options.title;
             tabEl.selected = isSelected ?? false;

package/build/lexgui.module.js

@@ -8,7 +8,7 @@
 */
 
 var LX = {
-    version: "0.1.17",
+    version: "0.1.18",
     ready: false,
     components: [], // specific pre-build components
     signals: {} // events and triggers
@@ -1537,11 +1537,23 @@ class Tabs {
         contentEl.style.display = isSelected ? "block" : "none";
         contentEl.classList.add("lextabcontent");
 
+        // Process icon
+        if( options.icon )
+        {
+            if( options.icon.includes( 'fa-' ) ) // It's fontawesome icon...
+                options.icon = "<i class='" + options.icon + "'></i>";
+            else // an image..
+            {
+                const rootPath = "https://raw.githubusercontent.com/jxarco/lexgui.js/master/";
+                options.icon = "<img src='" + ( rootPath + options.icon ) + "'>";
+            }
+        }
+
         // Create tab
         let tabEl = document.createElement('span');
         tabEl.dataset["name"] = name;
         tabEl.className = "lexareatab" + (isSelected ? " selected" : "");
-        tabEl.innerHTML = name;
+        tabEl.innerHTML = (options.icon ?? "") + name;
         tabEl.id = name.replace(/\s/g, '') + Tabs.TAB_ID++;
         tabEl.title = options.title;
         tabEl.selected = isSelected ?? false;

package/demo.js

@@ -487,7 +487,7 @@ function fillPanel( panel ) {
     panel.sameLine(2);
     panel.addFile("Img1", data => { console.log(data) }, {} );
     panel.addFile("Img2", data => { console.log(data) }, {} );
-    panel.addDropdown("Best Engine", ["Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot", "Unity", "Unreal Engine"], "Unity", (value, event) => {
+    panel.addDropdown("Best Engine", ["Godot", "Unity", "Unreal Engine"], "Unity", (value, event) => {
         console.log(value);
     });
 

package/examples/code_editor.html

@@ -24,7 +24,7 @@
         let area = LX.init();
 
         // split main area
-        var [leftArea, rightArea] = area.split({ sizes:["40%","60%"] });
+        var [leftArea, rightArea] = area.split({ sizes:["55%","45%"] });
 
         // add canvas to leftArea
         var canvas = document.createElement('canvas');
@@ -47,20 +47,8 @@
             // disable_edition: true
         });
 
-        // editor.loadFile( "../data/test.json" );
-        // editor.loadFile( "../data/style.css" );
-        // editor.loadFile( "../data/script.js" );
-        // editor.loadFile( "../data/engine.cpp" );
         editor.loadFile( "../demo.js" );
         
-        // var button = document.createElement('button');
-        // button.value = "CLICK ME";
-        // button.style.width = "100px";
-        // button.style.height = "100px";
-        // button.style.position = "absolute";
-        // button.onclick = editor.processLines.bind(editor);
-        // document.body.appendChild( button );
-
         var ctx = canvas.getContext("2d");
         ctx.fillStyle = "#b7a9b1";
         ctx.font = "48px Monospace";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "lexgui",
-    "version": "0.1.17",
+    "version": "0.1.18",
     "description": "JS library to create web graphical user interfaces",
     "type": "module",
     "main": "./build/lexgui.js",