Add syntax highlighting to the curl section while preserving copying ability 💾

Author: AdrieanKhisbe

src/core/components/curl.jsx

@@ -1,15 +1,16 @@
 import React from "react"
 import PropTypes from "prop-types"
 import curlify from "core/curlify"
+import Lowlight from "../lowlight"
+import {copyToClipboard} from "../utils"
 
 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,10 @@ 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>
+          <Lowlight language="bash" className="curl" value={curl}/>
         </div>
       </div>
     )

src/core/utils.js

@@ -256,20 +256,43 @@ export function mapToList(map, keyNames="key", collectedKeys=Im.Map()) {
   return list
 }
 
+export const copyToClipboard = str => {
+  // adapted from https://hackernoon.com/copying-text-to-clipboard-with-javascript-df4d4988697f
+  const el = document.createElement("textarea")
+  el.value = str
+  el.setAttribute("readonly", "")
+  el.style.position = "absolute"
+  el.style.left = "-9999px"
+
+  document.body.appendChild(el)
+  // preserve selection
+  const selected =
+    document.getSelection().rangeCount > 0
+    ? document.getSelection().getRangeAt(0)
+    : false
+  el.select()
+  document.execCommand("copy")
+  document.body.removeChild(el)
+  if (selected) {
+    document.getSelection().removeAllRanges()
+    document.getSelection().addRange(selected)
+  }
+}
+
 export function extractFileNameFromContentDispositionHeader(value){
   let patterns = [
     /filename\*=[^']+'\w*'"([^"]+)";?/i,
     /filename\*=[^']+'\w*'([^;]+);?/i,
     /filename="([^;]*);?"/i,
     /filename=([^;]*);?/i
   ]
-  
+
   let responseFilename
   patterns.some(regex => {
     responseFilename = regex.exec(value)
     return responseFilename !== null
   })
-    
+
   if (responseFilename !== null && responseFilename.length > 1) {
     try {
       return decodeURIComponent(responseFilename[1])
@@ -741,15 +764,15 @@ export function paramToIdentifier(param, { returnAll = false, allowHashes = true
   }
   const paramName = param.get("name")
   const paramIn = param.get("in")
-  
+
   let generatedIdentifiers = []
 
   // Generate identifiers in order of most to least specificity
 
   if (param && param.hashCode && paramIn && paramName && allowHashes) {
     generatedIdentifiers.push(`${paramIn}.${paramName}.hash-${param.hashCode()}`)
   }
-  
+
   if(paramIn && paramName) {
     generatedIdentifiers.push(`${paramIn}.${paramName}`)
   }