ui: fix #113

packages/ui-default/.eslintrc.js

@@ -71,6 +71,7 @@ module.exports = {
     'import/first': 'off',
     'import/no-extraneous-dependencies': 'off',
     'max-classes-per-file': 'off',
+    'no-empty': ['warn', { allowEmptyCatch: true }],
     'no-unused-vars': 'warn',
     'no-console': 'off',
     'no-continue': 'off',

packages/ui-default/backendlib/markdown.js

@@ -35,7 +35,7 @@ class Markdown extends MarkdownIt {
         if (lang && Prism.languages[lang]) {
           try {
             return Prism.highlight(str, Prism.languages[lang], lang);
-          } catch (__) { } // eslint-disable-line no-empty
+          } catch (__) { }
         }
         return '';
       },

packages/ui-default/components/messagepad/MessagePadDialogueContentContainer.jsx

@@ -5,7 +5,6 @@ import TimeAgo from 'timeago-react';
 import moment from 'moment';
 import 'jquery-scroll-lock';
 import 'jquery.easing';
-
 import i18n from 'vj/utils/i18n';
 import { parse as parseMongoId } from 'vj/utils/mongoId';
 import Message from './MessageComponent';
@@ -17,7 +16,7 @@ const mapStateToProps = (state) => ({
     : null,
 });
 
-export default connect(mapStateToProps, null)(class MessagePadDialogueContentContainer extends React.PureComponent {
+export default connect(mapStateToProps)(class MessagePadDialogueContentContainer extends React.PureComponent {
   componentDidMount() {
     $(this.refs.list).scrollLock({ strict: true });
   }
@@ -42,23 +41,33 @@ export default connect(mapStateToProps, null)(class MessagePadDialogueContentCon
     }
   }
 
-  renderInner() {
-    if (this.props.activeId === null) {
-      return [];
+  renderContent(msg) {
+    if (msg.from === 1) {
+      // Is system message
+      try {
+        const data = JSON.parse(msg.content);
+        return i18n(data.message, ...data.params);
+      } catch (e) { }
+      return i18n(msg.content);
     }
-    return _.map(this.props.item.messages, (reply) => (
+    return msg.content;
+  }
+
+  renderInner() {
+    if (this.props.activeId === null) return [];
+    return _.map(this.props.item.messages, (msg) => (
       <Message
-        key={reply._id}
-        isSelf={reply.from === UserContext._id}
+        key={msg._id}
+        isSelf={msg.from === UserContext._id}
         faceUrl={
-          reply.from === UserContext._id
+          msg.from === UserContext._id
             ? UserContext.avatarUrl
             : this.props.item.udoc.avatarUrl
         }
       >
-        <div>{reply.content}</div>
-        <time data-tooltip={moment(parseMongoId(reply._id).timestamp * 1000).format('YYYY-MM-DD HH:mm:ss')}>
-          <TimeAgo datetime={parseMongoId(reply._id).timestamp * 1000} locale={i18n('timeago_locale')} />
+        <div>{this.renderContent(msg)}</div>
+        <time data-tooltip={moment(parseMongoId(msg._id).timestamp * 1000).format('YYYY-MM-DD HH:mm:ss')}>
+          <TimeAgo datetime={parseMongoId(msg._id).timestamp * 1000} locale={i18n('timeago_locale')} />
         </time>
       </Message>
     ));

packages/ui-default/components/scratchpad/ScratchpadPretestContainer.jsx

@@ -1,11 +1,14 @@
 import React from 'react';
 import { connect } from 'react-redux';
+import AnsiUp from 'ansi_up';
 
 import i18n from 'vj/utils/i18n';
 import Icon from 'vj/components/react/IconComponent';
 import Panel from './PanelComponent';
 import DataInput from './DataInputComponent';
 
+const AU = new AnsiUp();
+
 const mapStateToProps = (state) => ({
   input: state.pretest.input,
   output: state.pretest.output,
@@ -44,7 +47,7 @@ export default connect(mapStateToProps, mapDispatchToProps)(class ScratchpadPret
           />
           <DataInput
             title={i18n('Output')}
-            value={this.props.output}
+            value={AU.ansi_to_html(this.props.output)}
             html
           />
         </div>

packages/ui-default/jsconfig.json

@@ -1,9 +1,10 @@
 {
   "exclude": [
-    "node_modules"
+    "./node_modules",
+    "./public",
+    "../../node_modules"
   ],
   "compilerOptions": {
-    "experimentalDecorators": true,
     "allowSyntheticDefaultImports": true,
     "target": "ES6",
     "baseUrl": ".",

packages/ui-default/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hydrooj/ui-default",
-  "version": "4.6.12",
+  "version": "4.6.13",
   "author": "undefined <i@undefined.moe>",
   "license": "AGPL-3.0",
   "main": "hydro.js",
@@ -23,6 +23,7 @@
     "@babel/register": "^7.13.14",
     "@babel/runtime-corejs2": "^7.13.10",
     "@hydrooj/utils": "^1.0.7",
+    "ansi_up": "^5.0.1",
     "autoprefixer": "^9.8.6",
     "babel-loader": "^8.2.2",
     "babel-plugin-lodash": "^3.3.4",

packages/ui-default/pages/problem_detail.page.jsx

@@ -229,7 +229,6 @@ const page = new NamedPage(['problem_detail', 'contest_detail_problem', 'homewor
         $('.problem-content').get(0),
       );
       $('.outer-loader-container').hide();
-      // eslint-disable-next-line no-empty
     } catch (e) { }
   }