Use hljs in Ratel responses to support copy-paste

Author: Paul Korzhyk

client/package.json

@@ -201,6 +201,7 @@
     "react-data-grid": "^4.0.8",
     "react-dom": "^16.2.0",
     "react-draggable": "^3.0.5",
+    "react-highlight": "^0.12.0",
     "react-redux": "^5.0.6",
     "react-router-dom": "^4.2.2",
     "react-timeago": "^4.1.9",

client/src/assets/css/Frames.scss

@@ -95,12 +95,14 @@
                 z-index: 1000;
             }
 
-            .editor-outer {
+            pre {
+                bottom: 0;
                 flex: 1;
+                margin: 0;
+                padding-left: 12px;
+                position: absolute;
+                top: 0;
                 width: 100%;
-                .CodeMirror {
-                    box-shadow: inset #ccc 0 0 1px 1px;
-                }
             }
         }
     }

client/src/components/FrameCodeTab.js

@@ -8,8 +8,9 @@
 
 import React from "react";
 import Clipboard from "react-clipboard.js";
+import Highlight from "react-highlight";
 
-import Editor from "containers/Editor";
+import "highlight.js/styles/atom-one-light.css";
 
 const STATE_IDLE = 0;
 const STATE_ERROR = -1;
@@ -61,7 +62,7 @@ export default class FrameCodeTab extends React.Component {
     };
 
     render() {
-        const { code, mode } = this.props;
+        const { code } = this.props;
         const { copyState } = this.state;
         const json =
             typeof code === "string"
@@ -86,12 +87,11 @@ export default class FrameCodeTab extends React.Component {
                     </span>
                 </Clipboard>
 
-                <Editor
-                    key={json.length}
-                    query={json}
-                    mode={mode || "javascript"}
-                    readOnly="nocursor"
-                />
+                {json && json.length > 16000 ? (
+                    <pre>{json}</pre>
+                ) : (
+                    <Highlight>{json}</Highlight>
+                )}
             </div>
         );
     }

client/src/components/FrameLayout/FrameSession.js

@@ -182,7 +182,7 @@ function FrameSession(props) {
             ) : null}
 
             {currentTab === "userQuery" ? (
-                <FrameCodeTab code={frame.query} mode="graphql" />
+                <FrameCodeTab code={frame.query} />
             ) : null}
         </div>
     );

client/src/components/FrameMessage.js

@@ -68,10 +68,7 @@ URL: ${error.url}
                 currentTab === "jsonResponse",
                 <FrameCodeTab code={isError ? error : response} />,
             )}
-            {_if(
-                currentTab === "userQuery",
-                <FrameCodeTab code={query} mode="graphql" />,
-            )}
+            {_if(currentTab === "userQuery", <FrameCodeTab code={query} />)}
 
             {_if(
                 isError,