feat(editor): support tab indentation

package.json

@@ -19,6 +19,7 @@
   "dependencies": {
     "@babel/runtime": "^7.29.2",
     "@codemirror/autocomplete": "^6.20.1",
+    "@codemirror/commands": "^6.10.3",
     "@codemirror/lang-sql": "^6.10.0",
     "@codemirror/state": "^6.6.0",
     "@codemirror/theme-one-dark": "^6.1.3",

pnpm-lock.yaml

@@ -14,6 +14,9 @@ importers:
       '@codemirror/autocomplete':
         specifier: ^6.20.1
         version: 6.20.1
+      '@codemirror/commands':
+        specifier: ^6.10.3
+        version: 6.10.3
       '@codemirror/lang-sql':
         specifier: ^6.10.0
         version: 6.10.0

src/components/editor/QueryEditor.vue

@@ -210,12 +210,14 @@ onMounted(async () => {
     { sql, MySQL, PostgreSQL, SQLDialect },
     { basicSetup },
     { autocompletion, startCompletion },
+    { indentWithTab },
   ] = await Promise.all([
     import("@codemirror/view"),
     import("@codemirror/state"),
     import("@codemirror/lang-sql"),
     import("codemirror"),
     import("@codemirror/autocomplete"),
+    import("@codemirror/commands"),
   ]);
   editorViewModule = { EditorView, keymap } as typeof import("@codemirror/view");
   fontThemeComp = new Compartment();
@@ -281,6 +283,7 @@ onMounted(async () => {
         override: [async (context: CompletionContext) => provideSqlCompletions(context.state, context.pos)],
       }),
       codeMirrorTheme.of(theme),
+      keymap.of([indentWithTab]),
       runKeymap,
       EditorView.updateListener.of((update) => {
         if (update.docChanged) {