lexgui 0.1.26 → 0.1.28

package/build/components/codeeditor.js

@@ -313,7 +313,7 @@ class CodeEditor {
         }
 
         this.base_area = area;
-        this.area = new LX.Area( { className: "lexcodeeditor", height: "auto", no_append: true } );
+        this.area = new LX.Area( { className: "lexcodeeditor", height: "100%", no_append: true } );
 
         this.tabs = this.area.addTabs( { onclose: (name) => {
             delete this.openedTabs[ name ];
@@ -377,17 +377,7 @@ class CodeEditor {
         this.xPadding = "48px";
 
         // Add main cursor
-        {
-            this._addCursor( 0, 0, true, true );
-
-            Object.defineProperty( this, 'line', {
-                get: (v) => { return this._getCurrentCursor().line }
-            } );
-    
-            Object.defineProperty( this, 'position', {
-                get: (v) => { return this._getCurrentCursor().position }
-            } );
-        }
+        this._addCursor( 0, 0, true, true );
 
         // Scroll stuff
         {
@@ -600,12 +590,17 @@ class CodeEditor {
 
         // Convert reserved word arrays to maps so we can search tokens faster
 
-        for( let lang in CodeEditor.keywords ) CodeEditor.keywords[lang] = CodeEditor.keywords[lang].reduce((a, v) => ({ ...a, [v]: true}), {});
-        for( let lang in CodeEditor.utils ) CodeEditor.utils[lang] = CodeEditor.utils[lang].reduce((a, v) => ({ ...a, [v]: true}), {});
-        for( let lang in CodeEditor.types ) CodeEditor.types[lang] = CodeEditor.types[lang].reduce((a, v) => ({ ...a, [v]: true}), {});
-        for( let lang in CodeEditor.builtin ) CodeEditor.builtin[lang] = CodeEditor.builtin[lang].reduce((a, v) => ({ ...a, [v]: true}), {});
-        for( let lang in CodeEditor.statementsAndDeclarations ) CodeEditor.statementsAndDeclarations[lang] = CodeEditor.statementsAndDeclarations[lang].reduce((a, v) => ({ ...a, [v]: true}), {});
-        for( let lang in CodeEditor.symbols ) CodeEditor.symbols[lang] = CodeEditor.symbols[lang].reduce((a, v) => ({ ...a, [v]: true}), {});
+        if( !CodeEditor._staticReady )
+        {
+            for( let lang in CodeEditor.keywords ) CodeEditor.keywords[lang] = CodeEditor.keywords[lang].reduce((a, v) => ({ ...a, [v]: true}), {});
+            for( let lang in CodeEditor.utils ) CodeEditor.utils[lang] = CodeEditor.utils[lang].reduce((a, v) => ({ ...a, [v]: true}), {});
+            for( let lang in CodeEditor.types ) CodeEditor.types[lang] = CodeEditor.types[lang].reduce((a, v) => ({ ...a, [v]: true}), {});
+            for( let lang in CodeEditor.builtin ) CodeEditor.builtin[lang] = CodeEditor.builtin[lang].reduce((a, v) => ({ ...a, [v]: true}), {});
+            for( let lang in CodeEditor.statementsAndDeclarations ) CodeEditor.statementsAndDeclarations[lang] = CodeEditor.statementsAndDeclarations[lang].reduce((a, v) => ({ ...a, [v]: true}), {});
+            for( let lang in CodeEditor.symbols ) CodeEditor.symbols[lang] = CodeEditor.symbols[lang].reduce((a, v) => ({ ...a, [v]: true}), {});
+    
+            CodeEditor._staticReady = true;
+        }
 
         // Action keys
 
@@ -698,14 +693,31 @@ class CodeEditor {
 
         this.action( 'Tab', true, ( ln, cursor, e ) => {
             
-            if( this.isAutoCompleteActive )
+            if( this._skipTabs )
             {
-                this.autoCompleteWord( cursor );
-            } else 
+                this._skipTabs--;
+                if( !this._skipTabs )
+                    delete this._skipTabs;
+            }
+            else if( this.isAutoCompleteActive )
             {
-                this.addSpaces( this.tabSpaces );
+                this.autoCompleteWord();
             }
-        });
+            else
+            {
+                this._addUndoStep( cursor );
+
+                if( e && e.shiftKey )
+                {
+                    this._removeSpaces( cursor );
+                }
+                else
+                {
+                    const indentSpaces = this.tabSpaces - (cursor.position % this.tabSpaces);
+                    this._addSpaces( indentSpaces );
+                }
+            }
+        }, "shiftKey");
 
         this.action( 'Home', false, ( ln, cursor, e ) => {
             
@@ -718,7 +730,8 @@ class CodeEditor {
             let lastX = cursor.position;
 
             this.resetCursorPos( CodeEditor.CURSOR_LEFT, cursor );
-            if(idx > 0) this.cursorToString( cursor, prestring );
+            if(idx > 0)
+                this.cursorToString( cursor, prestring );
             this.setScrollLeft( 0 );
 
             // Merge cursors
@@ -777,7 +790,7 @@ class CodeEditor {
             // Add word
             if( this.isAutoCompleteActive )
             {
-                this.autoCompleteWord( cursor );
+                this.autoCompleteWord();
                 return;
             }
 
@@ -804,10 +817,10 @@ class CodeEditor {
 
             if( _c0 == '{' && _c1 == '}' ) {
                 this.code.lines.splice( cursor.line, 0, "" );
-                this.addSpaceTabs( tabs + 1 );
+                this._addSpaceTabs( cursor, tabs + 1 );
                 this.code.lines[ cursor.line + 1 ] = " ".repeat(spaces) + this.code.lines[ cursor.line + 1 ];
             } else {
-                this.addSpaceTabs( tabs );
+                this._addSpaceTabs( cursor, tabs );
             }
 
             this.processLines();
@@ -892,19 +905,28 @@ class CodeEditor {
                 const [word, from, to] = this.getWordAtPos( cursor, -1 );
                 // If no length, we change line..
                 if( !word.length && this.lineUp( cursor, true ) ) {
+                    const cS = e.cancelShift, kS = e.keepSelection;
                     e.cancelShift = true;
                     e.keepSelection = true;
                     this.actions[ 'End' ].callback( cursor.line, cursor, e );
-                    delete e.cancelShift;
-                    delete e.keepSelection;
+                    e.cancelShift = cS;
+                    e.keepSelection = kS;
                 }
                 var diff = Math.max( cursor.position - from, 1 );
                 var substr = word.substr( 0, diff );
+
                 // Selections...
-                if( e.shiftKey ) { if( !cursor.selection ) this.startSelection( cursor ); }
-                else this.endSelection();
+                if( e.shiftKey ) {
+                    if( !cursor.selection )
+                    this.startSelection( cursor ); 
+                }
+                else
+                    this.endSelection();
+
                 this.cursorToString( cursor, substr, true );
-                if( e.shiftKey ) this._processSelection( cursor, e, false, true );
+
+                if( e.shiftKey )
+                    this._processSelection( cursor, e );
             }
             else {
                 var letter = this.getCharAtPos( cursor, -1 );
@@ -1462,14 +1484,25 @@ class CodeEditor {
 
             panel.sameLine();
             panel.addLabel( this.code.title, { float: 'right', signal: "@tab-name" });
-            panel.addLabel( "Ln " + 1, { width: "64px", signal: "@cursor-line" });
-            panel.addLabel( "Col " + 1, { width: "64px", signal: "@cursor-pos" });
+            panel.addLabel( "Ln " + 1, { maxWidth: "48px", signal: "@cursor-line" });
+            panel.addLabel( "Col " + 1, { maxWidth: "48px", signal: "@cursor-pos" });
+            panel.addButton( null, "Spaces: " + this.tabSpaces, ( value, event ) => {
+                LX.addContextMenu( "Spaces", event, m => {
+                    const options = [ 2, 4, 8 ];
+                    for( const n of options )
+                        m.add( n, (v) => {
+                            this.tabSpaces = v;
+                            this.processLines();
+                            this._updateDataInfoPanel( "@tab-spaces", "Spaces: " + this.tabSpaces );
+                        } );
+                });
+            }, { width: "10%", nameWidth: "15%", signal: "@tab-spaces" });
             panel.addButton( "<b>{ }</b>", this.highlight, ( value, event ) => {
                 LX.addContextMenu( "Language", event, m => {
                     for( const lang of Object.keys(this.languages) )
                         m.add( lang, this._changeLanguage.bind(this) );
                 });
-            }, { width: "25%", nameWidth: "15%", signal: "@highlight" });
+            }, { width: "17.5%", nameWidth: "15%", signal: "@highlight" });
             panel.endLine();
 
             return panel;
@@ -1878,8 +1911,8 @@ class CodeEditor {
             let ccw = true;
 
             // Check if we must change ccw or not ... (not with mouse)
-            if( !isMouseEvent && this.line >= cursor.selection.fromY && 
-                (this.line == cursor.selection.fromY ? this.position >= cursor.selection.fromX : true) )
+            if( !isMouseEvent && cursor.line >= cursor.selection.fromY && 
+                (cursor.line == cursor.selection.fromY ? cursor.position >= cursor.selection.fromX : true) )
             {
                 ccw = ( e && this._lastSelectionKeyDir && ( e.key == 'ArrowRight' || e.key == 'ArrowDown' || e.key == 'End' ) );
             }
@@ -2188,12 +2221,13 @@ class CodeEditor {
                 this.hideAutoCompleteBox();
                 return;
             case 'arrowdown': // add cursor below only for the main cursor..
-                if( isLastCursor && this.code.lines[ lidx + 1 ] != undefined )
+                // Make sure shift is not pressed..
+                if( !e.shiftKey && isLastCursor && this.code.lines[ lidx + 1 ] != undefined )
                 {
                     var new_cursor = this._addCursor( cursor.line, cursor.position, true );
                     this.lineDown( new_cursor );
+                    return;
                 }
-                return;
             }
         }
 
@@ -2231,10 +2265,12 @@ class CodeEditor {
 
         for( const actKey in this.actions ) {
 
-            if( key != actKey ) continue;
+            if( key != actKey )
+                continue;
+
             e.preventDefault();
 
-            if( this.actions[ key ].deleteSelection && cursor.selection )
+            if( this._actionMustDelete( cursor, this.actions[ key ], e ) )
                 this.actions['Backspace'].callback( lidx, cursor, e );
 
             return this.actions[ key ].callback( lidx, cursor, e );
@@ -2529,14 +2565,22 @@ class CodeEditor {
         }
     }
 
-    action( key, deleteSelection, fn ) {
+    action( key, deleteSelection, fn, eventSkipDelete ) {
 
         this.actions[ key ] = {
+            "key": key,
             "callback": fn,
-            "deleteSelection": deleteSelection
+            "deleteSelection": deleteSelection,
+            "eventSkipDelete": eventSkipDelete
         };
     }
 
+    _actionMustDelete( cursor, action, e ) {
+
+        return cursor.selection && action.deleteSelection &&
+            ( action.eventSkipDelete ? !e[ action.eventSkipDelete ] : true );
+    }
+
     scanWordSuggestions() {
 
         this.code.tokens = {};
@@ -2861,111 +2905,98 @@ class CodeEditor {
         
         const usesBlockComments = lang.blockComments ?? true;
         const blockCommentsTokens = lang.blockCommentsTokens ?? this.defaultBlockCommentTokens;
+        const singleLineCommentToken = lang.singleLineCommentToken ?? this.defaultSingleLineCommentToken;
+        
+        let token_classname = "";
+        let discardToken = false;
 
-        if( !usePreviousTokenToCheckString && token == ' ' )
-        {
-            if( this._buildingString != undefined )
-            {
-                this._appendStringToken( token );
-                return "";
-            }
-            return token;
-        }
-        else
-        {
-            const singleLineCommentToken = lang.singleLineCommentToken ?? this.defaultSingleLineCommentToken;
-            
-            let token_classname = "";
-            let discardToken = false;
-
-            if( this._buildingBlockComment != undefined )
-                token_classname = "cm-com";
-            
-            else if( this._buildingString != undefined )
-                discardToken = this._appendStringToken( token );
-            
-            else if( this._mustHightlightWord( token, CodeEditor.keywords ) && ( lang.tags ?? false ? ( this._enclosedByTokens( token, tokenIndex, '<', '>' ) ) : true ) )
-                token_classname = "cm-kwd";
+        if( this._buildingBlockComment != undefined )
+            token_classname = "cm-com";
+        
+        else if( this._buildingString != undefined )
+            discardToken = this._appendStringToken( token );
+        
+        else if( this._mustHightlightWord( token, CodeEditor.keywords ) && ( lang.tags ?? false ? ( this._enclosedByTokens( token, tokenIndex, '<', '>' ) ) : true ) )
+            token_classname = "cm-kwd";
 
-            else if( this._mustHightlightWord( token, CodeEditor.builtin ) && ( lang.tags ?? false ? ( this._enclosedByTokens( token, tokenIndex, '<', '>' ) ) : true ) )
-                token_classname = "cm-bln";
+        else if( this._mustHightlightWord( token, CodeEditor.builtin ) && ( lang.tags ?? false ? ( this._enclosedByTokens( token, tokenIndex, '<', '>' ) ) : true ) )
+            token_classname = "cm-bln";
 
-            else if( this._mustHightlightWord( token, CodeEditor.statementsAndDeclarations ) )
-                token_classname = "cm-std";
+        else if( this._mustHightlightWord( token, CodeEditor.statementsAndDeclarations ) )
+            token_classname = "cm-std";
 
-            else if( this._mustHightlightWord( token, CodeEditor.symbols ) )
-                token_classname = "cm-sym";
+        else if( this._mustHightlightWord( token, CodeEditor.symbols ) )
+            token_classname = "cm-sym";
 
-            else if( token.substr( 0, singleLineCommentToken.length ) == singleLineCommentToken )
-                token_classname = "cm-com";
+        else if( token.substr( 0, singleLineCommentToken.length ) == singleLineCommentToken )
+            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";
+        else if( this._isCSSClass( token, prev, next ) )
+            token_classname = "cm-kwd";
 
-            else if ( this._isType( token, prev, next ) )
-                token_classname = "cm-typ";
+        else if ( this._isType( token, prev, next ) )
+            token_classname = "cm-typ";
 
-            else if ( highlight == 'batch' && ( token == '@' || prev == ':' || prev == '@' ) )
-                token_classname = "cm-kwd";
+        else if ( highlight == 'batch' && ( token == '@' || prev == ':' || prev == '@' ) )
+            token_classname = "cm-kwd";
 
-            else if ( [ 'cpp', 'wgsl', 'glsl' ].indexOf( highlight ) > -1 && token.includes( '#' ) ) // C++ preprocessor
-                token_classname = "cm-ppc";
+        else if ( [ 'cpp', 'wgsl', 'glsl' ].indexOf( highlight ) > -1 && token.includes( '#' ) ) // C++ preprocessor
+            token_classname = "cm-ppc";
 
-            else if ( highlight == 'cpp' && prev == '<' && (next == '>' || next == '*') ) // Defining template type in C++
-                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 == 'cpp' && (next == '::' || prev == '::' && next != '(' )) // C++ Class
+            token_classname = "cm-typ";
 
-            else if ( highlight == 'css' && prev == ':' && (next == ';' || next == '!important') ) // CSS value
-                token_classname = "cm-str";
+        else if ( highlight == 'css' && prev == ':' && (next == ';' || next == '!important') ) // CSS value
+            token_classname = "cm-str";
 
-            else if ( highlight == 'css' && prev == undefined && next == ':' ) // CSS attribute
-                token_classname = "cm-typ";
-            
-            else if ( this._markdownHeader || ( highlight == 'markdown' && isFirstToken && token.replaceAll('#', '').length != token.length ) ) // Header
-            {
-                token_classname = "cm-kwd";
-                this._markdownHeader = true;
-            }
+        else if ( highlight == 'css' && prev == undefined && next == ':' ) // CSS attribute
+            token_classname = "cm-typ";
+        
+        else if ( this._markdownHeader || ( highlight == 'markdown' && isFirstToken && token.replaceAll('#', '').length != token.length ) ) // Header
+        {
+            token_classname = "cm-kwd";
+            this._markdownHeader = true;
+        }
 
-            else if ( token[ 0 ] != '@' && token[ 0 ] != ',' && next == '(' )
-                token_classname = "cm-mtd";
+        else if ( token[ 0 ] != '@' && token[ 0 ] != ',' && next == '(' )
+            token_classname = "cm-mtd";
 
 
-            if( usesBlockComments && this._buildingBlockComment != undefined 
-                && token.substr( 0, blockCommentsTokens[ 1 ].length ) == blockCommentsTokens[ 1 ] )
-            {
-                this._blockCommentCache.push( new LX.vec2( this._buildingBlockComment, this._currentLineNumber ) );
-                delete this._buildingBlockComment;
-            }
+        if( usesBlockComments && this._buildingBlockComment != undefined 
+            && token.substr( 0, blockCommentsTokens[ 1 ].length ) == blockCommentsTokens[ 1 ] )
+        {
+            this._blockCommentCache.push( new LX.vec2( this._buildingBlockComment, this._currentLineNumber ) );
+            delete this._buildingBlockComment;
+        }
 
-            // We finished constructing a string
-            if( this._buildingString && ( this._stringEnded || isLastToken ) )
-            {
-                token = this._getCurrentString();
-                token_classname = "cm-str";
-                discardToken = false;
-            }
+        // We finished constructing a string
+        if( this._buildingString && ( this._stringEnded || isLastToken ) )
+        {
+            token = this._getCurrentString();
+            token_classname = "cm-str";
+            discardToken = false;
+        }
 
-            // Update state
-            this._buildingString = this._stringEnded ? undefined : this._buildingString;
+        // Update state
+        this._buildingString = this._stringEnded ? undefined : this._buildingString;
 
-            if( discardToken )
-                return "";
+        if( discardToken )
+            return "";
 
-            token = token.replace( "<", "&lt;" );
-            token = token.replace( ">", "&gt;" );
+        token = token.replace( "<", "&lt;" );
+        token = token.replace( ">", "&gt;" );
 
-            // No highlighting, no need to put it inside another span..
-            if( !token_classname.length )
-                return token;
+        // No highlighting, no need to put it inside another span..
+        if( !token_classname.length )
+            return token;
 
-            return "<span class='" + highlight + " " + token_classname + "'>" + token + "</span>";
-        }
+        return "<span class='" + highlight + " " + token_classname + "'>" + token + "</span>";
     }
 
     _appendStringToken( token ) {
@@ -3204,6 +3235,7 @@ class CodeEditor {
         delete this._tripleClickSelection;
         delete this._lastSelectionKeyDir;
         delete this._currentOcurrences;
+        delete this._lastResult;
 
         if( cursor )
         {
@@ -3428,14 +3460,14 @@ class CodeEditor {
         }
     }
 
-    addSpaceTabs( n ) {
+    _addSpaceTabs( cursor, n ) {
         
         for( var i = 0; i < n; ++i ) {
-            this.actions[ 'Tab' ].callback();
+            this.actions[ 'Tab' ].callback( cursor.line, cursor, null );
         }
     }
 
-    addSpaces( n ) {
+    _addSpaces( n ) {
         
         for( var i = 0; i < n; ++i ) {
             this.root.dispatchEvent( new CustomEvent( 'keydown', { 'detail': {
@@ -3446,6 +3478,42 @@ class CodeEditor {
         }
     }
 
+    _removeSpaces( cursor ) {
+
+        // Remove indentation
+        const lidx = cursor.line;
+        let lineStart = firstNonspaceIndex( this.code.lines[ lidx ] );
+
+        // Nothing to remove... we are at the start of the line
+        if( lineStart == 0 )
+            return;
+
+        // Only tabs/spaces in the line...
+        if( lineStart == -1 ) {
+            lineStart = this.code.lines[ lidx ].length;
+        }
+
+        let indentSpaces = lineStart % this.tabSpaces;
+        indentSpaces = indentSpaces == 0 ? this.tabSpaces : indentSpaces;
+        const newStart = Math.max( lineStart - indentSpaces, 0 );
+
+        this.code.lines[ lidx ] = [
+            this.code.lines[ lidx ].slice( 0, newStart ),
+            this.code.lines[ lidx ].slice( lineStart )
+        ].join('');
+
+        this.processLine( lidx );
+
+        this.cursorToString( cursor, " ".repeat( indentSpaces ), true );
+
+        if( cursor.selection )
+        {
+            cursor.selection.invertIfNecessary();
+            cursor.selection.fromX = Math.max( cursor.selection.fromX - indentSpaces, 0 );
+            this._processSelection( cursor );
+        }
+    }
+
     getScrollLeft() {
         
         if( !this.codeScroller ) return 0;
@@ -3715,8 +3783,11 @@ class CodeEditor {
 
     showAutoCompleteBox( key, cursor ) {
         
+        if( !cursor.isMain )
+            return;
+
         const [word, start, end] = this.getWordAtPos( cursor, -1 );
-        if(key == ' ' || !word.length) {
+        if( key == ' ' || !word.length ) {
             this.hideAutoCompleteBox();
             return;
         }
@@ -3763,7 +3834,7 @@ class CodeEditor {
             pre.appendChild( icon );
 
             pre.addEventListener( 'click', () => {
-                this.autoCompleteWord( cursor, s );
+                this.autoCompleteWord( s );
             } ); 
 
             // Highlight the written part
@@ -3795,8 +3866,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 - this.getScrollLeft()) + "px";
-        this.autocomplete.style.top = (cursor._top + 48 - this.getScrollTop()) + "px";
+        this.autocomplete.style.left = (cursor._left + 48 - this.getScrollLeft()) + "px";
+        this.autocomplete.style.top = (cursor._top + 28 + this.lineHeight - this.getScrollTop()) + "px";
 
         this.isAutoCompleteActive = true;
     }
@@ -3809,23 +3880,30 @@ class CodeEditor {
         return isActive != this.isAutoCompleteActive;
     }
 
-    autoCompleteWord( cursor, suggestion ) {
+    autoCompleteWord( suggestion ) {
         
         if( !this.isAutoCompleteActive )
-        return;
+            return;
 
         let [suggestedWord, idx] = this._getSelectedAutoComplete();
         suggestedWord = suggestion ?? suggestedWord;
 
-        const [word, start, end] = this.getWordAtPos( cursor, -1 );
+        for( let cursor of this.cursors.children )
+        {
+            const [word, start, end] = this.getWordAtPos( cursor, -1 );
+
+            const lineString = this.code.lines[ cursor.line ];
+            this.code.lines[ cursor.line ] =
+                lineString.slice(0, start) + suggestedWord + lineString.slice( end );
+
+            // Process lines and remove suggestion box
+            this.cursorToPosition( cursor, start + suggestedWord.length );
+            this.processLine( cursor.line );
+        }
 
-        const lineString = this.code.lines[ cursor.line ];
-        this.code.lines[ cursor.line ] = 
-            lineString.slice(0, start) + suggestedWord + lineString.slice(end);
+        // Only the main cursor autocompletes, skip the "Tab" event for the rest
+        this._skipTabs = this.cursors.childElementCount - 1;
 
-        // Process lines and remove suggestion box
-        this.cursorToPosition(cursor, start + suggestedWord.length);
-        this.processLine(cursor.line);
         this.hideAutoCompleteBox();
     }
 
@@ -4210,7 +4288,7 @@ class CodeEditor {
 CodeEditor.keywords = {
 
     'JavaScript': ['var', 'let', 'const', 'this', 'in', 'of', 'true', 'false', 'new', 'function', 'NaN', 'static', 'class', 'constructor', 'null', 'typeof', 'debugger', 'abstract',
-                  'arguments', 'extends', 'instanceof'],
+                  'arguments', 'extends', 'instanceof', 'Infinity'],
     'C++': ['int', 'float', 'double', 'bool', 'char', 'wchar_t', 'const', 'static_cast', 'dynamic_cast', 'new', 'delete', 'void', 'true', 'false', 'auto', 'struct', 'typedef', 'nullptr', 
             'NULL', 'unsigned', 'namespace'],
     'JSON': ['true', 'false'],
@@ -4243,7 +4321,8 @@ CodeEditor.utils = { // These ones don't have hightlight, used as suggestions to
 
 CodeEditor.types = {
 
-    'JavaScript': ['Object', 'String', 'Function', 'Boolean', 'Symbol', 'Error', 'Number', 'TextEncoder', 'TextDecoder'],
+    'JavaScript': ['Object', 'String', 'Function', 'Boolean', 'Symbol', 'Error', 'Number', 'TextEncoder', 'TextDecoder', 'Array', 'ArrayBuffer', 'InputEvent', 'MouseEvent',
+                   'Int8Array', 'Int16Array', 'Int32Array', 'Float32Array', 'Float64Array', 'Element'],
     'Rust': ['u128'],
     'Python': ['int', 'type', 'float', 'map', 'list', 'ArithmeticError', 'AssertionError', 'AttributeError', 'Exception', 'EOFError', 'FloatingPointError', 'GeneratorExit', 
               'ImportError', 'IndentationError', 'IndexError', 'KeyError', 'KeyboardInterrupt', 'LookupError', 'MemoryError', 'NameError', 'NotImplementedError', 'OSError',