rename, kinda add option for tabs vs space

src/ScriptEditor/ui/Config.ts

@@ -1,3 +0,0 @@
-export interface Config {
-    theme: string;
-}

src/ScriptEditor/ui/Options.ts

@@ -0,0 +1,4 @@
+export interface Options {
+    theme: string;
+    insertSpaces: boolean;
+}

src/ScriptEditor/ui/OptionsPopup.tsx

@@ -1,30 +1,31 @@
 import React, { useState } from 'react';
-import { Config } from "./Config";
+import { Options } from "./Options";
 import { StdButton } from "../../ui/React/StdButton";
 import { removePopup } from "../../ui/React/createPopup";
 
 interface IProps {
     id: string;
-    config: Config;
+    options: Options;
-    save: (config: Config) => void;
+    save: (options: Options) => void;
 }
 
-export function ConfigPopup(props: IProps): React.ReactElement {
+export function OptionsPopup(props: IProps): React.ReactElement {
-    const [config, setConfig] = useState<Config>(props.config);
+    const [options, setOptions] = useState<Options>(props.options);
     function save() {
-        props.save(config);
+        props.save(options);
         removePopup(props.id);
     }
 
     function setTheme(event: React.ChangeEvent<HTMLSelectElement>): void {
-        setConfig(old => {
+        setOptions(old => {
             old.theme = event.target.value;
             return old;
         });
     }
 
     return (<>
-        <select className="dropdown" onChange={setTheme} defaultValue={config.theme}>
+        <p>Theme</p>
+        <select className="dropdown" onChange={setTheme} defaultValue={options.theme}>
             <option value="vs-dark">vs-dark</option>
             <option value="light">light</option>
         </select>

src/ScriptEditor/ui/Root.tsx

@@ -4,8 +4,8 @@ import Editor from "@monaco-editor/react";
 import * as monaco from "monaco-editor";
 import IStandaloneCodeEditor = monaco.editor.IStandaloneCodeEditor;
 import { createPopup } from "../../ui/React/createPopup";
-import { ConfigPopup } from "./ConfigPopup";
+import { OptionsPopup } from "./OptionsPopup";
-import { Config } from "./Config";
+import { Options } from "./Options";
 import { js_beautify as beautifyCode } from 'js-beautify';
 import { isValidFilePath } from "../../Terminal/DirectoryHelpers";
 import { IPlayer } from "../../PersonObjects/IPlayer";
@@ -37,7 +37,7 @@ export function Root(props: IProps): React.ReactElement {
     const [filename, setFilename] = useState(props.filename);
     const [code, setCode] = useState<string>(props.code);
     const [ram, setRAM] = useState('');
-    const [config, setConfig] = useState<Config>({theme: 'vs-dark'});
+    const [options, setOptions] = useState<Options>({theme: 'vs-dark', insertSpaces: false});
 
     function save(): void {
         if(editorRef.current !== null) {
@@ -133,6 +133,7 @@ export function Root(props: IProps): React.ReactElement {
 
     function beautify(): void {
         setCode(code => beautifyCode(code, {
+            indent_with_tabs: !options.insertSpaces,
             indent_size: 4,
             brace_style: "preserve-inline",
         }));
@@ -142,12 +143,15 @@ export function Root(props: IProps): React.ReactElement {
         setFilename(event.target.value);
     }
 
-    function openConfig(): void {
+    function openOptions(): void {
-        const id="script-editor-config-options-popup";
+        const id="script-editor-options-popup";
-        createPopup(id, ConfigPopup, {
+        createPopup(id, OptionsPopup, {
             id: id,
-            config: {theme: config.theme},
+            options: {
-            save: (config: Config) => setConfig(config),
+                theme: options.theme,
+                insertSpaces: options.insertSpaces,
+            },
+            save: (options: Options) => setOptions(options),
         });
     }
 
@@ -196,9 +200,9 @@ export function Root(props: IProps): React.ReactElement {
 
     return (<div id="script-editor-wrapper">
         <div id="script-editor-filename-wrapper">
-            <p id="script-editor-filename-tag"> <strong style={{backgroundColor:'#555'}}>Script name: </strong></p>
+            <p id="script-editor-filename-tag" className="noselect"> <strong style={{backgroundColor:'#555'}}>Script name: </strong></p>
             <input id="script-editor-filename" type="text" maxLength={100} tabIndex={1} value={filename} onChange={onFilenameChange} />
-            <StdButton text={"config"} onClick={openConfig} />
+            <StdButton text={"options"} onClick={openOptions} />
         </div>
         <Editor
             onMount={onMount}
@@ -209,7 +213,7 @@ export function Root(props: IProps): React.ReactElement {
             value={code}
             onChange={updateCode}
             theme="vs-dark"
-            options={config}
+            options={options}
         />
         <div id="script-editor-buttons-wrapper">
             <StdButton text={"Beautify"} onClick={beautify} />