Multiple Editor Style Changes (#1519)

* tmp * Update keywords set * use xcode theme for light and add more coloring * fix lint * updated color for light theme * comments
pinterest · Nov 19, 2024 · 1f71ccb · 1f71ccb
1 parent d04a30a
commit 1f71ccb
Show file tree

Hide file tree

Showing 9 changed files with 211 additions and 46 deletions.
diff --git a/package.json b/package.json
@@ -41,6 +41,7 @@
         "@types/diff": "^5.0.2",
         "@uiw/codemirror-extensions-events": "^4.23.6",
         "@uiw/codemirror-theme-monokai": "^4.23.6",
+        "@uiw/codemirror-theme-xcode": "^4.23.6",
         "@uiw/codemirror-themes": "^4.23.5",
         "@uiw/react-codemirror": "^4.23.5",
         "@welldone-software/why-did-you-render": "^6.1.1",

diff --git a/querybook/webapp/components/CodeMirrorTooltip/FunctionDocumentationTooltip.tsx b/querybook/webapp/components/CodeMirrorTooltip/FunctionDocumentationTooltip.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { IFunctionDescription } from 'const/metastore';
@@ -59,7 +59,7 @@ export const FunctionDocumentationTooltipByName: React.FunctionComponent<{
         if (language) {
             dispatch(fetchFunctionDocumentationIfNeeded(language));
         }
-    }, [language]);
+    }, [dispatch, language]);
 
     const functionDefs = functionDocumentationByNameByLanguage?.[language];
     const functionNameLower = (functionName || '').toLowerCase();

diff --git a/querybook/webapp/components/QueryEditor/QueryEditor.tsx b/querybook/webapp/components/QueryEditor/QueryEditor.tsx
@@ -1,6 +1,6 @@
 import { acceptCompletion, startCompletion } from '@codemirror/autocomplete';
+import { indentService } from '@codemirror/language';
 import { EditorView } from '@codemirror/view';
-import { monokai } from '@uiw/codemirror-theme-monokai';
 import CodeMirror, { ReactCodeMirrorRef } from '@uiw/react-codemirror';
 import clsx from 'clsx';
 import React, {
@@ -35,6 +35,8 @@ import { TableToken } from 'lib/sql-helper/sql-lexer';
 import { navigateWithinEnv } from 'lib/utils/query-string';
 import { IconButton } from 'ui/Button/IconButton';
 
+import { CustomMonokaiDarkTheme, CustomXcodeTheme } from './themes';
+
 import './QueryEditor.scss';
 
 export interface IQueryEditorProps {
@@ -292,22 +294,28 @@ export const QueryEditor: React.FC<
         const { extension: hoverTooltipExtension, getTableAtCursor } =
             useHoverTooltipExtension({
                 codeAnalysisRef,
-                metastoreId: 1,
+                metastoreId,
+                language,
             });
 
-        const openTableModalCommand = useCallback((editorView: EditorView) => {
-            const table = getTableAtCursor(editorView);
-            if (table) {
-                getTableByName(table.schema, table.name).then((tableInfo) => {
-                    if (tableInfo) {
-                        navigateWithinEnv(`/table/${tableInfo.id}/`, {
-                            isModal: true,
-                        });
-                    }
-                });
-            }
-            return true;
-        }, []);
+        const openTableModalCommand = useCallback(
+            (editorView: EditorView) => {
+                const table = getTableAtCursor(editorView);
+                if (table) {
+                    getTableByName(table.schema, table.name).then(
+                        (tableInfo) => {
+                            if (tableInfo) {
+                                navigateWithinEnv(`/table/${tableInfo.id}/`, {
+                                    isModal: true,
+                                });
+                            }
+                        }
+                    );
+                }
+                return true;
+            },
+            [getTableAtCursor, getTableByName]
+        );
 
         const keyBindings = useMemo(
             () => [
@@ -359,7 +367,7 @@ export const QueryEditor: React.FC<
 
         const extensions = useMemo(
             () => [
-                mixedSQL(),
+                mixedSQL(language),
                 keyMapExtention,
                 statusBarExtension,
                 eventsExtension,
@@ -370,8 +378,10 @@ export const QueryEditor: React.FC<
                 searchExtension,
                 selectionExtension,
                 sqlCompleteExtension,
+                indentService.of((context, pos) => context.lineIndent(pos - 1)),
             ],
             [
+                language,
                 keyMapExtention,
                 statusBarExtension,
                 eventsExtension,
@@ -432,7 +442,11 @@ export const QueryEditor: React.FC<
                 {floatButtons}
                 <CodeMirror
                     ref={editorRef}
-                    theme={theme === 'dark' ? monokai : 'light'}
+                    theme={
+                        theme === 'dark'
+                            ? CustomMonokaiDarkTheme
+                            : CustomXcodeTheme
+                    }
                     className="ReactCodeMirror"
                     value={value}
                     height="100%"

diff --git a/querybook/webapp/components/QueryEditor/themes.ts b/querybook/webapp/components/QueryEditor/themes.ts
@@ -0,0 +1,23 @@
+import { monokaiInit } from '@uiw/codemirror-theme-monokai';
+import { tags as t } from '@lezer/highlight';
+import { xcodeLightInit } from '@uiw/codemirror-theme-xcode';
+
+export const CustomMonokaiDarkTheme = monokaiInit({
+    settings: {},
+    styles: [
+        { tag: [t.name], color: 'var(--text-dark)' },
+        { tag: [t.constant(t.name), t.standard(t.name)], color: '#FD971F' },
+    ],
+});
+
+export const CustomXcodeTheme = xcodeLightInit({
+    settings: {
+        background: 'var(--bg-color)',
+        gutterBackground: 'var(--bg-color)',
+    },
+    styles: [
+        { tag: [t.special(t.propertyName)], color: '#005cc5' },
+        { tag: [t.constant(t.name), t.standard(t.name)], color: '#D23423' },
+        { tag: [t.number], color: '#098658' },
+    ],
+});
diff --git a/querybook/webapp/hooks/queryEditor/extensions/useHoverTooltipExtension.tsx b/querybook/webapp/hooks/queryEditor/extensions/useHoverTooltipExtension.tsx
@@ -16,9 +16,11 @@ import { reduxStore } from 'redux/store';
 export const useHoverTooltipExtension = ({
     codeAnalysisRef,
     metastoreId,
+    language,
 }: {
     codeAnalysisRef: MutableRefObject<ICodeAnalysis>;
     metastoreId: number;
+    language: string;
 }) => {
     const getTableAtV5Position = useCallback(
         (codeAnalysis, v5Pos: { line: number; ch: number }) => {
@@ -57,7 +59,7 @@ export const useHoverTooltipExtension = ({
             const v5Pos = offsetToPos(editorView, selection.from);
             return getTableAtV5Position(codeAnalysisRef.current, v5Pos);
         },
-        [getTableAtV5Position]
+        [codeAnalysisRef, getTableAtV5Position]
     );
 
     const getHoverTooltips: HoverTooltipSource = useCallback(
@@ -80,7 +82,7 @@ export const useHoverTooltipExtension = ({
             } else if (nextChar === '(') {
                 tooltipComponent = (
                     <FunctionDocumentationTooltipByName
-                        language="sqlite"
+                        language={language}
                         functionName={token.text}
                     />
                 );
@@ -107,7 +109,7 @@ export const useHoverTooltipExtension = ({
                 },
             };
         },
-        []
+        [codeAnalysisRef, getTableAtV5Position, language, metastoreId]
     );
 
     const extension = useMemo(