lexgui 0.7.11 → 0.7.13

package/build/extensions/codeeditor.js

@@ -946,8 +946,11 @@ class CodeEditor
                     {
                         this._processSelection( cursor, e );
                     }
-                } else if( !e.keepSelection )
+                }
+                else if( !e.keepSelection )
+                {
                     this.endSelection();
+                }
             });
 
             this.action( 'End', false, ( ln, cursor, e ) => {
@@ -2502,7 +2505,7 @@ class CodeEditor
         {
             // Make sure we only keep the main cursor..
             this._removeSecondaryCursors();
-            this.cursorToLine( cursor, ln, true );
+            this.cursorToLine( cursor, ln );
             this.cursorToPosition( cursor, string.length );
         }
 
@@ -4077,7 +4080,7 @@ class CodeEditor
             charCounter += t.length;
         };
 
-        let iter = lineString.matchAll(/(<!--|-->|\*\/|\/\*|::|[\[\](){}<>.,;:*"'%@$!/= ])/g);
+        let iter = lineString.matchAll(/(<!--|-->|\*\/|\/\*|::|[\[\](){}<>.,;:*"'`%@$!/= ])/g);
         let subtokens = iter.next();
         if( subtokens.value )
         {
@@ -4237,13 +4240,29 @@ class CodeEditor
             usePreviousTokenToCheckString = true;
             customStringKeys['@['] = ']';
         }
+        else if( highlight == 'javascript' || highlight == 'typescript' )
+        {
+            customStringKeys["@`"] = "`";
+        }
 
         // Manage strings
         this._stringEnded = false;
 
         if( usePreviousTokenToCheckString || ( !inBlockComment && ( lang.tags ?? false ? ( this._enclosedByTokens( token, tokenIndex, '<', '>' ) ) : true ) ) )
         {
-            const _checkIfStringEnded = t => {
+            const _checkIfStringEnded = ( t ) => {
+
+                if( this._stringInterpolation )
+                {
+                    if( token == "$" && next == "{" )
+                    {
+                        delete this._stringInterpolation;
+                        this._stringInterpolationOpened = true;
+                        this._stringEnded = true;
+                        return;
+                    }
+                }
+
                 const idx = Object.values( customStringKeys ).indexOf( t );
                 this._stringEnded = (idx > -1) && (idx == Object.values(customStringKeys).indexOf( customStringKeys[ '@' + this._buildingString ] ));
             };
@@ -4257,12 +4276,23 @@ class CodeEditor
                 // Start new string
                 this._buildingString = ( usePreviousTokenToCheckString ? ctxData.prevWithSpaces : token );
 
+                if( ( highlight == 'javascript' || highlight == 'typescript' ) && token == "`" )
+                {
+                    this._stringInterpolation = true;
+                }
+
                 // Check if string ended in same token using next...
                 if( usePreviousTokenToCheckString )
                 {
                     _checkIfStringEnded( ctxData.nextWithSpaces );
                 }
             }
+            else if( this._stringInterpolationOpened && prev == "}" )
+            {
+                delete this._stringInterpolationOpened;
+                this._stringInterpolation = true;
+                this._buildingString = "`";
+            }
         }
 
         // Update context data for next tests
@@ -4284,6 +4314,16 @@ class CodeEditor
         // Get highlighting class based on language common and specific rules
         let tokenClass = this._getTokenHighlighting( ctxData, highlight );
 
+        if( this._stringInterpolationOpened && this._pendingString )
+        {
+            this._pendingString = this._pendingString.substring( 0, this._pendingString.indexOf( "$" ) );
+
+            if( ctxData.tokens[ tokenIndex + 1 ] == "{" )
+            {
+                ctxData.tokens[ tokenIndex + 1 ] = "${";
+            }
+        }
+
         // We finished constructing a string
         if( this._buildingString && ( this._stringEnded || isLastToken ) && !inBlockComment )
         {
@@ -4671,43 +4711,57 @@ class CodeEditor
         this.hideAutoCompleteBox();
     }
 
-    cursorToRight( key, cursor )
+    cursorToRight( text, cursor )
     {
-        if( !key ) return;
+        if( !text || !text.length ) return;
+
+        const chars = text.length;
+        const offset = chars * this.charWidth;
 
-        cursor._left += this.charWidth;
+        cursor._left += offset;
         cursor.style.left = `calc( ${ cursor._left }px + ${ this.xPadding } )`;
-        cursor.position++;
+        cursor.position += chars;
 
         this.restartBlink();
 
         // Add horizontal scroll
+        const rightMargin = this.charWidth;
+        const cursorX = ( cursor.position * this.charWidth );
         const currentScrollLeft = this.getScrollLeft();
-        var viewportSizeX = ( this.codeScroller.clientWidth + currentScrollLeft ) - CodeEditor.LINE_GUTTER_WIDTH; // Gutter offset
-        if( (cursor.position * this.charWidth) >= viewportSizeX )
+        const viewportSizeX = this.codeScroller.clientWidth - CodeEditor.LINE_GUTTER_WIDTH; // Gutter offset
+        const viewportX = viewportSizeX + currentScrollLeft;
+
+        if( cursorX >= ( viewportX - rightMargin ) )
         {
-            this.setScrollLeft( currentScrollLeft + this.charWidth );
+            const scroll = Math.max( cursorX - ( viewportSizeX - rightMargin ), 0 );
+            this.setScrollLeft( scroll );
         }
     }
 
-    cursorToLeft( key, cursor )
+    cursorToLeft( text, cursor )
     {
-        if( !key ) return;
+        if( !text || !text.length ) return;
+
+        const chars = text.length;
+        const offset = chars * this.charWidth;
 
-        cursor._left -= this.charWidth;
+        cursor._left -= offset;
         cursor._left = Math.max( cursor._left, 0 );
         cursor.style.left = `calc( ${ cursor._left }px + ${ this.xPadding } )`;
-        cursor.position--;
+        cursor.position -= chars;
         cursor.position = Math.max( cursor.position, 0 );
+
         this.restartBlink();
 
         // Add horizontal scroll
-
+        const leftMargin = this.charWidth;
+        const cursorX = ( cursor.position * this.charWidth );
         const currentScrollLeft = this.getScrollLeft();
-        var viewportSizeX = currentScrollLeft; // Gutter offset
-        if( ( ( cursor.position - 1 ) * this.charWidth ) < viewportSizeX )
+
+        if( cursorX < ( currentScrollLeft + leftMargin ) )
         {
-            this.setScrollLeft( currentScrollLeft - this.charWidth );
+            const scroll = Math.max( cursorX - leftMargin, 0 );
+            this.setScrollLeft( scroll );
         }
     }
 
@@ -4759,9 +4813,13 @@ class CodeEditor
             return;
         }
 
-        for( let char of text )
+        if( reverse )
         {
-            reverse ? this.cursorToLeft( char, cursor ) : this.cursorToRight( char, cursor );
+            this.cursorToLeft( text, cursor )
+        }
+        else
+        {
+            this.cursorToRight( text, cursor );
         }
     }
 
@@ -4867,15 +4925,17 @@ class CodeEditor
         if( flag & CodeEditor.CURSOR_LEFT )
         {
             cursor._left = 0;
-            cursor.style.left = "calc(" + ( -this.getScrollLeft() ) + "px + " + this.xPadding + ")";
+            cursor.style.left = "calc(" + this.xPadding + ")";
             cursor.position = 0;
+            this.setScrollLeft( 0 );
         }
 
         if( flag & CodeEditor.CURSOR_TOP )
         {
             cursor._top = 0;
-            cursor.style.top = ( -this.getScrollTop() ) + "px";
+            cursor.style.top = "0px";
             cursor.line = 0;
+            this.setScrollTop( 0 )
         }
     }
 
@@ -5034,7 +5094,7 @@ class CodeEditor
         LX.doAsync( () => {
             this.codeScroller.scrollLeft = value;
             this.setScrollBarValue( 'horizontal', 0 );
-        }, 20 );
+        }, 10 );
     }
 
     setScrollTop( value )
@@ -5043,7 +5103,7 @@ class CodeEditor
         LX.doAsync( () => {
             this.codeScroller.scrollTop = value;
             this.setScrollBarValue( 'vertical' );
-        }, 20 );
+        }, 10 );
     }
 
     resize( flag = CodeEditor.RESIZE_SCROLLBAR_H_V, pMaxLength, onResize )