🚀 Add query formatter

package.json

@@ -28,7 +28,8 @@
     "react-dom": "^18.0.0",
     "react-hotkeys-hook": "3.4.7",
     "react-router-dom": "^6.4.3",
-    "react-split": "2.0.14"
+    "react-split": "2.0.14",
+    "sql-formatter": "^12.1.0"
   },
   "devDependencies": {
     "@playwright/test": "1.27.1",

src/hooks/useMonacoConfigSupplier.ts

@@ -8,6 +8,7 @@ import { useUrlState } from "./useUrlState";
 import { initialState } from "../hooks/useQueryForm";
 import { usePasswordContext } from "../contexts/usePassword";
 import { getTablesSuggestionProvider } from "../lib/editor-suggestions/tables.suggestion";
+import { format } from 'sql-formatter';
 
 type Params = {
   jsonParams: string;
@@ -26,15 +27,30 @@ export const useMonacoConfigSupplier = ({ jsonParams }: Params) => {
       subs.push(
         monaco.languages.registerCompletionItemProvider(
           paremeterSnippetSuggetionProvider.language,
-          paremeterSnippetSuggetionProvider.provider
-        )
+          paremeterSnippetSuggetionProvider.provider,
+        ),
       );
       subs.push(
         monaco.languages.registerCompletionItemProvider(
           paremeterTypeSuggetionProvider.language,
           paremeterTypeSuggetionProvider.provider
         )
       );
+      subs.push(
+        monaco.languages.registerDocumentFormattingEditProvider('sql', {
+          async provideDocumentFormattingEdits(model) {
+
+            const text = format(model.getValue(), { language: 'sql' ,   });
+            return [
+              {
+                range: model.getFullModelRange(),
+                text,
+              },
+            ];
+          },
+        })
+
+      )
     }
     return () => {
       subs.forEach((sub) => sub.dispose());

src/hooks/useQueryForm.ts

@@ -49,6 +49,7 @@ export const useQueryForm = ({
     },
   ]);
 
+
   return {
     HotKeysHelpDialog,
     openHelpDialog,