Merge pull request #2326 from MartinFournier/feature/editor-wordwrap-option

Add wordWrap option to Monaco

src/ScriptEditor/ui/Options.ts

@@ -1,6 +1,8 @@
+export type WordWrapOptions = 'on' | 'off' | 'bounded' | 'wordWrapColumn';
 export interface Options {
   theme: string;
   insertSpaces: boolean;
   fontSize: number;
+  wordWrap: WordWrapOptions;
   vim: boolean;
 }

src/ScriptEditor/ui/OptionsModal.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Options } from "./Options";
+import { Options, WordWrapOptions } from "./Options";
 import { Modal } from "../../ui/React/Modal";
 
 import Button from "@mui/material/Button";
@@ -21,6 +21,7 @@ export function OptionsModal(props: IProps): React.ReactElement {
   const [theme, setTheme] = useState(props.options.theme);
   const [insertSpaces, setInsertSpaces] = useState(props.options.insertSpaces);
   const [fontSize, setFontSize] = useState(props.options.fontSize);
+  const [wordWrap, setWordWrap] = useState(props.options.wordWrap);
   const [vim, setVim] = useState(props.options.vim);
 
   function save(): void {
@@ -28,6 +29,7 @@ export function OptionsModal(props: IProps): React.ReactElement {
       theme,
       insertSpaces,
       fontSize,
+      wordWrap,
       vim,
     });
     props.onClose();
@@ -59,6 +61,16 @@ export function OptionsModal(props: IProps): React.ReactElement {
         <Switch onChange={(event) => setInsertSpaces(event.target.checked)} checked={insertSpaces} />
       </Box>
 
+      <Box display="flex" flexDirection="row" alignItems="center">
+        <Typography>Word Wrap: </Typography>
+        <Select onChange={(event) => setWordWrap(event.target.value as WordWrapOptions)} value={wordWrap}>
+          <MenuItem value={"off"}>Off</MenuItem>
+          <MenuItem value={"on"}>On</MenuItem>
+          <MenuItem value={"bounded"}>Bounded</MenuItem>
+          <MenuItem value={"wordWrapColumn"}>Word Wrap Column</MenuItem>
+        </Select>
+      </Box>
+
       <Box display="flex" flexDirection="row" alignItems="center">
         <Typography>Enable vim mode: </Typography>
         <Switch onChange={(event) => setVim(event.target.checked)} checked={vim} />

src/ScriptEditor/ui/ScriptEditorRoot.tsx

@@ -117,6 +117,7 @@ export function Root(props: IProps): React.ReactElement {
     theme: Settings.MonacoTheme,
     insertSpaces: Settings.MonacoInsertSpaces,
     fontSize: Settings.MonacoFontSize,
+    wordWrap: Settings.MonacoWordWrap,
     vim: props.vim || Settings.MonacoVim,
   });
 
@@ -794,6 +795,7 @@ export function Root(props: IProps): React.ReactElement {
             theme: Settings.MonacoTheme,
             insertSpaces: Settings.MonacoInsertSpaces,
             fontSize: Settings.MonacoFontSize,
+            wordWrap: Settings.MonacoWordWrap,
             vim: Settings.MonacoVim,
           }}
           save={(options: Options) => {
@@ -801,6 +803,7 @@ export function Root(props: IProps): React.ReactElement {
             Settings.MonacoTheme = options.theme;
             Settings.MonacoInsertSpaces = options.insertSpaces;
             Settings.MonacoFontSize = options.fontSize;
+            Settings.MonacoWordWrap = options.wordWrap;
             Settings.MonacoVim = options.vim;
           }}
         />