fix: Change test output formatting from code to html (#35857)

client/package.json

@@ -63,6 +63,7 @@
     "redux-saga": "^0.16.0",
     "reselect": "^3.0.1",
     "rxjs": "^6.4.0",
+    "sanitize-html": "^1.20.0",
     "sass.js": "^0.10.13",
     "store": "^2.0.12",
     "validator": "^10.11.0",

client/src/templates/Challenges/components/Output.js

@@ -1,60 +1,25 @@
-import React, { Fragment, Component } from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import MonacoEditor from 'react-monaco-editor';
-import { decodeHTML } from 'entities';
+import sanitizeHtml from 'sanitize-html';
+
+import './output.css';
 
 const propTypes = {
   defaultOutput: PropTypes.string,
-  dimensions: PropTypes.object,
-  height: PropTypes.number,
   output: PropTypes.string
 };
 
-const options = {
-  lineNumbers: false,
-  minimap: {
-    enabled: false
-  },
-  readOnly: true,
-  wordWrap: 'on',
-  scrollBeyondLastLine: false,
-  scrollbar: {
-    horizontal: 'hidden',
-    vertical: 'visible',
-    verticalHasArrows: true
-  }
-};
-
 class Output extends Component {
-  constructor() {
-    super();
-
-    this._editor = null;
-  }
-
-  editorDidMount(editor) {
-    this._editor = editor;
-  }
-
-  componentDidUpdate(prevProps) {
-    if (this.props.dimensions !== prevProps.dimensions && this._editor) {
-      this._editor.layout();
-    }
-  }
-
   render() {
-    const { output, defaultOutput, height } = this.props;
+    const { output, defaultOutput } = this.props;
+    const message = sanitizeHtml(output ? output : defaultOutput, {
+      allowedTags: ['b', 'i', 'em', 'strong', 'code', 'wbr']
+    });
     return (
-      <Fragment>
-        <base href='/' />
-        <MonacoEditor
-          className='challenge-output'
-          editorDidMount={::this.editorDidMount}
-          height={height}
-          options={options}
-          value={decodeHTML(output ? output : defaultOutput)}
-        />
-      </Fragment>
+      <pre
+        className='output-text'
+        dangerouslySetInnerHTML={{ __html: message }}
+      />
     );
   }
 }

client/src/templates/Challenges/components/output.css

@@ -0,0 +1,12 @@
+.output-text {
+  white-space: pre-line;
+  word-break: normal;
+  padding-top: 0;
+  height: 100%;
+  width: 100%;
+  overflow-y: auto;
+}
+
+pre.output-text code {
+  color: #c7254e;
+}

client/src/templates/Challenges/redux/execute-challenge-saga.js

@@ -98,9 +98,7 @@ function* executeTests(testRunner, tests, testTimeout = 5000) {
         throw err;
       }
     } catch (err) {
-      newTest.message = text
-        .replace(/<code>(.*?)<\/code>/g, '$1')
-        .replace(/<wbr>/g, '');
+      newTest.message = text;
       if (err === 'timeout') {
         newTest.err = 'Test timed out';
         newTest.message = `${newTest.message} (${newTest.err})`;