crude basic animation and button

client/homebrew/editor/editor.jsx

@@ -154,6 +154,10 @@ const Editor = createReactClass({
 		this.codeEditor.current?.injectText(injectText);
 	},
 
+	handleFormatCode: function () {
+		this.codeEditor.current?.formatCode();
+	},
+
 	handleViewChange : function(newView){
 		this.props.setMoveArrows(newView === 'text');
 
@@ -333,6 +337,7 @@ const Editor = createReactClass({
 					redo={this.redo}
 					foldCode={this.foldCode}
 					unfoldCode={this.unfoldCode}
+					formatCode={this.isStyle() ? this.handleFormatCode : null}
 					historySize={this.historySize()}
 					currentEditorTheme={this.state.editorTheme}
 					updateEditorTheme={this.updateEditorTheme}

client/homebrew/editor/snippetbar/snippetbar.jsx

@@ -65,6 +65,7 @@ const Snippetbar = createReactClass({
 			historySize       : ()=>{},
 			foldCode          : ()=>{},
 			unfoldCode        : ()=>{},
+			formatCode        : ()=>{},
 			updateEditorTheme : ()=>{},
 			cursorPos         : {},
 			themeBundle       : [],
@@ -269,6 +270,10 @@ const Snippetbar = createReactClass({
 						onClick={this.props.unfoldCode} >
 						<i className='fas fa-expand-alt' />
 					</div>
+					<div className={`editorTool formatCode ${this.props.formatCode ? 'active' : ''}`}
+						onClick={this.props.formatCode} >
+						<i className='fas fa-wand-magic-sparkles' />
+					</div>
 					<div className={`editorTheme ${this.state.themeSelector ? 'active' : ''}`}
 						onClick={this.toggleThemeSelector} >
 						<i className='fas fa-palette' />

client/homebrew/editor/snippetbar/snippetbar.less

@@ -79,6 +79,12 @@
 					color     : grey;
 					&.active { color : inherit; }
 				}
+				&.formatCode {
+					.tooltipLeft('Clean your Code');
+					font-size : 0.75em;
+					color     : grey;
+					&.active { color : inherit; }
+				}
 				&.history {
 					.tooltipLeft('History');
 					position  : relative;