From 3bbe9ed712bb4c583936f54ab9e0e8b864166312 Mon Sep 17 00:00:00 2001
From: Neil <4138956+nwparker@users.noreply.github.com>
Date: Mon, 20 Apr 2026 19:22:31 -0700
Subject: [PATCH] fix(editor): restore syntax highlighting for .tsx and .jsx
 files (#878)

---
 src/renderer/src/lib/language-detect.ts |  8 ++++++--
 src/renderer/src/lib/monaco-setup.ts    | 17 +++++++++++++++--
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/renderer/src/lib/language-detect.ts b/src/renderer/src/lib/language-detect.ts
index 543b2f4b..18da7b31 100644
--- a/src/renderer/src/lib/language-detect.ts
+++ b/src/renderer/src/lib/language-detect.ts
@@ -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',
diff --git a/src/renderer/src/lib/monaco-setup.ts b/src/renderer/src/lib/monaco-setup.ts
index 35ab680e..76110870 100644
--- a/src/renderer/src/lib/monaco-setup.ts
+++ b/src/renderer/src/lib/monaco-setup.ts
@@ -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 })