simple formatter

client/components/codeEditor/customKeyMap.js

@@ -1,6 +1,26 @@
 /* eslint max-lines: ["error", { "max": 300 }] */
 import { keymap } from '@codemirror/view';
 import { undo, redo } from '@codemirror/commands';
+import * as prettier from "prettier/standalone";
+import * as postcssPlugin from "prettier/plugins/postcss";
+
+async function formatCSS(view) {
+  const code = view.state.doc.toString();
+
+  const formatted = await prettier.format(code, {
+    parser: "css",
+    plugins: [postcssPlugin]
+  });
+
+  view.dispatch({
+    changes: {
+      from: 0,
+      to: view.state.doc.length,
+      insert: formatted
+    }
+  });
+}
+
 
 const insertTabAtCursor = (view)=>{
 	const { from } = view.state.selection.main;
@@ -235,4 +255,5 @@ export default keymap.of([
 	{ key: 'Mod-Enter', run: newPage },
 	{ key: 'Mod-z', run: undo }, //i think it may be unnecessary
 	{ key: 'Mod-Shift-z', run: redo },
+	{ key: 'alt-Shift-f', run: formatCSS },
 ]);

package.json

@@ -143,6 +143,7 @@
     "nanoid": "5.1.7",
     "nconf": "^0.13.0",
     "node": "^25.8.2",
+    "prettier": "^3.8.1",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "react-frame-component": "^5.3.1",