Introduce Auto-Format to Sprig Editor #1399 - Edited (#1504)

* Implemented Auto Format Code #1399

As requested on #1399, this is the first irritation of the main feature starting with basic beautify format with white-space

* Added Beginner Friendly Comments

As @JosiasAurel requested , i have added a beginner friendly comment on the function i wrote to make any new user read code base and understand it's uses.

* Rename Function Name For Better Understanding

* Update Format Option

after @leomcelroy feedback, i changed the current version with his which seems to be workable in the way we want.

* Hide Nav On Clicked

As requested by @leomcelroy i have made sure that navpoup closes / hide when the button is clicked.

* import entire js_beutify module before getting beutifier function (#1535)

* Collapse On Prettify

removed js-beautify comment and added a function that collapse the asset after it's formated as @leomcelroy suggsted

---------

Co-authored-by: Josias Aurel <[email protected]>

package.json

@@ -29,6 +29,7 @@
 		"dotenv": "^16.3.1",
 		"esprima-next": "^6.0.2",
 		"firebase-admin": "^11.10.1",
+		"js-beautify": "^1.15.1",
 		"ms": "^2.1.3",
 		"nanoid": "^4.0.1",
 		"node-statsd": "^0.1.1",

src/components/navbar-editor.tsx

@@ -13,6 +13,8 @@ import { usePopupCloseClick } from '../lib/utils/popup-close-click'
 import { upload, uploadState } from '../lib/upload'
 import { VscLoading } from 'react-icons/vsc'
 import { defaultExampleCode } from '../lib/examples'
+import beautifier from "js-beautify";
+import { collapseRanges } from '../lib/codemirror/util'
 
 const saveName = throttle(500, async (gameId: string, newName: string) => {
 	try {
@@ -57,6 +59,39 @@ type StuckData = {
 	description: string
 }
 
+const prettifyCode = () => {
+
+		// Check if the codeMirror is ready
+		if (!codeMirror.value) return;
+
+		// Get the code
+		const code = codeMirror.value.state.doc.toString();
+
+		// Set the options for js_beautify
+		const options = {
+			indent_size: 2, // Indent by 2 spaces
+			"brace_style": "collapse,preserve-inline", // Collapse braces and preserve inline
+		};
+
+		const { js_beautify } = beautifier;
+		// Format the code
+		const formattedCode = js_beautify(code, options);
+
+		// Create an update transaction with the formatted code
+		const updateTransaction = codeMirror.value.state.update({
+			changes: { from: 0, to: codeMirror.value.state.doc.length, insert: formattedCode }
+		});
+
+		// Find all the matches of the code, bitmap and tune blocks
+		const matches = [ ...formattedCode.matchAll(/(map|bitmap|tune)`[\s\S]*?`/g) ];
+
+		// Apply the update to the editor
+		codeMirror.value.dispatch(updateTransaction);
+
+		// Collapse the ranges of the matches
+		collapseRanges(codeMirror.value, matches.map((match) => [ match.index!, match.index! + 1 ]))
+};
+
 export default function EditorNavbar(props: EditorNavbarProps) {
 	const showNavPopup = useSignal(false)
 	const showStuckPopup = useSignal(false)
@@ -298,7 +333,7 @@ export default function EditorNavbar(props: EditorNavbarProps) {
 					</>)}
 				<li><a href='/gallery'>Gallery</a></li>
 				<li><a href='/get'>Get a Sprig</a></li>
-			</ul>
+				<li><a href='javascript:void(0);' role='button' onClick={() => { showNavPopup.value = false; prettifyCode(); }}> Prettify code </a></li></ul>
 			<div class={styles.divider} />
 			<ul>
 				<li>