Fix code editor tab behavior (#1520)

* Fix code editor tab behavior * Update theme to make gutter more visibile and fix issue with indent on the first char
pinterest · Nov 21, 2024 · 7dd47c0 · 7dd47c0
1 parent 1f71ccb
commit 7dd47c0
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 27 deletions.
diff --git a/querybook/webapp/components/QueryEditor/QueryEditor.scss b/querybook/webapp/components/QueryEditor/QueryEditor.scss
@@ -35,22 +35,12 @@
         height: 100%;
         border-radius: var(--border-radius-sm);
         overflow: hidden;
-        background-color: var(--bg-query-editor);
 
-        &.cm-theme-light {
-            .cm-editor {
-                .cm-scroller {
-                    .cm-gutters {
-                        background-color: var(--bg-query-editor-gutter);
-                    }
-                }
-            }
-        }
         // dark theme
         &.cm-theme {
             .cm-editor {
                 .cm-panels {
-                    background-color: var(--bg-query-editor);
+                    background-color: var(--bg-hover);
                 }
             }
         }

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,
@@ -378,7 +381,12 @@ export const QueryEditor: React.FC<
                 searchExtension,
                 selectionExtension,
                 sqlCompleteExtension,
-                indentService.of((context, pos) => context.lineIndent(pos - 1)),
+                indentService.of((context, pos) => {
+                    if (pos === 0) {
+                        return 0;
+                    }
+                    return context.lineIndent(pos - 1);
+                }),
             ],
             [
                 language,
@@ -395,12 +403,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 +464,7 @@ export const QueryEditor: React.FC<
                     editable={!readOnly}
                     autoFocus={false}
                     onChange={onChangeHandler}
+                    indentWithTab={false}
                 />
             </div>
         );

diff --git a/querybook/webapp/components/QueryEditor/themes.ts b/querybook/webapp/components/QueryEditor/themes.ts
@@ -3,7 +3,9 @@ import { tags as t } from '@lezer/highlight';
 import { xcodeLightInit } from '@uiw/codemirror-theme-xcode';
 
 export const CustomMonokaiDarkTheme = monokaiInit({
-    settings: {},
+    settings: {
+        gutterBackground: 'var(--bg-lightest)',
+    },
     styles: [
         { tag: [t.name], color: 'var(--text-dark)' },
         { tag: [t.constant(t.name), t.standard(t.name)], color: '#FD971F' },
@@ -12,8 +14,8 @@ export const CustomMonokaiDarkTheme = monokaiInit({
 
 export const CustomXcodeTheme = xcodeLightInit({
     settings: {
-        background: 'var(--bg-color)',
-        gutterBackground: 'var(--bg-color)',
+        background: 'var(--bg-lightest)',
+        gutterBackground: 'var(--bg-light)',
     },
     styles: [
         { tag: [t.special(t.propertyName)], color: '#005cc5' },

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)));