Add wordWrap option to Monaco

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();
@@ -58,6 +60,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} />