Merge pull request #1299 from dbgate/feature/wordwrap-editor

Feature/wordwrap editor
This commit is contained in:
Jan Prochazka
2025-12-15 13:26:54 +01:00
committed by GitHub
3 changed files with 38 additions and 42 deletions

View File

@@ -12,7 +12,7 @@
import useEffect from '../utility/useEffect'; import useEffect from '../utility/useEffect';
import { getContext } from 'svelte'; import { getContext } from 'svelte';
import { mountCodeCompletion } from './codeCompletion'; import { mountCodeCompletion } from './codeCompletion';
import { getCurrentSettings } from '../stores'; import { currentEditorWrapEnabled, getCurrentSettings } from '../stores';
export let engine = null; export let engine = null;
export let conid = null; export let conid = null;
export let database = null; export let database = null;
@@ -29,6 +29,8 @@
mode = engineToMode[match ? match[1] : engine] || 'sql'; mode = engineToMode[match ? match[1] : engine] || 'sql';
} }
$: enableWrap = $currentEditorWrapEnabled || false;
export function getEditor(): ace.Editor { export function getEditor(): ace.Editor {
return domEditor.getEditor(); return domEditor.getEditor();
} }
@@ -63,5 +65,6 @@
options={{ options={{
...$$props.options, ...$$props.options,
enableBasicAutocompletion: true, enableBasicAutocompletion: true,
wrap: enableWrap,
}} }}
/> />

View File

@@ -15,8 +15,6 @@
<div class="wrapper"> <div class="wrapper">
<div class="heading">{_t('settings.sqlEditor', { defaultMessage: 'SQL editor' })}</div> <div class="heading">{_t('settings.sqlEditor', { defaultMessage: 'SQL editor' })}</div>
<div class="flex">
<div class="col-3">
<FormSelectField <FormSelectField
label={_t('settings.sqlEditor.sqlCommandsCase', { defaultMessage: 'SQL commands case' })} label={_t('settings.sqlEditor.sqlCommandsCase', { defaultMessage: 'SQL commands case' })}
name="sqlEditor.sqlCommandsCase" name="sqlEditor.sqlCommandsCase"
@@ -28,8 +26,6 @@
]} ]}
data-testid="SQLEditorSettings_sqlCommandsCase" data-testid="SQLEditorSettings_sqlCommandsCase"
/> />
</div>
<div class="col-3">
<FormFieldTemplateLarge <FormFieldTemplateLarge
label={_t('settings.editor.keybinds', { defaultMessage: 'Editor keybinds' })} label={_t('settings.editor.keybinds', { defaultMessage: 'Editor keybinds' })}
type="combo" type="combo"
@@ -42,19 +38,15 @@
on:change={e => ($currentEditorKeybindigMode = e.detail)} on:change={e => ($currentEditorKeybindigMode = e.detail)}
/> />
</FormFieldTemplateLarge> </FormFieldTemplateLarge>
</div>
<div class="col-3">
<FormFieldTemplateLarge <FormFieldTemplateLarge
label={_t('settings.editor.wordWrap', { defaultMessage: 'Enable word wrap' })} label={_t('settings.editor.wordWrap', { defaultMessage: 'Enable word wrap' })}
type="combo" type="checkbox"
> >
<CheckboxField <CheckboxField
checked={$currentEditorWrapEnabled} checked={$currentEditorWrapEnabled}
on:change={e => ($currentEditorWrapEnabled = e.target.checked)} on:change={e => ($currentEditorWrapEnabled = e.target.checked)}
/> />
</FormFieldTemplateLarge> </FormFieldTemplateLarge>
</div>
</div>
<FormTextField <FormTextField
name="sqlEditor.limitRows" name="sqlEditor.limitRows"
@@ -102,4 +94,8 @@ defaultValue={false}
.wrapper :global(input){ .wrapper :global(input){
max-width: 400px; max-width: 400px;
} }
.wrapper :global(select) {
max-width: 400px;
}
</style> </style>

View File

@@ -720,9 +720,6 @@
...driver?.getQuerySplitterOptions('editor'), ...driver?.getQuerySplitterOptions('editor'),
splitByEmptyLine: !$settingsValue?.['sqlEditor.disableSplitByEmptyLine'], splitByEmptyLine: !$settingsValue?.['sqlEditor.disableSplitByEmptyLine'],
}} }}
options={{
wrap: enableWrap,
}}
value={$editorState.value || ''} value={$editorState.value || ''}
menu={createMenu()} menu={createMenu()}
on:input={e => { on:input={e => {