feat: add word wrap option #823

packages/web/src/query/SqlEditor.svelte

@@ -59,6 +59,7 @@
   on:blur
   bind:this={domEditor}
   options={{
+    ...$$props.options,
     enableBasicAutocompletion: true,
   }}
 />

packages/web/src/settings/SettingsModal.svelte

@@ -21,6 +21,7 @@
   import SqlEditor from '../query/SqlEditor.svelte';
   import {
     currentEditorFontSize,
+    currentEditorWrapEnabled,
     currentEditorTheme,
     currentEditorKeybindigMode,
     extensions,
@@ -162,6 +163,14 @@ ORDER BY
                 />
               </FormFieldTemplateLarge>
             </div>
+            <div class="col-3">
+              <FormFieldTemplateLarge label="Enable word wrap" type="combo">
+                <CheckboxField
+                  checked={$currentEditorWrapEnabled}
+                  on:change={e => ($currentEditorWrapEnabled = e.target.checked)}
+                />
+              </FormFieldTemplateLarge>
+            </div>
           </div>
         </svelte:fragment>
         <svelte:fragment slot="2">

packages/web/src/stores.ts

@@ -106,6 +106,9 @@ export const currentEditorTheme = getElectron()
 export const currentEditorKeybindigMode = getElectron()
   ? writableSettingsValue(null, 'currentEditorKeybindigMode')
   : writableWithStorage(null, 'currentEditorKeybindigMode');
+export const currentEditorWrapEnabled = getElectron()
+  ? writableSettingsValue(false, 'currentEditorWrapEnabled')
+  : writableWithStorage(false, 'currentEditorWrapEnabled');
 export const currentEditorFontSize = getElectron()
   ? writableSettingsValue(null, 'currentEditorFontSize')
   : writableWithStorage(null, 'currentEditorFontSize');

packages/web/src/tabs/QueryTab.svelte

@@ -62,7 +62,7 @@
   import VerticalSplitter from '../elements/VerticalSplitter.svelte';
   import SqlEditor from '../query/SqlEditor.svelte';
   import useEditorData from '../query/useEditorData';
-  import { extensions } from '../stores';
+  import { currentEditorWrapEnabled, extensions } from '../stores';
   import applyScriptTemplate from '../utility/applyScriptTemplate';
   import { changeTab, markTabUnsaved } from '../utility/common';
   import { getDatabaseInfo, useConnectionInfo } from '../utility/metadataLoaders';
@@ -154,6 +154,7 @@
 
   $: connection = useConnectionInfo({ conid });
   $: driver = findEngineDriver($connection, $extensions);
+  $: enableWrap = $currentEditorWrapEnabled || false;
 
   $: effect = useEffect(() => {
     return onSession(sessionId);
@@ -427,6 +428,9 @@
           {conid}
           {database}
           splitterOptions={driver?.getQuerySplitterOptions('editor')}
+          options={{
+            wrap: enableWrap,
+          }}
           value={$editorState.value || ''}
           menu={createMenu()}
           on:input={e => {
@@ -453,6 +457,9 @@
           mode={driver?.editorMode || 'text'}
           value={$editorState.value || ''}
           splitterOptions={driver?.getQuerySplitterOptions('editor')}
+          options={{
+            wrap: enableWrap,
+          }}
           menu={createMenu()}
           on:input={e => setEditorData(e.detail)}
           on:focus={() => {