Implement word wrap feature in SQL editor and settings

This commit is contained in:
Stela Augustinova
2025-12-14 17:26:25 +01:00
parent a71129df4b
commit 28aa86f0aa
3 changed files with 11 additions and 10 deletions

View File

@@ -13,6 +13,7 @@
import { getContext } from 'svelte'; import { getContext } from 'svelte';
import { mountCodeCompletion } from './codeCompletion'; import { mountCodeCompletion } from './codeCompletion';
import { getCurrentSettings } from '../stores'; import { getCurrentSettings } from '../stores';
import { useSettings } from '../utility/metadataLoaders';
export let engine = null; export let engine = null;
export let conid = null; export let conid = null;
export let database = null; export let database = null;
@@ -23,12 +24,15 @@
let mode; let mode;
const tabVisible: any = getContext('tabVisible'); const tabVisible: any = getContext('tabVisible');
const settings = useSettings();
$: { $: {
const match = (engine || '').match(/^([^@]*)@/); const match = (engine || '').match(/^([^@]*)@/);
mode = engineToMode[match ? match[1] : engine] || 'sql'; mode = engineToMode[match ? match[1] : engine] || 'sql';
} }
$: enableWrap = $settings?.['sqlEditor.wordWrap'] || false;
export function getEditor(): ace.Editor { export function getEditor(): ace.Editor {
return domEditor.getEditor(); return domEditor.getEditor();
} }
@@ -62,6 +66,7 @@
bind:this={domEditor} bind:this={domEditor}
options={{ options={{
...$$props.options, ...$$props.options,
wrap: enableWrap,
enableBasicAutocompletion: true, enableBasicAutocompletion: true,
}} }}
/> />

View File

@@ -6,7 +6,7 @@
import FormTextField from "../forms/FormTextField.svelte"; import FormTextField from "../forms/FormTextField.svelte";
import SelectField from "../forms/SelectField.svelte"; import SelectField from "../forms/SelectField.svelte";
import { EDITOR_KEYBINDINGS_MODES } from "../query/AceEditor.svelte"; import { EDITOR_KEYBINDINGS_MODES } from "../query/AceEditor.svelte";
import { currentEditorKeybindigMode, currentEditorWrapEnabled } from "../stores"; import { currentEditorKeybindigMode } from "../stores";
import { _t } from "../translations"; import { _t } from "../translations";
@@ -44,15 +44,11 @@
</FormFieldTemplateLarge> </FormFieldTemplateLarge>
</div> </div>
<div class="col-3"> <div class="col-3">
<FormFieldTemplateLarge <FormCheckboxField
name="sqlEditor.wordWrap"
label={_t('settings.editor.wordWrap', { defaultMessage: 'Enable word wrap' })} label={_t('settings.editor.wordWrap', { defaultMessage: 'Enable word wrap' })}
type="combo" defaultValue={false}
>
<CheckboxField
checked={$currentEditorWrapEnabled}
on:change={e => ($currentEditorWrapEnabled = e.target.checked)}
/> />
</FormFieldTemplateLarge>
</div> </div>
</div> </div>

View File

@@ -131,7 +131,7 @@
import VerticalSplitter from '../elements/VerticalSplitter.svelte'; import VerticalSplitter from '../elements/VerticalSplitter.svelte';
import SqlEditor from '../query/SqlEditor.svelte'; import SqlEditor from '../query/SqlEditor.svelte';
import useEditorData from '../query/useEditorData'; import useEditorData from '../query/useEditorData';
import { currentEditorWrapEnabled, extensions, getCurrentDatabase } from '../stores'; import { extensions, getCurrentDatabase } from '../stores';
import applyScriptTemplate from '../utility/applyScriptTemplate'; import applyScriptTemplate from '../utility/applyScriptTemplate';
import { changeTab, markTabUnsaved, sleep } from '../utility/common'; import { changeTab, markTabUnsaved, sleep } from '../utility/common';
import { getDatabaseInfo, useConnectionInfo, useSettings } from '../utility/metadataLoaders'; import { getDatabaseInfo, useConnectionInfo, useSettings } from '../utility/metadataLoaders';
@@ -267,7 +267,7 @@
$: connection = useConnectionInfo({ conid }); $: connection = useConnectionInfo({ conid });
$: driver = findEngineDriver($connection, $extensions); $: driver = findEngineDriver($connection, $extensions);
$: enableWrap = $currentEditorWrapEnabled || false; $: enableWrap = $settingsValue?.['sqlEditor.wordWrap'] || false;
$: effect = useEffect(() => { $: effect = useEffect(() => {
return onSession(sessionId); return onSession(sessionId);