Add option to wrap text

src/components/Editor.tsx

@@ -40,6 +40,8 @@ export default function Editor({
     pref => pref >= 10 && pref <= 22
   );
 
+  const [wordWrap, setWordWrap] = usePreference<boolean>('wordwrap-enabled', true, (value) => true)
+
   useEffect(() => {
     if (contentType) {
       setLanguage(contentType);
@@ -66,6 +68,8 @@ export default function Editor({
           setReadOnly={setReadOnly}
           theme={theme}
           setTheme={setTheme}
+          wordWrap={wordWrap}
+          setWordWrap={setWordWrap}
           zoom={zoom}
         />
         <EditorTextArea
@@ -76,6 +80,7 @@ export default function Editor({
           language={language}
           fontSize={fontSize}
           readOnly={readOnly}
+          wordWrap={wordWrap}
           resetFunction={resetFunction}
         />
       </ThemeProvider>

src/components/EditorControls.tsx

@@ -19,6 +19,8 @@ export interface EditorControlsProps {
   setReadOnly: (value: boolean) => void;
   theme: keyof Themes;
   setTheme: (value: keyof Themes) => void;
+  wordWrap: boolean
+  setWordWrap: (value: boolean) => void;
   zoom: (delta: number) => void;
 }
 
@@ -31,6 +33,8 @@ export default function EditorControls({
   setReadOnly,
   theme,
   setTheme,
+  wordWrap,
+  setWordWrap,
   zoom,
 }: EditorControlsProps) {
   const [saving, setSaving] = useState<boolean>(false);
@@ -113,6 +117,7 @@ export default function EditorControls({
       <Section>
         <Button onClick={() => zoom(1)}>[+ </Button>
         <Button onClick={() => zoom(-1)}> -]</Button>
+        <Button onClick={() => setWordWrap(!wordWrap)}>[<span className='optional'>wrap:</span>{wordWrap ? "on" : "off"}]</Button>
         <MenuButton
           label="theme"
           value={theme}

src/components/EditorTextArea.tsx

@@ -62,6 +62,7 @@ export interface EditorTextAreaProps {
   language: string;
   fontSize: number;
   readOnly: boolean;
+  wordWrap: boolean;
   resetFunction: MutableRefObject<ResetFunction | null>;
 }
 
@@ -73,6 +74,7 @@ export default function EditorTextArea({
   language,
   fontSize,
   readOnly,
+  wordWrap,
   resetFunction,
 }: EditorTextAreaProps) {
   const [editor, setEditor] = useState<editor.IStandaloneCodeEditor>();
@@ -166,7 +168,7 @@ export default function EditorTextArea({
           fontFamily: 'JetBrains Mono',
           fontSize: fontSize,
           fontLigatures: true,
-          wordWrap: 'on',
+          wordWrap: wordWrap ? 'on' : 'off',
           renderLineHighlight: 'none',
           renderValidationDecorations: 'off',
           readOnly,

src/hooks/usePreference.ts

@@ -9,7 +9,7 @@ export default function usePreference<T>(
   const [value, setValue] = useState<T>(() => {
     const prefRaw = localStorage.getItem(id);
     const pref = prefRaw !== null ? (JSON.parse(prefRaw) as T) : undefined;
-    if (pref && valid(pref)) {
+    if (pref !== null && pref !== undefined && valid(pref)) {
       return pref;
     } else {
       return defaultValue;