fix(dangerMode): dont convert objects to HTML (#964)

Author: rafegoldberg

demo/App.jsx

@@ -238,9 +238,19 @@ export default class App extends Component {
           locked={this.state.locked}
         />
       },
+      {
+        title: 'Raw HTML output',
+        link: 'https://github.com/linuswillner/react-console-emulator/blob/master/demo/App.jsx#L244-L249',
+        component: <Terminal
+          style={globalStyles}
+          commands={commands}
+          welcomeMessage='This terminal should render raw HTML to stdout. Try running the `html` command to see what happens!'
+          dangerMode
+        />
+      },
       {
         title: 'Progress demo',
-        link: 'https://github.com/linuswillner/react-console-emulator/blob/master/demo/App.jsx#L244-L271',
+        link: 'https://github.com/linuswillner/react-console-emulator/blob/master/demo/App.jsx#L254-L281',
         component: <Terminal
           style={globalStyles}
           ref={this.progressTerminal}

demo/extra/config.js

@@ -29,6 +29,10 @@ export default {
           setTimeout(() => resolve('Finished!'), 1000)
         })
       }
+    },
+    html: {
+      description: 'Returns a raw HTML string.',
+      fn: async () => '<span style="color:#c386ff">Hello</span> <span style="color:#fa8072">World</span>'
     }
   },
   casingCommands: {

package.json

@@ -16,6 +16,7 @@
     "codecov": "codecov --disable=gcov",
     "test": "npm run lint && npm run test-coverage && npm run codecov",
     "test-local": "npm run lint && npm run test-coverage",
+    "test-watch": "npm run test-local -- -- --watch",
     "test-coverage": "cross-env TEST=true jest --config jest.coverage.js",
     "test-nocoverage": "cross-env TEST=true jest --config jest.default.js",
     "prepublishOnly": "npm run compile"

src/TerminalMessage.jsx

@@ -15,7 +15,7 @@ export default class TerminalMessage extends Component {
       message: defaults(style, sourceStyles)
     }
 
-    return this.props.dangerMode
+    return this.props.dangerMode && typeof content === 'string'
       ? <div className={className} style={styles.message} {...html(content)}/>
       : <div className={className} style={styles.message}>{content}</div>
   }