From e7b0fdb0ff5b2b9cf6e9623f7e801d826b1ffdcb Mon Sep 17 00:00:00 2001 From: silverwind Date: Fri, 13 Dec 2024 15:17:09 +0100 Subject: [PATCH 1/3] Improve jsx/tsx support in code editor --- web_src/js/features/codeeditor.ts | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/web_src/js/features/codeeditor.ts b/web_src/js/features/codeeditor.ts index 62bfccd1393b2..3c13c93766c4a 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 supporess error annotations in tsx files 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,7 +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({ From 1b7fe97e49490263e7078e3f44ef345c72b6f541 Mon Sep 17 00:00:00 2001 From: silverwind Date: Fri, 13 Dec 2024 15:21:50 +0100 Subject: [PATCH 2/3] remove unnecessary check --- web_src/js/features/codeeditor.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/web_src/js/features/codeeditor.ts b/web_src/js/features/codeeditor.ts index 3c13c93766c4a..77c2237814a3f 100644 --- a/web_src/js/features/codeeditor.ts +++ b/web_src/js/features/codeeditor.ts @@ -155,7 +155,6 @@ export async function createMonaco(textarea: HTMLTextAreaElement, filename: stri {keybinding: monaco.KeyCode.Enter, command: null}, // disable enter from accepting code completion ]); - if (!model) throw new Error('Unable to get editor model'); model.onDidChangeContent(() => { textarea.value = editor.getValue({ preserveBOM: true, From 7817a457c69e28beb1ee9369d653f552347f82d0 Mon Sep 17 00:00:00 2001 From: silverwind Date: Fri, 13 Dec 2024 15:29:29 +0100 Subject: [PATCH 3/3] reword --- web_src/js/features/codeeditor.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/js/features/codeeditor.ts b/web_src/js/features/codeeditor.ts index 77c2237814a3f..af9830a4db232 100644 --- a/web_src/js/features/codeeditor.ts +++ b/web_src/js/features/codeeditor.ts @@ -60,7 +60,7 @@ function initLanguages(monaco: Monaco): void { } if (id === 'typescript') { monaco.languages.typescript.typescriptDefaults.setCompilerOptions({ - // this is needed to supporess error annotations in tsx files regarding missing --jsx flag. + // this is needed to suppress error annotations in tsx regarding missing --jsx flag. jsx: monaco.languages.typescript.JsxEmit.Preserve, }); }