update code box

Signed-off-by: ryjiang <jiangruiyi@gmail.com>

client/package.json

@@ -14,6 +14,7 @@
     "@codemirror/state": "^6.4.1",
     "@codemirror/view": "^6.28.6",
     "@date-io/dayjs": "1.x",
+    "@ddietr/codemirror-themes": "^1.4.2",
     "@emotion/react": "^11.13.0",
     "@emotion/styled": "^11.13.0",
     "@json2csv/plainjs": "^7.0.3",

client/src/components/code/CodeBlock.tsx

@@ -1,8 +1,8 @@
-import { Theme } from '@mui/material';
+import { Theme, useTheme } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import CopyButton from '../advancedSearch/CopyButton';
 import SyntaxHighlighter from 'react-syntax-highlighter';
-import { githubGist } from 'react-syntax-highlighter/dist/esm/styles/hljs';
+import { vs2015, github } from 'react-syntax-highlighter/dist/esm/styles/hljs';
 import { FC } from 'react';
 import { CodeBlockProps } from './Types';
 import { makeStyles } from '@mui/styles';
@@ -10,8 +10,7 @@ import { makeStyles } from '@mui/styles';
 const getStyles = makeStyles((theme: Theme) => ({
   wrapper: {
     position: 'relative',
-    backgroundColor: '#fff',
-    color: '#454545',
+    backgroundColor: theme.palette.background.paper,
   },
   copy: {
     position: 'absolute',
@@ -24,11 +23,7 @@ const getStyles = makeStyles((theme: Theme) => ({
 }));
 
 const CodeStyle = {
-  backgroundColor: '#f5f5f5',
-  padding: 0,
-  margin: 0,
-  marginRight: 32,
-  fontSize: 14,
+  fontSize: 12,
 };
 
 const CodeBlock: FC<CodeBlockProps> = ({
@@ -36,6 +31,7 @@ const CodeBlock: FC<CodeBlockProps> = ({
   language,
   wrapperClass = '',
 }) => {
+  const theme = useTheme();
   const classes = getStyles();
 
   const { t: commonTrans } = useTranslation();
@@ -50,7 +46,7 @@ const CodeBlock: FC<CodeBlockProps> = ({
       />
       <SyntaxHighlighter
         language={language}
-        style={githubGist}
+        style={theme.palette.mode === 'dark' ? vs2015 : github}
         customStyle={CodeStyle}
         showLineNumbers={true}
       >

client/src/pages/databases/collections/search/Styles.ts

@@ -116,7 +116,7 @@ export const getQueryStyles = makeStyles((theme: Theme) => ({
     height: '124px',
     margin: '0 0 8px 0',
     overflow: 'auto',
-    backgroundColor: '#f4f4f4',
+    backgroundColor: theme.palette.background.default,
     cursor: 'text',
     boxShadow: '0 1px 0 transparent',
     transition: `box-shadow 0.3s ease`,

client/src/pages/databases/collections/search/VectorInputBox.tsx

@@ -1,5 +1,5 @@
 import { useRef, useEffect, useState } from 'react';
-import { EditorState } from '@codemirror/state';
+import { EditorState, Compartment } from '@codemirror/state';
 import { EditorView, keymap } from '@codemirror/view';
 import { insertTab } from '@codemirror/commands';
 import { indentUnit } from '@codemirror/language';
@@ -11,6 +11,9 @@ import { DataTypeStringEnum } from '@/consts';
 import { SearchSingleParams } from '../../types';
 import { isSparseVector, transformObjStrToJSONStr } from '@/utils';
 import { getQueryStyles } from './Styles';
+import { useTheme } from '@mui/material';
+import { githubLight } from '@ddietr/codemirror-themes/github-light';
+import { githubDark } from '@ddietr/codemirror-themes/github-dark';
 
 const floatVectorValidator = (text: string, field: FieldObject) => {
   try {
@@ -106,6 +109,8 @@ export type VectorInputBoxProps = {
 };
 
 export default function VectorInputBox(props: VectorInputBoxProps) {
+  const theme = useTheme();
+
   // props
   const { searchParams, onChange } = props;
   const { field, data } = searchParams;
@@ -123,6 +128,8 @@ export default function VectorInputBox(props: VectorInputBoxProps) {
   const dataRef = useRef(data);
   const fieldRef = useRef(field);
 
+  const themeCompartment = new Compartment();
+
   // get validator
   const validator = Validator[field.data_type as keyof typeof Validator];
 
@@ -197,30 +204,12 @@ export default function VectorInputBox(props: VectorInputBoxProps) {
               },
             },
             '.cm-content': {
-              color: '#484D52',
               fontSize: '12px',
+              minHeight: '124px',
             },
             '.cm-gutters': {
               display: 'none',
             },
-            '.cm-activeLine': {
-              backgroundColor: '#f4f4f4',
-            },
-            '.cm-tooltip-lint': {
-              width: '80%',
-            },
-          }),
-          EditorView.baseTheme({
-            '&light .cm-selectionBackground': {
-              backgroundColor: '#f4f4f4',
-            },
-            '&light.cm-focused .cm-selectionBackground': {
-              backgroundColor: '#f4f4f4',
-            },
-            '&light .cm-activeLineGutter': {
-              backgroundColor: 'transparent',
-              fontWeight: 'bold',
-            },
           }),
           EditorView.lineWrapping,
           EditorView.updateListener.of(update => {
@@ -252,6 +241,17 @@ export default function VectorInputBox(props: VectorInputBoxProps) {
     }
   }, [JSON.stringify(field)]);
 
+  useEffect(() => {
+    // dispatch dark mode change to editor
+    if (editor.current) {
+      editor.current.dispatch({
+        effects: themeCompartment.reconfigure(
+          themeCompartment.of(theme.palette.mode === 'light' ? githubLight : githubDark)
+        ),
+      });
+    }
+  }, [theme.palette.mode]);
+
   return (
     <div
       className={`${classes.vectorInputBox} ${isFocused ? 'focused' : ''}`}

client/src/pages/dialogs/CodeDialog.tsx

@@ -1,5 +1,5 @@
 import { FC, useContext, useState } from 'react';
-import { Theme } from '@mui/material';
+import { Theme, SelectChangeEvent } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { rootContext } from '@/context';
 import DialogTemplate from '@/components/customDialog/DialogTemplate';
@@ -9,11 +9,9 @@ import { makeStyles } from '@mui/styles';
 
 const useStyles = makeStyles((theme: Theme) => ({
   code: {
-    backgroundColor: '#f5f5f5',
-    padding: 8,
-    width: '40vw',
-    minHeight: '40vh',
-    maxHeight: '40vh',
+    backgroundColor: theme.palette.background.default,
+    width: 800,
+    height: '40vh',
     overflow: 'auto',
   },
 }));
@@ -53,7 +51,7 @@ const CodeDialog: FC<CodeDialogProps> = props => {
           <CustomSelector
             label="Language"
             value={langauge}
-            onChange={(event: React.ChangeEvent<{ value: unknown }>) => {
+            onChange={(event: SelectChangeEvent<unknown>) => {
               setLanguage(event.target.value as string);
             }}
             options={options}

client/src/pages/dialogs/EditEntityDialog.tsx

@@ -1,6 +1,6 @@
 import { FC, useContext, useEffect, useRef, useState } from 'react';
-import { Theme } from '@mui/material';
-import { EditorState } from '@codemirror/state';
+import { Theme, useTheme } from '@mui/material';
+import { EditorState, Compartment } from '@codemirror/state';
 import { EditorView, keymap, ViewUpdate } from '@codemirror/view';
 import { insertTab } from '@codemirror/commands';
 import { indentUnit } from '@codemirror/language';
@@ -14,11 +14,12 @@ import { CollectionFullObject } from '@server/types';
 import { DataService } from '@/http';
 import { DYNAMIC_FIELD } from '@/consts';
 import { makeStyles } from '@mui/styles';
+import { githubLight } from '@ddietr/codemirror-themes/github-light';
+import { githubDark } from '@ddietr/codemirror-themes/github-dark';
 
 const useStyles = makeStyles((theme: Theme) => ({
   code: {
-    backgroundColor: '#f5f5f5',
-    padding: 4,
+    border: `1px solid ${theme.palette.divider}`,
     overflow: 'auto',
   },
   tip: {
@@ -37,6 +38,9 @@ type EditEntityDialogProps = {
 const linterExtension = linter(jsonParseLinter());
 
 const EditEntityDialog: FC<EditEntityDialogProps> = props => {
+  const theme = useTheme();
+  const themeCompartment = new Compartment();
+
   // props
   const { data, collection } = props;
   // UI states
@@ -87,13 +91,15 @@ const EditEntityDialog: FC<EditEntityDialogProps> = props => {
               },
             },
             '.cm-content': {
-              color: '#484D52',
               fontSize: '12px',
             },
             '.cm-tooltip-lint': {
               width: '80%',
             },
           }),
+          themeCompartment.of(
+            theme.palette.mode === 'light' ? githubLight : githubDark
+          ),
           EditorView.lineWrapping,
           EditorView.updateListener.of((viewUpdate: ViewUpdate) => {
             if (viewUpdate.docChanged) {

client/yarn.lock

@@ -333,6 +333,16 @@
   dependencies:
     "@date-io/core" "^1.3.13"
 
+"@ddietr/codemirror-themes@^1.4.2":
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/@ddietr/codemirror-themes/-/codemirror-themes-1.4.2.tgz#5f3ca219ec3b9889ef6d7b6e19860483f4fd6616"
+  integrity sha512-8U3H3lmtmSWLD5VRlt7jf2HW62URnwgPxjZZDYjBX5EtMpgZ2QnqiIYrNzdQPPjJngT9D43gls3+JlekCBmrfw==
+  dependencies:
+    "@codemirror/language" "^6.0.0"
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.0.0"
+    "@lezer/highlight" "^1.0.0"
+
 "@emotion/babel-plugin@^11.12.0":
   version "11.12.0"
   resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.12.0.tgz#7b43debb250c313101b3f885eba634f1d723fcc2"