Implement word wrap feature in SQL editor and settings

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

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 @@
     </FormFieldTemplateLarge>
 </div>
 <div class="col-3">
-    <FormFieldTemplateLarge
+    <FormCheckboxField
+    name="sqlEditor.wordWrap"
     label={_t('settings.editor.wordWrap', { defaultMessage: 'Enable word wrap' })}
-    type="combo"
-    >
-    <CheckboxField
-        checked={$currentEditorWrapEnabled}
-        on:change={e => ($currentEditorWrapEnabled = e.target.checked)}
+    defaultValue={false}
     />
-    </FormFieldTemplateLarge>
 </div>
 </div>
 

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);