feat: change dialect based on the driver (#157)

* feat: change dialect based on the driver

* add schema to the extension

Author: invisal

src/components/gui/sql-editor/index.tsx

@@ -1,13 +1,15 @@
 import CodeMirror, {
   EditorView,
+  Extension,
   ReactCodeMirrorRef,
 } from "@uiw/react-codemirror";
+import { LanguageSupport } from "@codemirror/language";
 import {
   acceptCompletion,
   completionStatus,
   startCompletion,
 } from "@codemirror/autocomplete";
-import { sql, SQLNamespace } from "@codemirror/lang-sql";
+import { sql, SQLNamespace, MySQL as MySQLDialect } from "@codemirror/lang-sql";
 import { forwardRef, KeyboardEventHandler, useMemo } from "react";
 
 import { defaultKeymap, insertTab } from "@codemirror/commands";
@@ -19,9 +21,11 @@ import { sqliteDialect } from "@/drivers/sqlite/sqlite-dialect";
 import { functionTooltip } from "./function-tooltips";
 import sqliteFunctionList from "@/drivers/sqlite/function-tooltip.json";
 import { toast } from "sonner";
+import { SupportedDialect } from "@/drivers/base-driver";
 
 interface SqlEditorProps {
   value: string;
+  dialect: SupportedDialect;
   readOnly?: boolean;
   onChange?: (value: string) => void;
   schema?: SQLNamespace;
@@ -38,6 +42,7 @@ interface SqlEditorProps {
 const SqlEditor = forwardRef<ReactCodeMirrorRef, SqlEditorProps>(
   function SqlEditor(
     {
+      dialect,
       value,
       onChange,
       schema,
@@ -119,6 +124,44 @@ const SqlEditor = forwardRef<ReactCodeMirrorRef, SqlEditorProps>(
       ]);
     }, [fontSize, onFontSizeChanged]);
 
+    const extensions = useMemo(() => {
+      let sqlDialect: LanguageSupport | undefined = undefined;
+      let tooltipExtension: Extension | undefined = undefined;
+
+      if (dialect === "sqlite") {
+        sqlDialect = sql({
+          dialect: sqliteDialect,
+          schema,
+        });
+        tooltipExtension = functionTooltip(sqliteFunctionList);
+      } else {
+        sqlDialect = sql({
+          dialect: MySQLDialect,
+          schema,
+        });
+      }
+
+      return [
+        keyExtensions,
+        sqlDialect,
+        tooltipExtension,
+        tableNameHighlightPlugin,
+        EditorView.updateListener.of((state) => {
+          const pos = state.state.selection.main.head;
+          const line = state.state.doc.lineAt(pos);
+          const lineNumber = line.number;
+          const columnNumber = pos - line.from;
+          if (onCursorChange) onCursorChange(pos, lineNumber, columnNumber);
+        }),
+      ].filter(Boolean) as Extension[];
+    }, [
+      dialect,
+      onCursorChange,
+      keyExtensions,
+      schema,
+      tableNameHighlightPlugin,
+    ]);
+
     return (
       <CodeMirror
         ref={ref}
@@ -137,22 +180,7 @@ const SqlEditor = forwardRef<ReactCodeMirrorRef, SqlEditorProps>(
           fontSize: 20,
           height: "100%",
         }}
-        extensions={[
-          keyExtensions,
-          sql({
-            dialect: sqliteDialect,
-            schema,
-          }),
-          functionTooltip(sqliteFunctionList),
-          tableNameHighlightPlugin,
-          EditorView.updateListener.of((state) => {
-            const pos = state.state.selection.main.head;
-            const line = state.state.doc.lineAt(pos);
-            const lineNumber = line.number;
-            const columnNumber = pos - line.from;
-            if (onCursorChange) onCursorChange(pos, lineNumber, columnNumber);
-          }),
-        ]}
+        extensions={extensions}
       />
     );
   }

src/components/gui/tabs/query-tab.tsx

@@ -227,6 +227,7 @@ export default function QueryWindow({
           <div className="grow overflow-hidden">
             <SqlEditor
               ref={editorRef}
+              dialect={databaseDriver.getFlags().dialect}
               value={code}
               onChange={setCode}
               schema={autoCompleteSchema}

src/components/gui/tabs/trigger-tab.tsx

@@ -77,7 +77,10 @@ export default function TriggerTab({
       </div>
       <div className="grow overflow-hidden">
         <div className="h-full">
-          <SqlEditor value={trigger?.statement ?? ""} />
+          <SqlEditor
+            value={trigger?.statement ?? ""}
+            dialect={databaseDriver.getFlags().dialect}
+          />
         </div>
       </div>
     </div>

src/drivers/base-driver.ts

@@ -31,6 +31,7 @@ export function describeTableColumnType(type: TableColumnDataType) {
   }
 }
 
+export type SupportedDialect = "sqlite" | "mysql";
 export type SqlOrder = "ASC" | "DESC";
 export type DatabaseRow = Record<string, unknown>;
 
@@ -202,6 +203,7 @@ export interface DriverFlags {
   supportBigInt: boolean;
   supportCreateUpdateTable: boolean;
   mismatchDetection: boolean;
+  dialect: SupportedDialect;
 }
 
 export interface DatabaseTableColumnChange {

src/drivers/mysql/mysql-driver.ts

@@ -51,6 +51,7 @@ export default abstract class MySQLLikeDriver extends CommonSQLImplement {
       supportBigInt: false,
       mismatchDetection: false,
       supportCreateUpdateTable: false,
+      dialect: "mysql",
     };
   }
 

src/drivers/sqlite-base-driver.ts

@@ -30,6 +30,7 @@ export abstract class SqliteLikeBaseDriver extends CommonSQLImplement {
       optionalSchema: true,
       mismatchDetection: false,
       supportCreateUpdateTable: true,
+      dialect: "sqlite",
     };
   }