From 28aa86f0aa493271d795010a16dd839fa01c4f3f Mon Sep 17 00:00:00 2001 From: Stela Augustinova Date: Sun, 14 Dec 2025 17:26:25 +0100 Subject: [PATCH 1/4] Implement word wrap feature in SQL editor and settings --- packages/web/src/query/SqlEditor.svelte | 5 +++++ packages/web/src/settings/SQLEditorSettings.svelte | 12 ++++-------- packages/web/src/tabs/QueryTab.svelte | 4 ++-- 3 files changed, 11 insertions(+), 10 deletions(-) diff --git a/packages/web/src/query/SqlEditor.svelte b/packages/web/src/query/SqlEditor.svelte index c8c1621ef..d7eb0c04f 100644 --- a/packages/web/src/query/SqlEditor.svelte +++ b/packages/web/src/query/SqlEditor.svelte @@ -13,6 +13,7 @@ import { getContext } from 'svelte'; import { mountCodeCompletion } from './codeCompletion'; import { getCurrentSettings } from '../stores'; + import { useSettings } from '../utility/metadataLoaders'; export let engine = null; export let conid = null; export let database = null; @@ -23,12 +24,15 @@ let mode; const tabVisible: any = getContext('tabVisible'); + const settings = useSettings(); $: { const match = (engine || '').match(/^([^@]*)@/); mode = engineToMode[match ? match[1] : engine] || 'sql'; } + $: enableWrap = $settings?.['sqlEditor.wordWrap'] || false; + export function getEditor(): ace.Editor { return domEditor.getEditor(); } @@ -62,6 +66,7 @@ bind:this={domEditor} options={{ ...$$props.options, + wrap: enableWrap, enableBasicAutocompletion: true, }} /> diff --git a/packages/web/src/settings/SQLEditorSettings.svelte b/packages/web/src/settings/SQLEditorSettings.svelte index a3740d3e9..a133c4c81 100644 --- a/packages/web/src/settings/SQLEditorSettings.svelte +++ b/packages/web/src/settings/SQLEditorSettings.svelte @@ -6,7 +6,7 @@ import FormTextField from "../forms/FormTextField.svelte"; import SelectField from "../forms/SelectField.svelte"; import { EDITOR_KEYBINDINGS_MODES } from "../query/AceEditor.svelte"; - import { currentEditorKeybindigMode, currentEditorWrapEnabled } from "../stores"; + import { currentEditorKeybindigMode } from "../stores"; import { _t } from "../translations"; @@ -44,15 +44,11 @@
- - ($currentEditorWrapEnabled = e.target.checked)} + defaultValue={false} /> -
diff --git a/packages/web/src/tabs/QueryTab.svelte b/packages/web/src/tabs/QueryTab.svelte index b513c1842..7ad5a47c9 100644 --- a/packages/web/src/tabs/QueryTab.svelte +++ b/packages/web/src/tabs/QueryTab.svelte @@ -131,7 +131,7 @@ import VerticalSplitter from '../elements/VerticalSplitter.svelte'; import SqlEditor from '../query/SqlEditor.svelte'; import useEditorData from '../query/useEditorData'; - import { currentEditorWrapEnabled, extensions, getCurrentDatabase } from '../stores'; + import { extensions, getCurrentDatabase } from '../stores'; import applyScriptTemplate from '../utility/applyScriptTemplate'; import { changeTab, markTabUnsaved, sleep } from '../utility/common'; import { getDatabaseInfo, useConnectionInfo, useSettings } from '../utility/metadataLoaders'; @@ -267,7 +267,7 @@ $: connection = useConnectionInfo({ conid }); $: driver = findEngineDriver($connection, $extensions); - $: enableWrap = $currentEditorWrapEnabled || false; + $: enableWrap = $settingsValue?.['sqlEditor.wordWrap'] || false; $: effect = useEffect(() => { return onSession(sessionId); From 21352dae07ee080b3dc8bfed49a34a98adf806dd Mon Sep 17 00:00:00 2001 From: Stela Augustinova Date: Mon, 15 Dec 2025 12:37:15 +0100 Subject: [PATCH 2/4] Revert "Implement word wrap feature in SQL editor and settings" This reverts commit 28aa86f0aa493271d795010a16dd839fa01c4f3f. --- packages/web/src/query/SqlEditor.svelte | 5 ----- packages/web/src/settings/SQLEditorSettings.svelte | 12 ++++++++---- packages/web/src/tabs/QueryTab.svelte | 4 ++-- 3 files changed, 10 insertions(+), 11 deletions(-) diff --git a/packages/web/src/query/SqlEditor.svelte b/packages/web/src/query/SqlEditor.svelte index d7eb0c04f..c8c1621ef 100644 --- a/packages/web/src/query/SqlEditor.svelte +++ b/packages/web/src/query/SqlEditor.svelte @@ -13,7 +13,6 @@ import { getContext } from 'svelte'; import { mountCodeCompletion } from './codeCompletion'; import { getCurrentSettings } from '../stores'; - import { useSettings } from '../utility/metadataLoaders'; export let engine = null; export let conid = null; export let database = null; @@ -24,15 +23,12 @@ let mode; const tabVisible: any = getContext('tabVisible'); - const settings = useSettings(); $: { const match = (engine || '').match(/^([^@]*)@/); mode = engineToMode[match ? match[1] : engine] || 'sql'; } - $: enableWrap = $settings?.['sqlEditor.wordWrap'] || false; - export function getEditor(): ace.Editor { return domEditor.getEditor(); } @@ -66,7 +62,6 @@ bind:this={domEditor} options={{ ...$$props.options, - wrap: enableWrap, enableBasicAutocompletion: true, }} /> diff --git a/packages/web/src/settings/SQLEditorSettings.svelte b/packages/web/src/settings/SQLEditorSettings.svelte index a133c4c81..a3740d3e9 100644 --- a/packages/web/src/settings/SQLEditorSettings.svelte +++ b/packages/web/src/settings/SQLEditorSettings.svelte @@ -6,7 +6,7 @@ import FormTextField from "../forms/FormTextField.svelte"; import SelectField from "../forms/SelectField.svelte"; import { EDITOR_KEYBINDINGS_MODES } from "../query/AceEditor.svelte"; - import { currentEditorKeybindigMode } from "../stores"; + import { currentEditorKeybindigMode, currentEditorWrapEnabled } from "../stores"; import { _t } from "../translations"; @@ -44,11 +44,15 @@
- + ($currentEditorWrapEnabled = e.target.checked)} /> +
diff --git a/packages/web/src/tabs/QueryTab.svelte b/packages/web/src/tabs/QueryTab.svelte index 7ad5a47c9..b513c1842 100644 --- a/packages/web/src/tabs/QueryTab.svelte +++ b/packages/web/src/tabs/QueryTab.svelte @@ -131,7 +131,7 @@ import VerticalSplitter from '../elements/VerticalSplitter.svelte'; import SqlEditor from '../query/SqlEditor.svelte'; import useEditorData from '../query/useEditorData'; - import { extensions, getCurrentDatabase } from '../stores'; + import { currentEditorWrapEnabled, extensions, getCurrentDatabase } from '../stores'; import applyScriptTemplate from '../utility/applyScriptTemplate'; import { changeTab, markTabUnsaved, sleep } from '../utility/common'; import { getDatabaseInfo, useConnectionInfo, useSettings } from '../utility/metadataLoaders'; @@ -267,7 +267,7 @@ $: connection = useConnectionInfo({ conid }); $: driver = findEngineDriver($connection, $extensions); - $: enableWrap = $settingsValue?.['sqlEditor.wordWrap'] || false; + $: enableWrap = $currentEditorWrapEnabled || false; $: effect = useEffect(() => { return onSession(sessionId); From a503898b21c0ffdd80f361eb1482887920181c5f Mon Sep 17 00:00:00 2001 From: Stela Augustinova Date: Mon, 15 Dec 2025 12:44:04 +0100 Subject: [PATCH 3/4] Refactor SQL editor to integrate word wrap settings and remove redundant options in QueryTab --- packages/web/src/query/SqlEditor.svelte | 5 ++++- packages/web/src/tabs/QueryTab.svelte | 3 --- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/web/src/query/SqlEditor.svelte b/packages/web/src/query/SqlEditor.svelte index c8c1621ef..4c206792d 100644 --- a/packages/web/src/query/SqlEditor.svelte +++ b/packages/web/src/query/SqlEditor.svelte @@ -12,7 +12,7 @@ import useEffect from '../utility/useEffect'; import { getContext } from 'svelte'; import { mountCodeCompletion } from './codeCompletion'; - import { getCurrentSettings } from '../stores'; + import { currentEditorWrapEnabled, getCurrentSettings } from '../stores'; export let engine = null; export let conid = null; export let database = null; @@ -29,6 +29,8 @@ mode = engineToMode[match ? match[1] : engine] || 'sql'; } + $: enableWrap = $currentEditorWrapEnabled || false; + export function getEditor(): ace.Editor { return domEditor.getEditor(); } @@ -63,5 +65,6 @@ options={{ ...$$props.options, enableBasicAutocompletion: true, + wrap: enableWrap, }} /> diff --git a/packages/web/src/tabs/QueryTab.svelte b/packages/web/src/tabs/QueryTab.svelte index b513c1842..ca40ef230 100644 --- a/packages/web/src/tabs/QueryTab.svelte +++ b/packages/web/src/tabs/QueryTab.svelte @@ -720,9 +720,6 @@ ...driver?.getQuerySplitterOptions('editor'), splitByEmptyLine: !$settingsValue?.['sqlEditor.disableSplitByEmptyLine'], }} - options={{ - wrap: enableWrap, - }} value={$editorState.value || ''} menu={createMenu()} on:input={e => { From 4682255d5f1c274c97678e62b7ca04e0b7b39e29 Mon Sep 17 00:00:00 2001 From: Stela Augustinova Date: Mon, 15 Dec 2025 13:02:11 +0100 Subject: [PATCH 4/4] Refactor SQL editor settings layout and update word wrap field type --- .../web/src/settings/SQLEditorSettings.svelte | 72 +++++++++---------- 1 file changed, 34 insertions(+), 38 deletions(-) diff --git a/packages/web/src/settings/SQLEditorSettings.svelte b/packages/web/src/settings/SQLEditorSettings.svelte index a3740d3e9..38eef6a8f 100644 --- a/packages/web/src/settings/SQLEditorSettings.svelte +++ b/packages/web/src/settings/SQLEditorSettings.svelte @@ -15,8 +15,6 @@
{_t('settings.sqlEditor', { defaultMessage: 'SQL editor' })}
-
-
-
-
($currentEditorKeybindigMode = e.detail)} /> -
-
($currentEditorWrapEnabled = e.target.checked)} /> -
-
- + - + - + - + - +
\ No newline at end of file