From 296265a9cf6988054e80fe6f6a32224d21dc858e Mon Sep 17 00:00:00 2001
From: Enrico Ros <enrico.ros@gmail.com>
Date: Fri, 10 May 2024 04:05:50 -0700
Subject: [PATCH] Soft-wrap as a global preference. Fixes #517

---
 src/common/state/store-ui.ts           | 6 ++++++
 src/modules/blocks/code/RenderCode.tsx | 5 +++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/common/state/store-ui.ts b/src/common/state/store-ui.ts
index 6fd702ba4..c9f462f93 100644
--- a/src/common/state/store-ui.ts
+++ b/src/common/state/store-ui.ts
@@ -32,6 +32,9 @@ interface UIPreferencesStore {
   renderMarkdown: boolean;
   setRenderMarkdown: (renderMarkdown: boolean) => void;
 
+  renderCodeSoftWrap: boolean;
+  setRenderCodeSoftWrap: (renderCodeSoftWrap: boolean) => void;
+
   // showPersonaExamples: boolean;
   // setShowPersonaExamples: (showPersonaExamples: boolean) => void;
 
@@ -75,6 +78,9 @@ export const useUIPreferencesStore = create<UIPreferencesStore>()(
       renderMarkdown: true,
       setRenderMarkdown: (renderMarkdown: boolean) => set({ renderMarkdown }),
 
+      renderCodeSoftWrap: false,
+      setRenderCodeSoftWrap: (renderCodeSoftWrap: boolean) => set({ renderCodeSoftWrap }),
+
       // showPersonaExamples: false,
       // setShowPersonaExamples: (showPersonaExamples: boolean) => set({ showPersonaExamples }),
 
diff --git a/src/modules/blocks/code/RenderCode.tsx b/src/modules/blocks/code/RenderCode.tsx
index 54d2b6f93..d4413312a 100644
--- a/src/modules/blocks/code/RenderCode.tsx
+++ b/src/modules/blocks/code/RenderCode.tsx
@@ -12,6 +12,7 @@ import WrapTextIcon from '@mui/icons-material/WrapText';
 
 import { copyToClipboard } from '~/common/util/clipboardUtils';
 import { frontendSideFetch } from '~/common/util/clientFetchers';
+import { useUIPreferencesStore } from '~/common/state/store-ui';
 
 import type { CodeBlock } from '../blocks';
 import { ButtonCodePen, isCodePenSupported } from './ButtonCodePen';
@@ -107,7 +108,7 @@ function RenderCodeImpl(props: RenderCodeImplProps) {
   const [showMermaid, setShowMermaid] = React.useState(true);
   const [showPlantUML, setShowPlantUML] = React.useState(true);
   const [showSVG, setShowSVG] = React.useState(true);
-  const [softWrap, setSoftWrap] = React.useState(false);
+  const [softWrap, setSoftWrap] = useUIPreferencesStore(state => [state.renderCodeSoftWrap, state.setRenderCodeSoftWrap]);
 
   // derived props
   const {
@@ -274,7 +275,7 @@ function RenderCodeImpl(props: RenderCodeImplProps) {
           {/* Soft Wrap toggle */}
           {(!renderHTML && !renderMermaid && !renderPlantUML && !renderSVG) && (
             <Tooltip title='Toggle Soft Wrap'>
-              <OverlayButton variant={softWrap ? 'solid' : 'outlined'} onClick={() => setSoftWrap(on => !on)}>
+              <OverlayButton variant={softWrap ? 'solid' : 'outlined'} onClick={() => setSoftWrap(!softWrap)}>
                 <WrapTextIcon />
               </OverlayButton>
             </Tooltip>