fix: Incorrect cursor behavior in SQL Query Editor

Author: elmilan06

frontend/src/app/shared/components/code-editor/code-editor.component.html

@@ -40,7 +40,7 @@
       (selectQuery)="writeValue($event)">
     </app-query-suggestions>
     <ngx-monaco-editor
-      class="editor-area"
+      class="editor-area pt-2"
       [options]="consoleOptions"
       [(ngModel)]="sqlQuery"
       (ngModelChange)="clearMessages()"

frontend/src/app/shared/components/code-editor/code-editor.component.scss

@@ -34,6 +34,7 @@
     flex: 1;
     overflow: hidden;
     border-bottom: 1px solid #e0e6ed;
+    background-color: #fffffe;
 
     .editor-area {
       height: 100%;
@@ -64,10 +65,6 @@
   color: #fff !important;
 }
 
-::ng-deep .monaco-editor {
-  padding-top: 10px;
-}
-
 .monaco-editor .suggest-widget .codicon {
   display: none !important;
 }

frontend/src/app/shared/components/code-editor/code-editor.component.ts

@@ -21,6 +21,7 @@ export interface ConsoleOptions {
   wordWrap?: 'off' | 'on' | 'wordWrapColumn' | 'bounded';
   automaticLayout?: boolean;
   lineNumbers?: 'off' | 'on';
+  cursorSmoothCaretAnimation?: 'off' | 'on';
 }
 
 const SQL_KEYWORDS = ['CREATE', 'DROP', 'ALTER', 'TRUNCATE',
@@ -74,7 +75,8 @@ export class CodeEditorComponent implements OnInit, OnDestroy, ControlValueAcces
     overviewRulerLanes: 0,
     wordWrap: 'on',
     automaticLayout: true,
-    lineNumbers: 'on'
+    lineNumbers: 'on',
+    cursorSmoothCaretAnimation: 'off'
   };
   private completionProvider?: monaco.IDisposable;
   private onChange = (_: any) => {};
@@ -93,7 +95,7 @@ export class CodeEditorComponent implements OnInit, OnDestroy, ControlValueAcces
     }
   }
 
-  onEditorInit(editor: monaco.editor.IStandaloneCodeEditor) {
+  onEditorInit(editorInstance: monaco.editor.IStandaloneCodeEditor) {
     this.completionProvider = monaco.languages.registerCompletionItemProvider('sql', {
       provideCompletionItems: () => {
         const allKeywords = Array.from(new Set([
@@ -111,8 +113,8 @@ export class CodeEditorComponent implements OnInit, OnDestroy, ControlValueAcces
       }
     });
 
-    editor.onDidChangeModelContent(() => {
-      const val = editor.getValue();
+    editorInstance.onDidChangeModelContent(() => {
+      const val = editorInstance.getValue();
       this.sqlQuery = val;
       this.onChange(val);
       this.onTouched();