Merge branch 'master' of https://github.com/naturalcrit/homebrewery into add-settings-editor

client/homebrew/editor/editor.jsx

@@ -138,6 +138,10 @@ const Editor = forwardRef(
 		useEffect(()=>{ if(liveScroll) brewJump(currentEditorViewPageNum, false); }, [currentEditorViewPageNum, liveScroll]);
 		useEffect(()=>{ if(liveScroll) brewJump(currentEditorCursorPageNum, false); }, [currentEditorCursorPageNum, liveScroll]);
 
+		const handleFormatCode = () => {
+			codeEditor.current?.formatCode();
+		};
+
 		const handleControlKeys = (e)=>{
 			if(!(e.ctrlKey && e.metaKey && e.shiftKey)) return;
 			const LEFTARROW_KEY = 37;
@@ -371,6 +375,7 @@ const Editor = forwardRef(
 					redo={redo}
 					foldCode={foldCode}
 					unfoldCode={unfoldCode}
+					formatCode={isStyle() ? handleFormatCode : null}
 					historySize={historySize()}
 					currentEditorTheme={editorSettings.editorTheme}
 					updateEditorTheme={updateEditorTheme}

client/homebrew/editor/snippetbar/snippetbar.jsx

@@ -35,21 +35,22 @@ const Snippetbar = createReactClass({
 	displayName     : 'SnippetBar',
 	getDefaultProps : function() {
 		return {
-			brew            : {},
-			view            : 'text',
-			onViewChange    : ()=>{},
-			onInject        : ()=>{},
-			onToggle        : ()=>{},
-			showEditButtons : true,
-			renderer        : 'legacy',
-			undo            : ()=>{},
-			redo            : ()=>{},
-			historySize     : ()=>{},
-			foldCode        : ()=>{},
-			unfoldCode      : ()=>{},
-			cursorPos       : {},
-			themeBundle     : [],
-			updateBrew      : ()=>{}
+			brew              : {},
+			view              : 'text',
+			onViewChange      : ()=>{},
+			onInject          : ()=>{},
+			onToggle          : ()=>{},
+			showEditButtons   : true,
+			renderer          : 'legacy',
+			undo              : ()=>{},
+			redo              : ()=>{},
+			historySize       : ()=>{},
+			foldCode          : ()=>{},
+			unfoldCode        : ()=>{},
+			formatCode        : ()=>{},
+			cursorPos         : {},
+			themeBundle       : [],
+			updateBrew        : ()=>{}
 		};
 	},
 
@@ -223,6 +224,11 @@ 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'>

client/homebrew/editor/snippetbar/snippetbar.less

@@ -22,7 +22,7 @@
 		display         : flex;
 		justify-content : flex-end;
 		min-width       : 275px; //must be controlled every time an item is added, must be hardcoded for the wrapping as it is applied
-		font-size       : 0.85rem;
+		font-size: .85rem;
 		&:only-child {min-width   : unset; margin-left : auto;}
 
 		>div {
@@ -75,6 +75,11 @@
 					color     : grey;
 					&.active { color : inherit; }
 				}
+				&.formatCode {
+					.tooltipLeft('Clean your Code');
+					color     : grey;
+					&.active { color : inherit; }
+				}
 				&.history {
 					.tooltipLeft('History');
 					position  : relative;
@@ -203,7 +208,7 @@
 	}
 }
 @container editor (width < 841px) {
-	.snippetBar {
+ 	.snippetBar {
 		.editors { 
 			flex            : 1;
 			justify-content : space-between;
@@ -216,4 +221,3 @@
 		.editors > div.history > .dropdown { right : unset; }
 	}
 }
-