crude basic animation and button

client/components/codeEditor/codeEditor.jsx

@@ -1,4 +1,4 @@
-/* eslint max-lines: ["error", { "max": 400 }] */
+/* eslint max-lines: ["error", { "max": 500 }] */
 import './codeEditor.less';
 import React, { useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
 
@@ -37,7 +37,7 @@ const themes = { default: defaultCM5Theme, ...cm5Themes, darkbrewery };
 const themeCompartment = new Compartment();
 const highlightCompartment = new Compartment();
 
-import { generalKeymap, markdownKeymap, cssKeymap } from './customKeyMaps.js';
+import { generalKeymap, markdownKeymap, cssKeymap, formatCSS } from './customKeyMaps.js';
 import foldOnPages from './customFolding.js';
 import { customHighlightStyle, tokenizeCustomMarkdown, tokenizeCustomCSS } from './customHighlight.js';
 import { legacyCustomHighlightStyle, legacyTokenizeCustomMarkdown } from './legacyCustomHighlight.js';
@@ -411,6 +411,8 @@ const CodeEditor = forwardRef(
 				}, 400);
 			},
 
+			formatCode : ()=>formatCSS(viewRef.current),
+
 			undo : ()=>undo(viewRef.current),
 			redo : ()=>redo(viewRef.current),
 

client/components/codeEditor/codeEditor.less

@@ -15,6 +15,18 @@
 	}
 }
 
+@keyframes slideacross {
+ 0% {
+	bottom: -200px;
+	left: -200px;
+ }
+
+ 100% {
+	bottom:100%;
+	left:100%;
+ }
+}
+
 :where(.codeEditor) {
 	width             : 100%;
 	height            : calc(100% - 25px);
@@ -23,6 +35,23 @@
 	.cm-editor { 
 		height  : 100%;
 		outline : none !important;
+
+		&.cm-flash {
+			position:relative;
+			&::after {
+				position:absolute;
+				content:'';
+				bottom:-200px;
+				left:-200px;
+				translate:-50%;
+				width:200%;
+				height:100px;
+				background:linear-gradient(0deg, #89eafc00 0px, #89ebfc8e 50px, #89eafc00 100px, transparent);
+				display:block;
+				animation: .5s linear 1 slideacross ;
+				rotate:30deg
+			}
+		}
 	}
 
 	&.brewSnippets .cm-snippetLine,

client/components/codeEditor/customKeyMaps.js

@@ -12,7 +12,15 @@ export async function formatCSS(view) {
 		parser  : 'css',
 		plugins : [postcssPlugin]
 	});
+	if(formatted === code) return;
 
+
+	 const dom = view.dom;
+
+  	dom.classList.add('cm-flash');
+
+  	setTimeout(()=>{
+    	dom.classList.remove('cm-flash');
 		view.dispatch({
 			changes : {
 				from   : 0,
@@ -20,6 +28,8 @@ export async function formatCSS(view) {
 				insert : formatted
 			}
 		});
+
+  	}, 500);
 }
 
 const indentLess = (view)=>{

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;