Add editor settings

assets/locales/en-us.json

@@ -77,6 +77,30 @@
                     }
                 }
             },
+            "editor": {
+                "name": "Editor Preferences",
+                "lineNumbers": {
+                    "name": "Line Numbers",
+                    "note": "Enables showing line numbers on the side of the editor"
+                },
+                "fontSize": {
+                    "name": "Font Size",
+                    "note": "Size of the font (pt) to use in the editor"
+                },
+                "minimap": {
+                    "name": "Minimap",
+                    "note": "Enables showing the code minimap on the side of the editor"
+                },
+                "renderWhitespace": {
+                    "name": "Show Whitespace",
+                    "note": "When whitespace should be shown by the editor",
+                    "options": {
+                        "all": "Always",
+                        "none": "Never",
+                        "selection": "Selection"
+                    }
+                }
+            },
             "developer": {
                 "name": "Developer Settings",
                 "devTools": {

renderer/src/data/settings.js

@@ -35,16 +35,14 @@ export default [
     },
     {
         type: "category",
-        id: "developer",
+        id: "editor",
         collapsible: true,
         shown: false,
         settings: [
-            {type: "switch", id: "debugLogs", value: false},
+            {type: "switch", id: "lineNumbers", value: true},
-            {type: "switch", id: "devTools", value: false},
+            {type: "number", id: "fontSize", min: 2, value: 14},
-            {type: "switch", id: "debuggerHotkey", value: false, enableWith: "devTools"},
+            {type: "switch", id: "minimap", value: true},
-            {type: "switch", id: "reactDevTools", value: false, enableWith: "devTools"},
+            {type: "dropdown", id: "renderWhitespace", value: "selection", options: [{value: "none"}, {value: "all"}, {value: "selection"}]}
-            {type: "switch", id: "inspectElement", value: false, enableWith: "devTools"},
-            {type: "switch", id: "devToolsWarning", value: false, enableWith: "devTools"},
         ]
     },
     {
@@ -57,5 +55,19 @@ export default [
             {type: "switch", id: "removeMinimumSize", value: false},
             {type: "switch", id: "frame", value: false, hidden: true}
         ]
+    },
+    {
+        type: "category",
+        id: "developer",
+        collapsible: true,
+        shown: false,
+        settings: [
+            {type: "switch", id: "debugLogs", value: false},
+            {type: "switch", id: "devTools", value: false},
+            {type: "switch", id: "debuggerHotkey", value: false, enableWith: "devTools"},
+            {type: "switch", id: "reactDevTools", value: false, enableWith: "devTools"},
+            {type: "switch", id: "inspectElement", value: false, enableWith: "devTools"},
+            {type: "switch", id: "devToolsWarning", value: false, enableWith: "devTools"},
+        ]
     }
 ];

renderer/src/modules/settingsmanager.js

@@ -112,6 +112,7 @@ export default new class SettingsManager {
                 if (previousState[category][setting] == undefined) continue;
                 const settingObj = this.getSetting(id, category, setting);
                 if (settingObj.type == "switch") this.state[id][category][setting] = previousState[category][setting];
+                if (settingObj.type == "number") this.state[id][category][setting] = previousState[category][setting];
                 if (settingObj.type == "dropdown") {
                     const exists = settingObj.options.some(o => o.value == previousState[category][setting]);
                     if (exists) this.state[id][category][setting] = previousState[category][setting];

renderer/src/styles/ui/number.css

@@ -0,0 +1,16 @@
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+    opacity: 0.5;
+}
+
+.bd-number-input {
+    display: flex;
+    background-color: var(--deprecated-text-input-bg);
+    border: 1px solid var(--deprecated-text-input-border);
+    color: var(--text-normal);
+    font-size: 14px;
+    padding: 5px;
+    margin: 0;
+    border-radius: 3px;
+    width: 70px;
+}

renderer/src/ui/customcss/editor.jsx

@@ -1,4 +1,4 @@
-import {React, WebpackModules, DiscordModules} from "modules";
+import {React, WebpackModules, DiscordModules, Settings} from "modules";
 
 import Checkbox from "./checkbox";
 
@@ -35,7 +35,11 @@ export default class CodeEditor extends React.Component {
         this.editor = window.monaco.editor.create(document.getElementById(this.props.id), {
             value: this.props.value,
             language: this.props.language,
-            theme: DiscordModules.UserSettingsStore.theme == "light" ? "vs" : "vs-dark"
+            theme: DiscordModules.UserSettingsStore.theme == "light" ? "vs" : "vs-dark",
+            fontSize: Settings.get("settings", "editor", "fontSize"),
+            lineNumbers: Settings.get("settings", "editor", "lineNumbers"),
+            minimap: {enabled: Settings.get("settings", "editor", "minimap")},
+            renderWhitespace: Settings.get("settings", "editor", "renderWhitespace")
         });
 
         window.addEventListener("resize", this.resize);

renderer/src/ui/settings/components/number.jsx

@@ -0,0 +1,18 @@
+import {React} from "modules";
+
+export default class Search extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {value: this.props.value};
+        this.onChange = this.onChange.bind(this);
+    }
+
+    onChange(e) {
+        this.setState({value: e.target.value});
+        if (this.props.onChange) this.props.onChange(e.target.value);
+    }
+
+    render() {
+        return <input onChange={this.onChange} type="number" className="bd-number-input" min={this.props.min} max={this.props.max} step={this.props.step} value={this.state.value} />;
+    }
+}

renderer/src/ui/settings/group.jsx

@@ -4,6 +4,7 @@ import Title from "./title";
 import Divider from "./divider";
 import Switch from "./components/switch";
 import Dropdown from "./components/dropdown";
+import Number from "./components/number";
 import Item from "./components/item";
 
 const baseClassName = "bd-settings-group";
@@ -61,6 +62,7 @@ export default class Group extends React.Component {
                         {settings.filter(s => !s.hidden).map((setting) => {
                             let component = null;
                             if (setting.type == "dropdown") component = <Dropdown disabled={setting.disabled} id={setting.id} options={setting.options} value={setting.value} onChange={this.onChange.bind(this, setting.id)} />;
+                            if (setting.type == "number") component = <Number disabled={setting.disabled} id={setting.id} min={setting.min} max={setting.max} step={setting.step} value={setting.value} onChange={this.onChange.bind(this, setting.id)} />;
                             if (setting.type == "switch") component = <Switch disabled={setting.disabled} id={setting.id} checked={setting.value} onChange={this.onChange.bind(this, setting.id)} />;
                             if (!component) return null;
                             return <Item id={setting.id} key={setting.id} name={setting.name} note={setting.note}>{component}</Item>;