Soft-wrap as a global preference. Fixes #517

enricoros · May 10, 2024 · 3a7aa75 · 3a7aa75
1 parent e4e7ac2
commit 3a7aa75
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git 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
@@ -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>