Change SQL formatter library

* Improve SQL format error message

Also let the SQL be highlighted even if not formatted.

* Use @sqltools/formatter to format SQL

It is less prone to parsing errors, popular (~2M weekly downloads)
and used in VS code.

package.json

@@ -26,13 +26,13 @@
     "vite": "^5.4.6"
   },
   "dependencies": {
+    "@sqltools/formatter": "^1.2.5",
     "@vitejs/plugin-vue": "^4.6.2",
     "d3": "^7.9.0",
     "highlight.js": "^11.9.0",
     "lodash": "^4.17.21",
     "luxon": "^3.4.4",
     "moment": "^2.30.1",
-    "sql-formatter": "^15.3.2",
     "vite-plugin-vuetify": "^2.0.3",
     "vue": "^3.3.11",
     "vue-router": "^4.4.0",

powa/static/js/utils/sql.js

@@ -1,16 +1,16 @@
 import hljs from "highlight.js/lib/core";
 import pgsql from "highlight.js/lib/languages/pgsql";
 import "highlight.js/styles/default.css";
-import { formatDialect, postgresql } from "sql-formatter";
+import sqlFormatter from "@sqltools/formatter";
 
 hljs.registerLanguage("sql", pgsql);
 
 export function formatSql(value) {
   try {
-    value = formatDialect(value, { dialect: postgresql });
-    value = hljs.highlightAuto(value, ["sql"]).value;
+    value = sqlFormatter.format(value, { language: "postgresql" });
   } catch (error) {
-    console.error("Could not highlight SQL:", value);
+    console.error("Could not format SQL:", "\n", value, "\n", error);
   }
+  value = hljs.highlightAuto(value, ["sql"]).value;
   return value;
 }