Feat(CodeEditor): Support jsx highlight

Chang theme of monaco. Support jsx highlight.

src/components/Playground/CodeEditor/Editor/hooks.ts

@@ -1,7 +1,6 @@
 import { editor, IPosition, Selection } from 'monaco-editor'
 import ScrollType = editor.ScrollType
 import { Monaco } from '@monaco-editor/react'
-import { getWorker, MonacoJsxSyntaxHighlight } from 'monaco-jsx-syntax-highlight'
 import { createATA, TypeHelper } from '@/components/Playground/CodeEditor/Editor/ata'
 
 export const useEditor = () => {
@@ -28,18 +27,6 @@ export const useEditor = () => {
         }
     }
 
-    const loadJsxSyntaxHighlight = (editor: editor.IStandaloneCodeEditor, monaco: Monaco) => {
-        const monacoJsxSyntaxHighlight = new MonacoJsxSyntaxHighlight(getWorker(), monaco)
-        const { highlighter, dispose } = monacoJsxSyntaxHighlight.highlighterBuilder({ editor })
-
-        editor.onDidChangeModelContent(() => {
-            highlighter()
-        })
-        highlighter()
-
-        return { highlighter, dispose }
-    }
-
     const autoLoadExtraLib = async (
         editor: editor.IStandaloneCodeEditor,
         monaco: Monaco,
@@ -68,7 +55,6 @@ export const useEditor = () => {
 
     return {
         doOpenEditor,
-        loadJsxSyntaxHighlight,
         autoLoadExtraLib
     }
 }

src/components/Playground/CodeEditor/Editor/index.style.ts

@@ -13,27 +13,7 @@ const rotate = keyframes`
 export default createStyles(() => ({
     root: {
         position: 'relative',
-        height: 0,
-
-        '.monaco-editor-light': {
-            height: '100%',
-            overflow: 'hidden',
-            backgroundColor: 'var(--border)',
-            '.jsx-tag-angle-bracket': { color: '#800000' },
-            '.jsx-text': { color: '#000' },
-            '.jsx-tag-name': { color: '#800000' },
-            '.jsx-tag-attribute-key': { color: '#f00' }
-        },
-
-        '.monaco-editor-dark': {
-            height: '100%',
-            overflow: 'hidden',
-            backgroundColor: 'var(--border)',
-            '.jsx-tag-angle-bracket': { color: '#808080' },
-            '.jsx-text': { color: '#d4d4d4' },
-            '.jsx-tag-name': { color: '#569cd6' },
-            '.jsx-tag-attribute-key': { color: '#9cdcfe' }
-        }
+        height: 0
     },
 
     loading: {

src/components/Playground/CodeEditor/Editor/index.tsx

@@ -1,5 +1,7 @@
 import { editor, Selection } from 'monaco-editor'
 import MonacoEditor, { Monaco } from '@monaco-editor/react'
+import { shikiToMonaco } from '@shikijs/monaco'
+import { createHighlighter } from 'shiki'
 import useStyles from '@/components/Playground/CodeEditor/Editor/index.style'
 import '@/components/Playground/CodeEditor/Editor/loader'
 import { IEditorOptions, IFiles, ITsconfig } from '@/components/Playground/shared'
@@ -38,18 +40,19 @@ const Editor = ({
     const { styles } = useStyles()
     const editorRef = useRef<editor.IStandaloneCodeEditor>()
     const monacoRef = useRef<Monaco>()
-    const { doOpenEditor, loadJsxSyntaxHighlight, autoLoadExtraLib } = useEditor()
-    const jsxSyntaxHighlightRef = useRef<{
-        highlighter: (code?: string | undefined) => void
-        dispose: () => void
-    }>({
-        highlighter: () => undefined,
-        dispose: () => undefined
-    })
+    const { doOpenEditor, autoLoadExtraLib } = useEditor()
     const { total, finished, onWatch } = useTypesProgress()
     const file = files[selectedFileName] || { name: 'Untitled' }
 
     const handleOnEditorWillMount = (monaco: Monaco) => {
+        createHighlighter({
+            themes: ['vitesse-light', 'vitesse-dark'],
+            langs: ['javascript', 'jsx', 'typescript', 'tsx', 'css', 'json', 'xml']
+        }).then((highlighter) => {
+            shikiToMonaco(highlighter, monaco)
+            monaco.editor.setTheme(isDarkMode ? 'vitesse-dark' : 'vitesse-light')
+        })
+
         monaco.languages.json.jsonDefaults.setDiagnosticsOptions(tsconfigJsonDiagnosticsOptions)
         tsconfig &&
             monaco.languages.typescript.typescriptDefaults.setCompilerOptions(
@@ -91,7 +94,6 @@ const Editor = ({
             }
         }
 
-        jsxSyntaxHighlightRef.current = loadJsxSyntaxHighlight(editor, monaco)
         extraLibs.forEach((item) =>
             monaco.languages.typescript.typescriptDefaults.addExtraLib(item.content, item.path)
         )
@@ -99,9 +101,12 @@ const Editor = ({
         void autoLoadExtraLib(editor, monaco, file.value, onWatch)
     }
 
+    useEffect(() => {
+        monacoRef.current?.editor.setTheme(isDarkMode ? 'vitesse-dark' : 'vitesse-light')
+    }, [isDarkMode])
+
     useEffect(() => {
         editorRef.current?.focus()
-        jsxSyntaxHighlightRef?.current?.highlighter?.()
     }, [file.name])
 
     useEffect(() => {
@@ -115,9 +120,8 @@ const Editor = ({
         <>
             <div className={styles.root}>
                 <MonacoEditor
-                    theme={isDarkMode ? 'vs-dark' : 'light'}
+                    theme={isDarkMode ? 'vitesse-dark' : 'vitesse-light'}
                     path={file.name}
-                    className={`monaco-editor-${isDarkMode ? 'dark' : 'light'}`}
                     language={file.language}
                     value={file.value}
                     onChange={onChange}