Fix code editor tab behavior

pinterest · Nov 20, 2024 · 8af3de0 · 8af3de0
1 parent 1f71ccb
commit 8af3de0
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 12 deletions.
diff --git a/querybook/webapp/components/QueryEditor/QueryEditor.tsx b/querybook/webapp/components/QueryEditor/QueryEditor.tsx
@@ -1,7 +1,10 @@
 import { acceptCompletion, startCompletion } from '@codemirror/autocomplete';
 import { indentService } from '@codemirror/language';
 import { EditorView } from '@codemirror/view';
-import CodeMirror, { ReactCodeMirrorRef } from '@uiw/react-codemirror';
+import CodeMirror, {
+    BasicSetupOptions,
+    ReactCodeMirrorRef,
+} from '@uiw/react-codemirror';
 import clsx from 'clsx';
 import React, {
     useCallback,
@@ -395,12 +398,12 @@ export const QueryEditor: React.FC<
             ]
         );
 
-        const basicSetup = useMemo(
+        const basicSetup = useMemo<BasicSetupOptions>(
             () => ({
                 drawSelection: true,
                 highlightSelectionMatches: true,
                 searchKeymap: false,
-                foldGutter: false,
+                foldGutter: true,
                 allowMultipleSelections: true,
             }),
             []
@@ -456,6 +459,7 @@ export const QueryEditor: React.FC<
                     editable={!readOnly}
                     autoFocus={false}
                     onChange={onChangeHandler}
+                    indentWithTab={false}
                 />
             </div>
         );

diff --git a/querybook/webapp/hooks/queryEditor/extensions/useKeyMapExtension.ts b/querybook/webapp/hooks/queryEditor/extensions/useKeyMapExtension.ts
@@ -2,6 +2,7 @@ import { KeyBinding, keymap, Prec } from '@uiw/react-codemirror';
 import { useCallback, useMemo } from 'react';
 
 import { CodeMirrorKeyMap } from 'lib/codemirror';
+import { indentLess, insertTab } from '@codemirror/commands';
 
 export const useKeyMapExtension = ({
     keyMap = {},
@@ -12,7 +13,7 @@ export const useKeyMapExtension = ({
 }) => {
     // Transform keys like Cmd-F to Cmd-f as codemirror6 expects
     const transformKey = useCallback((key: string) => {
-        let parts = key.split('-');
+        const parts = key.split('-');
         const lastPart = parts[parts.length - 1];
 
         // Check if the last part is a single alphabetical character
@@ -23,8 +24,8 @@ export const useKeyMapExtension = ({
         return parts.join('-');
     }, []);
 
-    const extension = useMemo(
-        () =>
+    const extensions = useMemo(
+        () => [
             Prec.highest(
                 keymap.of([
                     ...keyBindings.map(({ key, run }) => ({
@@ -40,8 +41,10 @@ export const useKeyMapExtension = ({
                     })),
                 ])
             ),
-        [keyMap, keyBindings]
+            keymap.of([{ key: 'Tab', run: insertTab, shift: indentLess }]),
+        ],
+        [keyBindings, keyMap, transformKey]
     );
 
-    return extension;
+    return extensions;
 };
diff --git a/querybook/webapp/hooks/queryEditor/extensions/useOptionsExtension.ts b/querybook/webapp/hooks/queryEditor/extensions/useOptionsExtension.ts
@@ -1,7 +1,7 @@
-import { indentWithTab } from '@codemirror/commands';
 import { indentUnit } from '@codemirror/language';
-import { EditorState, EditorView, keymap } from '@uiw/react-codemirror';
+import { EditorView } from '@uiw/react-codemirror';
 import { useMemo } from 'react';
+import { EditorState, Extension } from '@codemirror/state';
 
 export const useOptionsExtension = ({
     lineWrapping = true,
@@ -11,11 +11,10 @@ export const useOptionsExtension = ({
     options: Record<string, any>;
 }) => {
     const extension = useMemo(() => {
-        const extensions = [];
+        const extensions: Extension[] = [];
 
         if (options.indentWithTabs) {
             extensions.push(indentUnit.of('\t'));
-            extensions.push(keymap.of([indentWithTab]));
             extensions.push(EditorState.tabSize.of(options.tabSize));
         } else {
             extensions.push(indentUnit.of(' '.repeat(options.indentUnit)));