fix(editor): improve SQL Server editing support

src/components/editor/EditorSettingsDialog.vue

@@ -30,6 +30,7 @@ const editFontFamily = ref(settingsStore.editorSettings.fontFamily);
 const editFontSize = ref(settingsStore.editorSettings.fontSize);
 const editTheme = ref(settingsStore.editorSettings.theme);
 const editExecuteMode = ref(settingsStore.editorSettings.executeMode);
+const editWordWrap = ref(settingsStore.editorSettings.wordWrap);
 
 // Sync from store when dialog opens
 watch(
@@ -40,6 +41,7 @@ watch(
       editFontSize.value = settingsStore.editorSettings.fontSize;
       editTheme.value = settingsStore.editorSettings.theme;
       editExecuteMode.value = settingsStore.editorSettings.executeMode;
+      editWordWrap.value = settingsStore.editorSettings.wordWrap;
     }
   },
 );
@@ -49,7 +51,8 @@ function hasChanges(): boolean {
     editFontFamily.value !== settingsStore.editorSettings.fontFamily ||
     editFontSize.value !== settingsStore.editorSettings.fontSize ||
     editTheme.value !== settingsStore.editorSettings.theme ||
-    editExecuteMode.value !== settingsStore.editorSettings.executeMode
+    editExecuteMode.value !== settingsStore.editorSettings.executeMode ||
+    editWordWrap.value !== settingsStore.editorSettings.wordWrap
   );
 }
 
@@ -59,6 +62,7 @@ function applySettings() {
     fontSize: editFontSize.value,
     theme: editTheme.value,
     executeMode: editExecuteMode.value,
+    wordWrap: editWordWrap.value,
   });
   emit("update:open", false);
 }
@@ -68,6 +72,7 @@ function resetDefaults() {
   editFontSize.value = DEFAULT_EDITOR_SETTINGS.fontSize;
   editTheme.value = DEFAULT_EDITOR_SETTINGS.theme;
   editExecuteMode.value = DEFAULT_EDITOR_SETTINGS.executeMode;
+  editWordWrap.value = DEFAULT_EDITOR_SETTINGS.wordWrap;
 }
 
 function onExecuteModeChange(v: any) {
@@ -340,6 +345,16 @@ watch(
 
           <Separator />
 
+          <div class="flex items-center justify-between gap-4">
+            <div class="space-y-1">
+              <Label>{{ t("settings.wordWrap") }}</Label>
+              <p class="text-xs text-muted-foreground">{{ t("settings.wordWrapDescription") }}</p>
+            </div>
+            <input v-model="editWordWrap" type="checkbox" class="h-4 w-4 shrink-0 accent-primary" />
+          </div>
+
+          <Separator />
+
           <!-- Live Preview -->
           <div class="space-y-2">
             <Label>{{ t("settings.preview") }}</Label>

src/components/editor/QueryEditor.vue

@@ -15,7 +15,7 @@ const props = defineProps<{
   modelValue: string;
   connectionId?: string;
   database?: string;
-  dialect?: "mysql" | "postgres";
+  dialect?: "mysql" | "postgres" | "sqlserver";
   formatDialect?: SqlFormatDialect;
   formatRequestId?: number;
 }>();
@@ -40,6 +40,7 @@ const MAX_FONT_SIZE = 24;
 let editorViewModule: typeof import("@codemirror/view") | null = null;
 let fontThemeComp: import("@codemirror/state").Compartment | null = null;
 let codeMirrorTheme: import("@codemirror/state").Compartment | null = null;
+let wordWrapComp: import("@codemirror/state").Compartment | null = null;
 
 // Completion cache
 let cachedTables: Array<{ name: string; schema?: string; type?: "table" | "view" }> = [];
@@ -206,8 +207,8 @@ onMounted(async () => {
 
   const [
     { EditorView, keymap },
-    { EditorState, Compartment },
-    { sql, MySQL, PostgreSQL, SQLDialect },
+    { EditorState, Compartment, Prec },
+    { sql, MSSQL, MySQL, PostgreSQL, SQLDialect },
     { basicSetup },
     { autocompletion, startCompletion },
     { indentWithTab },
@@ -222,10 +223,11 @@ onMounted(async () => {
   editorViewModule = { EditorView, keymap } as typeof import("@codemirror/view");
   fontThemeComp = new Compartment();
   codeMirrorTheme = new Compartment();
+  wordWrapComp = new Compartment();
 
   const ss = settingsStore.editorSettings;
 
-  const baseDialect = props.dialect === "postgres" ? PostgreSQL : MySQL;
+  const baseDialect = props.dialect === "postgres" ? PostgreSQL : props.dialect === "sqlserver" ? MSSQL : MySQL;
   const extraKeywords =
     "PIVOT UNPIVOT EXCLUDE REPLACE QUALIFY ASOF POSITIONAL ANTI SEMI SAMPLE TABLESAMPLE STRUCT MAP LIST ARRAY LAMBDA UNNEST LATERAL FILTER RECURSIVE SUMMARIZE PRAGMA READ_CSV READ_PARQUET READ_JSON DESCRIBE SHOW COPY EXPORT IMPORT";
   const dialect = SQLDialect.define({
@@ -283,8 +285,9 @@ onMounted(async () => {
         override: [async (context: CompletionContext) => provideSqlCompletions(context.state, context.pos)],
       }),
       codeMirrorTheme.of(theme),
-      keymap.of([indentWithTab]),
+      Prec.highest(keymap.of([indentWithTab])),
       runKeymap,
+      wordWrapComp.of(ss.wordWrap ? EditorView.lineWrapping : []),
       EditorView.updateListener.of((update) => {
         if (update.docChanged) {
           emit("update:modelValue", update.state.doc.toString());
@@ -486,11 +489,12 @@ watch(
 watch(
   () => settingsStore.editorSettings,
   async (ss) => {
-    if (!view.value || !codeMirrorTheme || !fontThemeComp || !editorViewModule) return;
+    if (!view.value || !codeMirrorTheme || !fontThemeComp || !wordWrapComp || !editorViewModule) return;
     const themeExt = await loadEditorTheme(ss.theme);
     view.value.dispatch({
       effects: [
         codeMirrorTheme.reconfigure(themeExt),
+        wordWrapComp.reconfigure(ss.wordWrap ? editorViewModule.EditorView.lineWrapping : []),
         fontThemeComp.reconfigure(
           editorFontTheme(editorViewModule.EditorView, ss.fontSize, ss.fontFamily, {
             fixedHeight: true,