lexgui 0.1.20 → 0.1.22

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";
@@ -181,6 +201,9 @@ class CodeEditor {
     static WORD_TYPE_METHOD = 0;
     static WORD_TYPE_CLASS  = 1;
 
+    static CODE_MAX_FONT_SIZE = 20;
+    static CODE_MIN_FONT_SIZE = 11;
+
     /**
      * @param {*} options
      * skip_info, allow_add_scripts, name
@@ -281,7 +304,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 ) );
         }
@@ -393,8 +416,16 @@ class CodeEditor {
             });
 
             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 );
+                if( e.ctrlKey )
+                {
+                    e.preventDefault();
+                    ( e.deltaY > 0.0 ? this._decreaseFontSize() : this._increaseFontSize() );
+                }
+                else
+                {
+                    const dX = ( e.deltaY > 0.0 ? 10.0 : -10.0 ) * ( e.shiftKey ? 1.0 : 0.0 );
+                    if( dX != 0.0 ) this.setScrollBarValue( 'horizontal', dX );
+                }
             });
         }
 
@@ -427,6 +458,51 @@ 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 search LINE box
+        {
+            var box = document.createElement( 'div' );
+            box.className = "searchbox gotoline";
+            
+            var searchPanel = new LX.Panel();
+            box.appendChild( searchPanel.root );
+
+            searchPanel.addText( null, "", ( value, event ) => {
+                input.value = ":" + value.replaceAll( ':', '' );
+                this.goToLine( input.value.slice( 1 ) );
+            }, { placeholder: "Go to line", trigger: "input" } );
+
+            let input = box.querySelector( 'input' );
+            input.addEventListener( 'keyup', e => {
+                if( e.key == 'Escape' ) this.hideSearchLineBox();
+            } );
+
+            this.searchlinebox = box;
+            this.tabs.area.attach( box );
+        }
+
         // Add code-sizer
         {
             this.codeSizer = document.createElement( 'div' );
@@ -458,8 +534,8 @@ class CodeEditor {
         this.tabSpaces = 4;
         this.maxUndoSteps = 16;
         this.lineHeight = 20;
-        this.defaultSingleLineCommentToken = "//";
-        this.charWidth = 7; //this._measureChar();
+        this.defaultSingleLineCommentToken = '//';
+        this.defaultBlockCommentTokens = [ '/*', '*/' ];
         this._lastTime = null;
 
         this.pairKeys = {
@@ -479,18 +555,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 +593,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 +619,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 +658,7 @@ class CodeEditor {
 
         this.action( 'Escape', false, ( ln, cursor, e ) => {
             this.hideAutoCompleteBox();
+            this.hideSearchBox();
         });
 
         this.action( 'Backspace', false, ( ln, cursor, e ) => {
@@ -595,16 +675,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 +727,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) {
@@ -721,7 +822,7 @@ class CodeEditor {
                 return;
             }
 
-            this._addUndoStep( cursor );
+            this._addUndoStep( cursor, true );
 
             var _c0 = this.getCharAtPos( cursor, -1 );
             var _c1 = this.getCharAtPos( cursor );
@@ -949,7 +1050,7 @@ class CodeEditor {
         if( options.allow_add_scripts ?? true )
             this.addTab("+", false, "New File");
 
-        this.addTab(options.name || "untitled", true, options.title);
+        this.addTab( options.name || "untitled", true, options.title );
 
         // Create inspector panel
         let panel = this._createPanelInfo();
@@ -967,14 +1068,15 @@ class CodeEditor {
         );
         
         // Add to the document.fonts (FontFaceSet)
-        document.fonts.add(commitMono);
+        document.fonts.add( commitMono );
 
         // Load the font
         commitMono.load();
 
         // Wait until the fonts are all loaded
         document.fonts.ready.then(() => {
-            console.log("commitMono loaded")
+            // console.log("commitMono loaded")
+            this.charWidth = this._measureChar( "a", true );
         });
     }
 
@@ -1132,23 +1234,32 @@ class CodeEditor {
         }
     }
 
-    _addUndoStep( cursor )  {
+    _addUndoStep( cursor, force, deleteRedo = true )  {
 
         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
+        if( !force )
+        {
+            if( !this._lastTime ) {
                 this._lastTime = current;
-                return;
+            } else {
+                if( ( current - this._lastTime ) > 3000 ){
+                    this._lastTime = null;
+                } else {
+                    // If time not enough, reset timer
+                    this._lastTime = current;
+                    return;
+                }
             }
         }
 
+        if( deleteRedo ) 
+        {
+            // Remove all redo steps
+            this.code.redoSteps.length = 0;
+        }
+
         var cursor = cursor ?? this.cursors.children[ 0 ];
 
         this.code.undoSteps.push( {
@@ -1159,6 +1270,18 @@ class CodeEditor {
         } );
     }
 
+    _addRedoStep( cursor )  {
+
+        var cursor = cursor ?? this.cursors.children[ 0 ];
+
+        this.code.redoSteps.push( {
+            lines: LX.deepCopy( this.code.lines ),
+            cursor: this.saveCursor( cursor ),
+            line: cursor.line,
+            position: cursor.position
+        } );
+    }
+
     _changeLanguage( lang ) {
 
         this.code.language = lang;
@@ -1316,6 +1439,7 @@ class CodeEditor {
         code.language = "Plain Text";
         code.cursorState = {};
         code.undoSteps = [];
+        code.redoSteps = [];
         code.tabName = name;
         code.title = title ?? name;
         code.tokens = {};
@@ -1486,6 +1610,7 @@ class CodeEditor {
             this.lastMouseDown = LX.getTime();
             this.state.selectingText = true;
             this.endSelection();
+            this.processClick( e );
         }
         
         else if( e.type == 'mouseup' )
@@ -1549,9 +1674,8 @@ class CodeEditor {
 
     _onMouseUp( e ) {
 
-        if( (LX.getTime() - this.lastMouseDown) < 300 ) {
+        if( (LX.getTime() - this.lastMouseDown) < 120 ) {
             this.state.selectingText = false;
-            this.processClick( e );
             this.endSelection();
         }
 
@@ -1741,7 +1865,7 @@ class CodeEditor {
 
     async processKey( e ) {
 
-        if( !this.code ) 
+        if( !this.code || e.srcElement.constructor != HTMLDivElement ) 
             return;
 
         var key = e.key ?? e.detail.key;
@@ -1778,11 +1902,20 @@ class CodeEditor {
                 return;
             case 'd': // duplicate line
                 e.preventDefault();
+                this.endSelection();
                 this.code.lines.splice( lidx, 0, this.code.lines[ lidx ] );
                 this.lineDown( cursor );
                 this.processLines();
                 this.hideAutoCompleteBox();
                 return;
+            case 'f': // find/search
+                e.preventDefault();
+                this.showSearchBox();
+                return;
+            case 'g': // find line
+                e.preventDefault();
+                this.showSearchLineBox();
+                return;
             case 's': // save
                 e.preventDefault();
                 this.onsave( this.getText() );
@@ -1794,13 +1927,31 @@ class CodeEditor {
                 this._cutContent();
                 this.hideAutoCompleteBox();
                 return;
+            case 'y': // redo
+                if(!this.code.redoSteps.length)
+                    return;
+                this._addUndoStep( cursor, true, false);
+                const redo_step = this.code.redoSteps.pop();
+                this.code.lines = redo_step.lines;
+                this.processLines();
+                this.restoreCursor( cursor, redo_step.cursor );
+                return;
             case 'z': // undo
                 if(!this.code.undoSteps.length)
                     return;
-                const step = this.code.undoSteps.pop();
-                this.code.lines = step.lines;
+                this._addRedoStep( cursor );
+                const undo_step = this.code.undoSteps.pop();
+                this.code.lines = undo_step.lines;
                 this.processLines();
-                this.restoreCursor( cursor, step.cursor );
+                this.restoreCursor( cursor, undo_step.cursor );
+                return;
+            case '+': // increase size
+                e.preventDefault();
+                this._increaseFontSize();
+                return;
+            case '-': // decrease size
+                e.preventDefault();
+                this._decreaseFontSize();
                 return;
             }
         }
@@ -1964,7 +2115,7 @@ class CodeEditor {
         let lidx = cursor.line;
         let text_to_cut = "";
 
-        this._addUndoStep( cursor );
+        this._addUndoStep( cursor, true );
 
         if( !this.selection ) {
             text_to_cut = "\n" + this.code.lines[ cursor.line ];
@@ -2080,6 +2231,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 +2248,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 +2291,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 +2344,8 @@ class CodeEditor {
 
     _getTokensFromLine( linestring, skipNonWords ) {
 
+        this._currentLineString = linestring;
+
         // Check if line comment
         const ogLine = linestring;
         const hasCommentIdx = this._lineHasComment( linestring );
@@ -2209,14 +2356,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 +2386,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 highlight = this.highlight.replace(/\s/g, '').replaceAll("+", "p").toLowerCase();
-        const customStringKeys = Object.assign( {}, this.stringKeys );
+        const lang = this.languages[ this.highlight ],
+              highlight = this.highlight.replace( /\s/g, '' ).replaceAll( "+", "p" ).toLowerCase(),
+              customStringKeys = Object.assign( {}, this.stringKeys );
 
-        if( highlight == 'cpp' && prev && prev.includes('#') ) // preprocessor code..
+        var usePreviousTokenToCheckString = false;
+
+        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 ] ));
+            };
+
+            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 );
 
-        const usesBlockComments = this.languages[ this.highlight ].blockComments ?? true;
+                // 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(token == ' ')
+        if( !usePreviousTokenToCheckString && token == ' ' )
         {
             if( this._buildingString != undefined )
             {
@@ -2285,7 +2493,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 +2504,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 +2545,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 +2604,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 == '.';
     }
@@ -2690,9 +2918,9 @@ class CodeEditor {
         cursor.position = state.position ?? 0;
 
         cursor._left = state.left ?? 0;
-        cursor.style.left = "calc(" + ( cursor._left - this.getScrollLeft() ) + "px + " + this.xPadding + ")";
+        cursor.style.left = "calc(" + cursor._left + "px + " + this.xPadding + ")";
         cursor._top = state.top ?? 0;
-        cursor.style.top = "calc(" + ( cursor._top - this.getScrollTop() ) + "px)";
+        cursor.style.top = "calc(" + cursor._top + "px)";
     }
 
     resetCursorPos( flag, cursor ) {
@@ -2773,8 +3001,6 @@ class CodeEditor {
 
             this.resizeScrollBars();
 
-            // console.warn("Resize editor viewport");
-
         }, 10 );
     }
 
@@ -2939,15 +3165,16 @@ class CodeEditor {
         return [ word, from, to ];
     }
 
-    _measureChar( char = "a", get_bb = false ) {
+    _measureChar( char = "a", use_floating = false, get_bb = false ) {
         
-        var test = document.createElement( "pre" );
-        test.className = "codechar";
-        test.innerHTML = char;
-        document.body.appendChild( test );
-        var rect = test.getBoundingClientRect();
-        deleteElement( test );
-        const bb = [ Math.floor( rect.width ), Math.floor( rect.height ) ];
+        var line = document.createElement( "pre" );
+        var text = document.createElement( "span" );
+        line.appendChild( text );
+        text.innerText = char;
+        this.code.appendChild( line );
+        var rect = text.getBoundingClientRect();
+        deleteElement( line );
+        const bb = [ use_floating ? rect.width : Math.floor( rect.width ), use_floating ? rect.height : Math.floor( rect.height ) ];
         return get_bb ? bb : bb[ 0 ];
     }
 
@@ -3030,15 +3257,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 +3276,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 +3383,146 @@ 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 line = null;
+        let char = -1;
+
+        if( this._lastResult )
+        {
+            this._lastResult.dom.remove();
+            cursorData = this._lastResult.pos;
+            delete this._lastResult;
+        }
+
+        const getIndex = l => {
+            return this.code.lines[ l ].substr( l == cursorData.y ? cursorData.x : 0 ).indexOf( text );
+        };
+
+        if( reverse )
+        {
+            for( var j = cursorData.y; j >= 0; --j )
+            {
+                char = getIndex( j );
+                if( char > -1 )
+                {
+                    line = j;
+                    break;
+                }
+            }
+        }
+        else
+        {
+            for( var j = cursorData.y; j < this.code.lines.length; ++j )
+            {
+                char = getIndex( j );
+                if( char > -1 )
+                {
+                    line = j;
+                    break;
+                }
+            }
+        }
+
+        if( line == null)
+        {
+            alert("No results!")
+            return;
+        }
+        
+        /*
+            Position idx is computed from last pos, which could be in same line,
+            so we search in the substring (first_ocurrence, end). That's why we 
+            have to add the length of the substring (0, first_ocurrence)
+        */
+
+        char += ( line == cursorData.y ? cursorData.x : 0 );
+
+        // Text found..
+
+        this._lastTextFound = text;
+
+        this.codeScroller.scrollTo( 
+            Math.max( char * this.charWidth - this.codeScroller.clientWidth ), 
+            Math.max( line - 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( char, line, this.measureString( text ) );
+        this._lastResult = {
+            'dom': this.selections.lastChild,
+            'pos': new LX.vec2( char + text.length, line )
+        };
+
+    }
+
+    showSearchLineBox() {
+        
+        this.searchlinebox.classList.add( 'opened' );
+        this.searchlineboxActive = true;
+
+        const input = this.searchlinebox.querySelector( 'input' );
+        input.value = ":";
+        input.focus();
+    }
+
+    hideSearchLineBox() {
+
+        if( this.searchlineboxActive )
+        {
+            this.searchlinebox.classList.remove( 'opened' );
+            this.searchlineboxActive = false;
+        }
+    }
+
+    goToLine( line ) {
+
+        if( !this.isNumber( line ) )
+            return;
+
+        this.codeScroller.scrollTo( 0, Math.max( line - 15 ) * this.lineHeight );
+    }
+
     _updateDataInfoPanel( signal, value ) {
 
         if( !this.skipCodeInfo )
@@ -3188,11 +3555,53 @@ class CodeEditor {
         }
     }
 
+    _increaseFontSize() {
+
+        // Change font size
+
+        var r = document.querySelector( ':root' );
+        var s = getComputedStyle( r );
+        var pixels = parseInt( s.getPropertyValue( "--code-editor-font-size" ) );
+        pixels = LX.UTILS.clamp( pixels + 1, CodeEditor.CODE_MIN_FONT_SIZE, CodeEditor.CODE_MAX_FONT_SIZE );
+        r.style.setProperty( "--code-editor-font-size", pixels + "px" );
+        this.charWidth = this._measureChar( "a", true );
+
+        // Change row size
+
+        var row_pixels = pixels + 6;
+        r.style.setProperty( "--code-editor-row-height", row_pixels + "px" );
+        this.lineHeight = row_pixels;
+
+        this.processLines(); // ... it's necessary?
+    }
+
+    _decreaseFontSize() {
+
+        // Change font size
+
+        var r = document.querySelector( ':root' );
+        var s = getComputedStyle( r );
+        var pixels = parseInt( s.getPropertyValue( "--code-editor-font-size" ) );
+        pixels = LX.UTILS.clamp( pixels - 1, CodeEditor.CODE_MIN_FONT_SIZE, CodeEditor.CODE_MAX_FONT_SIZE );
+        r.style.setProperty( "--code-editor-font-size", pixels + "px" );
+        this.charWidth = this._measureChar( "a", true );
+
+        // Change row size
+
+        var row_pixels = pixels + 6;
+        r.style.setProperty( "--code-editor-row-height", row_pixels + "px" );
+        this.lineHeight = row_pixels;
+
+        this.processLines(); // ... it's necessary?
+    }
+
     _clearTmpVariables() {
 
+        delete this._currentLineString;
         delete this._buildingString; 
         delete this._pendingString;
         delete this._buildingBlockComment;
+        delete this._markdownHeader;
     }
 }