From 90fcbe6b7fb45265eb96f57be0605bb5b0d8a384 Mon Sep 17 00:00:00 2001
From: Alexey Potsetsuev <wrouds@gmail.com>
Date: Thu, 22 Jan 2026 00:18:25 +0800
Subject: [PATCH] dbeaver/pro#7854 feat: display query with parameters (#4064)

* dbeaver/pro#7854 feat: display query with parameters

* fix: use replaceAll instead of replace

* dbeaver/pro#7854 fix: support parameters and variables

---------

Co-authored-by: Daria Marutkina <125263541+dariamarutkina@users.noreply.github.com>
---
 .../src/CommonDialog/ConfirmationDialog.tsx   |  6 +-
 .../package.json                              |  2 +-
 .../DataViewerRequestQueryViewerDialog.tsx    |  6 +-
 .../tsconfig.json                             |  4 +-
 .../package.json                              |  2 +-
 .../QueryDetailsDialog.tsx                    |  8 +-
 .../tsconfig.json                             |  2 +-
 .../packages/plugin-ddl-viewer/package.json   |  2 +-
 .../src/DdlViewer/DDLViewerTabPanel.tsx       |  6 +-
 .../ExtendedDDLViewerTabPanel.tsx             |  6 +-
 .../packages/plugin-ddl-viewer/tsconfig.json  |  4 +-
 .../package.json                              |  2 +-
 .../src/renderQueryForConfirmation.tsx        |  8 +-
 .../tsconfig.json                             |  2 +-
 .../plugin-sql-editor-codemirror/.gitignore   | 18 +++++
 .../plugin-sql-editor-codemirror/package.json | 42 ++++++++++
 .../src}/ACTIVE_QUERY_EXTENSION.ts            |  0
 .../src}/QUERY_STATUS_GUTTER_EXTENSION.ts     |  0
 .../src}/SQLCodeEditor/SQLCodeEditor.tsx      |  0
 .../src/SQLCodeEditor/SQLCodeEditorLoader.ts} |  4 +-
 .../src}/SQLCodeEditor/useSQLCodeEditor.ts    |  0
 .../plugin-sql-editor-codemirror/src/index.ts | 13 ++++
 .../src}/useSqlDialectExtension.ts            |  4 +-
 .../tsconfig.json                             | 34 ++++++++
 .../plugin-sql-editor-new/package.json        |  1 +
 .../SQLCodeEditorPanel/SQLCodeEditorPanel.tsx | 18 +++--
 .../useSQLCodeEditorPanel.ts                  | 14 ++--
 .../plugin-sql-editor-new/src/index.ts        |  4 +-
 .../plugin-sql-editor-new/tsconfig.json       |  3 +
 .../packages/plugin-sql-editor/package.json   |  1 +
 .../plugin-sql-editor/src/QueryDataSource.ts  | 12 ++-
 .../src/SqlEditorSettingsService.ts           | 12 ++-
 .../src/renderQueryParamsForConfirmation.tsx  | 77 +++++++++++++++----
 .../packages/plugin-sql-editor/tsconfig.json  |  3 +
 .../plugin-sql-generator/package.json         |  2 +-
 .../src/ScriptPreview/ScriptPreviewDialog.tsx | 12 +--
 .../src/SqlGenerators/GeneratedSqlDialog.tsx  |  6 +-
 .../plugin-sql-generator/tsconfig.json        |  2 +-
 webapp/yarn.lock                              | 33 ++++++--
 39 files changed, 286 insertions(+), 89 deletions(-)
 create mode 100644 webapp/packages/plugin-sql-editor-codemirror/.gitignore
 create mode 100644 webapp/packages/plugin-sql-editor-codemirror/package.json
 rename webapp/packages/{plugin-sql-editor-new/src/SQLEditor => plugin-sql-editor-codemirror/src}/ACTIVE_QUERY_EXTENSION.ts (100%)
 rename webapp/packages/{plugin-sql-editor-new/src/SQLEditor => plugin-sql-editor-codemirror/src}/QUERY_STATUS_GUTTER_EXTENSION.ts (100%)
 rename webapp/packages/{plugin-sql-editor-new/src/SQLEditor => plugin-sql-editor-codemirror/src}/SQLCodeEditor/SQLCodeEditor.tsx (100%)
 rename webapp/packages/{plugin-sql-editor-new/src/SQLEditor/SQLCodeEditor/SQLCodeEditorLoader.tsx => plugin-sql-editor-codemirror/src/SQLCodeEditor/SQLCodeEditorLoader.ts} (57%)
 rename webapp/packages/{plugin-sql-editor-new/src/SQLEditor => plugin-sql-editor-codemirror/src}/SQLCodeEditor/useSQLCodeEditor.ts (100%)
 create mode 100644 webapp/packages/plugin-sql-editor-codemirror/src/index.ts
 rename webapp/packages/{plugin-sql-editor-new/src/SQLEditor => plugin-sql-editor-codemirror/src}/useSqlDialectExtension.ts (93%)
 create mode 100644 webapp/packages/plugin-sql-editor-codemirror/tsconfig.json

diff --git a/webapp/packages/core-blocks/src/CommonDialog/ConfirmationDialog.tsx b/webapp/packages/core-blocks/src/CommonDialog/ConfirmationDialog.tsx
index 71d602a353..ef9655973d 100644
--- a/webapp/packages/core-blocks/src/CommonDialog/ConfirmationDialog.tsx
+++ b/webapp/packages/core-blocks/src/CommonDialog/ConfirmationDialog.tsx
@@ -1,6 +1,6 @@
 /*
  * CloudBeaver - Cloud Database Manager
- * Copyright (C) 2020-2025 DBeaver Corp and others
+ * Copyright (C) 2020-2026 DBeaver Corp and others
  *
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
@@ -31,6 +31,7 @@ export interface ConfirmationDialogPayload {
   showSkipConfirmations?: boolean;
   showExtraAction?: boolean;
   bigIcon?: boolean;
+  noOverflow?: boolean;
   viewBox?: string;
   message: TLocalizationToken;
   confirmActionText?: TLocalizationToken;
@@ -60,6 +61,7 @@ export const ConfirmationDialog: DialogComponent<ConfirmationDialogPayload, Conf
     children,
     size = 'small',
     bigIcon,
+    noOverflow,
     viewBox,
     message,
     confirmActionText,
@@ -90,7 +92,7 @@ export const ConfirmationDialog: DialogComponent<ConfirmationDialogPayload, Conf
   return (
     <CommonDialogWrapper size={size} className={className} fixedWidth>
       <CommonDialogHeader title={title} subTitle={subTitle} icon={icon} viewBox={viewBox} bigIcon={bigIcon} onReject={reject} />
-      <CommonDialogBody>
+      <CommonDialogBody noOverflow={noOverflow}>
         <Translate token={message} />
         {children && children?.()}
       </CommonDialogBody>
diff --git a/webapp/packages/plugin-data-viewer-request-query-viewer/package.json b/webapp/packages/plugin-data-viewer-request-query-viewer/package.json
index 3c01c55da0..c9a5a408d9 100644
--- a/webapp/packages/plugin-data-viewer-request-query-viewer/package.json
+++ b/webapp/packages/plugin-data-viewer-request-query-viewer/package.json
@@ -34,8 +34,8 @@
     "@cloudbeaver/plugin-codemirror6": "workspace:*",
     "@cloudbeaver/plugin-data-viewer": "workspace:*",
     "@cloudbeaver/plugin-sql-editor": "workspace:*",
+    "@cloudbeaver/plugin-sql-editor-codemirror": "workspace:*",
     "@cloudbeaver/plugin-sql-editor-navigation-tab": "workspace:*",
-    "@cloudbeaver/plugin-sql-editor-new": "workspace:*",
     "@dbeaver/js-helpers": "workspace:*",
     "@dbeaver/ui-kit": "workspace:*",
     "mobx": "^6",
diff --git a/webapp/packages/plugin-data-viewer-request-query-viewer/src/DataViewerRequestQueryViewerDialog.tsx b/webapp/packages/plugin-data-viewer-request-query-viewer/src/DataViewerRequestQueryViewerDialog.tsx
index e5f2de01f7..165c0bd7eb 100644
--- a/webapp/packages/plugin-data-viewer-request-query-viewer/src/DataViewerRequestQueryViewerDialog.tsx
+++ b/webapp/packages/plugin-data-viewer-request-query-viewer/src/DataViewerRequestQueryViewerDialog.tsx
@@ -1,6 +1,6 @@
 /*
  * CloudBeaver - Cloud Database Manager
- * Copyright (C) 2020-2025 DBeaver Corp and others
+ * Copyright (C) 2020-2026 DBeaver Corp and others
  *
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
@@ -21,7 +21,7 @@ import type { DialogComponent } from '@cloudbeaver/core-dialogs';
 import { useService } from '@cloudbeaver/core-di';
 import { useCodemirrorExtensions } from '@cloudbeaver/plugin-codemirror6';
 import { LocalStorageSqlDataSource } from '@cloudbeaver/plugin-sql-editor';
-import { SQLCodeEditorLoader, useSqlDialectExtension } from '@cloudbeaver/plugin-sql-editor-new';
+import { SQLCodeEditor, useSqlDialectExtension } from '@cloudbeaver/plugin-sql-editor-codemirror';
 import { ConnectionDialectResource, ConnectionInfoResource, type IConnectionInfoParams } from '@cloudbeaver/core-connections';
 import { NavNodeManagerService, NodeManagerUtils } from '@cloudbeaver/core-navigation-tree';
 import { SqlEditorNavigatorService } from '@cloudbeaver/plugin-sql-editor-navigation-tab';
@@ -67,7 +67,7 @@ export const DataViewerRequestQueryViewerDialog: DialogComponent<IPayload> = obs
     <CommonDialogWrapper size="large" fixedWidth>
       <CommonDialogHeader title="SQL" onReject={props.rejectDialog} />
       <CommonDialogBody noBodyPadding noOverflow>
-        <SQLCodeEditorLoader value={props.payload.query} extensions={extensions} readonly />
+        <SQLCodeEditor value={props.payload.query} extensions={extensions} readonly />
       </CommonDialogBody>
       <CommonDialogFooter className="tw:flex tw:justify-between">
         <Button variant="secondary" onClick={() => props.rejectDialog()}>
diff --git a/webapp/packages/plugin-data-viewer-request-query-viewer/tsconfig.json b/webapp/packages/plugin-data-viewer-request-query-viewer/tsconfig.json
index 320af383b8..9c61a82e4a 100644
--- a/webapp/packages/plugin-data-viewer-request-query-viewer/tsconfig.json
+++ b/webapp/packages/plugin-data-viewer-request-query-viewer/tsconfig.json
@@ -56,10 +56,10 @@
       "path": "../plugin-sql-editor"
     },
     {
-      "path": "../plugin-sql-editor-navigation-tab"
+      "path": "../plugin-sql-editor-codemirror"
     },
     {
-      "path": "../plugin-sql-editor-new"
+      "path": "../plugin-sql-editor-navigation-tab"
     }
   ],
   "include": [
diff --git a/webapp/packages/plugin-datasource-transaction-manager/package.json b/webapp/packages/plugin-datasource-transaction-manager/package.json
index 24d5fc08c4..83f0c1498c 100644
--- a/webapp/packages/plugin-datasource-transaction-manager/package.json
+++ b/webapp/packages/plugin-datasource-transaction-manager/package.json
@@ -39,7 +39,7 @@
     "@cloudbeaver/plugin-codemirror6": "workspace:*",
     "@cloudbeaver/plugin-data-grid": "workspace:*",
     "@cloudbeaver/plugin-datasource-context-switch": "workspace:*",
-    "@cloudbeaver/plugin-sql-editor-new": "workspace:*",
+    "@cloudbeaver/plugin-sql-editor-codemirror": "workspace:*",
     "@cloudbeaver/plugin-tools-panel": "workspace:*",
     "@cloudbeaver/plugin-top-app-bar": "workspace:*",
     "@dbeaver/js-helpers": "workspace:*",
diff --git a/webapp/packages/plugin-datasource-transaction-manager/src/TransactionLog/TransactionLogTable/QueryDetailsDialog.tsx b/webapp/packages/plugin-datasource-transaction-manager/src/TransactionLog/TransactionLogTable/QueryDetailsDialog.tsx
index c4d934494f..593b3d97f0 100644
--- a/webapp/packages/plugin-datasource-transaction-manager/src/TransactionLog/TransactionLogTable/QueryDetailsDialog.tsx
+++ b/webapp/packages/plugin-datasource-transaction-manager/src/TransactionLog/TransactionLogTable/QueryDetailsDialog.tsx
@@ -1,6 +1,6 @@
 /*
  * CloudBeaver - Cloud Database Manager
- * Copyright (C) 2020-2025 DBeaver Corp and others
+ * Copyright (C) 2020-2026 DBeaver Corp and others
  *
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
@@ -10,7 +10,7 @@ import { observer } from 'mobx-react-lite';
 import { Button, CommonDialogBody, CommonDialogFooter, CommonDialogHeader, CommonDialogWrapper, useTranslate } from '@cloudbeaver/core-blocks';
 import type { DialogComponent } from '@cloudbeaver/core-dialogs';
 import { useCodemirrorExtensions } from '@cloudbeaver/plugin-codemirror6';
-import { SQLCodeEditorLoader, useSqlDialectExtension } from '@cloudbeaver/plugin-sql-editor-new';
+import { SQLCodeEditor, useSqlDialectExtension } from '@cloudbeaver/plugin-sql-editor-codemirror';
 
 interface IPayload {
   text: string;
@@ -18,7 +18,7 @@ interface IPayload {
 
 export const QueryDetailsDialog: DialogComponent<IPayload> = observer(function QueryDetailsDialog(props) {
   const translate = useTranslate();
-  const sqlDialect = useSqlDialectExtension(undefined);
+  const sqlDialect = useSqlDialectExtension();
   const extensions = useCodemirrorExtensions();
   if (sqlDialect) {
     extensions.set(...sqlDialect);
@@ -28,7 +28,7 @@ export const QueryDetailsDialog: DialogComponent<IPayload> = observer(function Q
     <CommonDialogWrapper size="large" fixedWidth>
       <CommonDialogHeader title={translate('plugin_datasource_transaction_manager_logs_table_column_text')} onReject={props.rejectDialog} />
       <CommonDialogBody noBodyPadding noOverflow>
-        <SQLCodeEditorLoader value={props.payload.text} extensions={extensions} readonly />
+        <SQLCodeEditor value={props.payload.text} extensions={extensions} readonly />
       </CommonDialogBody>
       <CommonDialogFooter>
         <Button variant="secondary" onClick={() => props.rejectDialog()}>
diff --git a/webapp/packages/plugin-datasource-transaction-manager/tsconfig.json b/webapp/packages/plugin-datasource-transaction-manager/tsconfig.json
index b2c2bd1df7..0717b87706 100644
--- a/webapp/packages/plugin-datasource-transaction-manager/tsconfig.json
+++ b/webapp/packages/plugin-datasource-transaction-manager/tsconfig.json
@@ -65,7 +65,7 @@
       "path": "../plugin-datasource-context-switch"
     },
     {
-      "path": "../plugin-sql-editor-new"
+      "path": "../plugin-sql-editor-codemirror"
     },
     {
       "path": "../plugin-tools-panel"
diff --git a/webapp/packages/plugin-ddl-viewer/package.json b/webapp/packages/plugin-ddl-viewer/package.json
index 959257eff3..9a55ee399a 100644
--- a/webapp/packages/plugin-ddl-viewer/package.json
+++ b/webapp/packages/plugin-ddl-viewer/package.json
@@ -35,8 +35,8 @@
     "@cloudbeaver/plugin-codemirror6": "workspace:*",
     "@cloudbeaver/plugin-navigation-tree": "workspace:*",
     "@cloudbeaver/plugin-sql-editor": "workspace:*",
+    "@cloudbeaver/plugin-sql-editor-codemirror": "workspace:*",
     "@cloudbeaver/plugin-sql-editor-navigation-tab": "workspace:*",
-    "@cloudbeaver/plugin-sql-editor-new": "workspace:*",
     "mobx": "^6",
     "mobx-react-lite": "^4",
     "react": "^19",
diff --git a/webapp/packages/plugin-ddl-viewer/src/DdlViewer/DDLViewerTabPanel.tsx b/webapp/packages/plugin-ddl-viewer/src/DdlViewer/DDLViewerTabPanel.tsx
index 92a996c960..716f93861c 100644
--- a/webapp/packages/plugin-ddl-viewer/src/DdlViewer/DDLViewerTabPanel.tsx
+++ b/webapp/packages/plugin-ddl-viewer/src/DdlViewer/DDLViewerTabPanel.tsx
@@ -1,6 +1,6 @@
 /*
  * CloudBeaver - Cloud Database Manager
- * Copyright (C) 2020-2025 DBeaver Corp and others
+ * Copyright (C) 2020-2026 DBeaver Corp and others
  *
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
@@ -19,7 +19,7 @@ import { MenuBar, MenuBarGroupStyles, MenuBarItemStyles, MenuBarStyles } from '@
 import { useMenu } from '@cloudbeaver/core-view';
 import { useCodemirrorExtensions } from '@cloudbeaver/plugin-codemirror6';
 import type { NavNodeTransformViewComponent } from '@cloudbeaver/plugin-navigation-tree';
-import { SQLCodeEditorLoader, useSqlDialectExtension } from '@cloudbeaver/plugin-sql-editor-new';
+import { SQLCodeEditor, useSqlDialectExtension } from '@cloudbeaver/plugin-sql-editor-codemirror';
 
 import { DATA_CONTEXT_DDL_VIEWER_NODE } from './DATA_CONTEXT_DDL_VIEWER_NODE.js';
 import { DATA_CONTEXT_DDL_VIEWER_VALUE } from './DATA_CONTEXT_DDL_VIEWER_VALUE.js';
@@ -51,7 +51,7 @@ export const DDLViewerTabPanel: NavNodeTransformViewComponent = observer(functio
 
   return (
     <div className={s(styles, { wrapper: true })}>
-      <SQLCodeEditorLoader className={s(styles, { sqlCodeEditorLoader: true })} value={ddlResource.data ?? ''} extensions={extensions} readonly />
+      <SQLCodeEditor className={s(styles, { sqlCodeEditorLoader: true })} value={ddlResource.data ?? ''} extensions={extensions} readonly />
       <MenuBar className={s(styles, { menuBar: true, floating: true, withLabel: true })} menu={menu} compact={false} />
     </div>
   );
diff --git a/webapp/packages/plugin-ddl-viewer/src/ExtendedDDLViewer/ExtendedDDLViewerTabPanel.tsx b/webapp/packages/plugin-ddl-viewer/src/ExtendedDDLViewer/ExtendedDDLViewerTabPanel.tsx
index 7714c929c2..466ece51a3 100644
--- a/webapp/packages/plugin-ddl-viewer/src/ExtendedDDLViewer/ExtendedDDLViewerTabPanel.tsx
+++ b/webapp/packages/plugin-ddl-viewer/src/ExtendedDDLViewer/ExtendedDDLViewerTabPanel.tsx
@@ -1,6 +1,6 @@
 /*
  * CloudBeaver - Cloud Database Manager
- * Copyright (C) 2020-2025 DBeaver Corp and others
+ * Copyright (C) 2020-2026 DBeaver Corp and others
  *
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
@@ -19,7 +19,7 @@ import { MenuBar } from '@cloudbeaver/core-ui';
 import { useMenu } from '@cloudbeaver/core-view';
 import { useCodemirrorExtensions } from '@cloudbeaver/plugin-codemirror6';
 import type { NavNodeTransformViewComponent } from '@cloudbeaver/plugin-navigation-tree';
-import { SQLCodeEditorLoader, useSqlDialectExtension } from '@cloudbeaver/plugin-sql-editor-new';
+import { SQLCodeEditor, useSqlDialectExtension } from '@cloudbeaver/plugin-sql-editor-codemirror';
 
 import { DATA_CONTEXT_DDL_VIEWER_NODE } from '../DdlViewer/DATA_CONTEXT_DDL_VIEWER_NODE.js';
 import { DATA_CONTEXT_DDL_VIEWER_VALUE } from '../DdlViewer/DATA_CONTEXT_DDL_VIEWER_VALUE.js';
@@ -51,7 +51,7 @@ export const ExtendedDDLViewerTabPanel: NavNodeTransformViewComponent = observer
 
   return (
     <div className={s(styles, { wrapper: true })}>
-      <SQLCodeEditorLoader className={s(styles, { sqlCodeEditorLoader: true })} value={extendedDDlData ?? ''} extensions={extensions} readonly />
+      <SQLCodeEditor className={s(styles, { sqlCodeEditorLoader: true })} value={extendedDDlData ?? ''} extensions={extensions} readonly />
       <MenuBar className={s(styles, { menuBar: true })} menu={menu} />
     </div>
   );
diff --git a/webapp/packages/plugin-ddl-viewer/tsconfig.json b/webapp/packages/plugin-ddl-viewer/tsconfig.json
index 5b47f5a1b9..4a1f47159f 100644
--- a/webapp/packages/plugin-ddl-viewer/tsconfig.json
+++ b/webapp/packages/plugin-ddl-viewer/tsconfig.json
@@ -50,10 +50,10 @@
       "path": "../plugin-sql-editor"
     },
     {
-      "path": "../plugin-sql-editor-navigation-tab"
+      "path": "../plugin-sql-editor-codemirror"
     },
     {
-      "path": "../plugin-sql-editor-new"
+      "path": "../plugin-sql-editor-navigation-tab"
     }
   ],
   "include": [
diff --git a/webapp/packages/plugin-sql-async-task-confirmation/package.json b/webapp/packages/plugin-sql-async-task-confirmation/package.json
index 7cf68df469..9c6967b371 100644
--- a/webapp/packages/plugin-sql-async-task-confirmation/package.json
+++ b/webapp/packages/plugin-sql-async-task-confirmation/package.json
@@ -31,7 +31,7 @@
     "@cloudbeaver/core-root": "workspace:*",
     "@cloudbeaver/core-sdk": "workspace:*",
     "@cloudbeaver/plugin-codemirror6": "workspace:*",
-    "@cloudbeaver/plugin-sql-editor-new": "workspace:*",
+    "@cloudbeaver/plugin-sql-editor-codemirror": "workspace:*",
     "mobx": "^6",
     "mobx-react-lite": "^4",
     "react": "^19",
diff --git a/webapp/packages/plugin-sql-async-task-confirmation/src/renderQueryForConfirmation.tsx b/webapp/packages/plugin-sql-async-task-confirmation/src/renderQueryForConfirmation.tsx
index 2b218ed8cd..dd4254e22e 100644
--- a/webapp/packages/plugin-sql-async-task-confirmation/src/renderQueryForConfirmation.tsx
+++ b/webapp/packages/plugin-sql-async-task-confirmation/src/renderQueryForConfirmation.tsx
@@ -1,13 +1,13 @@
 /*
  * CloudBeaver - Cloud Database Manager
- * Copyright (C) 2020-2025 DBeaver Corp and others
+ * Copyright (C) 2020-2026 DBeaver Corp and others
  *
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
  */
 
 import { useCodemirrorExtensions } from '@cloudbeaver/plugin-codemirror6';
-import { SQLCodeEditorLoader, useSqlDialectExtension } from '@cloudbeaver/plugin-sql-editor-new';
+import { SQLCodeEditor, useSqlDialectExtension } from '@cloudbeaver/plugin-sql-editor-codemirror';
 import { observer } from 'mobx-react-lite';
 
 export function renderQueryForConfirmation(query: string): React.ReactElement {
@@ -15,11 +15,11 @@ export function renderQueryForConfirmation(query: string): React.ReactElement {
 }
 
 const RenderQuery = observer(function RenderQuery({ query }: { query: string }) {
-  const sqlDialect = useSqlDialectExtension(undefined);
+  const sqlDialect = useSqlDialectExtension();
   const extensions = useCodemirrorExtensions();
   if (sqlDialect) {
     extensions.set(...sqlDialect);
   }
 
-  return <SQLCodeEditorLoader className="tw:mt-4" value={query} extensions={extensions} lineWrapping readonly />;
+  return <SQLCodeEditor className="tw:mt-4" value={query} extensions={extensions} lineWrapping readonly />;
 });
diff --git a/webapp/packages/plugin-sql-async-task-confirmation/tsconfig.json b/webapp/packages/plugin-sql-async-task-confirmation/tsconfig.json
index ae9f8232cb..df4ee70f9a 100644
--- a/webapp/packages/plugin-sql-async-task-confirmation/tsconfig.json
+++ b/webapp/packages/plugin-sql-async-task-confirmation/tsconfig.json
@@ -38,7 +38,7 @@
       "path": "../plugin-codemirror6"
     },
     {
-      "path": "../plugin-sql-editor-new"
+      "path": "../plugin-sql-editor-codemirror"
     }
   ],
   "include": [
diff --git a/webapp/packages/plugin-sql-editor-codemirror/.gitignore b/webapp/packages/plugin-sql-editor-codemirror/.gitignore
new file mode 100644
index 0000000000..4ef7eb1488
--- /dev/null
+++ b/webapp/packages/plugin-sql-editor-codemirror/.gitignore
@@ -0,0 +1,18 @@
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+lib
+dist
+
+# misc
+.DS_Store
+.env*
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/webapp/packages/plugin-sql-editor-codemirror/package.json b/webapp/packages/plugin-sql-editor-codemirror/package.json
new file mode 100644
index 0000000000..b4e6cfdbd3
--- /dev/null
+++ b/webapp/packages/plugin-sql-editor-codemirror/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "@cloudbeaver/plugin-sql-editor-codemirror",
+  "type": "module",
+  "sideEffects": [
+    "./lib/module.js",
+    "./lib/index.js",
+    "src/**/*.css",
+    "src/**/*.scss",
+    "public/**/*"
+  ],
+  "version": "0.1.0",
+  "description": "",
+  "license": "Apache-2.0",
+  "exports": {
+    ".": "./lib/index.js",
+    "./module": "./lib/module.js"
+  },
+  "scripts": {
+    "build": "tsc -b",
+    "clean": "rimraf --glob lib",
+    "lint": "eslint ./src/ --ext .ts,.tsx",
+    "validate-dependencies": "core-cli-validate-dependencies"
+  },
+  "dependencies": {
+    "@cloudbeaver/core-blocks": "workspace:*",
+    "@cloudbeaver/core-sdk": "workspace:*",
+    "@cloudbeaver/plugin-codemirror6": "workspace:*",
+    "mobx": "^6",
+    "mobx-react-lite": "^4",
+    "react": "^19",
+    "react-dom": "^19",
+    "tslib": "^2"
+  },
+  "devDependencies": {
+    "@cloudbeaver/core-cli": "workspace:*",
+    "@cloudbeaver/tsconfig": "workspace:*",
+    "@types/react": "^19",
+    "rimraf": "^6",
+    "typescript": "^5",
+    "typescript-plugin-css-modules": "^5"
+  }
+}
diff --git a/webapp/packages/plugin-sql-editor-new/src/SQLEditor/ACTIVE_QUERY_EXTENSION.ts b/webapp/packages/plugin-sql-editor-codemirror/src/ACTIVE_QUERY_EXTENSION.ts
similarity index 100%
rename from webapp/packages/plugin-sql-editor-new/src/SQLEditor/ACTIVE_QUERY_EXTENSION.ts
rename to webapp/packages/plugin-sql-editor-codemirror/src/ACTIVE_QUERY_EXTENSION.ts
diff --git a/webapp/packages/plugin-sql-editor-new/src/SQLEditor/QUERY_STATUS_GUTTER_EXTENSION.ts b/webapp/packages/plugin-sql-editor-codemirror/src/QUERY_STATUS_GUTTER_EXTENSION.ts
similarity index 100%
rename from webapp/packages/plugin-sql-editor-new/src/SQLEditor/QUERY_STATUS_GUTTER_EXTENSION.ts
rename to webapp/packages/plugin-sql-editor-codemirror/src/QUERY_STATUS_GUTTER_EXTENSION.ts
diff --git a/webapp/packages/plugin-sql-editor-new/src/SQLEditor/SQLCodeEditor/SQLCodeEditor.tsx b/webapp/packages/plugin-sql-editor-codemirror/src/SQLCodeEditor/SQLCodeEditor.tsx
similarity index 100%
rename from webapp/packages/plugin-sql-editor-new/src/SQLEditor/SQLCodeEditor/SQLCodeEditor.tsx
rename to webapp/packages/plugin-sql-editor-codemirror/src/SQLCodeEditor/SQLCodeEditor.tsx
diff --git a/webapp/packages/plugin-sql-editor-new/src/SQLEditor/SQLCodeEditor/SQLCodeEditorLoader.tsx b/webapp/packages/plugin-sql-editor-codemirror/src/SQLCodeEditor/SQLCodeEditorLoader.ts
similarity index 57%
rename from webapp/packages/plugin-sql-editor-new/src/SQLEditor/SQLCodeEditor/SQLCodeEditorLoader.tsx
rename to webapp/packages/plugin-sql-editor-codemirror/src/SQLCodeEditor/SQLCodeEditorLoader.ts
index 51003c245f..ac652d4d9f 100644
--- a/webapp/packages/plugin-sql-editor-new/src/SQLEditor/SQLCodeEditor/SQLCodeEditorLoader.tsx
+++ b/webapp/packages/plugin-sql-editor-codemirror/src/SQLCodeEditor/SQLCodeEditorLoader.ts
@@ -1,10 +1,10 @@
 /*
  * CloudBeaver - Cloud Database Manager
- * Copyright (C) 2020-2025 DBeaver Corp and others
+ * Copyright (C) 2020-2026 DBeaver Corp and others
  *
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
  */
 import { importLazyComponent } from '@cloudbeaver/core-blocks';
 
-export const SQLCodeEditorLoader = importLazyComponent(() => import('./SQLCodeEditor.js').then(m => m.SQLCodeEditor));
+export const SQLCodeEditor = importLazyComponent(() => import('./SQLCodeEditor.js').then(m => m.SQLCodeEditor));
diff --git a/webapp/packages/plugin-sql-editor-new/src/SQLEditor/SQLCodeEditor/useSQLCodeEditor.ts b/webapp/packages/plugin-sql-editor-codemirror/src/SQLCodeEditor/useSQLCodeEditor.ts
similarity index 100%
rename from webapp/packages/plugin-sql-editor-new/src/SQLEditor/SQLCodeEditor/useSQLCodeEditor.ts
rename to webapp/packages/plugin-sql-editor-codemirror/src/SQLCodeEditor/useSQLCodeEditor.ts
diff --git a/webapp/packages/plugin-sql-editor-codemirror/src/index.ts b/webapp/packages/plugin-sql-editor-codemirror/src/index.ts
new file mode 100644
index 0000000000..51bdac8811
--- /dev/null
+++ b/webapp/packages/plugin-sql-editor-codemirror/src/index.ts
@@ -0,0 +1,13 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2026 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+export * from './SQLCodeEditor/SQLCodeEditorLoader.js';
+export * from './SQLCodeEditor/useSQLCodeEditor.js';
+export * from './useSqlDialectExtension.js';
+export * from './ACTIVE_QUERY_EXTENSION.js';
+export * from './QUERY_STATUS_GUTTER_EXTENSION.js';
diff --git a/webapp/packages/plugin-sql-editor-new/src/SQLEditor/useSqlDialectExtension.ts b/webapp/packages/plugin-sql-editor-codemirror/src/useSqlDialectExtension.ts
similarity index 93%
rename from webapp/packages/plugin-sql-editor-new/src/SQLEditor/useSqlDialectExtension.ts
rename to webapp/packages/plugin-sql-editor-codemirror/src/useSqlDialectExtension.ts
index 0825c8fa76..8349ff95f3 100644
--- a/webapp/packages/plugin-sql-editor-new/src/SQLEditor/useSqlDialectExtension.ts
+++ b/webapp/packages/plugin-sql-editor-codemirror/src/useSqlDialectExtension.ts
@@ -1,6 +1,6 @@
 /*
  * CloudBeaver - Cloud Database Manager
- * Copyright (C) 2020-2025 DBeaver Corp and others
+ * Copyright (C) 2020-2026 DBeaver Corp and others
  *
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
@@ -13,7 +13,7 @@ import type { Compartment, Extension } from '@cloudbeaver/plugin-codemirror6';
 
 const codemirrorPluginLoader = createLazyLoader(() => import('@cloudbeaver/plugin-codemirror6'));
 
-export function useSqlDialectExtension(dialectInfo: SqlDialectInfo | undefined): [Compartment, Extension] | null {
+export function useSqlDialectExtension(dialectInfo?: SqlDialectInfo): [Compartment, Extension] | null {
   const codemirror = useLazyImport(codemirrorPluginLoader);
   const loader = getDialectLoader(codemirror, dialectInfo?.name);
   const dialect = useLazyImport(loader);
diff --git a/webapp/packages/plugin-sql-editor-codemirror/tsconfig.json b/webapp/packages/plugin-sql-editor-codemirror/tsconfig.json
new file mode 100644
index 0000000000..3072dc9d94
--- /dev/null
+++ b/webapp/packages/plugin-sql-editor-codemirror/tsconfig.json
@@ -0,0 +1,34 @@
+{
+  "extends": "@cloudbeaver/tsconfig/tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "lib",
+    "tsBuildInfoFile": "lib/tsconfig.tsbuildinfo",
+    "composite": true
+  },
+  "references": [
+    {
+      "path": "../core-blocks"
+    },
+    {
+      "path": "../core-cli"
+    },
+    {
+      "path": "../core-sdk"
+    },
+    {
+      "path": "../plugin-codemirror6"
+    }
+  ],
+  "include": [
+    "__custom_mocks__/**/*",
+    "src/**/*",
+    "src/**/*.json",
+    "src/**/*.css",
+    "src/**/*.scss"
+  ],
+  "exclude": [
+    "**/node_modules",
+    "lib/**/*"
+  ]
+}
diff --git a/webapp/packages/plugin-sql-editor-new/package.json b/webapp/packages/plugin-sql-editor-new/package.json
index 1a81cbc072..d107d1769c 100644
--- a/webapp/packages/plugin-sql-editor-new/package.json
+++ b/webapp/packages/plugin-sql-editor-new/package.json
@@ -32,6 +32,7 @@
     "@cloudbeaver/core-utils": "workspace:*",
     "@cloudbeaver/plugin-codemirror6": "workspace:*",
     "@cloudbeaver/plugin-sql-editor": "workspace:*",
+    "@cloudbeaver/plugin-sql-editor-codemirror": "workspace:*",
     "mobx": "^6",
     "mobx-react-lite": "^4",
     "react": "^19",
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 fd5e8edd7f..0e70e575ab 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
@@ -1,6 +1,6 @@
 /*
  * CloudBeaver - Cloud Database Manager
- * Copyright (C) 2020-2025 DBeaver Corp and others
+ * Copyright (C) 2020-2026 DBeaver Corp and others
  *
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
@@ -16,13 +16,15 @@ import { type TabContainerPanelComponent, useDNDBox } from '@cloudbeaver/core-ui
 import { closeCompletion, type IEditorRef, Prec, ReactCodemirrorPanel, useCodemirrorExtensions } from '@cloudbeaver/plugin-codemirror6';
 import { SqlEditorSettingsService, type ISqlEditorModeProps } from '@cloudbeaver/plugin-sql-editor';
 
-import { ACTIVE_QUERY_EXTENSION } from '../ACTIVE_QUERY_EXTENSION.js';
-import { QUERY_STATUS_GUTTER_EXTENSION } from '../QUERY_STATUS_GUTTER_EXTENSION.js';
-import { SQLCodeEditorLoader } from '../SQLCodeEditor/SQLCodeEditorLoader.js';
-import { useSQLCodeEditor } from '../SQLCodeEditor/useSQLCodeEditor.js';
+import {
+  ACTIVE_QUERY_EXTENSION,
+  QUERY_STATUS_GUTTER_EXTENSION,
+  SQLCodeEditor,
+  useSQLCodeEditor,
+  useSqlDialectExtension,
+} from '@cloudbeaver/plugin-sql-editor-codemirror';
 import { useHighlightExtensions } from '../useHighlightExtensions.js';
 import { useSqlDialectAutocompletion } from '../useSqlDialectAutocompletion.js';
-import { useSqlDialectExtension } from '../useSqlDialectExtension.js';
 import style from './SQLCodeEditorPanel.module.css';
 import { SqlEditorInfoBar } from './SqlEditorInfoBar.js';
 import { useSQLCodeEditorPanel } from './useSQLCodeEditorPanel.js';
@@ -109,7 +111,7 @@ export const SQLCodeEditorPanel: TabContainerPanelComponent<ISqlEditorModeProps>
 
   return (
     <div ref={dndBox.setRef} className={styles['box']}>
-      <SQLCodeEditorLoader
+      <SQLCodeEditor
         ref={setEditorRef}
         getValue={() => data.value}
         cursor={{
@@ -143,7 +145,7 @@ export const SQLCodeEditorPanel: TabContainerPanelComponent<ISqlEditorModeProps>
             <SqlEditorInfoBar state={editor.state} />
           </ReactCodemirrorPanel>
         )}
-      </SQLCodeEditorLoader>
+      </SQLCodeEditor>
     </div>
   );
 });
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 66ab764246..721ec8ad25 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
@@ -1,6 +1,6 @@
 /*
  * CloudBeaver - Cloud Database Manager
- * Copyright (C) 2020-2025 DBeaver Corp and others
+ * Copyright (C) 2020-2026 DBeaver Corp and others
  *
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
@@ -10,13 +10,14 @@ import { useCallback } from 'react';
 
 import { useExecutor, useObservableRef } from '@cloudbeaver/core-blocks';
 import { throttle } from '@cloudbeaver/core-utils';
-import type { ISqlEditorCursor, ISQLEditorData } from '@cloudbeaver/plugin-sql-editor';
+import type { ISQLEditorData } from '@cloudbeaver/plugin-sql-editor';
 
-import type { IEditor } from '../SQLCodeEditor/useSQLCodeEditor.js';
+import type { IEditor } from '@cloudbeaver/plugin-sql-editor-codemirror';
+import type { SelectionRange } from '@cloudbeaver/plugin-codemirror6';
 
 interface State {
   highlightActiveQuery: () => void;
-  onQueryChange: (query: string, selection: ISqlEditorCursor) => void;
+  onQueryChange: (query: string, selection: SelectionRange) => void;
   onCursorChange: (anchor: number, head?: number) => void;
 }
 
@@ -34,9 +35,8 @@ export function useSQLCodeEditorPanel(data: ISQLEditorData, editor: IEditor) {
           this.editor.highlightActiveQuery(segment.begin, segment.end);
         }
       },
-      onQueryChange(query: string, selection: ISqlEditorCursor) {
-        this.data.setScript(query, ON_QUERY_CHANGE_SOURCE, selection);
-        this.onCursorChange(selection.anchor, selection.head);
+      onQueryChange(query: string, selection: SelectionRange) {
+        this.data.setScript(query, ON_QUERY_CHANGE_SOURCE, { anchor: selection.anchor, head: selection.head }); // do not pass selection directly because anchor and head are getters
       },
       onCursorChange(anchor: number, head?: number) {
         this.data.setCursor(anchor, head);
diff --git a/webapp/packages/plugin-sql-editor-new/src/index.ts b/webapp/packages/plugin-sql-editor-new/src/index.ts
index faf7f7c5ab..26a682c2e6 100644
--- a/webapp/packages/plugin-sql-editor-new/src/index.ts
+++ b/webapp/packages/plugin-sql-editor-new/src/index.ts
@@ -1,6 +1,6 @@
 /*
  * CloudBeaver - Cloud Database Manager
- * Copyright (C) 2020-2025 DBeaver Corp and others
+ * Copyright (C) 2020-2026 DBeaver Corp and others
  *
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
@@ -8,6 +8,4 @@
 
 import './module.js';
 
-export * from './SQLEditor/SQLCodeEditor/SQLCodeEditorLoader.js';
 export * from './SQLEditor/useSqlDialectAutocompletion.js';
-export * from './SQLEditor/useSqlDialectExtension.js';
diff --git a/webapp/packages/plugin-sql-editor-new/tsconfig.json b/webapp/packages/plugin-sql-editor-new/tsconfig.json
index 54e25c144d..f2d33dd4dd 100644
--- a/webapp/packages/plugin-sql-editor-new/tsconfig.json
+++ b/webapp/packages/plugin-sql-editor-new/tsconfig.json
@@ -39,6 +39,9 @@
     },
     {
       "path": "../plugin-sql-editor"
+    },
+    {
+      "path": "../plugin-sql-editor-codemirror"
     }
   ],
   "include": [
diff --git a/webapp/packages/plugin-sql-editor/package.json b/webapp/packages/plugin-sql-editor/package.json
index 3ffbc10122..653b9e42f3 100644
--- a/webapp/packages/plugin-sql-editor/package.json
+++ b/webapp/packages/plugin-sql-editor/package.json
@@ -45,6 +45,7 @@
     "@cloudbeaver/plugin-codemirror6": "workspace:*",
     "@cloudbeaver/plugin-data-viewer": "workspace:*",
     "@cloudbeaver/plugin-navigation-tabs": "workspace:*",
+    "@cloudbeaver/plugin-sql-editor-codemirror": "workspace:*",
     "@dbeaver/js-helpers": "workspace:^",
     "mobx": "^6",
     "mobx-react-lite": "^4",
diff --git a/webapp/packages/plugin-sql-editor/src/QueryDataSource.ts b/webapp/packages/plugin-sql-editor/src/QueryDataSource.ts
index 7e6947af4d..3ae337ceea 100644
--- a/webapp/packages/plugin-sql-editor/src/QueryDataSource.ts
+++ b/webapp/packages/plugin-sql-editor/src/QueryDataSource.ts
@@ -1,13 +1,13 @@
 /*
  * CloudBeaver - Cloud Database Manager
- * Copyright (C) 2020-2025 DBeaver Corp and others
+ * Copyright (C) 2020-2026 DBeaver Corp and others
  *
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
  */
 import { makeObservable, observable } from 'mobx';
 
-import type { IConnectionExecutionContextInfo } from '@cloudbeaver/core-connections';
+import { createConnectionParam, type IConnectionExecutionContextInfo } from '@cloudbeaver/core-connections';
 import type { IServiceProvider } from '@cloudbeaver/core-di';
 import { executorHandlerFilter, type IExecutorHandler, type ITask } from '@cloudbeaver/core-executor';
 import {
@@ -306,12 +306,18 @@ export class QueryDataSource<TOptions extends IDataQueryOptions = IDataQueryOpti
       const parametersState = observable({
         ...Object.fromEntries(Object.entries(queryParamsEvent.parameters).map(([key, value]) => [key, this.previousQueryParameters?.[key] ?? value])),
       });
+      const connectionKey = this.executionContext?.context
+        ? createConnectionParam(this.executionContext.context.projectId, this.executionContext.context.connectionId)
+        : null;
+
       // TODO: this UI thing should be moved outside of the `plugin-sql-editor` package to use sql editor component for preview
+      //       it is partially fixed, but still this UI code should be somewhere else
       const dialogPromise = this.commonDialogService.open(ConfirmationDialog, {
         title: queryParamsEvent.title,
         message: queryParamsEvent.message,
         size: 'large',
-        children: () => renderQueryParamsForConfirmation(parametersState, queryParamsEvent.query),
+        noOverflow: true,
+        children: () => renderQueryParamsForConfirmation(connectionKey, parametersState, queryParamsEvent.query),
       });
 
       const { status } = await dialogPromise;
diff --git a/webapp/packages/plugin-sql-editor/src/SqlEditorSettingsService.ts b/webapp/packages/plugin-sql-editor/src/SqlEditorSettingsService.ts
index d05d0ec921..9e2e2ff919 100644
--- a/webapp/packages/plugin-sql-editor/src/SqlEditorSettingsService.ts
+++ b/webapp/packages/plugin-sql-editor/src/SqlEditorSettingsService.ts
@@ -1,6 +1,6 @@
 /*
  * CloudBeaver - Cloud Database Manager
- * Copyright (C) 2020-2025 DBeaver Corp and others
+ * Copyright (C) 2020-2026 DBeaver Corp and others
  *
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
@@ -57,6 +57,8 @@ const defaultSettings = schema.object({
   'plugin.sql-editor.disabled': schemaExtra.stringedBoolean().default(false),
   'plugin.sql-editor.autoSave': schemaExtra.stringedBoolean().default(true),
   'plugin.sql-editor.highlightWhitespace': schemaExtra.stringedBoolean().default(false),
+  'sql.parameter.enabled': schemaExtra.stringedBoolean().default(true),
+  'sql.variables.enabled': schemaExtra.stringedBoolean().default(true),
   'sql.proposals.insert.table.alias': schema.coerce
     .string()
     .transform(value => {
@@ -117,6 +119,14 @@ export class SqlEditorSettingsService {
     return this.settings.getValue('sql.proposals.insert.table.alias');
   }
 
+  get parameterEnabled(): boolean {
+    return this.settings.getValue('sql.parameter.enabled');
+  }
+
+  get variablesEnabled(): boolean {
+    return this.settings.getValue('sql.variables.enabled');
+  }
+
   get longNameProposals(): boolean {
     return this.settings.getValue('SQLEditor.ContentAssistant.proposals.long.name');
   }
diff --git a/webapp/packages/plugin-sql-editor/src/renderQueryParamsForConfirmation.tsx b/webapp/packages/plugin-sql-editor/src/renderQueryParamsForConfirmation.tsx
index 9dd70a8266..6144762ee7 100644
--- a/webapp/packages/plugin-sql-editor/src/renderQueryParamsForConfirmation.tsx
+++ b/webapp/packages/plugin-sql-editor/src/renderQueryParamsForConfirmation.tsx
@@ -1,29 +1,76 @@
 /*
  * CloudBeaver - Cloud Database Manager
- * Copyright (C) 2020-2025 DBeaver Corp and others
+ * Copyright (C) 2020-2026 DBeaver Corp and others
  *
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
  */
 
-import { PropertiesTable } from '@cloudbeaver/core-blocks';
+import { PropertiesTable, useResource } from '@cloudbeaver/core-blocks';
+import { SQLCodeEditor, useSqlDialectExtension } from '@cloudbeaver/plugin-sql-editor-codemirror';
+import { useCodemirrorExtensions } from '@cloudbeaver/plugin-codemirror6';
 import { observer } from 'mobx-react-lite';
+import { useService } from '@cloudbeaver/core-di';
+import { SqlEditorSettingsService } from './SqlEditorSettingsService.js';
+import { ConnectionDialectResource, type IConnectionInfoParams } from '@cloudbeaver/core-connections';
 
-export function renderQueryParamsForConfirmation(parameters: Record<string, any>, query: string): React.ReactElement {
-  return <RenderParametersForm parameters={parameters} query={query} />;
+export function renderQueryParamsForConfirmation(
+  connectionKey: IConnectionInfoParams | null,
+  parameters: Record<string, any>,
+  query: string,
+): React.ReactElement {
+  return <RenderParametersForm parameters={parameters} query={query} connectionKey={connectionKey} />;
 }
 
-const RenderParametersForm = observer(function RenderParametersForm({ parameters }: { query: string; parameters: Record<string, any> }) {
+const RenderParametersForm = observer(function RenderParametersForm({
+  parameters,
+  query,
+  connectionKey,
+}: {
+  query: string;
+  parameters: Record<string, any>;
+  connectionKey: IConnectionInfoParams | null;
+}) {
+  const sqlEditorSettingsService = useService(SqlEditorSettingsService);
+  const connectionDialectResource = useResource(RenderParametersForm, ConnectionDialectResource, connectionKey);
+  const sqlDialect = useSqlDialectExtension(connectionDialectResource.data);
+  const extensions = useCodemirrorExtensions();
+  if (sqlDialect) {
+    extensions.set(...sqlDialect);
+  }
+
+  for (const [paramName, paramValue] of Object.entries(parameters)) {
+    const paramValueString = String(paramValue);
+    if (paramValueString) {
+      if (sqlEditorSettingsService.parameterEnabled) {
+        query = query.replaceAll(`:${paramName}`, paramValueString);
+      }
+
+      if (sqlEditorSettingsService.variablesEnabled) {
+        query = query.replaceAll(`$\{${paramName}}`, paramValueString);
+      }
+    }
+  }
+
   return (
-    <PropertiesTable
-      properties={Object.keys(parameters).map(paramName => ({
-        id: paramName,
-        key: paramName,
-        displayName: paramName,
-        defaultValue: '',
-      }))}
-      propertiesState={parameters}
-      staticProperties
-    />
+    <div className="tw:flex tw:flex-col tw:overflow-auto tw:gap-3 tw:min-h-full">
+      <div className="tw:overflow-auto tw:flex-auto tw:flex">
+        <PropertiesTable
+          properties={Object.keys(parameters).map(paramName => ({
+            id: paramName,
+            key: paramName,
+            displayName: paramName,
+            defaultValue: '',
+          }))}
+          propertiesState={parameters}
+          className="tw:overflow-auto"
+          staticProperties
+        />
+      </div>
+
+      {!sqlEditorSettingsService.disabled && (
+        <SQLCodeEditor value={query} extensions={extensions} className="tw:overflow-auto tw:flex-1/3" readonly />
+      )}
+    </div>
   );
 });
diff --git a/webapp/packages/plugin-sql-editor/tsconfig.json b/webapp/packages/plugin-sql-editor/tsconfig.json
index 61e16ca0b0..80d38f2c50 100644
--- a/webapp/packages/plugin-sql-editor/tsconfig.json
+++ b/webapp/packages/plugin-sql-editor/tsconfig.json
@@ -84,6 +84,9 @@
     },
     {
       "path": "../plugin-navigation-tabs"
+    },
+    {
+      "path": "../plugin-sql-editor-codemirror"
     }
   ],
   "include": [
diff --git a/webapp/packages/plugin-sql-generator/package.json b/webapp/packages/plugin-sql-generator/package.json
index ae12573636..8bcec178de 100644
--- a/webapp/packages/plugin-sql-generator/package.json
+++ b/webapp/packages/plugin-sql-generator/package.json
@@ -36,7 +36,7 @@
     "@cloudbeaver/plugin-codemirror6": "workspace:*",
     "@cloudbeaver/plugin-data-viewer": "workspace:*",
     "@cloudbeaver/plugin-sql-editor": "workspace:*",
-    "@cloudbeaver/plugin-sql-editor-new": "workspace:*",
+    "@cloudbeaver/plugin-sql-editor-codemirror": "workspace:*",
     "mobx": "^6",
     "mobx-react-lite": "^4",
     "react": "^19",
diff --git a/webapp/packages/plugin-sql-generator/src/ScriptPreview/ScriptPreviewDialog.tsx b/webapp/packages/plugin-sql-generator/src/ScriptPreview/ScriptPreviewDialog.tsx
index 26ba0f72e6..3761c7e2a6 100644
--- a/webapp/packages/plugin-sql-generator/src/ScriptPreview/ScriptPreviewDialog.tsx
+++ b/webapp/packages/plugin-sql-generator/src/ScriptPreview/ScriptPreviewDialog.tsx
@@ -1,6 +1,6 @@
 /*
  * CloudBeaver - Cloud Database Manager
- * Copyright (C) 2020-2025 DBeaver Corp and others
+ * Copyright (C) 2020-2026 DBeaver Corp and others
  *
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
@@ -23,7 +23,7 @@ import {
 import { ConnectionDialectResource, type IConnectionInfoParams } from '@cloudbeaver/core-connections';
 import type { DialogComponentProps } from '@cloudbeaver/core-dialogs';
 import { useCodemirrorExtensions } from '@cloudbeaver/plugin-codemirror6';
-import { SQLCodeEditorLoader, useSqlDialectExtension } from '@cloudbeaver/plugin-sql-editor-new';
+import { SQLCodeEditor, useSqlDialectExtension } from '@cloudbeaver/plugin-sql-editor-codemirror';
 
 import style from './ScriptPreviewDialog.module.css';
 
@@ -57,13 +57,7 @@ export const ScriptPreviewDialog = observer<DialogComponentProps<Payload>>(funct
       <CommonDialogHeader title="data_viewer_script_preview_dialog_title" icon="sql-script" onReject={rejectDialog} />
       <CommonDialogBody noBodyPadding noOverflow>
         <div className={s(styles, { wrapper: true })}>
-          <SQLCodeEditorLoader
-            className={s(styles, { sqlCodeEditorLoader: true })}
-            value={payload.script}
-            extensions={extensions}
-            lineNumbers
-            readonly
-          />
+          <SQLCodeEditor className={s(styles, { sqlCodeEditorLoader: true })} value={payload.script} extensions={extensions} lineNumbers readonly />
         </div>
       </CommonDialogBody>
       <CommonDialogFooter className={s(styles, { footer: true })}>
diff --git a/webapp/packages/plugin-sql-generator/src/SqlGenerators/GeneratedSqlDialog.tsx b/webapp/packages/plugin-sql-generator/src/SqlGenerators/GeneratedSqlDialog.tsx
index 392323f165..291445525f 100644
--- a/webapp/packages/plugin-sql-generator/src/SqlGenerators/GeneratedSqlDialog.tsx
+++ b/webapp/packages/plugin-sql-generator/src/SqlGenerators/GeneratedSqlDialog.tsx
@@ -1,6 +1,6 @@
 /*
  * CloudBeaver - Cloud Database Manager
- * Copyright (C) 2020-2025 DBeaver Corp and others
+ * Copyright (C) 2020-2026 DBeaver Corp and others
  *
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
@@ -30,7 +30,7 @@ import { useService } from '@cloudbeaver/core-di';
 import type { DialogComponentProps } from '@cloudbeaver/core-dialogs';
 import { GQLErrorCatcher } from '@cloudbeaver/core-sdk';
 import { useCodemirrorExtensions } from '@cloudbeaver/plugin-codemirror6';
-import { SQLCodeEditorLoader, useSqlDialectExtension } from '@cloudbeaver/plugin-sql-editor-new';
+import { SQLCodeEditor, useSqlDialectExtension } from '@cloudbeaver/plugin-sql-editor-codemirror';
 
 import style from './GeneratedSqlDialog.module.css';
 import { SqlGeneratorsResource } from './SqlGeneratorsResource.js';
@@ -92,7 +92,7 @@ export const GeneratedSqlDialog = observer<DialogComponentProps<Payload>>(functi
       <CommonDialogBody noOverflow noBodyPadding>
         <div className={s(styles, { wrapper: true })}>
           <Loader loading={state.loading}>
-            {() => <SQLCodeEditorLoader className={s(styles, { sqlCodeEditorLoader: true })} value={state.query} extensions={extensions} readonly />}
+            {() => <SQLCodeEditor className={s(styles, { sqlCodeEditorLoader: true })} value={state.query} extensions={extensions} readonly />}
           </Loader>
         </div>
       </CommonDialogBody>
diff --git a/webapp/packages/plugin-sql-generator/tsconfig.json b/webapp/packages/plugin-sql-generator/tsconfig.json
index ed17d9fecc..74355751b1 100644
--- a/webapp/packages/plugin-sql-generator/tsconfig.json
+++ b/webapp/packages/plugin-sql-generator/tsconfig.json
@@ -53,7 +53,7 @@
       "path": "../plugin-sql-editor"
     },
     {
-      "path": "../plugin-sql-editor-new"
+      "path": "../plugin-sql-editor-codemirror"
     }
   ],
   "include": [
diff --git a/webapp/yarn.lock b/webapp/yarn.lock
index 561561ee81..73f303ce78 100644
--- a/webapp/yarn.lock
+++ b/webapp/yarn.lock
@@ -2968,8 +2968,8 @@ __metadata:
     "@cloudbeaver/plugin-codemirror6": "workspace:*"
     "@cloudbeaver/plugin-data-viewer": "workspace:*"
     "@cloudbeaver/plugin-sql-editor": "workspace:*"
+    "@cloudbeaver/plugin-sql-editor-codemirror": "workspace:*"
     "@cloudbeaver/plugin-sql-editor-navigation-tab": "workspace:*"
-    "@cloudbeaver/plugin-sql-editor-new": "workspace:*"
     "@cloudbeaver/tsconfig": "workspace:*"
     "@dbeaver/cli": "workspace:*"
     "@dbeaver/js-helpers": "workspace:*"
@@ -3145,7 +3145,7 @@ __metadata:
     "@cloudbeaver/plugin-codemirror6": "workspace:*"
     "@cloudbeaver/plugin-data-grid": "workspace:*"
     "@cloudbeaver/plugin-datasource-context-switch": "workspace:*"
-    "@cloudbeaver/plugin-sql-editor-new": "workspace:*"
+    "@cloudbeaver/plugin-sql-editor-codemirror": "workspace:*"
     "@cloudbeaver/plugin-tools-panel": "workspace:*"
     "@cloudbeaver/plugin-top-app-bar": "workspace:*"
     "@cloudbeaver/tsconfig": "workspace:*"
@@ -3180,8 +3180,8 @@ __metadata:
     "@cloudbeaver/plugin-codemirror6": "workspace:*"
     "@cloudbeaver/plugin-navigation-tree": "workspace:*"
     "@cloudbeaver/plugin-sql-editor": "workspace:*"
+    "@cloudbeaver/plugin-sql-editor-codemirror": "workspace:*"
     "@cloudbeaver/plugin-sql-editor-navigation-tab": "workspace:*"
-    "@cloudbeaver/plugin-sql-editor-new": "workspace:*"
     "@cloudbeaver/tsconfig": "workspace:*"
     "@types/react": "npm:^19"
     mobx: "npm:^6"
@@ -4024,7 +4024,28 @@ __metadata:
     "@cloudbeaver/core-root": "workspace:*"
     "@cloudbeaver/core-sdk": "workspace:*"
     "@cloudbeaver/plugin-codemirror6": "workspace:*"
-    "@cloudbeaver/plugin-sql-editor-new": "workspace:*"
+    "@cloudbeaver/plugin-sql-editor-codemirror": "workspace:*"
+    "@cloudbeaver/tsconfig": "workspace:*"
+    "@types/react": "npm:^19"
+    mobx: "npm:^6"
+    mobx-react-lite: "npm:^4"
+    react: "npm:^19"
+    react-dom: "npm:^19"
+    rimraf: "npm:^6"
+    tslib: "npm:^2"
+    typescript: "npm:^5"
+    typescript-plugin-css-modules: "npm:^5"
+  languageName: unknown
+  linkType: soft
+
+"@cloudbeaver/plugin-sql-editor-codemirror@workspace:*, @cloudbeaver/plugin-sql-editor-codemirror@workspace:packages/plugin-sql-editor-codemirror":
+  version: 0.0.0-use.local
+  resolution: "@cloudbeaver/plugin-sql-editor-codemirror@workspace:packages/plugin-sql-editor-codemirror"
+  dependencies:
+    "@cloudbeaver/core-blocks": "workspace:*"
+    "@cloudbeaver/core-cli": "workspace:*"
+    "@cloudbeaver/core-sdk": "workspace:*"
+    "@cloudbeaver/plugin-codemirror6": "workspace:*"
     "@cloudbeaver/tsconfig": "workspace:*"
     "@types/react": "npm:^19"
     mobx: "npm:^6"
@@ -4129,6 +4150,7 @@ __metadata:
     "@cloudbeaver/core-utils": "workspace:*"
     "@cloudbeaver/plugin-codemirror6": "workspace:*"
     "@cloudbeaver/plugin-sql-editor": "workspace:*"
+    "@cloudbeaver/plugin-sql-editor-codemirror": "workspace:*"
     "@cloudbeaver/tsconfig": "workspace:*"
     "@types/react": "npm:^19"
     mobx: "npm:^6"
@@ -4201,6 +4223,7 @@ __metadata:
     "@cloudbeaver/plugin-codemirror6": "workspace:*"
     "@cloudbeaver/plugin-data-viewer": "workspace:*"
     "@cloudbeaver/plugin-navigation-tabs": "workspace:*"
+    "@cloudbeaver/plugin-sql-editor-codemirror": "workspace:*"
     "@cloudbeaver/tsconfig": "workspace:*"
     "@dbeaver/cli": "workspace:*"
     "@dbeaver/js-helpers": "workspace:^"
@@ -4236,7 +4259,7 @@ __metadata:
     "@cloudbeaver/plugin-codemirror6": "workspace:*"
     "@cloudbeaver/plugin-data-viewer": "workspace:*"
     "@cloudbeaver/plugin-sql-editor": "workspace:*"
-    "@cloudbeaver/plugin-sql-editor-new": "workspace:*"
+    "@cloudbeaver/plugin-sql-editor-codemirror": "workspace:*"
     "@cloudbeaver/tsconfig": "workspace:*"
     "@dbeaver/cli": "workspace:*"
     "@types/react": "npm:^19"