From 77414ba934c4fde040d67d5377d1b9c238670170 Mon Sep 17 00:00:00 2001
From: Nybkox <nybkox@gmail.com>
Date: Thu, 21 Nov 2024 11:17:51 +0100
Subject: [PATCH] feat: add word wrap option #823

---
 packages/web/src/query/SqlEditor.svelte        | 1 +
 packages/web/src/settings/SettingsModal.svelte | 9 +++++++++
 packages/web/src/stores.ts                     | 3 +++
 packages/web/src/tabs/QueryTab.svelte          | 9 ++++++++-
 4 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/packages/web/src/query/SqlEditor.svelte b/packages/web/src/query/SqlEditor.svelte
index b7870756..e8662383 100644
--- a/packages/web/src/query/SqlEditor.svelte
+++ b/packages/web/src/query/SqlEditor.svelte
@@ -59,6 +59,7 @@
   on:blur
   bind:this={domEditor}
   options={{
+    ...$$props.options,
     enableBasicAutocompletion: true,
   }}
 />
diff --git a/packages/web/src/settings/SettingsModal.svelte b/packages/web/src/settings/SettingsModal.svelte
index 45ffc7fa..fc4ba277 100644
--- a/packages/web/src/settings/SettingsModal.svelte
+++ b/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">
diff --git a/packages/web/src/stores.ts b/packages/web/src/stores.ts
index 9d2ca81f..5f9abcd6 100644
--- a/packages/web/src/stores.ts
+++ b/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');
diff --git a/packages/web/src/tabs/QueryTab.svelte b/packages/web/src/tabs/QueryTab.svelte
index d081ac58..9c4c7865 100644
--- a/packages/web/src/tabs/QueryTab.svelte
+++ b/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={() => {