Feat(CodeEditor): Support jsx highlight

Chang theme of monaco. Support jsx highlight.

src/components/Playground/Output/Transform/index.tsx

@@ -1,17 +1,17 @@
 import MonacoEditor from '@monaco-editor/react'
 import { Loader } from 'esbuild-wasm'
 import useStyles from '@/components/Playground/Output/Transform/index.style'
-import { IFile, ITheme } from '@/components/Playground/shared'
+import { IFile } from '@/components/Playground/shared'
 import { cssToJsFromFile, jsonToJsFromFile } from '@/components/Playground/files'
 import Compiler from '@/components/Playground/compiler'
 import { MonacoEditorConfig } from '@/components/Playground/CodeEditor/Editor/monacoConfig'
 
 interface OutputProps {
+    isDarkMode?: boolean
     file: IFile
-    theme?: ITheme
 }
 
-const Transform = ({ file, theme }: OutputProps) => {
+const Transform = ({ isDarkMode, file }: OutputProps) => {
     const { styles } = useStyles()
     const [compiledCode, setCompiledCode] = useState('')
     const [errorMsg, setErrorMsg] = useState('')
@@ -60,7 +60,7 @@ const Transform = ({ file, theme }: OutputProps) => {
     return (
         <div className={styles.root}>
             <MonacoEditor
-                theme={theme}
+                theme={isDarkMode ? 'vitesse-dark' : 'vitesse-light'}
                 language={'javascript'}
                 value={compiledCode}
                 options={{ ...MonacoEditorConfig, readOnly: true }}

src/components/Playground/Output/index.tsx

@@ -5,6 +5,7 @@ import Transform from '@/components/Playground/Output/Transform'
 import Preview from '@/components/Playground/Output/Preview'
 
 interface OutputProps {
+    isDarkMode?: boolean
     files: IFiles
     selectedFileName: string
     importMap: IImportMap
@@ -15,6 +16,7 @@ interface OutputProps {
 }
 
 const Output = ({
+    isDarkMode,
     files,
     selectedFileName,
     importMap,
@@ -47,7 +49,9 @@ const Output = ({
                     mobileMode={mobileMode}
                 />
             )}
-            {selectedTab === 'Transform' && <Transform file={files[selectedFileName]} />}
+            {selectedTab === 'Transform' && (
+                <Transform isDarkMode={isDarkMode} file={files[selectedFileName]} />
+            )}
         </FlexBox>
     )
 }