Mirrors
/
gitea
mirror of https://github.com/go-gitea/gitea.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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"
/>
This commit is contained in:
silverwind 2024-12-14 04:10:20 +01:00 committed by GitHub
parent 2ee4aa8998
commit bed563e574
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 11 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
web_src/js/features/codeeditor.ts
View File

@ -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,