From bed563e57490024e43db46ea2ca48094cd4fa7d2 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sat, 14 Dec 2024 04:10:20 +0100
Subject: [PATCH] Improve JSX/TSX support in code editor (#32833)

Two tweaks to Monaco to improve JSX/TSX support.

1. Certain language features like JSX/TSX only work when passing `uri`
(containing the filename), do this.
2. Set the `jsx` compiler option to avoid error annotations

Before:
<img width="441" alt="Screenshot 2024-12-13 at 15 11 33"
src="https://github.com/user-attachments/assets/dac245a7-e80f-4249-8e09-13124b03d12a"
/>

After:
<img width="441" alt="Screenshot 2024-12-13 at 15 10 46"
src="https://github.com/user-attachments/assets/726ad712-d116-438d-88da-bc40534b6860"
/>
---
 web_src/js/features/codeeditor.ts | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/web_src/js/features/codeeditor.ts b/web_src/js/features/codeeditor.ts
index 62bfccd139..af9830a4db 100644
--- a/web_src/js/features/codeeditor.ts
+++ b/web_src/js/features/codeeditor.ts
@@ -58,6 +58,12 @@ function initLanguages(monaco: Monaco): void {
     for (const extension of extensions || []) {
       languagesByExt[extension] = id;
     }
+    if (id === 'typescript') {
+      monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+        // this is needed to suppress error annotations in tsx regarding missing --jsx flag.
+        jsx: monaco.languages.typescript.JsxEmit.Preserve,
+      });
+    }
   }
 }
 
@@ -72,6 +78,8 @@ function updateEditor(monaco: Monaco, editor: IStandaloneCodeEditor, filename: s
   const language = model.getLanguageId();
   const newLanguage = getLanguage(filename);
   if (language !== newLanguage) monaco.editor.setModelLanguage(model, newLanguage);
+  // TODO: Need to update the model uri with the new filename, but there is no easy way currently, see
+  // https://github.com/microsoft/monaco-editor/discussions/3751
 }
 
 // export editor for customization - https://github.com/go-gitea/gitea/issues/10409
@@ -135,10 +143,11 @@ export async function createMonaco(textarea: HTMLTextAreaElement, filename: stri
   });
   updateTheme(monaco);
 
+  const model = monaco.editor.createModel(textarea.value, language, monaco.Uri.file(filename));
+
   const editor = monaco.editor.create(container, {
-    value: textarea.value,
+    model,
     theme: 'gitea',
-    language,
     ...other,
   });
 
@@ -146,8 +155,6 @@ export async function createMonaco(textarea: HTMLTextAreaElement, filename: stri
     {keybinding: monaco.KeyCode.Enter, command: null}, // disable enter from accepting code completion
   ]);
 
-  const model = editor.getModel();
-  if (!model) throw new Error('Unable to get editor model');
   model.onDidChangeContent(() => {
     textarea.value = editor.getValue({
       preserveBOM: true,