enhance: scrollable + downloadable HighlightCode (#4397)

* Auto hidding content that is longer than 600 characters long.

* Added basic downloading

Slightly broken

* Better downloading

now downloads file on button click

* Fix the angry linter

* Fix dist

* Removed collapsing, added scrolling.

* Code clean up.

* CSS fix.

* prevent HighlightCode from scrolling entire document

* center "Download" text in button

* `this.downloadJSON` -> `this.downloadText`

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

* hide Download button behind option `downloadable` prop

* `file-saver` -> `js-file-download`

src/core/components/highlight-code.jsx

@@ -1,11 +1,13 @@
 import React, { Component } from "react"
 import PropTypes from "prop-types"
 import { highlight } from "core/utils"
+import saveAs from "js-file-download"
 
 export default class HighlightCode extends Component {
   static propTypes = {
     value: PropTypes.string.isRequired,
-    className: PropTypes.string
+    className: PropTypes.string,
+    downloadable: PropTypes.bool
   }
 
   componentDidMount() {
@@ -20,10 +22,46 @@ export default class HighlightCode extends Component {
     this.el = c
   }
 
+  downloadText = () => {
+    saveAs(this.props.value, "response.txt")
+  }
+
+  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
+    let { value, className, downloadable } = this.props
     className = className || ""
 
-    return <pre ref={this.initializeComponent} className={className + " microlight"}>{ value }</pre>
+    return (
+      <div className="highlight-code">
+        { !downloadable ? null :
+          <div className="download-contents" onClick={this.downloadText}>
+            Download
+          </div>
+        }
+        <pre
+          ref={this.initializeComponent}
+          onWheel={this.preventYScrollingBeyondElement}
+          className={className + " microlight"}>
+          {value}
+        </pre>
+      </div>
+    )
   }
 }