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

Feature/wordwrap editor

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,
   }}
 />

packages/web/src/settings/SQLEditorSettings.svelte

@@ -15,8 +15,6 @@
 <div class="wrapper">
     <div class="heading">{_t('settings.sqlEditor', { defaultMessage: 'SQL editor' })}</div>
 
-<div class="flex">
-<div class="col-3">
     <FormSelectField
     label={_t('settings.sqlEditor.sqlCommandsCase', { defaultMessage: 'SQL commands case' })}
     name="sqlEditor.sqlCommandsCase"
@@ -28,8 +26,6 @@
     ]}
     data-testid="SQLEditorSettings_sqlCommandsCase"
     />
-</div>
-<div class="col-3">
     <FormFieldTemplateLarge
     label={_t('settings.editor.keybinds', { defaultMessage: 'Editor keybinds' })}
     type="combo"
@@ -42,53 +38,49 @@
         on:change={e => ($currentEditorKeybindigMode = e.detail)}
     />
     </FormFieldTemplateLarge>
-</div>
-<div class="col-3">
     <FormFieldTemplateLarge
     label={_t('settings.editor.wordWrap', { defaultMessage: 'Enable word wrap' })}
-    type="combo"
+    type="checkbox"
     >
     <CheckboxField
         checked={$currentEditorWrapEnabled}
         on:change={e => ($currentEditorWrapEnabled = e.target.checked)}
     />
     </FormFieldTemplateLarge>
-</div>
-</div>
 
-<FormTextField
-name="sqlEditor.limitRows"
-label={_t('settings.sqlEditor.limitRows', { defaultMessage: 'Return only N rows from query' })}
-placeholder={_t('settings.sqlEditor.limitRowsPlaceholder', { defaultMessage: '(No rows limit)' })}
-/>
+    <FormTextField
+    name="sqlEditor.limitRows"
+    label={_t('settings.sqlEditor.limitRows', { defaultMessage: 'Return only N rows from query' })}
+    placeholder={_t('settings.sqlEditor.limitRowsPlaceholder', { defaultMessage: '(No rows limit)' })}
+    />
 
-<FormCheckboxField
-name="sqlEditor.showTableAliasesInCodeCompletion"
-label={_t('settings.sqlEditor.showTableAliasesInCodeCompletion', {
-    defaultMessage: 'Show table aliases in code completion',
-})}
-defaultValue={false}
-/>
+    <FormCheckboxField
+    name="sqlEditor.showTableAliasesInCodeCompletion"
+    label={_t('settings.sqlEditor.showTableAliasesInCodeCompletion', {
+        defaultMessage: 'Show table aliases in code completion',
+    })}
+    defaultValue={false}
+    />
 
-<FormCheckboxField
-name="sqlEditor.disableSplitByEmptyLine"
-label={_t('settings.sqlEditor.disableSplitByEmptyLine', { defaultMessage: 'Disable split by empty line' })}
-defaultValue={false}
-/>
+    <FormCheckboxField
+    name="sqlEditor.disableSplitByEmptyLine"
+    label={_t('settings.sqlEditor.disableSplitByEmptyLine', { defaultMessage: 'Disable split by empty line' })}
+    defaultValue={false}
+    />
 
-<FormCheckboxField
-name="sqlEditor.disableExecuteCurrentLine"
-label={_t('settings.sqlEditor.disableExecuteCurrentLine', {
-    defaultMessage: 'Disable current line execution (Execute current)',
-})}
-defaultValue={false}
-/>
+    <FormCheckboxField
+    name="sqlEditor.disableExecuteCurrentLine"
+    label={_t('settings.sqlEditor.disableExecuteCurrentLine', {
+        defaultMessage: 'Disable current line execution (Execute current)',
+    })}
+    defaultValue={false}
+    />
 
-<FormCheckboxField
-name="sqlEditor.hideColumnsPanel"
-label={_t('settings.sqlEditor.hideColumnsPanel', { defaultMessage: 'Hide Columns/Filters panel by default' })}
-defaultValue={false}
-/>
+    <FormCheckboxField
+    name="sqlEditor.hideColumnsPanel"
+    label={_t('settings.sqlEditor.hideColumnsPanel', { defaultMessage: 'Hide Columns/Filters panel by default' })}
+    defaultValue={false}
+    />
 </div>
 
 <style>
@@ -102,4 +94,8 @@ defaultValue={false}
   .wrapper :global(input){
     max-width: 400px;
   }
+
+  .wrapper :global(select) {
+    max-width: 400px;
+  }
 </style>

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 => {