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,14 +12,24 @@ export async function formatCSS(view) {
 		parser  : 'css',
 		plugins : [postcssPlugin]
 	});
+	if(formatted === code) return;
 
-	view.dispatch({
-		changes : {
-			from   : 0,
-			to     : view.state.doc.length,
-			insert : formatted
-		}
-	});
+
+	 const dom = view.dom;
+
+  	dom.classList.add('cm-flash');
+
+  	setTimeout(()=>{
+    	dom.classList.remove('cm-flash');
+		view.dispatch({
+			changes : {
+				from   : 0,
+				to     : view.state.doc.length,
+				insert : formatted
+			}
+		});
+
+  	}, 500);
 }
 
 const indentLess = (view)=>{