From 6f4474beab68c778153c362510fe0483fbeb2153 Mon Sep 17 00:00:00 2001
From: naumov <iamemptyhuh@gmail.com>
Date: Sun, 14 Jan 2024 15:42:21 +0100
Subject: [PATCH 1/6] CB-4134 adjust cursor position

---
 .../core-blocks/src/FormControls/Textarea.tsx | 15 ++++-
 .../SQLCodeEditorPanel/SQLCodeEditorPanel.tsx | 58 +++++++++++++++++++
 .../src/SqlDataSource/BaseSqlDataSource.ts    | 10 ++--
 .../src/SqlDataSource/ISqlDataSource.ts       |  6 +-
 .../LocalStorage/LocalStorageSqlDataSource.ts |  5 +-
 .../src/SqlEditor/useSqlEditor.ts             |  2 +-
 6 files changed, 83 insertions(+), 13 deletions(-)

diff --git a/webapp/packages/core-blocks/src/FormControls/Textarea.tsx b/webapp/packages/core-blocks/src/FormControls/Textarea.tsx
index 58c9795dff..d6bf36f63b 100644
--- a/webapp/packages/core-blocks/src/FormControls/Textarea.tsx
+++ b/webapp/packages/core-blocks/src/FormControls/Textarea.tsx
@@ -6,7 +6,7 @@
  * you may not use this file except in compliance with the License.
  */
 import { observer } from 'mobx-react-lite';
-import { useCallback, useContext } from 'react';
+import { useCallback, useContext, useEffect, useRef } from 'react';
 
 import { filterLayoutFakeProps, getLayoutProps } from '../Containers/filterLayoutFakeProps';
 import type { ILayoutSizeProps } from '../Containers/ILayoutSizeProps';
@@ -23,6 +23,7 @@ type BaseProps = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChan
     description?: string;
     labelTooltip?: string;
     embedded?: boolean;
+    cursorInitiallyAtEnd?: boolean;
   };
 
 type ControlledProps = BaseProps & {
@@ -54,9 +55,11 @@ export const Textarea: TextareaType = observer(function Textarea({
   description,
   labelTooltip,
   embedded,
+  cursorInitiallyAtEnd,
   onChange = () => {},
   ...rest
 }: ControlledProps | ObjectProps<any, any>) {
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
   const layoutProps = getLayoutProps(rest);
   rest = filterLayoutFakeProps(rest);
   const styles = useS(textareaStyle);
@@ -79,13 +82,21 @@ export const Textarea: TextareaType = observer(function Textarea({
 
   const value = state ? state[name] : controlledValue;
 
+  useEffect(() => {
+    if (cursorInitiallyAtEnd && typeof value === 'string') {
+      const position = value.trim().length;
+      textareaRef.current?.setSelectionRange(position, position);
+    }
+  }, []);
+
   return (
     <Field {...layoutProps} className={s(styles, { field: true, embedded }, className)}>
-      <FieldLabel  className={s(styles, { fieldLabel: true })} title={labelTooltip || rest.title} required={required}>
+      <FieldLabel className={s(styles, { fieldLabel: true })} title={labelTooltip || rest.title} required={required}>
         {children}
       </FieldLabel>
       <textarea
         {...rest}
+        ref={textareaRef}
         required={required}
         className={s(styles, { textarea: true })}
         value={value ?? ''}
diff --git a/webapp/packages/plugin-sql-editor-new/src/SQLEditor/SQLCodeEditorPanel/SQLCodeEditorPanel.tsx b/webapp/packages/plugin-sql-editor-new/src/SQLEditor/SQLCodeEditorPanel/SQLCodeEditorPanel.tsx
index 5f406fa001..7f83cd7718 100644
--- a/webapp/packages/plugin-sql-editor-new/src/SQLEditor/SQLCodeEditorPanel/SQLCodeEditorPanel.tsx
+++ b/webapp/packages/plugin-sql-editor-new/src/SQLEditor/SQLCodeEditorPanel/SQLCodeEditorPanel.tsx
@@ -112,6 +112,64 @@ export const SQLCodeEditorPanel: TabContainerPanelComponent<ISqlEditorModeProps>
     ],
   });
 
+  useExecutor({
+    executor: data.onFormat,
+    handlers: [
+      function setCursor([script, formatted]) {
+        const view = editorRef?.view;
+
+        if (!view) {
+          return;
+        }
+
+        const selection = view.state.selection.main;
+
+        setTimeout(() => {
+          view.dispatch({
+            selection: {
+              anchor: selection.from,
+              head: selection.from,
+            },
+          });
+        });
+      },
+    ],
+  });
+
+  useExecutor({
+    executor: data.dataSource?.onSetScript,
+    postHandlers: [
+      function setScript({ script, source }) {
+        if (source === 'insert') {
+          // Note: Use setTimeout to ensure this runs after the current transaction is fully processed
+          setTimeout(() => {
+            const view = editorRef?.view;
+
+            if (!view) {
+              return;
+            }
+
+            const currentContent = view.state.doc.toString();
+            const startPos = currentContent.lastIndexOf(script);
+
+            if (startPos === -1) {
+              return;
+            }
+
+            const endPos = startPos + script.length;
+
+            view.dispatch({
+              selection: {
+                anchor: endPos,
+                head: endPos,
+              },
+            });
+          });
+        }
+      },
+    ],
+  });
+
   function applyIncoming() {
     data.dataSource?.applyIncoming();
   }
diff --git a/webapp/packages/plugin-sql-editor/src/SqlDataSource/BaseSqlDataSource.ts b/webapp/packages/plugin-sql-editor/src/SqlDataSource/BaseSqlDataSource.ts
index 708143d96d..e8fb02d346 100644
--- a/webapp/packages/plugin-sql-editor/src/SqlDataSource/BaseSqlDataSource.ts
+++ b/webapp/packages/plugin-sql-editor/src/SqlDataSource/BaseSqlDataSource.ts
@@ -14,12 +14,10 @@ import type { IDatabaseDataModel, IDatabaseResultSet } from '@cloudbeaver/plugin
 
 import type { IDataQueryOptions } from '../QueryDataSource';
 import { ESqlDataSourceFeatures } from './ESqlDataSourceFeatures';
-import type { ISetScriptData, ISqlDataSource, ISqlDataSourceKey } from './ISqlDataSource';
+import type { ISetScriptData, ISqlDataSource, ISqlDataSourceKey, ScriptDataSourceType } from './ISqlDataSource';
 import type { ISqlDataSourceHistory } from './SqlDataSourceHistory/ISqlDataSourceHistory';
 import { SqlDataSourceHistory } from './SqlDataSourceHistory/SqlDataSourceHistory';
 
-const SOURCE_HISTORY = 'history';
-
 @staticImplements<ISqlDataSourceKey>()
 export abstract class BaseSqlDataSource implements ISqlDataSource {
   static key = 'base';
@@ -96,13 +94,13 @@ export abstract class BaseSqlDataSource implements ISqlDataSource {
     this.onDatabaseModelUpdate.setInitialDataGetter(() => this.databaseModels);
     this.onSetScript.next(this.onUpdate);
     this.onSetScript.addHandler(({ script, source }) => {
-      if (source === SOURCE_HISTORY) {
+      if (source === 'history') {
         return;
       }
       this.history.add(script);
     });
 
-    this.history.onNavigate.addHandler(value => this.setScript(value, SOURCE_HISTORY));
+    this.history.onNavigate.addHandler(value => this.setScript(value, 'history'));
 
     makeObservable<this, 'outdated' | 'editing'>(this, {
       isSaved: computed,
@@ -132,7 +130,7 @@ export abstract class BaseSqlDataSource implements ISqlDataSource {
     });
   }
 
-  setScript(script: string, source?: string): void {
+  setScript(script: string, source?: ScriptDataSourceType): void {
     this.onSetScript.execute({ script, source });
   }
 
diff --git a/webapp/packages/plugin-sql-editor/src/SqlDataSource/ISqlDataSource.ts b/webapp/packages/plugin-sql-editor/src/SqlDataSource/ISqlDataSource.ts
index 656fc5b6b8..5e320ff857 100644
--- a/webapp/packages/plugin-sql-editor/src/SqlDataSource/ISqlDataSource.ts
+++ b/webapp/packages/plugin-sql-editor/src/SqlDataSource/ISqlDataSource.ts
@@ -18,9 +18,11 @@ export interface ISqlDataSourceKey {
   readonly key: string;
 }
 
+export type ScriptDataSourceType = 'history' | 'insert';
+
 export interface ISetScriptData {
   script: string;
-  source?: string;
+  source?: ScriptDataSourceType;
 }
 
 export interface ISqlDataSource extends ILoadableState {
@@ -54,7 +56,7 @@ export interface ISqlDataSource extends ILoadableState {
   canRename(name: string | null): boolean;
   setName(name: string | null): void;
   setProject(projectId: string | null): void;
-  setScript(script: string, source?: string): void;
+  setScript(script: string, source?: ScriptDataSourceType): void;
   setEditing(state: boolean): void;
   setExecutionContext(executionContext?: IConnectionExecutionContextInfo): void;
   setIncomingExecutionContext(executionContext?: IConnectionExecutionContextInfo): void;
diff --git a/webapp/packages/plugin-sql-editor/src/SqlDataSource/LocalStorage/LocalStorageSqlDataSource.ts b/webapp/packages/plugin-sql-editor/src/SqlDataSource/LocalStorage/LocalStorageSqlDataSource.ts
index e5d03c6038..bef7fc0cbd 100644
--- a/webapp/packages/plugin-sql-editor/src/SqlDataSource/LocalStorage/LocalStorageSqlDataSource.ts
+++ b/webapp/packages/plugin-sql-editor/src/SqlDataSource/LocalStorage/LocalStorageSqlDataSource.ts
@@ -11,6 +11,7 @@ import type { IConnectionExecutionContextInfo } from '@cloudbeaver/core-connecti
 
 import { BaseSqlDataSource } from '../BaseSqlDataSource';
 import { ESqlDataSourceFeatures } from '../ESqlDataSourceFeatures';
+import type { ScriptDataSourceType } from '../ISqlDataSource';
 import type { ILocalStorageSqlDataSourceState } from './ILocalStorageSqlDataSourceState';
 
 export class LocalStorageSqlDataSource extends BaseSqlDataSource {
@@ -75,9 +76,9 @@ export class LocalStorageSqlDataSource extends BaseSqlDataSource {
     return true;
   }
 
-  setScript(script: string): void {
+  setScript(script: string, source?: ScriptDataSourceType): void {
     this.state.script = script;
-    super.setScript(script);
+    super.setScript(script, source);
   }
 
   setExecutionContext(executionContext?: IConnectionExecutionContextInfo): void {
diff --git a/webapp/packages/plugin-sql-editor/src/SqlEditor/useSqlEditor.ts b/webapp/packages/plugin-sql-editor/src/SqlEditor/useSqlEditor.ts
index 1783f2f7c0..8edca180ce 100644
--- a/webapp/packages/plugin-sql-editor/src/SqlEditor/useSqlEditor.ts
+++ b/webapp/packages/plugin-sql-editor/src/SqlEditor/useSqlEditor.ts
@@ -225,8 +225,8 @@ export function useSqlEditor(state: ISqlEditorTabState): ISQLEditorData {
           this.readonlyState = true;
           const formatted = await this.sqlDialectInfoService.formatScript(this.dataSource.executionContext, script.query);
 
-          this.onFormat.execute([script, formatted]);
           this.setScript(query.substring(0, script.begin) + formatted + query.substring(script.end));
+          this.onFormat.execute([script, formatted]);
         } finally {
           this.readonlyState = false;
         }

From 60b70530f82a2f741d06c75f8797f3baceeedd80 Mon Sep 17 00:00:00 2001
From: naumov <iamemptyhuh@gmail.com>
Date: Mon, 22 Jan 2024 21:00:01 +0100
Subject: [PATCH 2/6] CB-4134 pass controlled cursor to the editor

---
 .../src/IReactCodemirrorProps.ts              |  7 +++
 .../src/ReactCodemirror.tsx                   | 19 +++++-
 .../SQLCodeEditorPanel/SQLCodeEditorPanel.tsx | 62 ++-----------------
 .../src/SqlDataSource/BaseSqlDataSource.ts    |  4 +-
 .../src/SqlDataSource/ISqlDataSource.ts       |  6 +-
 .../LocalStorage/LocalStorageSqlDataSource.ts |  5 +-
 .../src/SqlEditor/useSqlEditor.ts             |  3 +-
 7 files changed, 35 insertions(+), 71 deletions(-)

diff --git a/webapp/packages/plugin-codemirror6/src/IReactCodemirrorProps.ts b/webapp/packages/plugin-codemirror6/src/IReactCodemirrorProps.ts
index ae13d183dc..56350db849 100644
--- a/webapp/packages/plugin-codemirror6/src/IReactCodemirrorProps.ts
+++ b/webapp/packages/plugin-codemirror6/src/IReactCodemirrorProps.ts
@@ -8,9 +8,16 @@
 import type { Compartment, Extension } from '@codemirror/state';
 import type { ViewUpdate } from '@codemirror/view';
 
+/** Currently we support only main selection range */
+interface ISelection {
+  anchor: number;
+  head?: number;
+}
+
 export interface IReactCodeMirrorProps extends React.PropsWithChildren {
   /** in case of using editor in editing mode its better for performance to use getValue instead */
   value?: string;
+  cursor?: ISelection;
   incomingValue?: string;
   getValue?: () => string;
   extensions?: Map<Compartment, Extension>;
diff --git a/webapp/packages/plugin-codemirror6/src/ReactCodemirror.tsx b/webapp/packages/plugin-codemirror6/src/ReactCodemirror.tsx
index f75f75e2b9..51cbd76921 100644
--- a/webapp/packages/plugin-codemirror6/src/ReactCodemirror.tsx
+++ b/webapp/packages/plugin-codemirror6/src/ReactCodemirror.tsx
@@ -22,7 +22,7 @@ const External = Annotation.define<boolean>();
 
 export const ReactCodemirror = observer<IReactCodeMirrorProps, IEditorRef>(
   forwardRef(function ReactCodemirror(
-    { children, getValue, value, incomingValue, extensions = new Map<Compartment, Extension>(), readonly, autoFocus, onChange, onUpdate },
+    { children, getValue, value, cursor, incomingValue, extensions = new Map<Compartment, Extension>(), readonly, autoFocus, onChange, onUpdate },
     ref,
   ) {
     value = value ?? getValue?.();
@@ -35,6 +35,8 @@ export const ReactCodemirror = observer<IReactCodeMirrorProps, IEditorRef>(
     const callbackRef = useObjectRef({ onChange, onUpdate });
     const [selection, setSelection] = useState(view?.state.selection.main ?? null);
 
+    const memoizedCursor = useMemo(() => cursor, [cursor?.anchor, cursor?.head]);
+
     useLayoutEffect(() => {
       if (container) {
         const updateListener = EditorView.updateListener.of((update: ViewUpdate) => {
@@ -136,7 +138,7 @@ export const ReactCodemirror = observer<IReactCodeMirrorProps, IEditorRef>(
     });
 
     useLayoutEffect(() => {
-      if (value !== undefined && view && value !== view.state.doc.toString()) {
+      if (view && value !== undefined && value !== view.state.doc.toString()) {
         view.dispatch({
           changes: { from: 0, to: view.state.doc.length, insert: value },
           annotations: [External.of(true)],
@@ -144,6 +146,19 @@ export const ReactCodemirror = observer<IReactCodeMirrorProps, IEditorRef>(
       }
     }, [value, view]);
 
+    useLayoutEffect(() => {
+      if (
+        view &&
+        memoizedCursor &&
+        (view.state.selection.main.anchor !== memoizedCursor.anchor || view.state.selection.main.head !== memoizedCursor.head)
+      ) {
+        view.dispatch({
+          selection: memoizedCursor,
+          annotations: [External.of(true)],
+        });
+      }
+    }, [view, memoizedCursor]);
+
     useLayoutEffect(() => {
       if (incomingValue !== undefined && incomingView && incomingValue !== incomingView.state.doc.toString()) {
         incomingView.dispatch({
diff --git a/webapp/packages/plugin-sql-editor-new/src/SQLEditor/SQLCodeEditorPanel/SQLCodeEditorPanel.tsx b/webapp/packages/plugin-sql-editor-new/src/SQLEditor/SQLCodeEditorPanel/SQLCodeEditorPanel.tsx
index 7f83cd7718..78653d2ff9 100644
--- a/webapp/packages/plugin-sql-editor-new/src/SQLEditor/SQLCodeEditorPanel/SQLCodeEditorPanel.tsx
+++ b/webapp/packages/plugin-sql-editor-new/src/SQLEditor/SQLCodeEditorPanel/SQLCodeEditorPanel.tsx
@@ -112,64 +112,6 @@ export const SQLCodeEditorPanel: TabContainerPanelComponent<ISqlEditorModeProps>
     ],
   });
 
-  useExecutor({
-    executor: data.onFormat,
-    handlers: [
-      function setCursor([script, formatted]) {
-        const view = editorRef?.view;
-
-        if (!view) {
-          return;
-        }
-
-        const selection = view.state.selection.main;
-
-        setTimeout(() => {
-          view.dispatch({
-            selection: {
-              anchor: selection.from,
-              head: selection.from,
-            },
-          });
-        });
-      },
-    ],
-  });
-
-  useExecutor({
-    executor: data.dataSource?.onSetScript,
-    postHandlers: [
-      function setScript({ script, source }) {
-        if (source === 'insert') {
-          // Note: Use setTimeout to ensure this runs after the current transaction is fully processed
-          setTimeout(() => {
-            const view = editorRef?.view;
-
-            if (!view) {
-              return;
-            }
-
-            const currentContent = view.state.doc.toString();
-            const startPos = currentContent.lastIndexOf(script);
-
-            if (startPos === -1) {
-              return;
-            }
-
-            const endPos = startPos + script.length;
-
-            view.dispatch({
-              selection: {
-                anchor: endPos,
-                head: endPos,
-              },
-            });
-          });
-        }
-      },
-    ],
-  });
-
   function applyIncoming() {
     data.dataSource?.applyIncoming();
   }
@@ -183,6 +125,10 @@ export const SQLCodeEditorPanel: TabContainerPanelComponent<ISqlEditorModeProps>
       <SQLCodeEditorLoader
         ref={setEditorRef}
         getValue={() => data.value}
+        cursor={{
+          anchor: data.cursor.begin,
+          head: data.cursor.end,
+        }}
         incomingValue={data.incomingValue}
         extensions={extensions}
         readonly={data.readonly}
diff --git a/webapp/packages/plugin-sql-editor/src/SqlDataSource/BaseSqlDataSource.ts b/webapp/packages/plugin-sql-editor/src/SqlDataSource/BaseSqlDataSource.ts
index e8fb02d346..a0fdd054e3 100644
--- a/webapp/packages/plugin-sql-editor/src/SqlDataSource/BaseSqlDataSource.ts
+++ b/webapp/packages/plugin-sql-editor/src/SqlDataSource/BaseSqlDataSource.ts
@@ -14,7 +14,7 @@ import type { IDatabaseDataModel, IDatabaseResultSet } from '@cloudbeaver/plugin
 
 import type { IDataQueryOptions } from '../QueryDataSource';
 import { ESqlDataSourceFeatures } from './ESqlDataSourceFeatures';
-import type { ISetScriptData, ISqlDataSource, ISqlDataSourceKey, ScriptDataSourceType } from './ISqlDataSource';
+import type { ISetScriptData, ISqlDataSource, ISqlDataSourceKey } from './ISqlDataSource';
 import type { ISqlDataSourceHistory } from './SqlDataSourceHistory/ISqlDataSourceHistory';
 import { SqlDataSourceHistory } from './SqlDataSourceHistory/SqlDataSourceHistory';
 
@@ -130,7 +130,7 @@ export abstract class BaseSqlDataSource implements ISqlDataSource {
     });
   }
 
-  setScript(script: string, source?: ScriptDataSourceType): void {
+  setScript(script: string, source?: string): void {
     this.onSetScript.execute({ script, source });
   }
 
diff --git a/webapp/packages/plugin-sql-editor/src/SqlDataSource/ISqlDataSource.ts b/webapp/packages/plugin-sql-editor/src/SqlDataSource/ISqlDataSource.ts
index 5e320ff857..656fc5b6b8 100644
--- a/webapp/packages/plugin-sql-editor/src/SqlDataSource/ISqlDataSource.ts
+++ b/webapp/packages/plugin-sql-editor/src/SqlDataSource/ISqlDataSource.ts
@@ -18,11 +18,9 @@ export interface ISqlDataSourceKey {
   readonly key: string;
 }
 
-export type ScriptDataSourceType = 'history' | 'insert';
-
 export interface ISetScriptData {
   script: string;
-  source?: ScriptDataSourceType;
+  source?: string;
 }
 
 export interface ISqlDataSource extends ILoadableState {
@@ -56,7 +54,7 @@ export interface ISqlDataSource extends ILoadableState {
   canRename(name: string | null): boolean;
   setName(name: string | null): void;
   setProject(projectId: string | null): void;
-  setScript(script: string, source?: ScriptDataSourceType): void;
+  setScript(script: string, source?: string): void;
   setEditing(state: boolean): void;
   setExecutionContext(executionContext?: IConnectionExecutionContextInfo): void;
   setIncomingExecutionContext(executionContext?: IConnectionExecutionContextInfo): void;
diff --git a/webapp/packages/plugin-sql-editor/src/SqlDataSource/LocalStorage/LocalStorageSqlDataSource.ts b/webapp/packages/plugin-sql-editor/src/SqlDataSource/LocalStorage/LocalStorageSqlDataSource.ts
index bef7fc0cbd..e5d03c6038 100644
--- a/webapp/packages/plugin-sql-editor/src/SqlDataSource/LocalStorage/LocalStorageSqlDataSource.ts
+++ b/webapp/packages/plugin-sql-editor/src/SqlDataSource/LocalStorage/LocalStorageSqlDataSource.ts
@@ -11,7 +11,6 @@ import type { IConnectionExecutionContextInfo } from '@cloudbeaver/core-connecti
 
 import { BaseSqlDataSource } from '../BaseSqlDataSource';
 import { ESqlDataSourceFeatures } from '../ESqlDataSourceFeatures';
-import type { ScriptDataSourceType } from '../ISqlDataSource';
 import type { ILocalStorageSqlDataSourceState } from './ILocalStorageSqlDataSourceState';
 
 export class LocalStorageSqlDataSource extends BaseSqlDataSource {
@@ -76,9 +75,9 @@ export class LocalStorageSqlDataSource extends BaseSqlDataSource {
     return true;
   }
 
-  setScript(script: string, source?: ScriptDataSourceType): void {
+  setScript(script: string): void {
     this.state.script = script;
-    super.setScript(script, source);
+    super.setScript(script);
   }
 
   setExecutionContext(executionContext?: IConnectionExecutionContextInfo): void {
diff --git a/webapp/packages/plugin-sql-editor/src/SqlEditor/useSqlEditor.ts b/webapp/packages/plugin-sql-editor/src/SqlEditor/useSqlEditor.ts
index 8edca180ce..fde2dc5d56 100644
--- a/webapp/packages/plugin-sql-editor/src/SqlEditor/useSqlEditor.ts
+++ b/webapp/packages/plugin-sql-editor/src/SqlEditor/useSqlEditor.ts
@@ -138,7 +138,6 @@ export function useSqlEditor(state: ISqlEditorTabState): ISQLEditorData {
       onExecute: new SyncExecutor(),
       onSegmentExecute: new SyncExecutor(),
       onUpdate: new SyncExecutor(),
-      onFormat: new SyncExecutor(),
       parser: new SQLParser(),
 
       cursor: { begin: 0, end: 0 },
@@ -226,7 +225,7 @@ export function useSqlEditor(state: ISqlEditorTabState): ISQLEditorData {
           const formatted = await this.sqlDialectInfoService.formatScript(this.dataSource.executionContext, script.query);
 
           this.setScript(query.substring(0, script.begin) + formatted + query.substring(script.end));
-          this.onFormat.execute([script, formatted]);
+          this.setCursor(script.begin + formatted.length);
         } finally {
           this.readonlyState = false;
         }

From fe81b7f477a13f7ebae7f686f5d18004eee445f9 Mon Sep 17 00:00:00 2001
From: naumov <iamemptyhuh@gmail.com>
Date: Mon, 22 Jan 2024 21:22:49 +0100
Subject: [PATCH 3/6] CB-4134 do not trim value

---
 webapp/packages/core-blocks/src/FormControls/Textarea.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/webapp/packages/core-blocks/src/FormControls/Textarea.tsx b/webapp/packages/core-blocks/src/FormControls/Textarea.tsx
index d6bf36f63b..8e879faf66 100644
--- a/webapp/packages/core-blocks/src/FormControls/Textarea.tsx
+++ b/webapp/packages/core-blocks/src/FormControls/Textarea.tsx
@@ -6,7 +6,7 @@
  * you may not use this file except in compliance with the License.
  */
 import { observer } from 'mobx-react-lite';
-import { useCallback, useContext, useEffect, useRef } from 'react';
+import { useCallback, useContext, useLayoutEffect, useRef } from 'react';
 
 import { filterLayoutFakeProps, getLayoutProps } from '../Containers/filterLayoutFakeProps';
 import type { ILayoutSizeProps } from '../Containers/ILayoutSizeProps';
@@ -82,12 +82,12 @@ export const Textarea: TextareaType = observer(function Textarea({
 
   const value = state ? state[name] : controlledValue;
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (cursorInitiallyAtEnd && typeof value === 'string') {
-      const position = value.trim().length;
+      const position = value.length;
       textareaRef.current?.setSelectionRange(position, position);
     }
-  }, []);
+  }, [cursorInitiallyAtEnd]);
 
   return (
     <Field {...layoutProps} className={s(styles, { field: true, embedded }, className)}>

From 70151a8cd64dc4ad0288a4ccb5207db43939cf88 Mon Sep 17 00:00:00 2001
From: naumov <iamemptyhuh@gmail.com>
Date: Mon, 22 Jan 2024 21:28:12 +0100
Subject: [PATCH 4/6] CB-4134 revert const history

---
 .../src/SqlDataSource/BaseSqlDataSource.ts                  | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/webapp/packages/plugin-sql-editor/src/SqlDataSource/BaseSqlDataSource.ts b/webapp/packages/plugin-sql-editor/src/SqlDataSource/BaseSqlDataSource.ts
index a0fdd054e3..708143d96d 100644
--- a/webapp/packages/plugin-sql-editor/src/SqlDataSource/BaseSqlDataSource.ts
+++ b/webapp/packages/plugin-sql-editor/src/SqlDataSource/BaseSqlDataSource.ts
@@ -18,6 +18,8 @@ import type { ISetScriptData, ISqlDataSource, ISqlDataSourceKey } from './ISqlDa
 import type { ISqlDataSourceHistory } from './SqlDataSourceHistory/ISqlDataSourceHistory';
 import { SqlDataSourceHistory } from './SqlDataSourceHistory/SqlDataSourceHistory';
 
+const SOURCE_HISTORY = 'history';
+
 @staticImplements<ISqlDataSourceKey>()
 export abstract class BaseSqlDataSource implements ISqlDataSource {
   static key = 'base';
@@ -94,13 +96,13 @@ export abstract class BaseSqlDataSource implements ISqlDataSource {
     this.onDatabaseModelUpdate.setInitialDataGetter(() => this.databaseModels);
     this.onSetScript.next(this.onUpdate);
     this.onSetScript.addHandler(({ script, source }) => {
-      if (source === 'history') {
+      if (source === SOURCE_HISTORY) {
         return;
       }
       this.history.add(script);
     });
 
-    this.history.onNavigate.addHandler(value => this.setScript(value, 'history'));
+    this.history.onNavigate.addHandler(value => this.setScript(value, SOURCE_HISTORY));
 
     makeObservable<this, 'outdated' | 'editing'>(this, {
       isSaved: computed,

From 9cefe9acf83eb3391e384dd4ed0f72838403e3f3 Mon Sep 17 00:00:00 2001
From: naumov <iamemptyhuh@gmail.com>
Date: Tue, 23 Jan 2024 14:46:38 +0100
Subject: [PATCH 5/6] CB-4134 review fixes

---
 .../src/IReactCodemirrorProps.ts              |  3 +-
 .../src/ReactCodemirror.tsx                   | 57 +++++++++++--------
 .../SQLCodeEditorPanel/SQLCodeEditorPanel.tsx |  1 +
 .../useSQLCodeEditorPanel.ts                  |  4 ++
 4 files changed, 41 insertions(+), 24 deletions(-)

diff --git a/webapp/packages/plugin-codemirror6/src/IReactCodemirrorProps.ts b/webapp/packages/plugin-codemirror6/src/IReactCodemirrorProps.ts
index 56350db849..292e0a088f 100644
--- a/webapp/packages/plugin-codemirror6/src/IReactCodemirrorProps.ts
+++ b/webapp/packages/plugin-codemirror6/src/IReactCodemirrorProps.ts
@@ -5,7 +5,7 @@
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
  */
-import type { Compartment, Extension } from '@codemirror/state';
+import type { Compartment, Extension, SelectionRange } from '@codemirror/state';
 import type { ViewUpdate } from '@codemirror/view';
 
 /** Currently we support only main selection range */
@@ -24,5 +24,6 @@ export interface IReactCodeMirrorProps extends React.PropsWithChildren {
   readonly?: boolean;
   autoFocus?: boolean;
   onChange?: (value: string, update: ViewUpdate) => void;
+  onCursorChange?: (selection: SelectionRange, update: ViewUpdate) => void;
   onUpdate?: (update: ViewUpdate) => void;
 }
diff --git a/webapp/packages/plugin-codemirror6/src/ReactCodemirror.tsx b/webapp/packages/plugin-codemirror6/src/ReactCodemirror.tsx
index 51cbd76921..4475709fbc 100644
--- a/webapp/packages/plugin-codemirror6/src/ReactCodemirror.tsx
+++ b/webapp/packages/plugin-codemirror6/src/ReactCodemirror.tsx
@@ -6,7 +6,7 @@
  * you may not use this file except in compliance with the License.
  */
 import { MergeView } from '@codemirror/merge';
-import { Annotation, Compartment, Extension, StateEffect } from '@codemirror/state';
+import { Annotation, Compartment, Extension, StateEffect, TransactionSpec } from '@codemirror/state';
 import { EditorView, ViewUpdate } from '@codemirror/view';
 import { observer } from 'mobx-react-lite';
 import { forwardRef, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from 'react';
@@ -22,7 +22,19 @@ const External = Annotation.define<boolean>();
 
 export const ReactCodemirror = observer<IReactCodeMirrorProps, IEditorRef>(
   forwardRef(function ReactCodemirror(
-    { children, getValue, value, cursor, incomingValue, extensions = new Map<Compartment, Extension>(), readonly, autoFocus, onChange, onUpdate },
+    {
+      children,
+      getValue,
+      value,
+      cursor,
+      incomingValue,
+      extensions = new Map<Compartment, Extension>(),
+      readonly,
+      autoFocus,
+      onChange,
+      onCursorChange,
+      onUpdate,
+    },
     ref,
   ) {
     value = value ?? getValue?.();
@@ -32,11 +44,9 @@ export const ReactCodemirror = observer<IReactCodeMirrorProps, IEditorRef>(
     const [container, setContainer] = useState<HTMLDivElement | null>(null);
     const [view, setView] = useState<EditorView | null>(null);
     const [incomingView, setIncomingView] = useState<EditorView | null>(null);
-    const callbackRef = useObjectRef({ onChange, onUpdate });
+    const callbackRef = useObjectRef({ onChange, onCursorChange, onUpdate });
     const [selection, setSelection] = useState(view?.state.selection.main ?? null);
 
-    const memoizedCursor = useMemo(() => cursor, [cursor?.anchor, cursor?.head]);
-
     useLayoutEffect(() => {
       if (container) {
         const updateListener = EditorView.updateListener.of((update: ViewUpdate) => {
@@ -52,6 +62,11 @@ export const ReactCodemirror = observer<IReactCodeMirrorProps, IEditorRef>(
             callbackRef.onChange?.(value, update);
           }
 
+          if (update.selectionSet && !remote) {
+            const selection = update.state.selection.main;
+            callbackRef.onCursorChange?.(selection, update);
+          }
+
           callbackRef.onUpdate?.(update);
         });
 
@@ -138,26 +153,22 @@ export const ReactCodemirror = observer<IReactCodeMirrorProps, IEditorRef>(
     });
 
     useLayoutEffect(() => {
-      if (view && value !== undefined && value !== view.state.doc.toString()) {
-        view.dispatch({
-          changes: { from: 0, to: view.state.doc.length, insert: value },
-          annotations: [External.of(true)],
-        });
-      }
-    }, [value, view]);
+      if (view) {
+        const transaction: TransactionSpec = { annotations: [External.of(true)] };
 
-    useLayoutEffect(() => {
-      if (
-        view &&
-        memoizedCursor &&
-        (view.state.selection.main.anchor !== memoizedCursor.anchor || view.state.selection.main.head !== memoizedCursor.head)
-      ) {
-        view.dispatch({
-          selection: memoizedCursor,
-          annotations: [External.of(true)],
-        });
+        if (value !== undefined && value !== view.state.doc.toString()) {
+          transaction.changes = { from: 0, to: view.state.doc.length, insert: value };
+        }
+
+        if (cursor && (view.state.selection.main.anchor !== cursor.anchor || view.state.selection.main.head !== cursor.head)) {
+          transaction.selection = cursor;
+        }
+
+        if (transaction.changes || transaction.selection) {
+          view.dispatch(transaction);
+        }
       }
-    }, [view, memoizedCursor]);
+    });
 
     useLayoutEffect(() => {
       if (incomingValue !== undefined && incomingView && incomingValue !== incomingView.state.doc.toString()) {
diff --git a/webapp/packages/plugin-sql-editor-new/src/SQLEditor/SQLCodeEditorPanel/SQLCodeEditorPanel.tsx b/webapp/packages/plugin-sql-editor-new/src/SQLEditor/SQLCodeEditorPanel/SQLCodeEditorPanel.tsx
index 78653d2ff9..cf3fdfc71f 100644
--- a/webapp/packages/plugin-sql-editor-new/src/SQLEditor/SQLCodeEditorPanel/SQLCodeEditorPanel.tsx
+++ b/webapp/packages/plugin-sql-editor-new/src/SQLEditor/SQLCodeEditorPanel/SQLCodeEditorPanel.tsx
@@ -135,6 +135,7 @@ export const SQLCodeEditorPanel: TabContainerPanelComponent<ISqlEditorModeProps>
         autoFocus
         lineNumbers
         onChange={panel.onQueryChange}
+        onCursorChange={selection => panel.onCursorChange(selection.anchor, selection.head)}
         onUpdate={panel.onUpdate}
       >
         {data.isIncomingChanges && (
diff --git a/webapp/packages/plugin-sql-editor-new/src/SQLEditor/SQLCodeEditorPanel/useSQLCodeEditorPanel.ts b/webapp/packages/plugin-sql-editor-new/src/SQLEditor/SQLCodeEditorPanel/useSQLCodeEditorPanel.ts
index c6acf23ea4..0d971712d7 100644
--- a/webapp/packages/plugin-sql-editor-new/src/SQLEditor/SQLCodeEditorPanel/useSQLCodeEditorPanel.ts
+++ b/webapp/packages/plugin-sql-editor-new/src/SQLEditor/SQLCodeEditorPanel/useSQLCodeEditorPanel.ts
@@ -17,6 +17,7 @@ import type { IEditor } from '../SQLCodeEditor/useSQLCodeEditor';
 interface State {
   highlightActiveQuery: () => void;
   onQueryChange: (query: string) => void;
+  onCursorChange: (begin: number, end?: number) => void;
   onUpdate: (update: ViewUpdate) => void;
 }
 
@@ -35,6 +36,9 @@ export function useSQLCodeEditorPanel(data: ISQLEditorData, editor: IEditor) {
       onQueryChange(query: string) {
         this.data.setScript(query);
       },
+      onCursorChange(begin: number, end?: number) {
+        this.data.setCursor(begin, end);
+      },
       onUpdate(update: ViewUpdate) {
         const transactions = update.transactions.filter(t => t.selection !== undefined);
         const lastTransaction = transactions[transactions.length - 1] as Transaction | undefined;

From 0fe4ca41113465644762b8cccdac6c8cbc121f2e Mon Sep 17 00:00:00 2001
From: naumov <iamemptyhuh@gmail.com>
Date: Tue, 23 Jan 2024 16:18:11 +0100
Subject: [PATCH 6/6] CB-4134 remove onUpdate method

---
 .../SQLCodeEditorPanel/SQLCodeEditorPanel.tsx    |  3 +--
 .../SQLCodeEditorPanel/useSQLCodeEditorPanel.ts  | 16 ++--------------
 2 files changed, 3 insertions(+), 16 deletions(-)

diff --git a/webapp/packages/plugin-sql-editor-new/src/SQLEditor/SQLCodeEditorPanel/SQLCodeEditorPanel.tsx b/webapp/packages/plugin-sql-editor-new/src/SQLEditor/SQLCodeEditorPanel/SQLCodeEditorPanel.tsx
index cf3fdfc71f..dda25ca030 100644
--- a/webapp/packages/plugin-sql-editor-new/src/SQLEditor/SQLCodeEditorPanel/SQLCodeEditorPanel.tsx
+++ b/webapp/packages/plugin-sql-editor-new/src/SQLEditor/SQLCodeEditorPanel/SQLCodeEditorPanel.tsx
@@ -135,8 +135,7 @@ export const SQLCodeEditorPanel: TabContainerPanelComponent<ISqlEditorModeProps>
         autoFocus
         lineNumbers
         onChange={panel.onQueryChange}
-        onCursorChange={selection => panel.onCursorChange(selection.anchor, selection.head)}
-        onUpdate={panel.onUpdate}
+        onCursorChange={selection => panel.onCursorChange(selection.from, selection.to)}
       >
         {data.isIncomingChanges && (
           <>
diff --git a/webapp/packages/plugin-sql-editor-new/src/SQLEditor/SQLCodeEditorPanel/useSQLCodeEditorPanel.ts b/webapp/packages/plugin-sql-editor-new/src/SQLEditor/SQLCodeEditorPanel/useSQLCodeEditorPanel.ts
index 0d971712d7..43ff3ac336 100644
--- a/webapp/packages/plugin-sql-editor-new/src/SQLEditor/SQLCodeEditorPanel/useSQLCodeEditorPanel.ts
+++ b/webapp/packages/plugin-sql-editor-new/src/SQLEditor/SQLCodeEditorPanel/useSQLCodeEditorPanel.ts
@@ -5,6 +5,7 @@
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
  */
+import { action } from 'mobx';
 import { useCallback } from 'react';
 
 import { useExecutor, useObservableRef } from '@cloudbeaver/core-blocks';
@@ -18,7 +19,6 @@ interface State {
   highlightActiveQuery: () => void;
   onQueryChange: (query: string) => void;
   onCursorChange: (begin: number, end?: number) => void;
-  onUpdate: (update: ViewUpdate) => void;
 }
 
 export function useSQLCodeEditorPanel(data: ISQLEditorData, editor: IEditor) {
@@ -39,21 +39,9 @@ export function useSQLCodeEditorPanel(data: ISQLEditorData, editor: IEditor) {
       onCursorChange(begin: number, end?: number) {
         this.data.setCursor(begin, end);
       },
-      onUpdate(update: ViewUpdate) {
-        const transactions = update.transactions.filter(t => t.selection !== undefined);
-        const lastTransaction = transactions[transactions.length - 1] as Transaction | undefined;
-
-        if (lastTransaction) {
-          const from = lastTransaction.selection?.main.from ?? update.state.selection.main.from;
-          const to = lastTransaction.selection?.main.to ?? update.state.selection.main.to;
-
-          this.data.setCursor(from, to);
-        }
-      },
     }),
-    {},
+    { onQueryChange: action.bound, onCursorChange: action.bound },
     { editor, data },
-    ['onQueryChange', 'onUpdate'],
   );
 
   const updateHighlight = useCallback(