feat(sql-to-rest): format on cmd+s

package-lock.json

@@ -48434,6 +48434,7 @@
         "react-tooltip": "*",
         "reactflow": "*",
         "remark-gfm": "^4.0.0",
+        "sql-formatter": "^15.3.1",
         "sql-to-rest": "*",
         "tsconfig": "*",
         "ui": "*"
@@ -48461,6 +48462,11 @@
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.2.tgz",
       "integrity": "sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ=="
     },
+    "packages/ui-patterns/node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
+    },
     "packages/ui-patterns/node_modules/mdast-util-to-hast": {
       "version": "13.1.0",
       "resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-13.1.0.tgz",
@@ -48604,6 +48610,19 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "packages/ui-patterns/node_modules/sql-formatter": {
+      "version": "15.3.1",
+      "resolved": "https://registry.npmjs.org/sql-formatter/-/sql-formatter-15.3.1.tgz",
+      "integrity": "sha512-L/dqan+Hrt0PpPdCbHcI9bdfOvqaQZR7v5c5SWMJ3bUGQSezK09Mm9q2I3B4iObjaq7FyoldIM+fDSmfzGRXCA==",
+      "dependencies": {
+        "argparse": "^2.0.1",
+        "get-stdin": "=8.0.0",
+        "nearley": "^2.20.1"
+      },
+      "bin": {
+        "sql-formatter": "bin/sql-formatter-cli.cjs"
+      }
+    },
     "packages/ui-patterns/node_modules/unified": {
       "version": "11.0.4",
       "resolved": "https://registry.npmjs.org/unified/-/unified-11.0.4.tgz",

packages/ui-patterns/SqlToRest/index.tsx

@@ -12,6 +12,7 @@ import {
   useState,
 } from 'react'
 import Markdown from 'react-markdown'
+import { format } from 'sql-formatter'
 import {
   HttpRequest,
   ParsingError,
@@ -279,6 +280,26 @@ export default function SqlToRest({
               },
               fontSize: 13,
             }}
+            onMount={(editor, monaco) => {
+              monaco.languages.registerDocumentFormattingEditProvider('pgsql', {
+                async provideDocumentFormattingEdits(model) {
+                  const currentCode = editor.getValue()
+                  const formattedCode = format(currentCode, {
+                    language: 'postgresql',
+                    keywordCase: 'lower',
+                  })
+                  return [
+                    {
+                      range: model.getFullModelRange(),
+                      text: formattedCode,
+                    },
+                  ]
+                },
+              })
+              editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, async () => {
+                await editor.getAction('editor.action.formatDocument').run()
+              })
+            }}
             onChange={async (sql) => {
               if (!sql) {
                 return

packages/ui-patterns/package.json

@@ -23,6 +23,7 @@
     "react-tooltip": "*",
     "reactflow": "*",
     "remark-gfm": "^4.0.0",
+    "sql-formatter": "^15.3.1",
     "sql-to-rest": "*",
     "tsconfig": "*",
     "ui": "*"
@@ -36,4 +37,4 @@
     "react": "*",
     "react-dom": "*"
   }
-}
+}