@@ -6,22 +6,32 @@ import React, {
6
6
useRef ,
7
7
useState ,
8
8
} from "react" ;
9
- import * as monaco from "monaco-editor/esm/vs/editor/editor.api" ;
9
+ import * as monaco from "monaco-editor" ;
10
+ import { initializeTokensProvider } from "@next-shared/monaco-textmate" ;
11
+ import "@next-shared/monaco-textmate/workers.js" ;
12
+ import tmVsLight from "@next-shared/monaco-textmate/themes/light-modern.json" ;
13
+ import tmVsDark from "@next-shared/monaco-textmate/themes/dark-modern.json" ;
10
14
import {
11
15
EDITOR_SCROLLBAR_SIZE ,
12
16
EDITOR_PADDING_TOP ,
13
17
EXAMPLE_CODE_LINE_HEIGHT ,
14
18
} from "@site/src/constants" ;
15
19
import clsx from "clsx" ;
16
20
import type { FileInfo } from "@site/src/interfaces" ;
17
- import { register as registerJavaScript } from "@next-core/monaco-contributions/javascript" ;
18
- import { register as registerTypeScript } from "@next-core/monaco-contributions/typescript" ;
19
- import { register as registerYaml } from "@next-core/monaco-contributions/yaml" ;
20
21
import styles from "./styles.module.css" ;
21
22
22
- registerJavaScript ( monaco ) ;
23
- registerTypeScript ( monaco ) ;
24
- registerYaml ( monaco ) ;
23
+ monaco . editor . defineTheme (
24
+ "tm-vs-light" ,
25
+ tmVsLight as monaco . editor . IStandaloneThemeData
26
+ ) ;
27
+ monaco . editor . defineTheme (
28
+ "tm-vs-dark" ,
29
+ tmVsDark as monaco . editor . IStandaloneThemeData
30
+ ) ;
31
+
32
+ initializeTokensProvider ( "javascript" ) ;
33
+ initializeTokensProvider ( "typescript" ) ;
34
+ initializeTokensProvider ( "brick_next_yaml" ) ;
25
35
26
36
export interface MonacoEditorWorkspaceProps {
27
37
files : FileInfo [ ] ;
@@ -56,6 +66,13 @@ monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
56
66
lib : [ ] ,
57
67
} ) ;
58
68
69
+ function convertLanguage ( lang : string ) {
70
+ if ( lang === "yaml" ) {
71
+ return "brick_next_yaml" ;
72
+ }
73
+ return lang ;
74
+ }
75
+
59
76
export default forwardRef < MonacoEditorWorkspaceRef , MonacoEditorWorkspaceProps > (
60
77
function MonacoEditorWorkspace (
61
78
{ files, currentFile, className, theme, typingEffectReady, onChange } ,
@@ -79,21 +96,20 @@ export default forwardRef<MonacoEditorWorkspaceRef, MonacoEditorWorkspaceProps>(
79
96
const file = files . find ( ( f ) => f . name === currentFile ) ;
80
97
model = monaco . editor . createModel (
81
98
file . codeSlides ?. [ 0 ] ?? file . code ,
82
- file . lang ?? "yaml" ,
99
+ convertLanguage ( file . lang ?? "yaml" ) ,
83
100
monaco . Uri . file ( `${ workspace } /${ file . name } ` )
84
101
) ;
85
102
modelsMap . set ( currentFile , model ) ;
86
103
}
87
104
return model ;
88
105
} , [ currentFile , modelsMap , files , workspace ] ) ;
89
106
107
+ const convertedTheme = theme === "vs-dark" ? "tm-vs-dark" : "tm-vs-light" ;
90
108
useEffect ( ( ) => {
91
- if ( theme ) {
92
- // Currently theme is configured globally.
93
- // See https://github.com/microsoft/monaco-editor/issues/338
94
- monaco . editor . setTheme ( theme ) ;
95
- }
96
- } , [ theme ] ) ;
109
+ // Currently theme is configured globally.
110
+ // See https://github.com/microsoft/monaco-editor/issues/338
111
+ monaco . editor . setTheme ( convertedTheme ) ;
112
+ } , [ convertedTheme ] ) ;
97
113
98
114
useEffect ( ( ) => {
99
115
if ( editorRef . current ) {
0 commit comments