From cda855f1b72492ca116f327af880204a24f6e907 Mon Sep 17 00:00:00 2001
From: pjsier <pjsier@gmail.com>
Date: Sun, 15 Oct 2017 19:59:06 -0500
Subject: [PATCH] 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                          |  1 +
 src/components/modals/ExportModal.jsx | 22 +++++++++++++++++-----
 src/styles/_export.scss               | 12 ++++++++++++
 3 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index aed9b82..260623b 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/modals/ExportModal.jsx b/src/components/modals/ExportModal.jsx
index b6db301..fd00a6f 100644
--- a/src/components/modals/ExportModal.jsx
+++ b/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>
-        Latest saved gist:{' '}
-        {this.renderPreviewLink(this)}
-        <a target="_blank" href={"https://gist.github.com/"+user+"/"+gist.id}>Source</a>
-      </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>
+        </p>
+        <p>
+          <CopyToClipboard text={maputnikStyleLink}>
+            <span>Share this style: <Button><TiClipboard size={18} /></Button></span>
+          </CopyToClipboard>
+          <StringInput value={maputnikStyleLink} />
+        </p>
+      </div>
     }
   }
 
diff --git a/src/styles/_export.scss b/src/styles/_export.scss
index 8cace42..ce000ec 100644
--- a/src/styles/_export.scss
+++ b/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;
+  }
+}