From d8405feab3b4c44636f482039f6013c35dcb28f8 Mon Sep 17 00:00:00 2001
From: Nybkox <nybkox@gmail.com>
Date: Tue, 18 Mar 2025 20:54:17 +0100
Subject: [PATCH] feat: add jsonPreviewWrap option to settings

---
 packages/web/src/jsontree/JSONTree.svelte      | 8 ++++++++
 packages/web/src/settings/SettingsModal.svelte | 6 ++++++
 2 files changed, 14 insertions(+)

diff --git a/packages/web/src/jsontree/JSONTree.svelte b/packages/web/src/jsontree/JSONTree.svelte
index 13023326c..fddfda32e 100644
--- a/packages/web/src/jsontree/JSONTree.svelte
+++ b/packages/web/src/jsontree/JSONTree.svelte
@@ -6,6 +6,7 @@
   import _ from 'lodash';
   import { copyTextToClipboard } from '../utility/clipboard';
   import { openJsonLinesData } from '../utility/openJsonLinesData';
+  import { useSettings } from '../utility/metadataLoaders';
 
   setContext('json-tree-context-key', {});
 
@@ -23,6 +24,9 @@
   export let isInserted = false;
   export let isModified = false;
 
+  const settings = useSettings();
+  $: wrap = $settings?.['behaviour.jsonPreviewWrap'];
+
   setContext('json-tree-default-expanded', expandAll);
   if (slicedKeyCount) setContext('json-tree-sliced-key-count', slicedKeyCount);
 
@@ -66,6 +70,7 @@
   class:isDeleted
   class:isInserted
   class:isModified
+  class:wrap
 >
   <JSONNode
     {key}
@@ -115,6 +120,9 @@
     list-style: none;
     white-space: nowrap;
   }
+  ul.wrap :global(li) {
+    white-space: normal;
+  }
   ul,
   ul :global(ul) {
     padding: 0;
diff --git a/packages/web/src/settings/SettingsModal.svelte b/packages/web/src/settings/SettingsModal.svelte
index e91874400..dc01c0aac 100644
--- a/packages/web/src/settings/SettingsModal.svelte
+++ b/packages/web/src/settings/SettingsModal.svelte
@@ -403,6 +403,12 @@ ORDER BY
 
           <FormCheckboxField name="behaviour.useTabPreviewMode" label="Use tab preview mode" defaultValue={true} />
 
+          <FormCheckboxField
+            name="behaviour.jsonPreviewWrap"
+            label={_t('settings.behaviour.jsonPreviewWrap', { defaultMessage: 'Wrap json in preview' })}
+            defaultValue={false}
+          />
+
           <div class="tip">
             <FontIcon icon="img tip" /> When you single-click or select a file in the "Tables, Views, Functions" view, it
             is shown in a preview mode and reuses an existing tab (preview tab). This is useful if you are quickly browsing