fix: remove monaco dir

Author: frectonz

ui/src/components/editor.tsx

@@ -14,7 +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";
+import { useSqlFormattingProviders } from "@/lib/sql-formatting";
 
 type Props = {
   value: string;
@@ -25,7 +25,6 @@ export const Editor: FunctionComponent<Props> = ({ value, onChange }) => {
   const currentTheme = useTheme();
   const monacoInstance = useMonaco();
   const providerRef = useRef<IDisposable | null>(null);
-  
 
   const { data: autoCompleteData } = useQuery({
     queryKey: ["autocomplete"],
@@ -39,7 +38,7 @@ export const Editor: FunctionComponent<Props> = ({ value, onChange }) => {
     monacoInstance.languages.register({ id: ID_LANGUAGE_SQL });
     monacoInstance.languages.setLanguageConfiguration(
       ID_LANGUAGE_SQL,
-      COMMAND_CONFIG
+      COMMAND_CONFIG,
     );
 
     monacoInstance.editor.defineTheme("sql-dark", vsPlusTheme.darkThemeData);
@@ -110,7 +109,7 @@ export const Editor: FunctionComponent<Props> = ({ value, onChange }) => {
                 ...tableColumn,
                 ...tableColumnAlias,
               ];
-            }
+            },
           );
 
           return { suggestions: [...suggestions, ...tableColumnSuggestions] };
@@ -123,11 +122,7 @@ export const Editor: FunctionComponent<Props> = ({ value, onChange }) => {
     };
   }, [monacoInstance, autoCompleteData]);
 
-  // Register formatting providers (document and range)
-  // 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,81 @@
+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]);
+}