Add share style link, copy button

This adds a copy to clipboard button and input with the style parameter
pre-populated after exporting a style to an anonymous gist. Also
includes the URL as an input next to the button.

package.json

@@ -44,6 +44,7 @@
     "react-codemirror": "^0.3.0",
     "react-collapse": "^4.0.3",
     "react-color": "^2.10.0",
+    "react-copy-to-clipboard": "^5.0.1",
     "react-dom": "^15.4.0",
     "react-file-reader-input": "^1.1.0",
     "react-height": "^3.0.0",

src/components/modals/ExportModal.jsx

@@ -9,8 +9,10 @@ import CheckboxInput from '../inputs/CheckboxInput'
 import Button from '../Button'
 import Modal from './Modal'
 import MdFileDownload from 'react-icons/lib/md/file-download'
+import TiClipboard from 'react-icons/lib/ti/clipboard'
 import style from '../../libs/style.js'
 import GitHub from 'github-api'
+import { CopyToClipboard } from 'react-copy-to-clipboard'
 
 
 class Gist extends React.Component {
@@ -136,11 +138,21 @@ class Gist extends React.Component {
       return <p>Saving...</p>
     } else if(gist) {
       const user = gist.user || 'anonymous';
-      return <p>
+      const rawGistLink = "https://gist.githubusercontent.com/" + user + "/" + gist.id + "/raw/" + gist.history[0].version + "/style.json"
+      const maputnikStyleLink = "https://maputnik.github.io/editor/?style=" + rawGistLink
+      return <div className="maputnik-render-gist">
+        <p>
           Latest saved gist:{' '}
           {this.renderPreviewLink(this)}
-        <a target="_blank" href={"https://gist.github.com/"+user+"/"+gist.id}>Source</a>
+          <a target="_blank" href={"https://gist.github.com/" + user + "/" + gist.id}>Source</a>
         </p>
+        <p>
+          <CopyToClipboard text={maputnikStyleLink}>
+            <span>Share this style: <Button><TiClipboard size={18} /></Button></span>
+          </CopyToClipboard>
+          <StringInput value={maputnikStyleLink} />
+        </p>
+      </div>
     }
   }
 

src/styles/_export.scss

@@ -3,3 +3,15 @@
     display: inline-block;
   }
 }
+
+.maputnik-render-gist {
+  p {
+    margin: 10px 0;
+  }
+
+  input.maputnik-string {
+    margin-left: 5px;
+    width: 60%;
+    display: inline-block;
+  }
+}