More script editor options (#386)

* Options are responsive again (fix from previous changes)
* Better height control on the monaco container using flexbox.
* Added options for tab size, auto-detect indentation per-file, font family, and font ligatures.

src/ScriptEditor/ui/Editor.tsx

@@ -5,8 +5,6 @@ import { useEffect, useRef } from "react";
 export type Monaco = typeof monaco;
 
 type EditorProps = {
-  /** css height of editor */
-  height: string;
   /** Editor options */
   options: monaco.editor.IEditorOptions;
   /** Function to be ran prior to mounting editor */
@@ -17,7 +15,7 @@ type EditorProps = {
   onChange: (newCode?: string) => void;
 };
 
-export function Editor({ height, options, beforeMount, onMount, onChange }: EditorProps) {
+export function Editor({ options, beforeMount, onMount, onChange }: EditorProps) {
   const containerDiv = useRef<HTMLDivElement | null>(null);
   const editor = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
   const subscription = useRef<monaco.IDisposable | null>(null);
@@ -43,12 +41,11 @@ export function Editor({ height, options, beforeMount, onMount, onChange }: Edit
 
     // Unmounting
     return () => {
-      editor.current?.dispose();
-      const model = editor.current?.getModel();
-      model?.dispose();
       subscription.current?.dispose();
+      editor.current?.getModel()?.dispose();
+      editor.current?.dispose();
     };
   }, []);
 
-  return <div ref={containerDiv} style={{ height: height, width: "100%" }} />;
+  return <div ref={containerDiv} style={{ height: "1px", width: "100%", flexGrow: 1 }} />;
 }

src/ScriptEditor/ui/Options.ts

@@ -1,8 +1,12 @@
 export type WordWrapOptions = "on" | "off" | "bounded" | "wordWrapColumn";
-export interface Options {
+export type Options = {
   theme: string;
   insertSpaces: boolean;
+  tabSize: number;
+  detectIndentation: boolean;
+  fontFamily: string;
   fontSize: number;
+  fontLigatures: boolean;
   wordWrap: WordWrapOptions;
   vim: boolean;
-}
+};

src/ScriptEditor/ui/OptionsModal.tsx

@@ -3,7 +3,6 @@ import { Options, WordWrapOptions } from "./Options";
 import { Modal } from "../../ui/React/Modal";
 
 import Button from "@mui/material/Button";
-import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 import Select from "@mui/material/Select";
 import Switch from "@mui/material/Switch";
@@ -24,7 +23,11 @@ interface IProps {
 export function OptionsModal(props: IProps): React.ReactElement {
   const [theme, setTheme] = useState(props.options.theme);
   const [insertSpaces, setInsertSpaces] = useState(props.options.insertSpaces);
+  const [tabSize, setTabSize] = useState(props.options.tabSize);
+  const [detectIndentation, setDetectIndentation] = useState(props.options.detectIndentation);
+  const [fontFamily, setFontFamily] = useState(props.options.fontFamily);
   const [fontSize, setFontSize] = useState(props.options.fontSize);
+  const [fontLigatures, setFontLigatures] = useState(props.options.fontLigatures);
   const [wordWrap, setWordWrap] = useState(props.options.wordWrap);
   const [vim, setVim] = useState(props.options.vim);
   const [themeEditorOpen, setThemeEditorOpen] = useState(false);
@@ -33,23 +36,33 @@ export function OptionsModal(props: IProps): React.ReactElement {
     props.save({
       theme,
       insertSpaces,
+      tabSize,
+      detectIndentation,
+      fontFamily,
       fontSize,
+      fontLigatures,
       wordWrap,
       vim,
     });
     props.onClose();
   }
 
-  function onFontChange(event: React.ChangeEvent<HTMLInputElement>): void {
+  function onFontSizeChange(event: React.ChangeEvent<HTMLInputElement>): void {
-    const f = parseFloat(event.target.value);
+    const n = parseInt(event.target.value);
-    if (isNaN(f)) return;
+    if (!Number.isFinite(n) || n < 1) return;
-    setFontSize(f);
+    setFontSize(n);
+  }
+
+  function onTabSizeChange(event: React.ChangeEvent<HTMLInputElement>): void {
+    const n = parseInt(event.target.value);
+    if (!Number.isFinite(n) || n < 1) return;
+    setTabSize(n);
   }
 
   return (
     <Modal open={props.open} onClose={props.onClose}>
       <ThemeEditorModal open={themeEditorOpen} onClose={() => setThemeEditorOpen(false)} />
-      <Box display="flex" flexDirection="row" alignItems="center">
+      <div style={{ display: "flex", alignItems: "center" }}>
         <Typography>Theme: </Typography>
         <Select onChange={(event) => setTheme(event.target.value)} value={theme}>
           <MenuItem value="monokai">monokai</MenuItem>
@@ -61,34 +74,56 @@ export function OptionsModal(props: IProps): React.ReactElement {
           <MenuItem value="one-dark">one-dark</MenuItem>
           <MenuItem value="customTheme">Custom theme</MenuItem>
         </Select>
-        <Button onClick={() => setThemeEditorOpen(true)} sx={{ mx: 1 }} startIcon={<EditIcon />}>
+        <Button onClick={() => setThemeEditorOpen(true)} sx={{ ml: 1 }} startIcon={<EditIcon />}>
           Edit custom theme
         </Button>
-      </Box>
+      </div>
 
-      <Box display="flex" flexDirection="row" alignItems="center">
+      <div style={{ display: "flex", alignItems: "center" }}>
-        <Typography>Use whitespace over tabs: </Typography>
+        <Typography marginRight={"auto"}>Indent using tabs: </Typography>
-        <Switch onChange={(event) => setInsertSpaces(event.target.checked)} checked={insertSpaces} />
+        <Switch onChange={(e) => setInsertSpaces(e.target.checked)} checked={insertSpaces} />
-      </Box>
+      </div>
 
-      <Box display="flex" flexDirection="row" alignItems="center">
+      <div style={{ display: "flex", alignItems: "center" }}>
-        <Typography>Word Wrap: </Typography>
+        <Typography marginRight={"auto"}>Tab size: </Typography>
+        <TextField type="number" value={tabSize} onChange={onTabSizeChange} />
+      </div>
+
+      <div style={{ display: "flex", alignItems: "center" }}>
+        <Typography marginRight={"auto"}>Auto-detect indentation: </Typography>
+        <Switch onChange={(e) => setDetectIndentation(e.target.checked)} checked={detectIndentation} />
+      </div>
+
+      <div style={{ display: "flex", alignItems: "center" }}>
+        <Typography marginRight={"auto"}>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>
+      </div>
 
-      <Box display="flex" flexDirection="row" alignItems="center">
+      <div style={{ display: "flex", alignItems: "center" }}>
-        <Typography>Enable vim mode: </Typography>
+        <Typography marginRight={"auto"}>Enable vim mode: </Typography>
-        <Switch onChange={(event) => setVim(event.target.checked)} checked={vim} />
+        <Switch onChange={(e) => setVim(e.target.checked)} checked={vim} />
-      </Box>
+      </div>
+
+      <div style={{ display: "flex", alignItems: "center" }}>
+        <Typography marginRight={"auto"}>Font family: </Typography>
+        <TextField type="text" value={fontFamily} onChange={(e) => setFontFamily(e.target.value)} />
+      </div>
+
+      <div style={{ display: "flex", alignItems: "center" }}>
+        <Typography marginRight={"auto"}>Font size: </Typography>
+        <TextField type="number" value={fontSize} onChange={onFontSizeChange} />
+      </div>
+
+      <div style={{ display: "flex", alignItems: "center" }}>
+        <Typography marginRight={"auto"}>Enable font ligatures: </Typography>
+        <Switch onChange={(e) => setFontLigatures(e.target.checked)} checked={fontLigatures} />
+      </div>
 
-      <Box display="flex" flexDirection="row" alignItems="center">
-        <TextField type="number" label="Font size" value={fontSize} onChange={onFontChange} />
-      </Box>
       <br />
       <Button onClick={save} startIcon={<SaveIcon />}>
         Save

src/ScriptEditor/ui/ScriptEditorRoot.tsx

@@ -115,7 +115,11 @@ export function Root(props: IProps): React.ReactElement {
   const [options, setOptions] = useState<Options>({
     theme: Settings.MonacoTheme,
     insertSpaces: Settings.MonacoInsertSpaces,
+    tabSize: Settings.MonacoTabSize,
+    detectIndentation: Settings.MonacoDetectIndentation,
+    fontFamily: Settings.MonacoFontFamily,
     fontSize: Settings.MonacoFontSize,
+    fontLigatures: Settings.MonacoFontLigatures,
     wordWrap: Settings.MonacoWordWrap,
     vim: props.vim || Settings.MonacoVim,
   });
@@ -705,13 +709,21 @@ export function Root(props: IProps): React.ReactElement {
   const tabTextWidth = tabMaxWidth - tabIconWidth * 2;
   return (
     <>
-      <div style={{ display: currentScript !== null ? "block" : "none", height: "100%", width: "100%" }}>
+      <div
+        style={{
+          display: currentScript !== null ? "flex" : "none",
+          height: "100%",
+          width: "100%",
+          flexDirection: "column",
+        }}
+      >
         <DragDropContext onDragEnd={onDragEnd}>
           <Droppable droppableId="tabs" direction="horizontal">
             {(provided, snapshot) => (
               <Box
                 maxWidth={`${tabsMaxWidth}px`}
                 display="flex"
+                flexGrow="0"
                 flexDirection="row"
                 alignItems="center"
                 whiteSpace="nowrap"
@@ -830,19 +842,19 @@ export function Root(props: IProps): React.ReactElement {
             )}
           </Droppable>
         </DragDropContext>
-        <div style={{ paddingBottom: "5px" }} />
+        <div style={{ flex: "0 0 5px" }} />
         <Editor
           beforeMount={beforeMount}
           onMount={onMount}
-          height={`calc(100vh - ${130 + (options.vim ? 34 : 0)}px)`}
           onChange={updateCode}
           options={{ ...options, glyphMargin: true }}
         />
 
         <Box
           ref={vimStatusRef}
-          className="monaco-editor"
+          className="vim-display"
           display="flex"
+          flexGrow="0"
           flexDirection="row"
           sx={{ p: 1 }}
           alignItems="center"
@@ -888,20 +900,19 @@ export function Root(props: IProps): React.ReactElement {
             monaco.editor.defineTheme("customTheme", makeTheme(Settings.EditorTheme));
             setOptionsOpen(false);
           }}
-          options={{
+          options={{ ...options }}
-            theme: Settings.MonacoTheme,
-            insertSpaces: Settings.MonacoInsertSpaces,
-            fontSize: Settings.MonacoFontSize,
-            wordWrap: Settings.MonacoWordWrap,
-            vim: Settings.MonacoVim,
-          }}
           save={(options: Options) => {
             sanitizeTheme(Settings.EditorTheme);
             monaco.editor.defineTheme("customTheme", makeTheme(Settings.EditorTheme));
+            editor?.updateOptions(options);
             setOptions(options);
             Settings.MonacoTheme = options.theme;
             Settings.MonacoInsertSpaces = options.insertSpaces;
+            Settings.MonacoTabSize = options.tabSize;
+            Settings.MonacoDetectIndentation = options.detectIndentation;
+            Settings.MonacoFontFamily = options.fontFamily;
             Settings.MonacoFontSize = options.fontSize;
+            Settings.MonacoFontLigatures = options.fontLigatures;
             Settings.MonacoWordWrap = options.wordWrap;
             Settings.MonacoVim = options.vim;
           }}

src/Settings/Settings.ts

@@ -78,9 +78,18 @@ export const Settings = {
   PurchaseAugmentationsOrder: PurchaseAugmentationsOrderSetting.Default,
   /** Script editor theme. */
   MonacoTheme: "monokai",
-  MonacoInsertSpaces: false,
+  /** Whether to use spaces instead of tabs for indentation */
+  MonacoInsertSpaces: true,
+  /** Size of indentation */
+  MonacoTabSize: 2,
+  /** Whether to auto detect indentation settings per-file based on contents */
+  MonacoDetectIndentation: false,
+  /** Font Family for script editor. */
+  MonacoFontFamily: "Lucida Console",
   /** Text size for script editor. */
   MonacoFontSize: 20,
+  /** Whether to use font ligatures */
+  MonacoFontLigatures: false,
   /** Whether to use Vim mod by default in the script editor */
   MonacoVim: false,
   /** Word wrap setting for Script Editor. */