lexgui 0.1.23 → 0.1.24

package/build/components/codeeditor.js

@@ -333,7 +333,7 @@ class CodeEditor {
 
         // Add main cursor
         {
-            this._addCursor( 0, 0, true );
+            this._addCursor( 0, 0, true, true );
 
             Object.defineProperty( this, 'line', {
                 get: (v) => { return this._getCurrentCursor().line }
@@ -739,14 +739,18 @@ class CodeEditor {
             if(idx > 0) this.cursorToString( cursor, prestring );
             this.setScrollLeft( 0 );
 
+            // Merge cursors
+            this.mergeCursors( ln );
+
             if( e.shiftKey && !e.cancelShift )
             {
                 // Get last selection range
                 if( this.selection ) 
-                lastX += this.selection.chars;
+                    lastX += this.selection.chars;
 
                 if( !this.selection )
                     this.startSelection( cursor );
+
                 var string = this.code.lines[ ln ].substring( idx, lastX );
                 if( this.selection.sameLine() )
                     this.selection.selectInline( idx, cursor.line, this.measureString( string ) );
@@ -781,6 +785,9 @@ class CodeEditor {
 
             const last_char = ( this.code.clientWidth / this.charWidth )|0;
             this.setScrollLeft( cursor.position >= last_char ? ( cursor.position - last_char ) * this.charWidth : 0 );
+
+            // Merge cursors
+            this.mergeCursors( ln );
         });
 
         this.action( 'Enter', true, ( ln, cursor, e ) => {
@@ -806,6 +813,7 @@ class CodeEditor {
             this.code.lines.splice( cursor.line + 1, 0, "" );
             this.code.lines[cursor.line + 1] = this.code.lines[ ln ].substr( cursor.position ); // new line (below)
             this.code.lines[ ln ] = this.code.lines[ ln ].substr( 0, cursor.position ); // line above
+
             this.lineDown( cursor, true );
 
             // Check indentation
@@ -864,24 +872,20 @@ class CodeEditor {
                 if( e.shiftKey ) {
                     if( !this.selection )
                         this.startSelection( cursor );
+                } else {
+                    this.endSelection();
+                }
 
-                    this.lineDown( cursor );
-                    
-                    var letter = this.getCharAtPos( cursor );
-                    if( !letter ) {
-                        this.cursorToPosition( cursor, Math.max(this.code.lines[ cursor.line ].length - 1, 0) );
-                    }
+                const canGoDown = this.lineDown( cursor );
+                const letter = this.getCharAtPos( cursor );
+
+                // Go to end of line if out of range
+                if( !letter || !canGoDown ) {
+                    this.actions[ 'End' ].callback( cursor.line, cursor, e );
+                }
 
+                if( e.shiftKey ) {
                     this.processSelection( e );
-                } else {
-    
-                    if( this.code.lines[ ln + 1 ] == undefined ) 
-                        return;
-                    this.endSelection();
-                    this.lineDown( cursor );
-                    // Go to end of line if out of line
-                    var letter = this.getCharAtPos( cursor );
-                    if( !letter ) this.actions['End'].callback(cursor.line, cursor, e);
                 }
             } 
             // Move down autocomplete selection
@@ -1212,25 +1216,36 @@ class CodeEditor {
         }
     }
 
-    _addCursor( line = 0, position = 0, isMain = false ) {
+    _addCursor( line = 0, position = 0, force, isMain = false ) {
+
+        // If cursor in that position exists, remove it instead..
+        const exists = Array.from( this.cursors.children ).find( v => v.position == position && v.line == line );
+        if( exists && !force )
+        {
+            if( !exists.isMain )
+                exists.remove();
+
+            return;
+        }
 
         let cursor = document.createElement( 'div' );
         cursor.className = "cursor";
         cursor.innerHTML = " ";
-        cursor.isMainCursor = isMain;
+        cursor.isMain = isMain;
         cursor._left = position * this.charWidth;
         cursor.style.left = "calc( " + cursor._left + "px + " + this.xPadding + " )";
         cursor._top = line * this.lineHeight;
         cursor.style.top = cursor._top + "px";
         cursor._position = position;
         cursor._line = line;
-        cursor.print = (function() { console.log( this, this._line, this._position ) }).bind( cursor );
+        cursor.print = (function() { console.log( this._line, this._position ) }).bind( cursor );
+        cursor.isLast = (function() { return this.cursors.lastChild == cursor; }).bind( this );
 
         Object.defineProperty( cursor, 'line', {
             get: (v) => { return cursor._line },
             set: (v) => { 
                 cursor._line = v;
-                if( cursor.isMainCursor ) this._setActiveLine( v );
+                if( cursor.isMain ) this._setActiveLine( v );
             }
         } );
 
@@ -1238,7 +1253,7 @@ class CodeEditor {
             get: (v) => { return cursor._position },
             set: (v) => { 
                 cursor._position = v;
-                if( cursor.isMainCursor ) this._updateDataInfoPanel( "@cursor-pos", "Col " + v );
+                if( cursor.isMain ) this._updateDataInfoPanel( "@cursor-pos", "Col " + v );
             }
         } );
 
@@ -1273,6 +1288,10 @@ class CodeEditor {
 
     _addUndoStep( cursor, force, deleteRedo = true )  {
 
+        // Only the mainc cursor stores undo steps
+        if( !cursor.isMain )
+            return;
+
         const d = new Date();
         const current = d.getTime();
 
@@ -1281,7 +1300,7 @@ class CodeEditor {
             if( !this._lastTime ) {
                 this._lastTime = current;
             } else {
-                if( ( current - this._lastTime ) > 3000 ){
+                if( ( current - this._lastTime ) > 2000 ){
                     this._lastTime = null;
                 } else {
                     // If time not enough, reset timer
@@ -1299,22 +1318,78 @@ class CodeEditor {
 
         this.code.undoSteps.push( {
             lines: LX.deepCopy( this.code.lines ),
-            cursor: this.saveCursor( cursor ),
-            line: cursor.line,
-            position: cursor.position
+            cursors: this.saveCursors()
         } );
     }
 
+    _doUndo( cursor ) {
+
+        if( !this.code.undoSteps.length )
+            return;
+
+        this._addRedoStep( cursor );
+
+        // Extract info from the last code state
+        const step = this.code.undoSteps.pop();
+
+        // Set old state lines
+        this.code.lines = step.lines;
+        this.processLines();
+
+        this._removeSecondaryCursors();
+
+        for( let i = 0; i < step.cursors.length; ++i )
+        {
+            var currentCursor = this.cursors.children[ i ];
+
+            // Generate new if needed
+            if( !currentCursor )
+                currentCursor = this._addCursor();
+
+            this.restoreCursor( currentCursor, step.cursors[ i ] );
+        }
+    }
+
     _addRedoStep( cursor )  {
 
+        // Only the mainc cursor stores redo steps
+        if( !cursor.isMain )
+            return;
+
         this.code.redoSteps.push( {
             lines: LX.deepCopy( this.code.lines ),
-            cursor: this.saveCursor( cursor ),
-            line: cursor.line,
-            position: cursor.position
+            cursors: this.saveCursors()
         } );
     }
 
+    _doRedo( cursor ) {
+
+        if( !this.code.redoSteps.length )
+            return;
+
+        this._addUndoStep( cursor, true, false);
+
+        // Extract info from the next saved code state
+        const step = this.code.redoSteps.pop();
+
+        // Set old state lines
+        this.code.lines = step.lines;
+        this.processLines();
+
+        this._removeSecondaryCursors();
+
+        for( let i = 0; i < step.cursors.length; ++i )
+        {
+            var currentCursor = this.cursors.children[ i ];
+
+            // Generate new if needed
+            if( !currentCursor )
+                currentCursor = this._addCursor();
+
+            this.restoreCursor( currentCursor, step.cursors[ i ] );
+        }
+    }
+
     _changeLanguage( lang ) {
 
         this.code.language = lang;
@@ -1610,7 +1685,7 @@ class CodeEditor {
 
     processMouse( e ) {
 
-        if( !e.target.classList.contains('code') ) return;
+        if( !e.target.classList.contains('code') && !e.target.classList.contains('codetabsarea') ) return;
         if( !this.code ) return;
 
         var cursor = this._getCurrentCursor();
@@ -1618,11 +1693,8 @@ class CodeEditor {
         var mouse_pos = [(e.clientX - code_rect.x), (e.clientY - code_rect.y)];
 
         // Discard out of lines click...
-        if( e.type != 'contextmenu' )
-        {
-            var ln = (mouse_pos[1] / this.lineHeight)|0;
-            if(this.code.lines[ ln ] == undefined) return;
-        }
+        var ln = ( mouse_pos[ 1 ] / this.lineHeight ) | 0;
+        if( ln < 0 ) return;
 
         if( e.type == 'mousedown' )
         {
@@ -1730,11 +1802,12 @@ class CodeEditor {
         var position = [( e.clientX - code_rect.x ) + this.getScrollLeft(), (e.clientY - code_rect.y) + this.getScrollTop()];
         var ln = (position[ 1 ] / this.lineHeight)|0;
 
-        if( this.code.lines[ ln ] == undefined )
-            return;
+        // Check out of range line
+        const outOfRange = ln > this.code.lines.length - 1;
+        ln = Math.min( ln, this.code.lines.length - 1 );
 
         var ch = ( ( position[ 0 ] - parseInt( this.xPadding ) + 3) / this.charWidth )|0;
-        var string = this.code.lines[ ln ].slice( 0, ch );
+        var string = outOfRange ? this.code.lines[ ln ] : this.code.lines[ ln ].slice( 0, ch );
 
         // Move main cursor there...
         if( !e.altKey )
@@ -1911,10 +1984,29 @@ class CodeEditor {
         }
     }
 
-    async processKey( event ) {
+    async processKey( e ) {
         
         const numCursors = this.cursors.childElementCount;
 
+        if( !this.code || e.srcElement.constructor != HTMLDivElement ) 
+        return;
+
+        const key = e.key ?? e.detail.key;
+        const target = e.detail.targetCursor;
+
+        if( target !== undefined )
+        {
+            this.processKeyAtTargetCursor( e, key, target );
+            return;
+        }
+
+        // By cursor keys
+
+        this._lastProcessedCursorIndex = null;
+
+        var lastProcessedCursor = null;
+        var cursorOffset = new LX.vec2( 0, 0 );
+
         for( var i = 0; i < numCursors; i++ )
         {
             let cursor = this.cursors.children[ i ];
@@ -1923,16 +2015,83 @@ class CodeEditor {
             if( !cursor )
                 break;
 
-            this.processKeyAtCursor( event, cursor );
+            // Arrows don't modify code lines.. And only add offset if in the same line
+            if( lastProcessedCursor && lastProcessedCursor.line == cursor.line && !key.includes( 'Arrow' ) )
+            {
+                cursor.position += cursorOffset.x;
+                cursor.line += cursorOffset.y;
+
+                this.relocateCursors();
+            }
+
+            lastProcessedCursor = this.saveCursor( cursor );
+            this._lastProcessedCursorIndex = i;
+
+            this._processKeyAtCursor( e, key, cursor );
+
+            cursorOffset.x += ( cursor.position - lastProcessedCursor.position );
+            cursorOffset.y += ( cursor.line - lastProcessedCursor.line );
         }
+
+        // Global keys
+
+        this._processGlobalKeys( e, key );
+
+        // Clear tmp
+
+        delete this._lastProcessedCursorIndex;
     }
 
-    async processKeyAtCursor( e, cursor ) {
+    async processKeyAtTargetCursor( e, key, targetIdx ) {
 
-        if( !this.code || e.srcElement.constructor != HTMLDivElement ) 
+        let cursor = this.cursors.children[ targetIdx ];
+
+        // We could delete secondary cursor while iterating..
+        if( !cursor )
             return;
 
-        var key = e.key ?? e.detail.key;
+        this._processKeyAtCursor( e, key, cursor );
+        this._processGlobalKeys( e, key );
+    }
+
+    async _processGlobalKeys( e, key ) {
+
+        let cursor = this._getCurrentCursor();
+
+        if( e.ctrlKey || e.metaKey )
+        {
+            e.preventDefault();
+
+            switch( key.toLowerCase() ) {
+            case 'a': // select all
+                this.selectAll();
+                break;
+            case 'f': // find/search
+                this.showSearchBox();
+                break;
+            case 'g': // find line
+                this.showSearchLineBox();
+                break;
+            case 's': // save
+                this.onsave( this.getText() );
+                break;
+            case 'y': // redo
+                this._doRedo( cursor );
+                break;
+            case 'z': // undo
+                this._doUndo( cursor );
+                break;
+            case '+': // increase size
+                this._increaseFontSize();
+                break;
+            case '-': // decrease size
+                this._decreaseFontSize();
+                break;
+            }
+        }
+    }
+
+    async _processKeyAtCursor( e, key, cursor ) {
 
         const skip_undo = e.detail.skip_undo ?? false;
 
@@ -1945,32 +2104,20 @@ class CodeEditor {
 
         // Check combinations
 
+        const isLastCursor = cursor.isLast();
+
         if( e.ctrlKey || e.metaKey )
         {
             switch( key.toLowerCase() ) {
-            case 'a': // select all
-                e.preventDefault();
-                this.selectAll( cursor );
-                break;
             case 'c': // copy
+                // TODO: COPY TEXT FROM EVERY CURSOR
                 this._copyContent( cursor );
                 return;
             case 'd': // duplicate line
                 e.preventDefault();
+                // TODO: UPDATE NEXT CURSOR ON MODIFY STATE
                 this._duplicateLine( lidx, cursor );
                 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() );
-                return;
             case 'v': // paste
                 this._pasteContent( cursor );
                 return;
@@ -1978,39 +2125,13 @@ class CodeEditor {
                 this._cutContent( cursor );
                 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;
-                this._addRedoStep( cursor );
-                const undo_step = this.code.undoSteps.pop();
-                this.code.lines = undo_step.lines;
-                this.processLines();
-                this.restoreCursor( cursor, undo_step.cursor );
-                return;
-            case '+': // increase size
-                e.preventDefault();
-                this._increaseFontSize();
-                return;
-            case '-': // decrease size
-                e.preventDefault();
-                this._decreaseFontSize();
-                return;
             case 'arrowdown': // add cursor below only for the main cursor..
-                if( cursor.isMainCursor && this.code.lines[ lidx + 1 ] != undefined )
+                if( isLastCursor && this.code.lines[ lidx + 1 ] != undefined )
                 {
-                    var new_cursor = this._addCursor( cursor.line, cursor.position );
+                    var new_cursor = this._addCursor( cursor.line, cursor.position, true );
                     this.lineDown( new_cursor );
-                    return;
                 }
+                return;
             }
         }
 
@@ -2136,6 +2257,9 @@ class CodeEditor {
     async _pasteContent( cursor ) {
 
         let text = await navigator.clipboard.readText();
+
+        this._addUndoStep( cursor, true );
+
         this.appendText( text, cursor );
     }
 
@@ -2152,18 +2276,18 @@ class CodeEditor {
             if( this.selection ) this.selection.invertIfNecessary();
 
             const separator = "_NEWLINE_";
-            let code = this.code.lines.join(separator);
+            let code = this.code.lines.join( separator );
 
             // Get linear start index
             let index = 0;
             
-            for(let i = 0; i <= this.selection.fromY; i++)
-                index += (i == this.selection.fromY ? this.selection.fromX : this.code.lines[ i ].length);
+            for( let i = 0; i <= this.selection.fromY; i++ )
+                index += ( i == this.selection.fromY ? this.selection.fromX : this.code.lines[ i ].length );
 
             index += this.selection.fromY * separator.length; 
-            const num_chars = this.selection.chars + (this.selection.toY - this.selection.fromY) * separator.length;
-            const text = code.substr(index, num_chars);
-            const lines = text.split(separator);
+            const num_chars = this.selection.chars + ( this.selection.toY - this.selection.fromY ) * separator.length;
+            const text = code.substr( index, num_chars );
+            const lines = text.split( separator );
             text_to_copy = lines.join('\n');
         }
 
@@ -2254,8 +2378,6 @@ class CodeEditor {
 
     processLines( mode ) {
         
-        const start = performance.now();
-
         var code_html = "";
         
         // Reset all lines content
@@ -2804,6 +2926,7 @@ class CodeEditor {
             return false;
     
         cursor.line++;
+
         this.cursorToBottom( cursor, resetLeft );
 
         return true;
@@ -2876,16 +2999,25 @@ class CodeEditor {
         delete this._lastSelectionKeyDir;
     }
 
-    selectAll( cursor ) {
+    selectAll() {
+
+        // Use main cursor
+        this._removeSecondaryCursors();
 
+        var cursor = this._getCurrentCursor();
         this.resetCursorPos( CodeEditor.CURSOR_LEFT | CodeEditor.CURSOR_TOP, cursor );
+
         this.startSelection( cursor );
+
         const nlines = this.code.lines.length - 1;
         this.selection.toX = this.code.lines[ nlines ].length;
         this.selection.toY = nlines;
+
         this.cursorToPosition( cursor, this.selection.toX );
         this.cursorToLine( cursor, this.selection.toY );
+
         this.processSelection( null, true );
+
         this.hideAutoCompleteBox();
     }
 
@@ -2988,22 +3120,51 @@ class CodeEditor {
 
     saveCursor( cursor, state = {} ) {
 
-        state.top = cursor._top;
-        state.left = cursor._left;
-        state.line = cursor.line;
         state.position = cursor.position;
-
+        state.line = cursor.line;
         return state;
     }
 
+    saveCursors() {
+
+        var cursors = [];
+
+        for( let cursor of this.cursors.children )
+        {
+            cursors.push( this.saveCursor( cursor ) );
+        }
+
+        return cursors;
+    }
+
+    relocateCursors() {
+
+        for( let cursor of this.cursors.children )
+        {
+            cursor._left = cursor.position * this.charWidth;
+            cursor.style.left = "calc(" + cursor._left + "px + " + this.xPadding + ")";
+            cursor._top = cursor.line * this.lineHeight;
+            cursor.style.top = "calc(" + cursor._top + "px)";
+        }
+    }
+
+    mergeCursors( line ) {
+
+        console.assert( line >= 0 );
+        const cursorsInLine = Array.from( this.cursors.children ).filter( v => v.line == line );
+
+        while( cursorsInLine.length > 1 )
+            cursorsInLine.pop().remove();
+    }
+
     restoreCursor( cursor, state ) {
 
-        cursor.line = state.line ?? 0;
         cursor.position = state.position ?? 0;
+        cursor.line = state.line ?? 0;
 
-        cursor._left = state.left ?? 0;
+        cursor._left = cursor.position * this.charWidth;
         cursor.style.left = "calc(" + cursor._left + "px + " + this.xPadding + ")";
-        cursor._top = state.top ?? 0;
+        cursor._top = cursor.line * this.lineHeight;
         cursor.style.top = "calc(" + cursor._top + "px)";
     }
 
@@ -3038,7 +3199,8 @@ class CodeEditor {
         for( var i = 0; i < n; ++i ) {
             this.root.dispatchEvent( new CustomEvent( 'keydown', { 'detail': {
                 skip_undo: true,
-                key: ' '
+                key: ' ',
+                targetCursor: this._lastProcessedCursorIndex
             }}));
         }
     }
@@ -3664,7 +3826,13 @@ class CodeEditor {
         r.style.setProperty( "--code-editor-row-height", row_pixels + "px" );
         this.lineHeight = row_pixels;
 
-        this.processLines(); // ... it's necessary?
+        // Relocate cursors
+
+        this.relocateCursors();
+
+        // Resize the code area
+
+        this.processLines();
     }
 
     _decreaseFontSize() {
@@ -3684,7 +3852,13 @@ class CodeEditor {
         r.style.setProperty( "--code-editor-row-height", row_pixels + "px" );
         this.lineHeight = row_pixels;
 
-        this.processLines(); // ... it's necessary?
+        // Relocate cursors
+
+        this.relocateCursors();
+
+        // Resize the code area
+
+        this.processLines();
     }
 
     _clearTmpVariables() {

package/build/lexgui.css

@@ -5,6 +5,7 @@
   --global-font: 'Noto Sans', sans-serif; /*'Rubik', sans-serif; */
   --global-selected: #3e57e4;
   --global-selected-light: #7b8ae2;
+  --global-selected-dark: #344bccb7;
   --global-color-primary: #232323;
   --global-color-secondary: #343434;
   --global-color-terciary: #444;
@@ -1786,10 +1787,10 @@ meter::-webkit-meter-even-less-good-value {
   z-index: 102;
   position: absolute;
   padding-right: 20px;
-  border-bottom-left-radius: 6px;
-  border-bottom-right-radius: 6px;
-  box-shadow: 0 0 6px black !important;
+  border-radius: 4px;
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.63) !important;
   background-color: var(--global-blur-background);
+  border: 1px solid #91909036;
 }
 
 .lexcontextmenubox:before {
@@ -1802,13 +1803,14 @@ meter::-webkit-meter-even-less-good-value {
   -webkit-backdrop-filter: blur(10px);
   backdrop-filter: blur(10px);
   z-index:-1;
+  border-radius: 4px;
 }
 
 .lexcontextmenubox .lexcontextmenuentry {
   width: 100%;
   color: #c0c4cbe3;
   padding: 3px;
-  padding-left: 8px;
+  padding-left: 10px;
   padding-right: 10px;
   padding-bottom: 4px;
   cursor: pointer;
@@ -1816,7 +1818,16 @@ meter::-webkit-meter-even-less-good-value {
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  border-left: 2px solid var(--global-selected-light);
+}
+
+.lexcontextmenubox .lexcontextmenuentry:first-child {
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+}
+
+.lexcontextmenubox .lexcontextmenuentry:last-child {
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
 }
 
 .lexcontextmenubox .lexcontextmenuentry.cmtitle {
@@ -1848,17 +1859,17 @@ meter::-webkit-meter-even-less-good-value {
   float: right;
   margin-right: 0px;
   margin-top: 10px;
-  font-size: 11px;
+  font-size: 10px;
 }
 
 /* submenu specified arrow  */
 .lexcontextmenubox .lexcontextmenuentry a.fa-xs {
   float: right;
-  margin-top: -7px;
+  margin-top: -8px;
 }
 
 .lexcontextmenubox .lexcontextmenuentry:hover:not(.cmtitle) {
-  background-color: var(--global-selected);
+  background-color: var(--global-selected-dark);
   color: #f5f5f5;
 }
 
@@ -2950,7 +2961,8 @@ pre .line-gutter {
   height: var(--code-editor-row-height);
   position: absolute;
   border-left: 3px solid #fff !important;
-  z-index: 0 !important;
+  z-index: 1 !important;
+  opacity: 0.6;
   left: 0px;
   top: 0px;
 }

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.23",
+        version: "0.1.24",
         ready: false,
         components: [], // specific pre-build components
         signals: {} // events and triggers

package/build/lexgui.module.js

@@ -8,7 +8,7 @@
 */
 
 var LX = {
-    version: "0.1.23",
+    version: "0.1.24",
     ready: false,
     components: [], // specific pre-build components
     signals: {} // events and triggers

package/changelog.md

@@ -1,38 +1,55 @@
 # lexgui.js changelog
 
+## 0.1.24
+
+Code Editor:
+- Improved single and multiple cursor usability.
+- Cursor can be added or removed using "Alt+LeftClick".
+- Fixed clicks outside the code area.
+- Minor bug fixes.
+
 ## 0.1.23
 
-Begin integration of multiple cursors ("Ctrl+ArrowDown").
-Code tabs have new VS Code-alike style.
-Improved CSS highlighting.
-Add Undo Steps to some actions that were missing.
-When using Ctrl+G, the selected line is now highlighted.
-General bug fixes.
+Code Editor:
+- Begin integration of multiple cursors ("Ctrl+ArrowDown").
+- Code tabs have new VS Code-alike style.
+- Improved CSS highlighting.
+- Add Undo Steps to some actions that were missing.
+- When using Ctrl+G, the selected line is now highlighted.
+
+Minor fixes.
 
 ## 0.1.22
 
-Added REDO using "Ctrl+Y".
-Added FontSize customization. "Ctrl+PLUS", "Ctrl+MINUS" or "Ctrl+Wheel".
-Added "Ctrl+G" to scroll to specific line.
-General bug fixes.
+Code Editor:
+- Added REDO using "Ctrl+Y".
+- Added FontSize customization. "Ctrl+PLUS", "Ctrl+MINUS" or "Ctrl+Wheel".
+- Added "Ctrl+G" to scroll to specific line.
+
+Minor fixes.
 
 ## 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).
+Code Editor:
+- 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.
-Using CommitMono font (https://commitmono.com/) as the font for the Code Editor. 
-Added "Rust" syntax highlighting. 
-Improved all code selections (and some bugs fixed).
-Block comments are now working again (with bugs probably). 
+Code Editor:
+- Active line is now hightlighted.
+- Using CommitMono font (https://commitmono.com/) as the font for the Code Editor. 
+- Added "Rust" syntax highlighting. 
+- Improved all code selections (and some bugs fixed).
+- Block comments are now working again (with bugs probably).
+
 Minor fixes.
 
 ## 0.1.19
 
-Add file explorer to Code Editor component. 
+Code Editor:
+- Add file explorer to Code Editor component. 
+
 Minor fixes.

package/examples/code_editor.html

@@ -55,7 +55,7 @@
             file_explorer: file_explorer
         });
 
-        editor.loadFile( "../demo.js" );
+        editor.loadFile( "../data/js_sample.js" );
         // editor.loadFile( "../data/json_sample.json" );
         // editor.loadFile( "../data/css_sample.css" );
         // editor.loadFile( "../data/cpp_sample.cpp" );

package/package.json

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