CB-5185 SQL Editor queries highlighting is broken

webapp/packages/plugin-codemirror6/src/theme/_base-code-editor.scss

@@ -86,11 +86,8 @@
   }
 
   .editor .active-query {
-    /* disable because look too ugly */
-    /*
     display: inline-block;
     @include mdc-theme-prop(background, secondary, false);
-    */
   }
 
   .editor .cm-content ::selection {

webapp/packages/plugin-sql-editor/src/SqlDataSource/BaseSqlDataSource.ts

@@ -82,6 +82,7 @@ export abstract class BaseSqlDataSource implements ISqlDataSource {
   readonly onUpdate: ISyncExecutor;
   readonly onSetScript: ISyncExecutor<ISetScriptData>;
   readonly onDatabaseModelUpdate: ISyncExecutor<IDatabaseDataModel<QueryDataSource>[]>;
+  readonly onSetCursor: ISyncExecutor<ISqlEditorCursor>;
 
   protected outdated: boolean;
   protected editing: boolean;
@@ -101,6 +102,7 @@ export abstract class BaseSqlDataSource implements ISqlDataSource {
     this.onUpdate = new SyncExecutor();
     this.onSetScript = new SyncExecutor();
     this.onDatabaseModelUpdate = new SyncExecutor();
+    this.onSetCursor = new SyncExecutor();
 
     this.onDatabaseModelUpdate.setInitialDataGetter(() => this.databaseModels);
     this.onSetScript.next(this.onUpdate);
@@ -244,6 +246,7 @@ export abstract class BaseSqlDataSource implements ISqlDataSource {
       end: Math.min(end, scriptLength),
     });
     this.onUpdate.execute();
+    this.onSetCursor.execute({ ...this.innerCursorState });
   }
 
   setEditing(state: boolean): void {

webapp/packages/plugin-sql-editor/src/SqlDataSource/ISqlDataSource.ts

@@ -56,6 +56,7 @@ export interface ISqlDataSource extends ILoadableState {
   readonly onUpdate: ISyncExecutor;
   readonly onSetScript: ISyncExecutor<ISetScriptData>;
   readonly onDatabaseModelUpdate: ISyncExecutor<IDatabaseDataModel<QueryDataSource>[]>;
+  readonly onSetCursor: ISyncExecutor<ISqlEditorCursor>;
 
   isOpened(): boolean;
   isReadonly(): boolean;

webapp/packages/plugin-sql-editor/src/SqlEditor/useSqlEditor.ts

@@ -504,6 +504,15 @@
 
   untracked(() => data.init());
 
+  useExecutor({
+    executor: data.dataSource?.onSetCursor,
+    handlers: [
+      function handleCursorChange({ begin, end }) {
+        data.updateParserScripts(); // TODO should we add debounce here? 2000ms? 300ms?
+      },
+    ],
+  });
+
   useExecutor({
     executor: data.dataSource?.onSetScript,
     handlers: [