UI Base

client/homebrew/editor/editor.jsx

@@ -8,6 +8,7 @@ import dedent from 'dedent';
 import CodeEditor from '@components/codeEditor/codeEditor.jsx';
 import SnippetBar from './snippetbar/snippetbar.jsx';
 import MetadataEditor from './metadataEditor/metadataEditor.jsx';
+import SettingsEditor from './settingsEditor/settingsEditor.jsx';
 
 const EDITOR_THEME_KEY = 'HB_editor_theme';
 
@@ -297,6 +298,14 @@ const Editor = createReactClass({
 					style={{  height: `calc(100% - 25px)` }}/>
 			</>;
 		}
+		if(this.isSettings()){
+			return <>
+				<CodeEditor key='codeEditor'
+					view={this.state.view}
+					style={{ display: 'none' }}/>
+				<SettingsEditor />
+			</>
+		}
 	},
 
 	redo : function(){

client/homebrew/editor/settingsEditor/settingsEditor.jsx

@@ -0,0 +1,55 @@
+import "./metadataEditor.less";
+import React, { useState } from "react";
+
+const SettingsEditor = () => {
+	const [settings, setSettings] = useState({
+		blockShading: false,
+		activeLineShading: true,
+		showLineNumbers: true,
+	});
+
+	const handleFieldChange = (setting, e) => {
+		setSettings((prevSettings) => ({
+			...prevSettings,
+			[setting]: e.target.checked,
+		}));
+	};
+
+	return (
+		<div className="settingsEditor">
+			<h1>Editor Settings</h1>
+
+			<label>
+				Background Shading of blocks in editor
+				<input
+					type="checkbox"
+					name="blockShading"
+					checked={settings.blockShading}
+					onChange={(e) => handleFieldChange("blockShading", e)}
+				/>
+			</label>
+
+			<label>
+				Shading of active line
+				<input
+					type="checkbox"
+					name="activeLineShading"
+					checked={settings.activeLineShading}
+					onChange={(e) => handleFieldChange("activeLineShading", e)}
+				/>
+			</label>
+
+			<label>
+				Show Line Numbers
+				<input
+					type="checkbox"
+					name="showLineNumbers"
+					checked={settings.showLineNumbers}
+					onChange={(e) => handleFieldChange("showLineNumbers", e)}
+				/>
+			</label>
+		</div>
+	);
+};
+
+export default SettingsEditor;