lexgui 0.1.20 → 0.1.21

package/build/components/codeeditor.js

@@ -21,14 +21,33 @@ function swapArrayElements( array, id0, id1 ) {
     [array[id0], array[id1]] = [array[id1], array[id0]];
 };
 
-function sliceChar( str, idx ) {
-    return str.substr(0, idx) + str.substr(idx + 1);
+function sliceChars( str, idx, n = 1 ) {
+    return str.substr(0, idx) + str.substr(idx + n);
 }
 
 function firstNonspaceIndex( str ) {
     return str.search(/\S|$/);
 }
 
+function indexOfFrom( str, reg, from, reverse ) {
+
+    from = from ?? 0;
+
+    if( reverse )
+    {
+        str = str.substr( 0, from );
+        var k = from - 1;
+        while( str[ k ] && str[ k ] != reg )
+            k--;
+        return str[ k ] ? k : -1;
+    }
+    else
+    {
+        str = str.substr( from );
+        return from + str.indexOf( reg );
+    }
+}
+
 function deleteElement( el ) {
     if( el ) el.remove();
 }
@@ -44,10 +63,11 @@ function doAsync( fn, ms ) {
 
 class CodeSelection {
 
-    constructor( editor, ix, iy ) {
+    constructor( editor, ix, iy, className = "lexcodeselection" ) {
 
         this.editor = editor;
         this.chars  = 0;
+        this.className = className;
 
         this.fromX  = ix;
         this.toX    = ix;
@@ -88,7 +108,7 @@ class CodeSelection {
         this.fromY = this.toY = y;
 
         var domEl = document.createElement( 'div' );
-        domEl.className = "lexcodeselection";
+        domEl.className = this.className;
         
         domEl._top = y * this.editor.lineHeight;
         domEl.style.top = domEl._top + "px";
@@ -281,7 +301,7 @@ class CodeEditor {
 
         if( !this.disableEdition )
         {
-            this.root.addEventListener( 'keydown', this.processKey.bind( this), true );
+            this.root.addEventListener( 'keydown', this.processKey.bind( this) );
             this.root.addEventListener( 'focus', this.processFocus.bind( this, true ) );
             this.root.addEventListener( 'focusout', this.processFocus.bind( this, false ) );
         }
@@ -427,6 +447,29 @@ class CodeEditor {
             this.isAutoCompleteActive = false;
         }
 
+        // Add search box
+        {
+            var box = document.createElement( 'div' );
+            box.className = "searchbox";
+            
+            var searchPanel = new LX.Panel();
+            box.appendChild( searchPanel.root );
+
+            searchPanel.sameLine( 4 );
+            searchPanel.addText( null, "", null, { placeholder: "Find" } );
+            searchPanel.addButton( null, "up", () => this.search( null, true ), { className: 'micro', icon: "fa fa-arrow-up" } );
+            searchPanel.addButton( null, "down", () => this.search(), { className: 'micro', icon: "fa fa-arrow-down" } );
+            searchPanel.addButton( null, "x", this.hideSearchBox.bind( this ), { className: 'micro', icon: "fa fa-xmark" } );
+
+            box.querySelector( 'input' ).addEventListener( 'keyup', e => {
+                if( e.key == 'Escape' ) this.hideSearchBox();
+                else if( e.key == 'Enter' ) this.search( e.target.value, !!e.shiftKey );
+            } );
+
+            this.searchbox = box;
+            this.tabs.area.attach( box );
+        }
+
         // Add code-sizer
         {
             this.codeSizer = document.createElement( 'div' );
@@ -458,7 +501,8 @@ class CodeEditor {
         this.tabSpaces = 4;
         this.maxUndoSteps = 16;
         this.lineHeight = 20;
-        this.defaultSingleLineCommentToken = "//";
+        this.defaultSingleLineCommentToken = '//';
+        this.defaultBlockCommentTokens = [ '/*', '*/' ];
         this.charWidth = 7; //this._measureChar();
         this._lastTime = null;
 
@@ -479,18 +523,19 @@ class CodeEditor {
         // setInterval( this.scanWordSuggestions.bind( this ), 2000 );
 
         this.languages = {
-            'Plain Text': { ext: 'txt' },
+            'Plain Text': { ext: 'txt', blockComments: false, singleLineComments: false },
             'JavaScript': { ext: 'js' },
             'C++': { ext: 'cpp' },
             'CSS': { ext: 'css' },
             'GLSL': { ext: 'glsl' },
             'WGSL': { ext: 'wgsl' },
-            'JSON': { ext: 'json' },
-            'XML': { ext: 'xml' },
+            'JSON': { ext: 'json', blockComments: false, singleLineComments: false },
+            'XML': { ext: 'xml', tags: true },
             'Rust': { ext: 'rs' },
             'Python': { ext: 'py', singleLineCommentToken: '#' },
-            'HTML': { ext: 'html' },
-            'Batch': { ext: 'bat', blockComments: false, singleLineCommentToken: '::' }
+            'HTML': { ext: 'html', tags: true, singleLineComments: false, blockCommentsTokens: [ '<!--', '-->' ] },
+            'Batch': { ext: 'bat', blockComments: false, singleLineCommentToken: '::' },
+            'Markdown': { ext: 'md', blockComments: false, singleLineCommentToken: '::', tags: true }
         };
 
         this.specialKeys = [
@@ -516,7 +561,8 @@ class CodeEditor {
             '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'],
-            'HTML': ['html', 'meta', 'title', 'link', 'script', 'body', 'DOCTYPE', 'head'],
+            'HTML': ['html', 'meta', 'title', 'link', 'script', 'body', 'DOCTYPE', 'head', 'br', 'i', 'a', 'li', 'img', 'tr', 'td', 'h1', 'h2', 'h3', 'h4', 'h5'],
+            'Markdown': ['br', 'i', 'a', 'li', 'img', 'table', 'title', 'tr', 'td', 'h1', 'h2', 'h3', 'h4', 'h5'],
         };
         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',
@@ -541,7 +587,8 @@ class CodeEditor {
             'JavaScript': ['document', 'console', 'window', 'navigator', 'performance'],
             'CSS': ['*', '!important'],
             'C++': ['vector', 'list', 'map'],
-            'HTML': ['type', 'xmlns', 'PUBLIC', 'http-equiv', 'src', 'lang', 'href', 'rel', 'content', 'xml'], // attributes
+            'HTML': ['type', 'xmlns', 'PUBLIC', 'http-equiv', 'src', 'style', 'lang', 'href', 'rel', 'content', 'xml', 'alt'], // attributes
+            'Markdown': ['type', 'src', 'style', 'lang', 'href', 'rel', 'content', 'valign', 'alt'], // attributes
         };
         this.statementsAndDeclarations = {
             'JavaScript': ['for', 'if', 'else', 'case', 'switch', 'return', 'while', 'continue', 'break', 'do', 'import', 'from', 'throw', 'async', 'try', 'catch', 'await'],
@@ -579,6 +626,7 @@ class CodeEditor {
 
         this.action( 'Escape', false, ( ln, cursor, e ) => {
             this.hideAutoCompleteBox();
+            this.hideSearchBox();
         });
 
         this.action( 'Backspace', false, ( ln, cursor, e ) => {
@@ -595,16 +643,37 @@ class CodeEditor {
                 }
             }
             else {
+
                 var letter = this.getCharAtPos( cursor, -1 );
                 if( letter ) {
-                    this.code.lines[ ln ] = sliceChar( this.code.lines[ ln ], cursor.position - 1 );
-                    this.cursorToLeft( letter );
+
+                    var deleteFromPosition = cursor.position - 1;
+                    var numCharsDeleted = 1;
+                    
+                    // Delete full word
+                    if( e.shiftKey )
+                    {
+                        const [word, from, to] = this.getWordAtPos( cursor, -1 );
+
+                        if( word.length > 1 )
+                        {
+                            deleteFromPosition = from;
+                            numCharsDeleted = word.length;
+                        }
+                    }
+
+                    this.code.lines[ ln ] = sliceChars( this.code.lines[ ln ], deleteFromPosition, numCharsDeleted );
                     this.processLine( ln );
+
+                    this.cursorToPosition( cursor, deleteFromPosition );
+
                     if( this.useAutoComplete )
                         this.showAutoCompleteBox( 'foo', cursor );
                 } 
                 else if( this.code.lines[ ln - 1 ] != undefined ) {
+
                     this.lineUp();
+                    e.cancelShift = true;
                     this.actions[ 'End' ].callback( cursor.line, cursor, e );
                     // Move line on top
                     this.code.lines[ ln - 1 ] += this.code.lines[ ln ];
@@ -626,7 +695,7 @@ class CodeEditor {
             {
                 var letter = this.getCharAtPos( cursor );
                 if( letter ) {
-                    this.code.lines[ ln ] = sliceChar( this.code.lines[ ln ], cursor.position );
+                    this.code.lines[ ln ] = sliceChars( this.code.lines[ ln ], cursor.position );
                     this.processLine( ln );
                 } 
                 else if(this.code.lines[ ln + 1 ] != undefined) {
@@ -1741,7 +1810,7 @@ class CodeEditor {
 
     async processKey( e ) {
 
-        if( !this.code ) 
+        if( !this.code || e.srcElement.constructor != HTMLDivElement ) 
             return;
 
         var key = e.key ?? e.detail.key;
@@ -1783,6 +1852,10 @@ class CodeEditor {
                 this.processLines();
                 this.hideAutoCompleteBox();
                 return;
+            case 'f': // find/search
+                e.preventDefault();
+                this.showSearchBox();
+                return;
             case 's': // save
                 e.preventDefault();
                 this.onsave( this.getText() );
@@ -2080,6 +2153,7 @@ class CodeEditor {
 
     processLine( linenum, force ) {
 
+        const lang = this.languages[ this.highlight ];
         const local_line_num =  this.toLocalLine( linenum );
         const gutter_line = "<span class='line-gutter'>" + (linenum + 1) + "</span>";
 
@@ -2096,6 +2170,7 @@ class CodeEditor {
         // multi-line strings not supported by now
         delete this._buildingString; 
         delete this._pendingString;
+        delete this._markdownHeader;
         
         let linestring = this.code.lines[ linenum ];
 
@@ -2138,44 +2213,36 @@ class CodeEditor {
             
             const token = tokensToEvaluate[ i ];
 
-            if( this.languages[ this.highlight ].blockComments ?? true )
+            if( lang.blockComments ?? true )
             {
-                if( token.substr( 0, 2 ) == '/*' )
+                const blockCommentsToken = ( lang.blockCommentsTokens ?? this.defaultBlockCommentTokens )[ 0 ];
+                if( token.substr( 0, blockCommentsToken.length ) == blockCommentsToken )
                     this._buildingBlockComment = true;
             }
 
-            line_inner_html += this._evaluateToken( token, prev, next, (i == tokensToEvaluate.length - 1) );
+            line_inner_html += this._evaluateToken( {
+                token: token,
+                prev: prev,
+                prevWithSpaces: tokensToEvaluate[ i - 1 ],
+                next: next,
+                nextWithSpaces: tokensToEvaluate[ i + 1 ],
+                tokenIndex: i,
+                isFirstToken: (i == 0),
+                isLastToken: (i == tokensToEvaluate.length - 1)
+            } );
         }
 
         return UPDATE_LINE( line_inner_html );
     }
 
-    _processTokens( tokens, offset = 0 ) {
-
-        if( this.highlight == 'C++' || this.highlight == 'CSS' )
-        {
-            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 );
-            }
-        }
+    _lineHasComment( linestring ) {
 
-        return tokens;
-    }
+        const lang = this.languages[ this.highlight ];
 
-    _lineHasComment( linestring ) {
+        if( !(lang.singleLineComments ?? true) )
+            return;
 
-        const singleLineCommentToken = this.languages[ this.highlight ].singleLineCommentToken ?? this.defaultSingleLineCommentToken;
+        const singleLineCommentToken = lang.singleLineCommentToken ?? this.defaultSingleLineCommentToken;
         const idx = linestring.indexOf( singleLineCommentToken );
 
         if( idx > -1 )
@@ -2199,6 +2266,8 @@ class CodeEditor {
 
     _getTokensFromLine( linestring, skipNonWords ) {
 
+        this._currentLineString = linestring;
+
         // Check if line comment
         const ogLine = linestring;
         const hasCommentIdx = this._lineHasComment( linestring );
@@ -2209,14 +2278,19 @@ class CodeEditor {
         }
 
         let tokensToEvaluate = []; // store in a temp array so we know prev and next tokens...
+        let charCounterList = [];
+        let charCounter = 0;
 
         const pushToken = function( t ) {
             if( (skipNonWords && ( t.includes('"') || t.length < 3 )) )
                 return;
             tokensToEvaluate.push( t );
+            charCounterList.push( charCounter );
+            // Update positions
+            charCounter += t.length;
         };
 
-        let iter = linestring.matchAll(/(\*\/|\/\*|::|[\[\](){}<>.,;:*"'%@!/= ])/g);
+        let iter = linestring.matchAll(/(<!--|-->|\*\/|\/\*|::|[\[\](){}<>.,;:*"'%@!/= ])/g);
         let subtokens = iter.next();
         if( subtokens.value )
         {
@@ -2234,47 +2308,103 @@ class CodeEditor {
                 }
             }
         }
-        else tokensToEvaluate.push( linestring );
+        else pushToken( linestring );
 
         if( hasCommentIdx != undefined )
         {
             pushToken( ogLine.substring( hasCommentIdx ) );
         }
 
+        this._currentTokenPositions = charCounterList;
+
         return this._processTokens( tokensToEvaluate );
     }
 
+    _processTokens( tokens, offset = 0 ) {
+
+        if( this.highlight == 'C++' || this.highlight == 'CSS' )
+        {
+            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 );
+            }
+        }
+
+        return tokens;
+    }
+
     _mustHightlightWord( token, kindArray ) {
 
         return kindArray[this.highlight] && kindArray[this.highlight][token] != undefined;
     }
 
-    _evaluateToken( token, prev, next, isLastToken ) {
+    _evaluateToken( ctxData ) {
+
+        let token        = ctxData.token,
+            prev         = ctxData.prev,
+            next         = ctxData.next,
+            tokenIndex   = ctxData.tokenIndex,
+            isFirstToken = ctxData.isFirstToken,
+            isLastToken  = ctxData.isLastToken;
+
+        const lang = this.languages[ this.highlight ],
+              highlight = this.highlight.replace( /\s/g, '' ).replaceAll( "+", "p" ).toLowerCase(),
+              customStringKeys = Object.assign( {}, this.stringKeys );
 
-        const highlight = this.highlight.replace(/\s/g, '').replaceAll("+", "p").toLowerCase();
-        const customStringKeys = Object.assign( {}, this.stringKeys );
+        var usePreviousTokenToCheckString = false;
 
-        if( highlight == 'cpp' && prev && prev.includes('#') ) // preprocessor code..
+        if( highlight == 'cpp' && prev && prev.includes( '#' ) ) // preprocessor code..
         {
             customStringKeys['@<'] = '>';
+        } 
+        else if( highlight == 'markdown' && ( ctxData.prevWithSpaces == '[' || ctxData.nextWithSpaces == ']' ) )
+        {
+            // console.warn(prev, token, next)
+            usePreviousTokenToCheckString = true;
+            customStringKeys['@['] = ']';
         }
 
         // Manage strings
         this._stringEnded = false;
-        if( this._buildingString != undefined )
+
+        if( usePreviousTokenToCheckString || ( !this._buildingBlockComment && ( lang.tags ?? false ? ( this._enclosedByTokens( token, tokenIndex, '<', '>' ) ) : true ) ) )
         {
-            const idx = Object.values(customStringKeys).indexOf( token );
-            this._stringEnded = (idx > -1) && (idx == Object.values(customStringKeys).indexOf( customStringKeys[ '@' + this._buildingString ] ));
-        } 
-        else if( customStringKeys[ '@' + token ] )
-        {   
-            // Start new string
-            this._buildingString = token;
-        }
+            const checkIfStringEnded = t => {
+                const idx = Object.values( customStringKeys ).indexOf( t );
+                this._stringEnded = (idx > -1) && (idx == Object.values(customStringKeys).indexOf( customStringKeys[ '@' + this._buildingString ] ));
+            };
 
-        const usesBlockComments = this.languages[ this.highlight ].blockComments ?? true;
+            if( this._buildingString != undefined )
+            {
+                checkIfStringEnded( usePreviousTokenToCheckString ? ctxData.nextWithSpaces : token );
+            } 
+            else if( customStringKeys[ '@' + ( usePreviousTokenToCheckString ? ctxData.prevWithSpaces : token ) ] )
+            {   
+                // Start new string
+                this._buildingString = ( usePreviousTokenToCheckString ? ctxData.prevWithSpaces : token );
 
-        if(token == ' ')
+                // Check if string ended in same token using next...
+                if( usePreviousTokenToCheckString ) 
+                {
+                    checkIfStringEnded( ctxData.nextWithSpaces );
+                }
+            }
+        }
+        
+        const usesBlockComments = lang.blockComments ?? true;
+        const blockCommentsTokens = lang.blockCommentsTokens ?? this.defaultBlockCommentTokens;
+
+        if( !usePreviousTokenToCheckString && token == ' ' )
         {
             if( this._buildingString != undefined )
             {
@@ -2285,7 +2415,7 @@ class CodeEditor {
         }
         else
         {
-            const singleLineCommentToken = this.languages[ this.highlight ].singleLineCommentToken ?? this.defaultSingleLineCommentToken;
+            const singleLineCommentToken = lang.singleLineCommentToken ?? this.defaultSingleLineCommentToken;
             
             let token_classname = "";
             let discardToken = false;
@@ -2296,10 +2426,10 @@ class CodeEditor {
             else if( this._buildingString != undefined )
                 discardToken = this._appendStringToken( token );
             
-            else if( this._mustHightlightWord( token, this.keywords ) )
+            else if( this._mustHightlightWord( token, this.keywords ) && ( lang.tags ?? false ? ( this._enclosedByTokens( token, tokenIndex, '<', '>' ) ) : true ) )
                 token_classname = "cm-kwd";
 
-            else if( this._mustHightlightWord( token, this.builtin ) )
+            else if( this._mustHightlightWord( token, this.builtin ) && ( lang.tags ?? false ? ( this._enclosedByTokens( token, tokenIndex, '<', '>' ) ) : true ) )
                 token_classname = "cm-bln";
 
             else if( this._mustHightlightWord( token, this.statementsAndDeclarations ) )
@@ -2337,12 +2467,19 @@ class CodeEditor {
 
             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";
 
 
-            if( usesBlockComments && this._buildingBlockComment && token.substr( 0, 2 ) == '*/' )
+            if( usesBlockComments && this._buildingBlockComment 
+                && token.substr( 0, blockCommentsTokens[ 1 ].length ) == blockCommentsTokens[ 1 ] )
             {
                 delete this._buildingBlockComment;
             }
@@ -2389,6 +2526,19 @@ class CodeEditor {
         return chars;
     }
 
+    _enclosedByTokens( token, tokenIndex, tagStart, tagEnd ) {
+
+        const tokenStartIndex = this._currentTokenPositions[ tokenIndex ];
+        const tagStartIndex = indexOfFrom(this._currentLineString, tagStart, tokenStartIndex, true );
+        if( tagStartIndex < 0 ) // Not found..
+            return;
+        const tagEndIndex = indexOfFrom(this._currentLineString, tagEnd, tokenStartIndex );
+        if( tagEndIndex < 0 ) // Not found..
+            return;
+
+        return ( tagStartIndex < tokenStartIndex ) && ( tagEndIndex >= ( tokenStartIndex + token.length ) );
+    }
+
     _isCSSClass( token, prev, next ) {
         return this.highlight == 'CSS' && prev == '.';
     }
@@ -3030,15 +3180,15 @@ class CodeEditor {
         suggestions = suggestions.filter( (value, index) => value.length > 2 && suggestions.indexOf(value) === index );
 
         // Order...
-        suggestions = suggestions.sort( (a, b) => a.localeCompare(b) );
+        suggestions = suggestions.sort( ( a, b ) => a.localeCompare( b ) );
 
         for( let s of suggestions )
         {
-            if( !s.toLowerCase().includes(word.toLowerCase()) )
+            if( !s.toLowerCase().includes( word.toLowerCase() ) )
             continue;
 
             var pre = document.createElement( 'pre' );
-            this.autocomplete.appendChild(pre);
+            this.autocomplete.appendChild( pre );
 
             var icon = document.createElement( 'a' );
             
@@ -3049,27 +3199,27 @@ class CodeEditor {
             else
                 icon.className = "fa fa-font";
 
-            pre.appendChild(icon);
+            pre.appendChild( icon );
 
             pre.addEventListener( 'click', () => {
                 this.autoCompleteWord( cursor, s );
             } ); 
 
             // Highlight the written part
-            const index = s.toLowerCase().indexOf(word.toLowerCase());
+            const index = s.toLowerCase().indexOf( word.toLowerCase() );
 
-            var preWord = document.createElement('span');
-            preWord.innerHTML = s.substring(0, index);
-            pre.appendChild(preWord);
+            var preWord = document.createElement( 'span' );
+            preWord.innerHTML = s.substring( 0, index );
+            pre.appendChild( preWord );
 
             var actualWord = document.createElement('span');
-            actualWord.innerHTML = s.substr(index, word.length);
+            actualWord.innerHTML = s.substr( index, word.length );
             actualWord.classList.add( 'word-highlight' );
-            pre.appendChild(actualWord);
+            pre.appendChild( actualWord );
 
             var postWord = document.createElement('span');
-            postWord.innerHTML = s.substring(index + word.length);
-            pre.appendChild(postWord);
+            postWord.innerHTML = s.substring( index + word.length );
+            pre.appendChild( postWord );
         }
 
         if( !this.autocomplete.childElementCount )
@@ -3156,6 +3306,113 @@ class CodeEditor {
         this.autocomplete.childNodes[ idx + offset ].classList.add('selected');
     }
 
+    showSearchBox( clear ) {
+        
+        this.searchbox.classList.add( 'opened' );
+        this.searchboxActive = true;
+
+        const input = this.searchbox.querySelector( 'input' );
+
+        if( clear )
+        {
+            input.value = "";
+        }
+
+        input.focus();
+    }
+
+    hideSearchBox() {
+
+        if( this.searchboxActive )
+        {
+            this.searchbox.classList.remove( 'opened' );
+            this.searchboxActive = false;
+        }
+
+        else if( this._lastResult )
+        {
+            this._lastResult.dom.remove();
+            delete this._lastResult;
+        }
+    }
+
+    search( text, reverse ) {
+
+        text = text ?? this._lastTextFound;
+
+        if( !text )
+            return;
+
+        let cursorData = new LX.vec2( this.position, this.line );
+        let found = null;
+        let idx = -1;
+
+        if( this._lastResult )
+        {
+            this._lastResult.dom.remove();
+            cursorData = this._lastResult.pos;
+            delete this._lastResult;
+        }
+
+        const getIndex = line => {
+            return this.code.lines[ line ].substr( line == cursorData.y ? cursorData.x : 0 ).indexOf( text );
+        };
+
+        if( reverse )
+        {
+            for( var j = cursorData.y; j >= 0; --j )
+            {
+                idx = getIndex( j );
+                if( idx > -1 )
+                {
+                    found = j;
+                    break;
+                }
+            }
+        }
+        else
+        {
+            for( var j = cursorData.y; j < this.code.lines.length; ++j )
+            {
+                idx = getIndex( j );
+                if( idx > -1 )
+                {
+                    found = j;
+                    break;
+                }
+            }
+        }
+
+        if( found == null)
+        {
+            alert("No results!")
+            return;
+        }
+        
+        // Text found..
+
+        this._lastTextFound = text;
+
+        // console.warn("FOUND!! --", text, "-- at", "[" + idx + ", " + j + "]")
+
+        this.codeScroller.scrollTo( 
+            Math.max( idx * this.charWidth - this.codeScroller.clientWidth ), 
+            Math.max( found - 10 ) * this.lineHeight 
+        );
+
+        // Show elements
+        this.selections.classList.add( 'show' );
+
+        // Create new selection instance
+        this.selection = new CodeSelection( this, 0, 0, "lexcodesearchresult" );
+        this.selection.selectInline( idx, found, this.measureString( text ) );
+        this._lastResult = {
+            'dom': this.selections.lastChild,
+            'pos': new LX.vec2( idx + text.length, found )
+        };
+
+    }
+
     _updateDataInfoPanel( signal, value ) {
 
         if( !this.skipCodeInfo )
@@ -3190,9 +3447,11 @@ class CodeEditor {
 
     _clearTmpVariables() {
 
+        delete this._currentLineString;
         delete this._buildingString; 
         delete this._pendingString;
         delete this._buildingBlockComment;
+        delete this._markdownHeader;
     }
 }
 

package/build/lexgui.css

@@ -2971,7 +2971,7 @@ pre .line-gutter {
   background-color: #bbbbbb8c !important;
 }
 
-.lexcodeeditor .lexcodeselection {
+.lexcodeeditor .lexcodeselection, .lexcodeeditor .lexcodesearchresult {
   -webkit-text-size-adjust: 100%;
   font-family: monospace;
   color: #AAA !important;
@@ -2992,6 +2992,34 @@ pre .line-gutter {
   opacity: 0.4;
 }
 
+.lexcodeeditor .lexcodesearchresult {
+  background-color: #f5f115;
+  opacity: 0.5;
+}
+
+.lexcodeeditor .searchbox {
+  background-color: var(--global-branch-darker);
+  width: 256px;
+  position: absolute;
+  right: 6px;
+  top: 26px;
+  z-index: 100;
+  border-radius: 4px;
+  border: 1px solid var(--global-button-color);
+  box-shadow: 0 0px 4px #101010;
+  overflow-y: scroll;
+  transform: translateY(-72px);
+  transition: transform 0.2s ease-in;
+}
+
+.lexcodeeditor .searchbox.opened {
+  transform: translateY(0px);
+}
+
+.lexcodeeditor .searchbox .lexpanel span {
+  height: 11px;
+}
+
 .lexcodeeditor .autocomplete {
   background-color: var(--global-branch-darker);
   width: 256px;
@@ -3020,6 +3048,7 @@ pre .line-gutter {
   pointer-events: unset;
   cursor: default;
   height: 22px;
+  padding-left: 6px;
 }
 
 .lexcodeeditor .autocomplete pre a {
@@ -3050,102 +3079,64 @@ pre .line-gutter {
   color: #95a0e1;
 }
 
-.cm-str.javascript { color: #ca7d59; } /* string */
-.cm-kwd.javascript { color: #218cce; } /* keyword */
-.cm-com.javascript { color: #5cab5a; } /* comment */
-.cm-typ.javascript { color: #36c0b0; } /* type */
-.cm-std.javascript { color: #cf6dcf; } /* statements & declarations */
-.cm-bln.javascript { color: inherit; } /* builtin */
-.cm-dec.javascript { color: #b1ce9b; } /* decimal */
-.cm-sym.javascript { color: #e7ded2; } /* symbol */
-.cm-mtd.javascript { color: #e0cc68 } /* method */
-
-.cm-str.cpp { color: #ca7d59; } /* string */
-.cm-kwd.cpp { color: #218cce; } /* keyword */
-.cm-com.cpp { color: #5cab5a; } /* comment */
-.cm-typ.cpp { color: #36c0b0; } /* type */
-.cm-std.cpp { color: #cf6dcf; } /* statements & declarations */
-.cm-bln.cpp { color: #d44141; } /* builtin */
-.cm-dec.cpp { color: #2ddf53; } /* decimal */
-.cm-sym.cpp { color: #e7ded2; } /* symbol */
-.cm-mtd.cpp { color: #7a9ae0 } /* method */
-.cm-ppc.cpp { color: #969696 } /* preprocessor */
-
-.cm-str.css { color: #ca7d59; } /* string */
-.cm-kwd.css { color: #e8be53; } /* keyword */
-.cm-com.css { color: #5cab5a; } /* comment */
-.cm-typ.css { color: #b7c3ec; } /* type */
-.cm-std.css { color: #cf6dcf; } /* statements & declarations */
-.cm-bln.css { color: #2194ce; } /* builtin */
-.cm-dec.css { color: #b1ce9b; } /* decimal */
-.cm-sym.css { color: #f9d620; } /* symbol */
-.cm-mtd.css { color: #e0cc68; } /* method */
-
-.cm-str.json { color: #ca7d59; } /* string */
-.cm-kwd.json { color: inherit; } /* keyword */
-.cm-com.json { color: inherit; } /* comment */
-.cm-typ.json { color: inherit; } /* type */
-.cm-std.json { color: inherit; } /* statements & declarations */
-.cm-bln.json { color: inherit; } /* builtin */
-.cm-dec.json { color: #b1ce9b; } /* decimal */
-.cm-sym.json { color: #cf6dcf; } /* symbol */
-.cm-mtd.json { color: inherit; } /* method */
-
-.cm-str.glsl { color: #ca7d59; } /* string */
-.cm-kwd.glsl { color: #2194ce; } /* keyword */
-.cm-com.glsl { color: #5cab5a; } /* comment */
-.cm-typ.glsl { color: #36c0b0; } /* type */
-.cm-std.glsl { color: #cf6dcf; } /* statements & declarations */
-.cm-bln.glsl { color: #cfc159; } /* builtin */
-.cm-dec.glsl { color: #b1ce9b; } /* decimal */
-.cm-sym.glsl { color: #f9cb20; } /* symbol */
-.cm-mtd.glsl { color: #e0cc68; } /* method */
-
-.cm-str.wgsl { color: #ca7d59; } /* string */
-.cm-kwd.wgsl { color: #2194ce; } /* keyword */
-.cm-com.wgsl { color: #5cab5a; } /* comment */
-.cm-typ.wgsl { color: #36c0b0; } /* type */
-.cm-std.wgsl { color: #cf6dcf; } /* statements & declarations */
-.cm-bln.wgsl { color: #cfc159; } /* builtin */
-.cm-dec.wgsl { color: #b1ce9b; } /* decimal */
-.cm-sym.wgsl { color: #f9cb20; } /* symbol */
-.cm-mtd.wgsl { color: #e0cc68; } /* method */
-
-.cm-str.rust { color: #ca7d59; } /* string */
-.cm-kwd.rust { color: #218cce; } /* keyword */
-.cm-com.rust { color: #5cab5a; } /* comment */
-.cm-typ.rust { color: #36c0b0; } /* type */
-.cm-std.rust { color: #cf6dcf; } /* statements & declarations */
-.cm-bln.rust { color: inherit; } /* builtin */
-.cm-dec.rust { color: #b1ce9b; } /* decimal */
-.cm-sym.rust { color: #e7ded2; } /* symbol */
-.cm-mtd.rust { color: #e0cc68 } /* method */
-
-.cm-str.python { color: #ca7d59; } /* string */
-.cm-kwd.python { color: #218cce; } /* keyword */
-.cm-com.python { color: #5cab5a; } /* comment */
-.cm-typ.python { color: #36c0b0; } /* type */
-.cm-std.python { color: #cf6dcf; } /* statements & declarations */
-.cm-bln.python { color: inherit; } /* builtin */
-.cm-dec.python { color: #b1ce9b; } /* decimal */
-.cm-sym.python { color: #e7ded2; } /* symbol */
-.cm-mtd.python { color: #e0cc68 } /* method */
-
-.cm-str.batch { color: #ca7d59; } /* string */
-.cm-kwd.batch { color: #218cce; } /* keyword */
-.cm-com.batch { color: #5cab5a; } /* comment */
-.cm-typ.batch { color: #36c0b0; } /* type */
-.cm-std.batch { color: #cf6dcf; } /* statements & declarations */
-.cm-bln.batch { color: inherit; } /* builtin */
-.cm-dec.batch { color: #b1ce9b; } /* decimal */
-.cm-sym.batch { color: #dfd85e; } /* symbol */
-.cm-mtd.batch { color: inherit } /* method */
-
-.cm-str.html { color: #ca7d59; } /* string */
-.cm-kwd.html { color: #2194ce; } /* keyword */
-.cm-bln.html { color: #b4d7ec; } /* builtin */
-.cm-sym.html { color: #929292; } /* symbol */
-
+/* Common */
+.cm-str { color: #ca7d59; }   /* string */
+.cm-std { color: #cf6dcf; }   /* statements & declarations */
+.cm-kwd { color: #2194ce; }   /* keyword */
+.cm-com { color: #5cab5a; }   /* comment */
+
+.cm-typ.javascript { color: #36c0b0; }  /* type */
+.cm-dec.javascript { color: #b1ce9b; }  /* decimal */
+.cm-sym.javascript { color: #e7ded2; }  /* symbol */
+.cm-mtd.javascript { color: #e0cc68 }   /* method */
+
+.cm-typ.cpp { color: #36c0b0; }   /* type */
+.cm-bln.cpp { color: #d44141; }   /* builtin */
+.cm-dec.cpp { color: #2ddf53; }   /* decimal */
+.cm-sym.cpp { color: #e7ded2; }   /* symbol */
+.cm-mtd.cpp { color: #7a9ae0 }    /* method */
+.cm-ppc.cpp { color: #969696 }    /* preprocessor */
+
+.cm-kwd.css { color: #e8be53; }   /* keyword */
+.cm-typ.css { color: #b7c3ec; }   /* type */
+.cm-bln.css { color: #2194ce; }   /* builtin */
+.cm-dec.css { color: #b1ce9b; }   /* decimal */
+.cm-sym.css { color: #f9d620; }   /* symbol */
+.cm-mtd.css { color: #e0cc68; }   /* method */
+
+.cm-dec.json { color: #b1ce9b; }  /* decimal */
+.cm-sym.json { color: #cf6dcf; }  /* symbol */
+
+.cm-typ.glsl { color: #36c0b0; }  /* type */
+.cm-bln.glsl { color: #cfc159; }  /* builtin */
+.cm-dec.glsl { color: #b1ce9b; }  /* decimal */
+.cm-sym.glsl { color: #f9cb20; }  /* symbol */
+.cm-mtd.glsl { color: #e0cc68; }  /* method */
+
+.cm-typ.wgsl { color: #36c0b0; }  /* type */
+.cm-bln.wgsl { color: #cfc159; }  /* builtin */
+.cm-dec.wgsl { color: #b1ce9b; }  /* decimal */
+.cm-sym.wgsl { color: #f9cb20; }  /* symbol */
+.cm-mtd.wgsl { color: #e0cc68; }  /* method */
+
+.cm-typ.rust { color: #36c0b0; }  /* type */
+.cm-dec.rust { color: #b1ce9b; }  /* decimal */
+.cm-sym.rust { color: #e7ded2; }  /* symbol */
+.cm-mtd.rust { color: #e0cc68 }   /* method */
+
+.cm-typ.python { color: #36c0b0; }  /* type */
+.cm-dec.python { color: #b1ce9b; }  /* decimal */
+.cm-sym.python { color: #e7ded2; }  /* symbol */
+.cm-mtd.python { color: #e0cc68 }   /* method */
+
+.cm-typ.batch { color: #36c0b0; }   /* type */
+.cm-dec.batch { color: #b1ce9b; }   /* decimal */
+.cm-sym.batch { color: #dfd85e; }   /* symbol */
+
+.cm-bln.html { color: #a1d2f0; }    /* builtin */
+.cm-sym.html { color: #929292; }    /* symbol */
+
+.cm-bln.markdown { color: #a1d2f0; }  /* builtin */
 
 /* 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.20",
+        version: "0.1.21",
         ready: false,
         components: [], // specific pre-build components
         signals: {} // events and triggers
@@ -3568,9 +3568,9 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 return wValue.innerText;
             };
             widget.onSetValue = (new_value) => {
-                wValue.innerHTML = "<span>" + 
+                wValue.innerHTML = 
                 (options.icon ? "<a class='" + options.icon + "'></a>" : 
-                ( options.img  ? "<img src='" + options.img + "'>" : (new_value || ""))) + "</span>";
+                ( options.img  ? "<img src='" + options.img + "'>" : "<span>" + (new_value || "") + "</span>" ));
             };
             
             let element = widget.domEl;
@@ -3583,9 +3583,9 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 wValue.classList.add("selected");
             if(options.buttonClass)
                 wValue.classList.add(options.buttonClass);
-            wValue.innerHTML = "<span>" + 
+            wValue.innerHTML = 
                 (options.icon ? "<a class='" + options.icon + "'></a>" : 
-                ( options.img  ? "<img src='" + options.img + "'>" : (value || ""))) + "</span>";
+                ( options.img  ? "<img src='" + options.img + "'>" : "<span>" + (value || "") + "</span>" ));
 
             wValue.style.width = "calc( 100% - " + (options.nameWidth ?? LX.DEFAULT_NAME_WIDTH) + ")";
           

package/build/lexgui.module.js

@@ -8,7 +8,7 @@
 */
 
 var LX = {
-    version: "0.1.20",
+    version: "0.1.21",
     ready: false,
     components: [], // specific pre-build components
     signals: {} // events and triggers
@@ -3564,9 +3564,9 @@ class Panel {
             return wValue.innerText;
         };
         widget.onSetValue = (new_value) => {
-            wValue.innerHTML = "<span>" + 
+            wValue.innerHTML = 
             (options.icon ? "<a class='" + options.icon + "'></a>" : 
-            ( options.img  ? "<img src='" + options.img + "'>" : (new_value || ""))) + "</span>";
+            ( options.img  ? "<img src='" + options.img + "'>" : "<span>" + (new_value || "") + "</span>" ));
         };
 
         let element = widget.domEl;
@@ -3579,9 +3579,9 @@ class Panel {
             wValue.classList.add("selected");
         if(options.buttonClass)
             wValue.classList.add(options.buttonClass);
-        wValue.innerHTML = "<span>" + 
+        wValue.innerHTML = 
             (options.icon ? "<a class='" + options.icon + "'></a>" : 
-            ( options.img  ? "<img src='" + options.img + "'>" : (value || ""))) + "</span>";
+            ( options.img  ? "<img src='" + options.img + "'>" : "<span>" + (value || "") + "</span>" ));
 
         wValue.style.width = "calc( 100% - " + (options.nameWidth ?? LX.DEFAULT_NAME_WIDTH) + ")";
         

package/changelog.md

@@ -1,5 +1,12 @@
 # lexgui.js changelog
 
+## 0.1.21
+
+Added "Ctrl+F" to find text in code tabs.
+"Shift+Backspace" deletes word at current position.
+Added "Markdown" syntax highlighting. 
+Improved hightlighting of tag languages (HTML, Markdown, XML).
+
 ## 0.1.20
 
 Active line is now hightlighted.

package/package.json

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