feat: word-wrap editor

src/components/Monaco/CodeEditor.tsx

@@ -32,6 +32,7 @@ export function CodeEditor({
 
   return (
     <ReactMonacoEditor
+      showToolbar
       defaultLanguage="javascript"
       options={{ readOnly }}
       defaultValue={value}

src/components/Monaco/EditorToolbar.tsx

@@ -0,0 +1,51 @@
+import { Flex, Switch, Text } from '@radix-ui/themes'
+import { useEffect } from 'react'
+import { k6StudioLightBackground } from './themes/k6StudioLight'
+import { Label } from '../Label'
+import { useTheme } from '@/hooks/useTheme'
+import { useLocalStorage } from 'react-use'
+
+export type ToolbarState = {
+  wordWrap: 'on' | 'off'
+}
+
+type EditorToolbarProps = {
+  getState: (values: ToolbarState) => void
+}
+
+export const EditorToolbar = ({ getState }: EditorToolbarProps) => {
+  const [state, setState] = useLocalStorage<ToolbarState>(
+    'editorToolbarState',
+    {
+      wordWrap: 'off',
+    }
+  )
+  const theme = useTheme()
+
+  useEffect(() => {
+    if (state) {
+      getState(state)
+    }
+  }, [state, getState])
+
+  return (
+    <Flex
+      p="2"
+      style={{
+        backgroundColor: theme === 'dark' ? '#1e1e1e' : k6StudioLightBackground,
+        borderBottom: `1px solid ${theme === 'dark' ? '#4d4b4b' : '#e5e5e5'}`,
+      }}
+    >
+      <Label flexGrow="1">
+        <Text size="2">Word wrap</Text>
+        <Switch
+          size="1"
+          checked={state?.wordWrap === 'on'}
+          onCheckedChange={(checked) =>
+            setState({ wordWrap: checked ? 'on' : 'off' })
+          }
+        />
+      </Label>
+    </Flex>
+  )
+}

src/components/Monaco/ReactMonacoEditor.tsx

@@ -1,6 +1,9 @@
 import { useTheme } from '@/hooks/useTheme'
 import { Editor, EditorProps, loader } from '@monaco-editor/react'
 import * as monaco from 'monaco-editor'
+import { EditorToolbar, ToolbarState } from './EditorToolbar'
+import { useState } from 'react'
+import { Flex } from '@radix-ui/themes'
 
 loader.config({ monaco })
 
@@ -24,14 +27,33 @@ const defaultOptions: monaco.editor.IStandaloneEditorConstructionOptions = {
   },
 }
 
-export function ReactMonacoEditor(props: EditorProps) {
+interface ReactMonacoEditorProps extends EditorProps {
+  showToolbar?: boolean
+}
+
+export function ReactMonacoEditor({
+  showToolbar,
+  ...props
+}: ReactMonacoEditorProps) {
   const theme = useTheme()
+  const [toolbarState, setToolbarState] = useState<ToolbarState>({
+    wordWrap: 'off',
+  })
 
   return (
-    <Editor
-      {...props}
-      options={{ ...defaultOptions, ...props.options }}
-      theme={theme === 'dark' ? 'vs-dark' : 'k6-studio-light'}
-    />
+    <Flex height="100%" width="100%" direction="column">
+      {showToolbar && (
+        <EditorToolbar getState={(state) => setToolbarState(state)} />
+      )}
+      <Editor
+        {...props}
+        options={{
+          ...defaultOptions,
+          ...props.options,
+          wordWrap: toolbarState.wordWrap,
+        }}
+        theme={theme === 'dark' ? 'vs-dark' : 'k6-studio-light'}
+      />
+    </Flex>
   )
 }

src/components/Monaco/ReadOnlyEditor.tsx

@@ -11,5 +11,7 @@ const options: editor.IStandaloneEditorConstructionOptions = {
 }
 
 export function ReadOnlyEditor(props: ComponentProps<typeof Editor>) {
-  return <ReactMonacoEditor height="100%" options={options} {...props} />
+  return (
+    <ReactMonacoEditor height="100%" options={options} {...props} showToolbar />
+  )
 }

src/components/WebLogView/ResponseDetails/Content.tsx

@@ -6,7 +6,7 @@ import { getContentType } from '@/utils/headers'
 import { Preview } from './Preview'
 import { Raw } from './Raw'
 import { parseContent, toFormat } from './ResponseDetails.utils'
-import { OriginalContent } from './OriginalContent'
+import { ReadOnlyEditor } from '@/components/Monaco/ReadOnlyEditor'
 
 export function Content({ data }: { data: ProxyData }) {
   const [selectedTab, setSelectedTab] = useState('preview')
@@ -58,7 +58,9 @@ export function Content({ data }: { data: ProxyData }) {
           {selectedTab === 'raw' && (
             <Raw content={rawContent ?? ''} format={format} />
           )}
-          {selectedTab === 'content' && <OriginalContent {...contentProps} />}
+          {selectedTab === 'content' && (
+            <ReadOnlyEditor language={format} value={content} />
+          )}
         </Box>
       </ScrollArea>
     </Flex>

src/components/WebLogView/ResponseDetails/Raw.tsx

@@ -10,11 +10,7 @@ interface RawProps {
 export function Raw({ content, format }: RawProps) {
   return (
     <Text size="1" wrap="pretty" css={style}>
-      <ReadOnlyEditor
-        language={format}
-        value={content}
-        options={{ wordWrap: 'on' }}
-      />
+      <ReadOnlyEditor language={format} value={content} />
     </Text>
   )
 }

src/preload.ts

@@ -179,7 +179,7 @@ const log = {
 } as const
 
 const settings = {
-  getSettings: () => {
+  getSettings: (): Promise<AppSettings> => {
     return ipcRenderer.invoke('settings:get')
   },
   saveSettings: (settings: AppSettings): Promise<AppSettings> => {