Rework swagger-api#5259 syntax highlighting with react-syntax-highlight 🌈

Author: AdrieanKhisbe

package-lock.json

@@ -77,6 +77,7 @@
     "react-inspector": "^2.3.0",
     "react-motion": "^0.5.2",
     "react-redux": "^4.x.x",
+    "react-syntax-highlighter": "=12.2.1",
     "redux": "^3.x.x",
     "redux-immutable": "3.1.0",
     "remarkable": "^2.0.1",

package.json

@@ -1,15 +1,16 @@
 import React from "react"
 import PropTypes from "prop-types"
 import curlify from "core/curlify"
+import {copyToClipboard} from "core/copy-to-clipboard"
+import {SyntaxHighlighter, styles} from "core/syntax-highlighting"
 
 export default class Curl extends React.Component {
   static propTypes = {
     request: PropTypes.object.isRequired
   }
 
-  handleFocus(e) {
-    e.target.select()
-    document.execCommand("copy")
+  copy(curlCommand) {
+    return () => copyToClipboard(curlCommand)
   }
 
   render() {
@@ -18,9 +19,9 @@ export default class Curl extends React.Component {
 
     return (
       <div>
-        <h4>Curl</h4>
-        <div className="copy-paste">
-          <textarea onFocus={this.handleFocus} readOnly={true} className="curl" value={curl}></textarea>
+        <h4>Curl <i onClick={this.copy(curl)}>(copyCommand)</i></h4>
+        <div>
+          <SyntaxHighlighter language="bash" className="curl" style={styles.agate}>{curl}</SyntaxHighlighter>
         </div>
       </div>
     )