diff --git a/src/components/gui/sql-editor/index.tsx b/src/components/gui/sql-editor/index.tsx index febd12e..dddac6d 100644 --- a/src/components/gui/sql-editor/index.tsx +++ b/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( function SqlEditor( { + dialect, value, onChange, schema, @@ -119,6 +124,44 @@ const SqlEditor = forwardRef( ]); }, [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 ( ( 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} /> ); } diff --git a/src/components/gui/tabs/query-tab.tsx b/src/components/gui/tabs/query-tab.tsx index 329fc25..f347e78 100644 --- a/src/components/gui/tabs/query-tab.tsx +++ b/src/components/gui/tabs/query-tab.tsx @@ -227,6 +227,7 @@ export default function QueryWindow({
- +
diff --git a/src/drivers/base-driver.ts b/src/drivers/base-driver.ts index 0f8a392..ace202e 100644 --- a/src/drivers/base-driver.ts +++ b/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; @@ -202,6 +203,7 @@ export interface DriverFlags { supportBigInt: boolean; supportCreateUpdateTable: boolean; mismatchDetection: boolean; + dialect: SupportedDialect; } export interface DatabaseTableColumnChange { diff --git a/src/drivers/mysql/mysql-driver.ts b/src/drivers/mysql/mysql-driver.ts index 011c7c2..fadad57 100644 --- a/src/drivers/mysql/mysql-driver.ts +++ b/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", }; } diff --git a/src/drivers/sqlite-base-driver.ts b/src/drivers/sqlite-base-driver.ts index e826cef..d83ce17 100644 --- a/src/drivers/sqlite-base-driver.ts +++ b/src/drivers/sqlite-base-driver.ts @@ -30,6 +30,7 @@ export abstract class SqliteLikeBaseDriver extends CommonSQLImplement { optionalSchema: true, mismatchDetection: false, supportCreateUpdateTable: true, + dialect: "sqlite", }; }