From 101b0a94fba61da215cfcd87f2646b802bc3211b Mon Sep 17 00:00:00 2001
From: "J.C. Zhong" <exzjc@hotmail.com>
Date: Fri, 22 Nov 2024 01:54:17 +0000
Subject: [PATCH] handle case of selection

---
 .../extensions/useOptionsExtension.ts         | 44 ++++++++++---------
 1 file changed, 23 insertions(+), 21 deletions(-)

diff --git a/querybook/webapp/hooks/queryEditor/extensions/useOptionsExtension.ts b/querybook/webapp/hooks/queryEditor/extensions/useOptionsExtension.ts
index d09772ddc..e8c64a203 100644
--- a/querybook/webapp/hooks/queryEditor/extensions/useOptionsExtension.ts
+++ b/querybook/webapp/hooks/queryEditor/extensions/useOptionsExtension.ts
@@ -4,10 +4,20 @@ import { EditorSelection, EditorState, Extension } from '@codemirror/state';
 import { EditorView, keymap } from '@uiw/react-codemirror';
 import { useMemo } from 'react';
 
-// Insert spaces instead of a real tab to reach the next tab stop
-const insertSpacesOnTab =
-    (tabSize: number) =>
+const handleTabKey =
+    (indentWithTabs: boolean, tabSize: number) =>
     ({ state, dispatch }) => {
+        // If there is a selection, indent the selection
+        if (!state.selection.main.empty) {
+            return indentMore({ state, dispatch });
+        }
+
+        // If user chooses to use a real tab, insert a real tab
+        if (indentWithTabs) {
+            return insertTab({ state, dispatch });
+        }
+
+        // Insert 2 or 4 spaces instead of a real tab to reach the next tab stop
         const line = state.doc.lineAt(state.selection.main.from);
         const column = state.selection.main.from - line.from;
         const spacesToInsert = tabSize - (column % tabSize);
@@ -37,29 +47,21 @@ export const useOptionsExtension = ({
 
         if (options.indentWithTabs) {
             extensions.push(indentUnit.of('\t'));
-            extensions.push(
-                keymap.of([
-                    {
-                        key: 'Tab',
-                        run: insertTab,
-                        shift: indentLess,
-                    },
-                ])
-            );
         } else {
             extensions.push(EditorState.tabSize.of(options.tabSize));
             extensions.push(indentUnit.of(' '.repeat(options.indentUnit)));
-            extensions.push(
-                keymap.of([
-                    {
-                        key: 'Tab',
-                        run: insertSpacesOnTab(options.tabSize),
-                        shift: indentLess,
-                    },
-                ])
-            );
         }
 
+        extensions.push(
+            keymap.of([
+                {
+                    key: 'Tab',
+                    run: handleTabKey(options.indentWithTabs, options.tabSize),
+                    shift: indentLess,
+                },
+            ])
+        );
+
         if (lineWrapping) {
             extensions.push(EditorView.lineWrapping);
         }