fix(editor): restore syntax highlighting for .tsx and .jsx files (#878)

This commit is contained in:
Neil 2026-04-20 19:22:31 -07:00 committed by GitHub
parent ad9deee55b
commit 3bbe9ed712
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 21 additions and 4 deletions

View file

@ -8,10 +8,14 @@ function extname(filePath: string): string {
}
const EXT_TO_LANGUAGE: Record<string, string> = {
// Why: Monaco's built-in language registry maps .tsx/.cts/.mts onto the
// 'typescript' language id and .jsx/.mjs/.cjs onto 'javascript' — there is
// no separate 'typescriptreact'/'javascriptreact' id. Returning the base id
// is what gives .tsx/.jsx files syntax highlighting in the editor.
'.ts': 'typescript',
'.tsx': 'typescriptreact',
'.tsx': 'typescript',
'.js': 'javascript',
'.jsx': 'javascriptreact',
'.jsx': 'javascript',
'.mjs': 'javascript',
'.cjs': 'javascript',
'.json': 'json',

View file

@ -22,9 +22,7 @@ globalThis.MonacoEnvironment = {
case 'razor':
return new htmlWorker()
case 'typescript':
case 'typescriptreact':
case 'javascript':
case 'javascriptreact':
return new tsWorker()
default:
return new editorWorker()
@ -45,6 +43,21 @@ monacoTS.javascriptDefaults.setDiagnosticsOptions({
diagnosticCodesToIgnore: [2307, 2792]
})
// Why: .tsx/.jsx files share the base 'typescript'/'javascript' language ids
// in Monaco's registry (there is no separate 'typescriptreact' id), so the
// compiler options on those defaults apply to both. Without jsx enabled, the
// worker raises TS17004 "Cannot use JSX unless the '--jsx' flag is provided"
// on every JSX tag. Preserve mode is enough to allow parsing without forcing
// an emit transform (we never emit — this is a read-only language service).
monacoTS.typescriptDefaults.setCompilerOptions({
...monacoTS.typescriptDefaults.getCompilerOptions(),
jsx: monacoTS.JsxEmit.Preserve
})
monacoTS.javascriptDefaults.setCompilerOptions({
...monacoTS.javascriptDefaults.getCompilerOptions(),
jsx: monacoTS.JsxEmit.Preserve
})
// Configure Monaco to use the locally bundled editor instead of CDN
loader.config({ monaco })