@@ -6,22 +6,32 @@ import React, {
66 useRef ,
77 useState ,
88} 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" ;
1014import {
1115 EDITOR_SCROLLBAR_SIZE ,
1216 EDITOR_PADDING_TOP ,
1317 EXAMPLE_CODE_LINE_HEIGHT ,
1418} from "@site/src/constants" ;
1519import clsx from "clsx" ;
1620import 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" ;
2021import styles from "./styles.module.css" ;
2122
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" ) ;
2535
2636export interface MonacoEditorWorkspaceProps {
2737 files : FileInfo [ ] ;
@@ -56,6 +66,13 @@ monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
5666 lib : [ ] ,
5767} ) ;
5868
69+ function convertLanguage ( lang : string ) {
70+ if ( lang === "yaml" ) {
71+ return "brick_next_yaml" ;
72+ }
73+ return lang ;
74+ }
75+
5976export default forwardRef < MonacoEditorWorkspaceRef , MonacoEditorWorkspaceProps > (
6077 function MonacoEditorWorkspace (
6178 { files, currentFile, className, theme, typingEffectReady, onChange } ,
@@ -79,21 +96,20 @@ export default forwardRef<MonacoEditorWorkspaceRef, MonacoEditorWorkspaceProps>(
7996 const file = files . find ( ( f ) => f . name === currentFile ) ;
8097 model = monaco . editor . createModel (
8198 file . codeSlides ?. [ 0 ] ?? file . code ,
82- file . lang ?? "yaml" ,
99+ convertLanguage ( file . lang ?? "yaml" ) ,
83100 monaco . Uri . file ( `${ workspace } /${ file . name } ` )
84101 ) ;
85102 modelsMap . set ( currentFile , model ) ;
86103 }
87104 return model ;
88105 } , [ currentFile , modelsMap , files , workspace ] ) ;
89106
107+ const convertedTheme = theme === "vs-dark" ? "tm-vs-dark" : "tm-vs-light" ;
90108 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 ] ) ;
97113
98114 useEffect ( ( ) => {
99115 if ( editorRef . current ) {
0 commit comments