Use <pre> for output preview in example app

Author: raymond-lam

example/src/JsonSchemaFormSuite.js

@@ -14,6 +14,7 @@ import {
   FormBuilder,
   PredefinedGallery,
 } from '@ginkgo-bioworks/react-json-schema-form-builder';
+import withStyles from 'react-jss';
 import Tabs from './tabs/Tabs';
 import JSONInput from 'react-json-editor-ajrm';
 import locale from 'react-json-editor-ajrm/locale/en';
@@ -30,6 +31,7 @@ type Props = {
   uischemaTitle?: string,
   width?: string,
   height?: string,
+  classes: { [string]: any },
 };
 
 type State = {
@@ -55,6 +57,14 @@ function checkError(text: string, language: string) {
   return '';
 }
 
+const styles = {
+  codeViewer: {
+    backgroundColor: 'lightgray',
+    maxHeight: '550px',
+    overflowY: 'auto',
+  },
+};
+
 class JsonSchemaFormEditor extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
@@ -210,12 +220,9 @@ class JsonSchemaFormEditor extends React.Component<Props, State> {
                           errMessage={'Error parsing JSON Schema Form output'}
                         >
                           <h4>Output Data</h4>
-                          <JSONInput
-                            id='a_unique_id'
-                            placeholder={this.state.submissionData}
-                            locale={locale}
-                            height='550px'
-                          />
+                          <pre className={this.props.classes.codeViewer}>
+                            {JSON.stringify(this.state.submissionData, null, 2)}
+                          </pre>
                         </ErrorBoundary>
                         <br />
                       </div>
@@ -344,4 +351,4 @@ class JsonSchemaFormEditor extends React.Component<Props, State> {
   }
 }
 
-export default JsonSchemaFormEditor;
+export default withStyles(styles)(JsonSchemaFormEditor);