feat(editor): add ClickHouse SQL highlighting

apps/desktop/src/components/editor/QueryEditor.vue

@@ -70,7 +70,7 @@ import { trimmedSelectionLayer } from "@/lib/editor/codemirrorTrimmedSelectionLa
 import { selectionMatchOccurrences } from "@/lib/editor/codemirrorSelectionMatches";
 import { createInsertValueHintsExtension, requestInsertValueHintsRefresh } from "@/lib/editor/codemirrorInsertValueHints";
 import { focusEditorView } from "@/lib/editor/queryEditorFocus";
-import { createDbxCodeMirrorSqlDialect } from "@/lib/editor/codemirrorSqlDialect";
+import { createDbxCodeMirrorSqlDialect, type CodeMirrorSqlDialectName } from "@/lib/editor/codemirrorSqlDialect";
 import { sqlSemanticTableNameSpansForSyntaxTree } from "@/lib/editor/codemirrorSqlSemanticHighlight";
 import { startsQueryEditorRectangularSelection } from "@/lib/editor/queryEditorPointerSelection";
 import { LARGE_PASTE_HISTORY_USER_EVENT, normalizeQueryEditorPasteText, recoverableNativePasteSuffix, shouldRecoverLargeTauriPaste } from "@/lib/editor/queryEditorLargePaste";
@@ -109,7 +109,7 @@ const props = defineProps<{
   completionContextVersion?: number;
   databaseType?: DatabaseType;
   dialect?: "mysql" | "postgres" | "sqlserver";
-  syntaxDialect?: "mysql" | "postgres" | "sqlserver";
+  syntaxDialect?: CodeMirrorSqlDialectName;
   formatDialect?: SqlFormatDialect;
   formatRequestId?: number;
   compressRequestId?: number;
@@ -124,6 +124,10 @@ const props = defineProps<{
   statementExecutionMarkers?: StatementExecutionMarker[];
 }>();
 
+function sqlBehaviorDialect(): "mysql" | "postgres" | "sqlserver" | undefined {
+  return props.syntaxDialect === "clickhouse" ? props.dialect : (props.syntaxDialect ?? props.dialect);
+}
+
 const COMPLETION_REMOTE_LATENCY_BUDGET_MS = 120;
 const COMPLETION_DEBOUNCE_DELAY_MS = 150;
 const COMPLETION_TAB_RETRY_DELAY_MS = 16;
@@ -422,7 +426,7 @@ let hoverSqlHighlighter: SqlHighlighter | null = null;
 function sqlCompletionDialectOptions() {
   return {
     databaseType: props.databaseType,
-    dialect: props.syntaxDialect ?? props.dialect,
+    dialect: sqlBehaviorDialect(),
   };
 }
 
@@ -2248,7 +2252,7 @@ async function refreshSemanticDiagnostics(options: { preserveOutsideRanges?: boo
       const semanticModel = SEMANTIC_SQL_COMPLETION_ENABLED
         ? buildSqlSemanticModel(range.sql, semanticCursor, {
             databaseType: props.databaseType,
-            dialect: props.syntaxDialect ?? props.dialect,
+            dialect: sqlBehaviorDialect(),
           })
         : null;
       const semanticAnalysis = semanticModel ? mergeSqlSemanticReferenceAnalysis(analysis, semanticModel) : analysis;
@@ -3679,7 +3683,7 @@ onMounted(async () => {
           const ranges = windows.flatMap((window) =>
             sqlSemanticTableNameSpansForSyntaxTree(sql, window, tree, {
               databaseType: props.databaseType,
-              dialect: props.syntaxDialect ?? props.dialect,
+              dialect: sqlBehaviorDialect(),
             }),
           );
           return Decoration.set(