feat: implement centralized SQL formatting providers for editor component

Author: Victor1890

ui/src/components/editor.tsx

@@ -3,7 +3,6 @@ import { FunctionComponent, useEffect, useRef } from "react";
 import type { IDisposable } from "monaco-editor";
 import { vsPlusTheme } from "monaco-sql-languages";
 import EditorComponent, { useMonaco } from "@monaco-editor/react";
-import { format as formatSql } from "sql-formatter";
 
 import {
   COMMAND_CONFIG,
@@ -15,6 +14,7 @@ import { fetchAutocomplete } from "@/api";
 import { Card } from "@/components/ui/card";
 import { useQuery } from "@tanstack/react-query";
 import { useTheme } from "@/provider/theme.provider";
+import { useSqlFormattingProviders } from "@/lib/monaco";
 
 type Props = {
   value: string;
@@ -25,7 +25,7 @@ export const Editor: FunctionComponent<Props> = ({ value, onChange }) => {
   const currentTheme = useTheme();
   const monacoInstance = useMonaco();
   const providerRef = useRef<IDisposable | null>(null);
-  const formatProviderRefs = useRef<IDisposable[]>([]);
+  
 
   const { data: autoCompleteData } = useQuery({
     queryKey: ["autocomplete"],
@@ -124,74 +124,10 @@ export const Editor: FunctionComponent<Props> = ({ value, onChange }) => {
   }, [monacoInstance, autoCompleteData]);
 
   // Register formatting providers (document and range)
-  useEffect(() => {
-    if (!monacoInstance) return;
-
-    // Dispose previous providers if any
-    formatProviderRefs.current.forEach((d) => d.dispose());
-    formatProviderRefs.current = [];
-
-    const getOptions = () => ({
-      language: "sqlite" as const,
-      keywordCase: "upper" as const,
-      indent: "  ",
-    });
-
-    const documentProvider =
-      monacoInstance.languages.registerDocumentFormattingEditProvider(
-        ID_LANGUAGE_SQL,
-        {
-          provideDocumentFormattingEdits: (model) => {
-            const fullRange = model.getFullModelRange();
-            const text = model.getValue();
-            try {
-              const formatted = formatSql(text, getOptions());
-              return [
-                {
-                  range: fullRange,
-                  text: formatted,
-                },
-              ];
-            } catch (err) {
-              // Keep UX stable if formatting fails
-              // eslint-disable-next-line no-console
-              console.error("SQL formatting error (document)", err);
-              return [];
-            }
-          },
-        }
-      );
-
-    const rangeProvider =
-      monacoInstance.languages.registerDocumentRangeFormattingEditProvider(
-        ID_LANGUAGE_SQL,
-        {
-          provideDocumentRangeFormattingEdits: (model, range) => {
-            const text = model.getValueInRange(range);
-            try {
-              const formatted = formatSql(text, getOptions());
-              return [
-                {
-                  range,
-                  text: formatted,
-                },
-              ];
-            } catch (err) {
-              // eslint-disable-next-line no-console
-              console.error("SQL formatting error (range)", err);
-              return [];
-            }
-          },
-        }
-      );
-
-    formatProviderRefs.current = [documentProvider, rangeProvider];
-
-    return () => {
-      formatProviderRefs.current.forEach((d) => d.dispose());
-      formatProviderRefs.current = [];
-    };
-  }, [monacoInstance]);
+  // Use centralized formatting providers
+  // Moved into lib to keep this component lean
+  useSqlFormattingProviders(monacoInstance, { languageId: ID_LANGUAGE_SQL });
+  
 
   // Avoid rendering until theme is known
   if (!currentTheme) return null;

ui/src/lib/monaco/index.ts

@@ -0,0 +1 @@
+export { useSqlFormattingProviders } from "./sql-formatting"

ui/src/lib/monaco/sql-formatting.ts

@@ -0,0 +1,84 @@
+import { useEffect, useRef } from "react";
+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;
+};
+
+const getDefaultSqlFormatOptions = (): FormatOptionsWithLanguage => ({
+    language: "sqlite",
+    keywordCase: "upper",
+});
+
+export function useSqlFormattingProviders(
+    monaco: typeof Monaco | null,
+    { languageId, getOptions }: UseSqlFormattingProvidersOptions
+) {
+    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 documentProvider =
+            monaco.languages.registerDocumentFormattingEditProvider(languageId, {
+                provideDocumentFormattingEdits: (model) => {
+                    const fullRange = model.getFullModelRange();
+                    const text = model.getValue();
+                    try {
+                        const formatted = formatSql(text, getOpts());
+                        return [
+                            {
+                                range: fullRange,
+                                text: formatted,
+                            },
+                        ];
+                    } 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 [];
+                        }
+                    },
+                }
+            );
+
+        disposablesRef.current = [documentProvider, rangeProvider];
+
+        return () => {
+            disposablesRef.current.forEach((d) => d.dispose());
+            disposablesRef.current = [];
+        };
+    }, [monaco, languageId, getOptions]);
+}