move editor theme selector into settings tab

client/homebrew/editor/editor.jsx

@@ -22,6 +22,20 @@ const EditorThemes = Object.entries(themes)
 	.filter(([name, value])=>Array.isArray(value) && !name.endsWith('Init') && !name.endsWith('Style'))
 	.map(([name])=>name);
 
+const themeNames = Object.entries(themes)
+  .filter(([name, value])=>Array.isArray(value) &&
+    !name.endsWith('Init') &&
+    !name.endsWith('Style')
+  )
+  .map(([name])=>name);
+
+const EditorThemeNameList = [
+	'default',
+	...themeNames
+    .filter((name)=>name !== 'default')
+    .sort((a, b)=>a.localeCompare(b))
+];
+
 //const PAGEBREAK_REGEX_V3 = /^(?=\\page(?:break)?(?: *{[^\n{}]*})?$)/m;
 //const SNIPPETBREAK_REGEX_V3 = /^\\snippet\ .*$/;
 const DEFAULT_STYLE_TEXT = dedent`
@@ -53,7 +67,6 @@ const Editor = forwardRef(
 			onCursorPageChange = ()=>{},
 			onViewPageChange = ()=>{},
 
-			editorTheme = 'default',
 			renderer = 'legacy',
 
 			moveBrew,
@@ -72,7 +85,6 @@ const Editor = forwardRef(
 		},
 		ref,
 	)=>{
-		const [currentEditorTheme, setEditorTheme] = useState(editorTheme);
 		const [view, setView] = useState('text'); // 'text', 'style', 'meta', 'snippet'
 		const [snippetBarHeight, setSnippetBarHeight] = useState(26);
 		const [editorSettings, setEditorSettings] = useState({
@@ -80,7 +92,8 @@ const Editor = forwardRef(
 			showImagePreviews: true,
 			activeLineShading: true,
 			lineNumbers: true,
-			fontSize: 13
+			fontSize: 13,
+			editorTheme: 'default',
 		})
 
 		const editor = useRef(null);
@@ -100,8 +113,10 @@ const Editor = forwardRef(
 			brewRenderer.onload = ()=>brewRenderer.contentDocument?.addEventListener('keydown', handleControlKeys);
 			document.addEventListener('keydown', handleControlKeys);
 
-			const editorTheme = window.localStorage.getItem(EDITOR_THEME_KEY);
+			const localEditorTheme = window.localStorage.getItem(EDITOR_THEME_KEY);
-			if(editorTheme && EditorThemes.includes(editorTheme)) setEditorTheme(editorTheme); else setEditorTheme('default');
+			if(localEditorTheme && EditorThemes.includes(localEditorTheme)) {
+				setEditorSettings({...editorSettings , editorTheme: localEditorTheme})
+			} else setEditorSettings({...editorSettings , editorTheme: 'default'});
 			const localEditorSettings = window.localStorage.getItem(EDITOR_SETTINGS_KEY);
 			if (localEditorSettings) setEditorSettings(JSON.parse(localEditorSettings));
 			const snippetBar = document.querySelector('.editor > .snippetBar');
@@ -220,7 +235,7 @@ const Editor = forwardRef(
 
 		const updateEditorTheme = (newTheme)=>{
 			window.localStorage.setItem(EDITOR_THEME_KEY, newTheme);
-			setEditorTheme(newTheme);
+			setEditorSettings({...editorSettings , editorTheme: newTheme})
 		};
 		
 		const updateEditorSettings = (newEditorSettings) => {
@@ -242,7 +257,7 @@ const Editor = forwardRef(
 							onChange={onBrewChange('text')}
 							onCursorChange={(page)=>updateCurrentCursorPage(page)}
 							onViewChange={(page)=>updateCurrentViewPage(page)}
-							editorTheme={currentEditorTheme}
+							editorTheme={editorSettings.editorTheme}
 							renderer={brew.renderer}
 							style={{ height: `calc(100% - ${snippetBarHeight}px)` }}
 							settings={editorSettings}
@@ -261,7 +276,7 @@ const Editor = forwardRef(
 							view={view}
 							value={brew.style ?? DEFAULT_STYLE_TEXT}
 							onChange={onBrewChange('style')}
-							editorTheme={currentEditorTheme}
+							editorTheme={editorSettings.editorTheme}
 							renderer={brew.renderer}
 							style={{ height: `calc(100% - ${snippetBarHeight}px)` }}
 							settings={editorSettings}
@@ -284,7 +299,7 @@ const Editor = forwardRef(
 							value={brew.snippets}
 							onChange={onBrewChange('snippets')}
 							enableFolding={true}
-							editorTheme={currentEditorTheme}
+							editorTheme={editorSettings.editorTheme}
 							renderer={brew.renderer}
 							style={{ height: `calc(100% - 25px)` }}
 							settings={editorSettings}
@@ -318,6 +333,7 @@ const Editor = forwardRef(
 						/>
 						<SettingsEditor 
 							settings={editorSettings}
+							EditorThemeNameList={EditorThemeNameList}
 							updateSettings={updateEditorSettings}
 						/>
 					</>
@@ -357,7 +373,7 @@ const Editor = forwardRef(
 					foldCode={foldCode}
 					unfoldCode={unfoldCode}
 					historySize={historySize()}
-					currentEditorTheme={currentEditorTheme}
+					currentEditorTheme={editorSettings.editorTheme}
 					updateEditorTheme={updateEditorTheme}
 					themeBundle={themeBundle}
 					cursorPos={codeEditor.current?.getCursorPosition() || {}}

client/homebrew/editor/settingsEditor/settingsEditor.jsx

@@ -1,7 +1,7 @@
 import '../uiEditor.less';
 import React, { useState } from 'react';
 
-const SettingsEditor = ({ settings, updateSettings = ()=>{} })=>{
+const SettingsEditor = ({ settings, updateSettings = ()=>{}, EditorThemeNameList })=>{
 	const [currentSettings, setCurrentSettings] = useState(settings);
 
 	const validations = {
@@ -52,6 +52,20 @@ const SettingsEditor = ({ settings, updateSettings = ()=>{} })=>{
 	return (
 		<div className='settingsEditor ui-editor'>
 			<h1>Editor Settings</h1>
+
+			<div className='field'>
+				<label htmlFor='changeEditorTheme'>
+					Automatically close brackets
+				</label>
+				<div className='value'>
+					<select value={currentSettings.editorTheme} onChange={(e)=>handleFieldChange('editorTheme', e)} >
+						{EditorThemeNameList.map((theme, key)=>{
+							return <option key={key} value={theme}>{theme}</option>;
+						})}
+					</select>
+				</div>
+			</div>
+
 			{/*
 			<div className='field title'>
 				<label htmlFor='blockShading'>

client/homebrew/editor/snippetbar/snippetbar.jsx

@@ -10,6 +10,7 @@ import cx from 'classnames';
 import { loadHistory } from '../../utils/versionHistory.js';
 import { brewSnippetsToJSON } from '@shared/helpers.js';
 
+/*eslint-disable camelcase*/
 import Legacy5ePHB from '@themes/Legacy/5ePHB/snippets.js';
 import V3_5ePHB   from '@themes/V3/5ePHB/snippets.js';
 import V3_5eDMG   from '@themes/V3/5eDMG/snippets.js';
@@ -23,26 +24,7 @@ const ThemeSnippets = {
 	V3_Journal   : V3_Journal,
 	V3_Blank     : V3_Blank,
 };
-
+/*eslint-enable camelcase */
-import defaultCM5Theme from '@themes/codeMirror/default.js';
-import darkbrewery from '@themes/codeMirror/darkbrewery.js';
-import cm5Themes from 'codemirror-5-themes';
-
-const themes = { default: defaultCM5Theme, ...cm5Themes, darkbrewery };
-
-const themeNames = Object.entries(themes)
-  .filter(([name, value])=>Array.isArray(value) &&
-    !name.endsWith('Init') &&
-    !name.endsWith('Style')
-  )
-  .map(([name])=>name);
-
-const EditorThemes = [
-	'default',
-	...themeNames
-    .filter((name)=>name !== 'default')
-    .sort((a, b)=>a.localeCompare(b))
-];
 
 const execute = function(val, props){
 	if(_.isFunction(val)) return val(props);
@@ -65,7 +47,6 @@ const Snippetbar = createReactClass({
 			historySize       : ()=>{},
 			foldCode          : ()=>{},
 			unfoldCode        : ()=>{},
-			updateEditorTheme : ()=>{},
 			cursorPos         : {},
 			themeBundle       : [],
 			updateBrew        : ()=>{}
@@ -157,33 +138,6 @@ const Snippetbar = createReactClass({
 		this.props.onInject(injectedText);
 	},
 
-	toggleThemeSelector : function(e){
-		if(e.target.tagName != 'SELECT'){
-			this.setState({
-				themeSelector : !this.state.themeSelector
-			});
-		}
-	},
-
-	changeTheme : function(e){
-		if(e.target.value == this.props.currentEditorTheme) return;
-		this.props.updateEditorTheme(e.target.value);
-
-		this.setState({
-			themeSelector : false,
-		});
-	},
-
-	renderThemeSelector : function(){
-		return <div className='themeSelector'>
-			<select value={this.props.currentEditorTheme} onChange={this.changeTheme} >
-				{EditorThemes.map((theme, key)=>{
-					return <option key={key} value={theme}>{theme}</option>;
-				})}
-			</select>
-		</div>;
-	},
-
 	renderSnippetGroups : function(){
 		const snippets = this.state.snippets.filter((snippetGroup)=>snippetGroup.view === this.props.view);
 		if(snippets.length === 0) return null;
@@ -269,11 +223,6 @@ const Snippetbar = createReactClass({
 						onClick={this.props.unfoldCode} >
 						<i className='fas fa-expand-alt' />
 					</div>
-					<div className={`editorTheme ${this.state.themeSelector ? 'active' : ''}`}
-						onClick={this.toggleThemeSelector} >
-						<i className='fas fa-palette' />
-						{this.state.themeSelector && this.renderThemeSelector()}
-					</div>
 				</div></>}
 
 				<div className='tabs'>