this.downloadJSON -> this.downloadText

we're always saving as `.txt`, so JSON is a misnomer

package.json

@@ -116,6 +116,7 @@
     "eslint-plugin-react": "^7.1.0",
     "extract-text-webpack-plugin": "^2.1.2",
     "file-loader": "0.11.2",
+    "file-saver": "^1.3.8",
     "git-describe": "^4.0.1",
     "imports-loader": "0.7.1",
     "json-loader": "0.5.4",

src/core/components/highlight-code.jsx

@@ -1,6 +1,7 @@
 import React, { Component } from "react"
 import PropTypes from "prop-types"
 import { highlight } from "core/utils"
+import { saveAs } from "file-saver"
 
 export default class HighlightCode extends Component {
   static propTypes = {
@@ -20,10 +21,43 @@ export default class HighlightCode extends Component {
     this.el = c
   }
 
+  downloadText = () => {
+    let fileToSave = new Blob([this.props.value], {type: "text/plain"})
+    saveAs(fileToSave, "response")
+  }
+
+  preventYScrollingBeyondElement = (e) => {
+    const target = e.target
+
+    var deltaY = e.nativeEvent.deltaY
+    var contentHeight = target.scrollHeight
+    var visibleHeight = target.offsetHeight
+    var scrollTop = target.scrollTop
+
+    const scrollOffset = visibleHeight + scrollTop
+
+    const isScrollingPastTop = scrollTop === 0 && deltaY < 0
+    const isScrollingPastBottom = scrollOffset >= contentHeight && deltaY > 0
+
+    if (isScrollingPastTop || isScrollingPastBottom) {
+      e.preventDefault()
+    }
+  }
+
   render () {
     let { value, className } = this.props
     className = className || ""
 
-    return <pre ref={this.initializeComponent} className={className + " microlight"}>{ value }</pre>
+    return (
+      <div className="highlight-code">
+        <div className="download-contents" onClick={this.downloadText}>Download</div>
+        <pre
+          ref={this.initializeComponent}
+          onWheel={this.preventYScrollingBeyondElement}
+          className={className + " microlight"}>
+          {value}
+        </pre>
+      </div>
+    )
   }
 }

src/style/_layout.scss

@@ -626,6 +626,32 @@
     }
 }
 
+.highlight-code {
+  position: relative;
+
+  > .microlight {
+    overflow-y: auto;
+    max-height: 400px;
+  }
+}
+
+.download-contents {
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+  cursor: pointer;
+  background: #7d8293;
+  text-align: center;
+  padding: 5px;
+  border-radius: 4px;
+  font-family: 'Titillium Web', sans-serif;
+  font-weight: 600;
+  color: white;
+  font-size: 14px;
+  height: 30px;
+  width: 75px;
+}
+
 .scheme-container
 {
     margin: 0 0 20px 0;