ui: enhance problem_files page

packages/ui-default/components/editor/index.ts

@@ -75,7 +75,7 @@ export default class Editor extends DOMAttachedObject {
     // eslint-disable-next-line no-nested-ternary
     this.model = typeof model === 'string'
       ? monaco.editor.getModel(monaco.Uri.parse(model))
-      || monaco.editor.createModel(value, language, monaco.Uri.parse(model))
+      || monaco.editor.createModel(value, language === 'auto' ? undefined : language, monaco.Uri.parse(model))
       : model;
     this.model.setValue(value);
     const cfg: import('../monaco').default.editor.IStandaloneEditorConstructionOptions = {
@@ -195,11 +195,7 @@ export default class Editor extends DOMAttachedObject {
     if (!this.isValid) throw new Error('Editor is not loaded');
   }
 
-  /**
-   * @param {string?} val
-   * @returns {string}
-   */
-  value(val) {
+  value(val?: string) {
     this.ensureValid();
     if (typeof val === 'string') return (this.editor || this.vditor).setValue(val);
     return (this.editor || this.vditor).getValue();

packages/ui-default/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hydrooj/ui-default",
-  "version": "4.31.4",
+  "version": "4.31.5",
   "author": "undefined <i@undefined.moe>",
   "license": "AGPL-3.0",
   "main": "hydro.js",

packages/ui-default/pages/problem_files.page.js

@@ -115,10 +115,7 @@ const page = new NamedPage('problem_files', () => {
     const selectedFiles = ensureAndGetSelectedFiles(type);
     if (selectedFiles === null) return;
     const action = await new ConfirmDialog({
-      $body: tpl`
-        <div class="typo">
-          <p>${i18n('Confirm to delete the selected files?')}</p>
-        </div>`,
+      $body: tpl.typoMsg(i18n('Confirm to delete the selected files?')),
     }).open();
     if (action !== 'yes') return;
     try {
@@ -181,12 +178,13 @@ const page = new NamedPage('problem_files', () => {
       height: `${window.innerHeight - 100}px`,
       cancelByEsc: false,
     }).open();
-    const language = {
-      yaml: 'yaml',
-      yml: 'yaml',
-      cc: 'cpp',
-      json: 'json',
-    }[filename.split('.').pop()] || 'plain';
+    const languages = [
+      ['yaml', ['yaml', 'yml']],
+      ['cpp', ['c', 'cc', 'cpp', 'h', 'hpp']],
+      ['json', ['json']],
+      ['plain', ['in', 'out', 'ans']],
+    ];
+    const language = languages.filter((i) => i[1].includes(filename.split('.').pop()))[0]?.[0] || 'auto';
     const editor = new Editor($('[name="fileContent"]'), {
       value,
       autoResize: false,
@@ -224,8 +222,13 @@ const page = new NamedPage('problem_files', () => {
         return;
       }
       Notification.info(i18n('Loading file...'));
-      const res = await request.get(link);
-      content = await request.get(res.url, undefined, { dataType: 'text' });
+      try {
+        const res = await request.get(link);
+        content = await request.get(res.url, undefined, { dataType: 'text' });
+      } catch (e) {
+        Notification.error(i18n('Failed to load file: {0}', e.message));
+        throw e;
+      }
     } else Notification.info(i18n('Loading editor...'));
     const val = await startEdit(filename, content);
     if (typeof val !== 'string') return;