fix: remove unneeded params to sql format hook

Author: frectonz

ui/src/components/editor.tsx

@@ -122,7 +122,7 @@ export const Editor: FunctionComponent<Props> = ({ value, onChange }) => {
     };
   }, [monacoInstance, autoCompleteData]);
 
-  useSqlFormattingProviders(monacoInstance, { languageId: ID_LANGUAGE_SQL });
+  useSqlFormattingProviders(monacoInstance);
 
   // Avoid rendering until theme is known
   if (!currentTheme) return null;

ui/src/lib/sql-formatting.ts

@@ -3,34 +3,26 @@ import type { IDisposable } from "monaco-editor";
 import type * as Monaco from "monaco-editor";
 import { format as formatSql } from "sql-formatter";
 import type { FormatOptionsWithLanguage } from "sql-formatter";
-
-type UseSqlFormattingProvidersOptions = {
-  languageId: string;
-  getOptions?: () => FormatOptionsWithLanguage;
-};
+import { ID_LANGUAGE_SQL } from "@/components/editor.config";
 
 const getDefaultSqlFormatOptions = (): FormatOptionsWithLanguage => ({
   language: "sqlite",
   keywordCase: "upper",
 });
 
-export function useSqlFormattingProviders(
-  monaco: typeof Monaco | null,
-  { languageId, getOptions }: UseSqlFormattingProvidersOptions,
-) {
+export function useSqlFormattingProviders(monaco: typeof Monaco | null) {
   const disposablesRef = useRef<IDisposable[]>([]);
 
   useEffect(() => {
     if (!monaco) return;
 
-    // Dispose any previous providers
     disposablesRef.current.forEach((d) => d.dispose());
     disposablesRef.current = [];
 
-    const getOpts = getOptions ?? getDefaultSqlFormatOptions;
+    const getOpts = getDefaultSqlFormatOptions;
 
     const documentProvider =
-      monaco.languages.registerDocumentFormattingEditProvider(languageId, {
+      monaco.languages.registerDocumentFormattingEditProvider(ID_LANGUAGE_SQL, {
         provideDocumentFormattingEdits: (model) => {
           const fullRange = model.getFullModelRange();
           const text = model.getValue();
@@ -43,39 +35,39 @@ export function useSqlFormattingProviders(
               },
             ];
           } catch (err) {
-            // Keep UX stable if formatting fails
-            // eslint-disable-next-line no-console
             console.error("SQL formatting error (document)", err);
             return [];
           }
         },
       });
 
     const rangeProvider =
-      monaco.languages.registerDocumentRangeFormattingEditProvider(languageId, {
-        provideDocumentRangeFormattingEdits: (model, range) => {
-          const text = model.getValueInRange(range);
-          try {
-            const formatted = formatSql(text, getOpts());
-            return [
-              {
-                range,
-                text: formatted,
-              },
-            ];
-          } catch (err) {
-            // eslint-disable-next-line no-console
-            console.error("SQL formatting error (range)", err);
-            return [];
-          }
+      monaco.languages.registerDocumentRangeFormattingEditProvider(
+        ID_LANGUAGE_SQL,
+        {
+          provideDocumentRangeFormattingEdits: (model, range) => {
+            const text = model.getValueInRange(range);
+            try {
+              const formatted = formatSql(text, getOpts());
+              return [
+                {
+                  range,
+                  text: formatted,
+                },
+              ];
+            } catch (err) {
+              console.error("SQL formatting error (range)", err);
+              return [];
+            }
+          },
         },
-      });
+      );
 
     disposablesRef.current = [documentProvider, rangeProvider];
 
     return () => {
       disposablesRef.current.forEach((d) => d.dispose());
       disposablesRef.current = [];
     };
-  }, [monaco, languageId, getOptions]);
+  }, [monaco]);
 }