Skip to content

Commit bed563e

Browse files
authored
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" />
1 parent 2ee4aa8 commit bed563e

File tree

1 file changed

+11
-4
lines changed

1 file changed

+11
-4
lines changed

web_src/js/features/codeeditor.ts

+11-4
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,12 @@ function initLanguages(monaco: Monaco): void {
5858
for (const extension of extensions || []) {
5959
languagesByExt[extension] = id;
6060
}
61+
if (id === 'typescript') {
62+
monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
63+
// this is needed to suppress error annotations in tsx regarding missing --jsx flag.
64+
jsx: monaco.languages.typescript.JsxEmit.Preserve,
65+
});
66+
}
6167
}
6268
}
6369

@@ -72,6 +78,8 @@ function updateEditor(monaco: Monaco, editor: IStandaloneCodeEditor, filename: s
7278
const language = model.getLanguageId();
7379
const newLanguage = getLanguage(filename);
7480
if (language !== newLanguage) monaco.editor.setModelLanguage(model, newLanguage);
81+
// TODO: Need to update the model uri with the new filename, but there is no easy way currently, see
82+
// https://github.com/microsoft/monaco-editor/discussions/3751
7583
}
7684

7785
// export editor for customization - https://github.com/go-gitea/gitea/issues/10409
@@ -135,19 +143,18 @@ export async function createMonaco(textarea: HTMLTextAreaElement, filename: stri
135143
});
136144
updateTheme(monaco);
137145

146+
const model = monaco.editor.createModel(textarea.value, language, monaco.Uri.file(filename));
147+
138148
const editor = monaco.editor.create(container, {
139-
value: textarea.value,
149+
model,
140150
theme: 'gitea',
141-
language,
142151
...other,
143152
});
144153

145154
monaco.editor.addKeybindingRules([
146155
{keybinding: monaco.KeyCode.Enter, command: null}, // disable enter from accepting code completion
147156
]);
148157

149-
const model = editor.getModel();
150-
if (!model) throw new Error('Unable to get editor model');
151158
model.onDidChangeContent(() => {
152159
textarea.value = editor.getValue({
153160
preserveBOM: true,

0 commit comments

Comments
 (0)