From 9e44a41762dafccfd03ab4ecc884e8457cebab88 Mon Sep 17 00:00:00 2001
From: martinfrancois <fracoisma@hotmail.com>
Date: Sun, 4 Feb 2018 21:00:42 +0100
Subject: [PATCH 1/4] added possibility of saving as an svg file

---
 pages/editor.js | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/pages/editor.js b/pages/editor.js
index 04f4c10..547ae41 100644
--- a/pages/editor.js
+++ b/pages/editor.js
@@ -105,7 +105,7 @@ class Editor extends React.Component {
     saveState(localStorage, s)
   }
 
-  getCarbonImage() {
+  getCarbonImage(format) {
     const node = document.getElementById('export-container')
 
     const config = {
@@ -118,6 +118,9 @@ class Editor extends React.Component {
       height: node.offsetHeight * 2
     }
 
+    if (format === 'svg') {
+      return domtoimage.toSvg(node, config)
+    }
     return domtoimage.toPng(node, config)
   }
 
@@ -129,10 +132,10 @@ class Editor extends React.Component {
     this.setState({ aspectRatio })
   }
 
-  save() {
-    this.getCarbonImage().then(dataUrl => {
+  save(format) {
+    this.getCarbonImage(format).then(dataUrl => {
       const link = document.createElement('a')
-      link.download = 'carbon.png'
+      link.download = 'carbon.' + format
       link.href = dataUrl
       document.body.appendChild(link)
       link.click()
@@ -142,7 +145,7 @@ class Editor extends React.Component {
 
   upload() {
     this.setState({ uploading: true })
-    this.getCarbonImage()
+    this.getCarbonImage('png')
       .then(api.tweet)
       .then(() => this.setState({ uploading: false }))
       .catch(err => {
@@ -187,7 +190,13 @@ class Editor extends React.Component {
                 color="#57b5f9"
                 style={{ marginRight: '8px' }}
               />
-              <Button onClick={this.save} title="Save Image" color="#c198fb" />
+              <Button
+                onClick={e => this.save('png')}
+                title="Save Image (PNG)"
+                color="#c198fb"
+                style={{ marginRight: '8px' }}
+              />
+              <Button onClick={e => this.save('svg')} title="Save Vector (SVG)" color="#9fca56" />
             </div>
           </Toolbar>
 

From acef413194622191ce2ef5677827b9aa49cf7a91 Mon Sep 17 00:00:00 2001
From: martinfrancois <fracoisma@hotmail.com>
Date: Sun, 4 Feb 2018 21:04:45 +0100
Subject: [PATCH 2/4] added contrib

---
 .all-contributorsrc | 9 +++++++++
 README.md           | 2 +-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/.all-contributorsrc b/.all-contributorsrc
index f0c322e..14e3b37 100644
--- a/.all-contributorsrc
+++ b/.all-contributorsrc
@@ -203,6 +203,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "martinfrancois",
+      "name": "François Martin",
+      "avatar_url": "https://avatars1.githubusercontent.com/u/14319020?v=4",
+      "profile": "https://github.com/martinfrancois",
+      "contributions": [
+        "code"
+      ]
     }
   ]
 }
diff --git a/README.md b/README.md
index 939c675..0d182e5 100644
--- a/README.md
+++ b/README.md
@@ -73,5 +73,5 @@ Thanks goes out to all these wonderful people ([emoji key](https://github.com/ke
 | [<img src="https://avatars0.githubusercontent.com/u/10078572?v=4" width="100px;"/><br /><sub><b>briandennis</b></sub>](https://github.com/briandennis)<br />[💻](https://github.com/dawnlabs/carbon/commits?author=briandennis "Code") [📖](https://github.com/dawnlabs/carbon/commits?author=briandennis "Documentation") [🚇](#infra-briandennis "Infrastructure (Hosting, Build-Tools, etc)") [👀](#review-briandennis "Reviewed Pull Requests") | [<img src="https://avatars0.githubusercontent.com/u/8397708?v=4" width="100px;"/><br /><sub><b>mfix22</b></sub>](https://github.com/mfix22)<br />[💬](#question-mfix22 "Answering Questions") [💻](https://github.com/dawnlabs/carbon/commits?author=mfix22 "Code") [🤔](#ideas-mfix22 "Ideas, Planning, & Feedback") | [<img src="https://avatars1.githubusercontent.com/u/10369094?v=4" width="100px;"/><br /><sub><b>jakedex</b></sub>](https://github.com/jakedex)<br />[💬](#question-jakedex "Answering Questions") [💻](https://github.com/dawnlabs/carbon/commits?author=jakedex "Code") [🎨](#design-jakedex "Design") [📹](#video-jakedex "Videos") | [<img src="https://avatars1.githubusercontent.com/u/10191084?v=4" width="100px;"/><br /><sub><b>andrewda</b></sub>](https://github.com/andrewda)<br />[💬](#question-andrewda "Answering Questions") [💻](https://github.com/dawnlabs/carbon/commits?author=andrewda "Code") [🐛](https://github.com/dawnlabs/carbon/issues?q=author%3Aandrewda "Bug reports") [👀](#review-andrewda "Reviewed Pull Requests") | [<img src="https://avatars2.githubusercontent.com/u/14703164?v=4" width="100px;"/><br /><sub><b>yeskunall</b></sub>](https://github.com/yeskunall)<br />[💻](https://github.com/dawnlabs/carbon/commits?author=yeskunall "Code") [📖](https://github.com/dawnlabs/carbon/commits?author=yeskunall "Documentation") [🔧](#tool-yeskunall "Tools") [🐛](https://github.com/dawnlabs/carbon/issues?q=author%3Ayeskunall "Bug reports") | [<img src="https://avatars1.githubusercontent.com/u/2652676?v=4" width="100px;"/><br /><sub><b>stoshfabricius</b></sub>](https://github.com/stoshfabricius)<br />[💻](https://github.com/dawnlabs/carbon/commits?author=stoshfabricius "Code") | [<img src="https://avatars1.githubusercontent.com/u/11639896?v=4" width="100px;"/><br /><sub><b>jkling38</b></sub>](https://github.com/jkling38)<br />[📖](https://github.com/dawnlabs/carbon/commits?author=jkling38 "Documentation") |
 | :---: | :---: | :---: | :---: | :---: | :---: | :---: |
 | [<img src="https://avatars1.githubusercontent.com/u/225946?v=4" width="100px;"/><br /><sub><b>otobrglez</b></sub>](https://github.com/otobrglez)<br />[💻](https://github.com/dawnlabs/carbon/commits?author=otobrglez "Code") | [<img src="https://avatars3.githubusercontent.com/u/11488612?v=4" width="100px;"/><br /><sub><b>darahak</b></sub>](https://github.com/darahak)<br />[📖](https://github.com/dawnlabs/carbon/commits?author=darahak "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/246651?v=4" width="100px;"/><br /><sub><b>dom96</b></sub>](https://github.com/dom96)<br />[💻](https://github.com/dawnlabs/carbon/commits?author=dom96 "Code") | [<img src="https://avatars3.githubusercontent.com/u/784056?v=4" width="100px;"/><br /><sub><b>elrumordelaluz</b></sub>](https://github.com/elrumordelaluz)<br />[💻](https://github.com/dawnlabs/carbon/commits?author=elrumordelaluz "Code") | [<img src="https://avatars2.githubusercontent.com/u/21217?v=4" width="100px;"/><br /><sub><b>cjb</b></sub>](https://github.com/cjb)<br />[💻](https://github.com/dawnlabs/carbon/commits?author=cjb "Code") | [<img src="https://avatars1.githubusercontent.com/u/5427083?v=4" width="100px;"/><br /><sub><b>Krzysztof-Cieslak</b></sub>](https://github.com/Krzysztof-Cieslak)<br />[💻](https://github.com/dawnlabs/carbon/commits?author=Krzysztof-Cieslak "Code") | [<img src="https://avatars0.githubusercontent.com/u/2369851?v=4" width="100px;"/><br /><sub><b>fernahh</b></sub>](https://github.com/fernahh)<br />[📖](https://github.com/dawnlabs/carbon/commits?author=fernahh "Documentation") |
-| [<img src="https://avatars1.githubusercontent.com/u/10941033?v=4" width="100px;"/><br /><sub><b>g3r4n</b></sub>](https://github.com/g3r4n)<br />[💻](https://github.com/dawnlabs/carbon/commits?author=g3r4n "Code") | [<img src="https://avatars0.githubusercontent.com/u/55830?v=4" width="100px;"/><br /><sub><b>Mat Gadd</b></sub>](http://drarok.com/)<br />[🐛](https://github.com/dawnlabs/carbon/issues?q=author%3ADrarok "Bug reports") [💻](https://github.com/dawnlabs/carbon/commits?author=Drarok "Code") | [<img src="https://avatars1.githubusercontent.com/u/11805775?v=4" width="100px;"/><br /><sub><b>Brad Davies</b></sub>](https://bradlab.co.uk)<br />[🐛](https://github.com/dawnlabs/carbon/issues?q=author%3Avarbrad "Bug reports") [💻](https://github.com/dawnlabs/carbon/commits?author=varbrad "Code") | [<img src="https://avatars1.githubusercontent.com/u/9087886?v=4" width="100px;"/><br /><sub><b>Rafael Câmara</b></sub>](http://www.rafaelcamaram.com/)<br />[💻](https://github.com/dawnlabs/carbon/commits?author=rafaelcamaram "Code") | [<img src="https://avatars1.githubusercontent.com/u/2212006?v=4" width="100px;"/><br /><sub><b>Gleb Bahmutov</b></sub>](https://glebbahmutov.com/)<br />[⚠️](https://github.com/dawnlabs/carbon/commits?author=bahmutov "Tests") [🔧](#tool-bahmutov "Tools") | [<img src="https://avatars2.githubusercontent.com/u/10677789?v=4" width="100px;"/><br /><sub><b>Iván Munguía</b></sub>](https://ivan-munguia.netlify.com)<br />[💻](https://github.com/dawnlabs/carbon/commits?author=warborn "Code") |
+| [<img src="https://avatars1.githubusercontent.com/u/10941033?v=4" width="100px;"/><br /><sub><b>g3r4n</b></sub>](https://github.com/g3r4n)<br />[💻](https://github.com/dawnlabs/carbon/commits?author=g3r4n "Code") | [<img src="https://avatars0.githubusercontent.com/u/55830?v=4" width="100px;"/><br /><sub><b>Mat Gadd</b></sub>](http://drarok.com/)<br />[🐛](https://github.com/dawnlabs/carbon/issues?q=author%3ADrarok "Bug reports") [💻](https://github.com/dawnlabs/carbon/commits?author=Drarok "Code") | [<img src="https://avatars1.githubusercontent.com/u/11805775?v=4" width="100px;"/><br /><sub><b>Brad Davies</b></sub>](https://bradlab.co.uk)<br />[🐛](https://github.com/dawnlabs/carbon/issues?q=author%3Avarbrad "Bug reports") [💻](https://github.com/dawnlabs/carbon/commits?author=varbrad "Code") | [<img src="https://avatars1.githubusercontent.com/u/9087886?v=4" width="100px;"/><br /><sub><b>Rafael Câmara</b></sub>](http://www.rafaelcamaram.com/)<br />[💻](https://github.com/dawnlabs/carbon/commits?author=rafaelcamaram "Code") | [<img src="https://avatars1.githubusercontent.com/u/2212006?v=4" width="100px;"/><br /><sub><b>Gleb Bahmutov</b></sub>](https://glebbahmutov.com/)<br />[⚠️](https://github.com/dawnlabs/carbon/commits?author=bahmutov "Tests") [🔧](#tool-bahmutov "Tools") | [<img src="https://avatars2.githubusercontent.com/u/10677789?v=4" width="100px;"/><br /><sub><b>Iván Munguía</b></sub>](https://ivan-munguia.netlify.com)<br />[💻](https://github.com/dawnlabs/carbon/commits?author=warborn "Code") | [<img src="https://avatars1.githubusercontent.com/u/14319020?v=4" width="100px;"/><br /><sub><b>François Martin</b></sub>](https://github.com/martinfrancois)<br />[💻](https://github.com/dawnlabs/carbon/commits?author=martinfrancois "Code") |
 <!-- ALL-CONTRIBUTORS-LIST:END -->

From 5abef2b4c3012e491f2d638ac627342ddb641abb Mon Sep 17 00:00:00 2001
From: Mike Fix <mrfix84@gmail.com>
Date: Sun, 4 Feb 2018 13:46:22 -0800
Subject: [PATCH 3/4] Intial format request refactor

---
 pages/editor.js | 23 +++++++++++++----------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/pages/editor.js b/pages/editor.js
index 547ae41..7f3de5b 100644
--- a/pages/editor.js
+++ b/pages/editor.js
@@ -105,7 +105,7 @@ class Editor extends React.Component {
     saveState(localStorage, s)
   }
 
-  getCarbonImage(format) {
+  getCarbonImage({ format } = { format: 'png' }) {
     const node = document.getElementById('export-container')
 
     const config = {
@@ -118,10 +118,9 @@ class Editor extends React.Component {
       height: node.offsetHeight * 2
     }
 
-    if (format === 'svg') {
-      return domtoimage.toSvg(node, config)
-    }
-    return domtoimage.toPng(node, config)
+    return format.toLowerCase() === 'svg'
+      ? domtoimage.toSvg(node, config)
+      : domtoimage.toPng(node, config)
   }
 
   updateCode(code) {
@@ -132,8 +131,8 @@ class Editor extends React.Component {
     this.setState({ aspectRatio })
   }
 
-  save(format) {
-    this.getCarbonImage(format).then(dataUrl => {
+  save({ format } = { format: 'png' }) {
+    this.getCarbonImage({ format }).then(dataUrl => {
       const link = document.createElement('a')
       link.download = 'carbon.' + format
       link.href = dataUrl
@@ -145,7 +144,7 @@ class Editor extends React.Component {
 
   upload() {
     this.setState({ uploading: true })
-    this.getCarbonImage('png')
+    this.getCarbonImage({ format: 'png' })
       .then(api.tweet)
       .then(() => this.setState({ uploading: false }))
       .catch(err => {
@@ -191,12 +190,16 @@ class Editor extends React.Component {
                 style={{ marginRight: '8px' }}
               />
               <Button
-                onClick={e => this.save('png')}
+                onClick={e => this.save()}
                 title="Save Image (PNG)"
                 color="#c198fb"
                 style={{ marginRight: '8px' }}
               />
-              <Button onClick={e => this.save('svg')} title="Save Vector (SVG)" color="#9fca56" />
+              <Button
+                onClick={e => this.save({ format: 'svg' })}
+                title="Save Vector (SVG)"
+                color="#9fca56"
+              />
             </div>
           </Toolbar>
 

From 4e15b660015e075cc8251a1bbd15563b793eb0c9 Mon Sep 17 00:00:00 2001
From: Mike Fix <mrfix84@gmail.com>
Date: Sun, 4 Feb 2018 14:35:23 -0800
Subject: [PATCH 4/4] Add save as dropdown (needs reconfiguring + style)

---
 components/Dropdown.js |  2 +-
 pages/editor.js        | 14 ++++++++------
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/components/Dropdown.js b/components/Dropdown.js
index 142d6be..75526f9 100644
--- a/components/Dropdown.js
+++ b/components/Dropdown.js
@@ -71,7 +71,7 @@ class Dropdown extends React.Component {
         onClick={this.toggle}
       >
         <div className={`dropdown-display ${this.state.isVisible ? 'is-visible' : ''}`}>
-          <span>{this.props.selected.name}</span>
+          <span style={{ minWidth: '4rem' }}>{this.props.selected.name}</span>
           <div className="arrow-down">
             <ArrowDown />
           </div>
diff --git a/pages/editor.js b/pages/editor.js
index 7f3de5b..958eb21 100644
--- a/pages/editor.js
+++ b/pages/editor.js
@@ -14,6 +14,7 @@ import Settings from '../components/Settings'
 import Toolbar from '../components/Toolbar'
 import Overlay from '../components/Overlay'
 import Carbon from '../components/Carbon'
+import ArrowDown from '../components/svg/Arrowdown'
 import api from '../lib/api'
 import {
   THEMES,
@@ -75,6 +76,7 @@ class Editor extends React.Component {
         paddingHorizontal: '32px',
         uploading: false,
         code: props.content,
+        saveAs: 'png',
         _initialState: this.props.initialState
       },
       this.props.initialState
@@ -190,15 +192,15 @@ class Editor extends React.Component {
                 style={{ marginRight: '8px' }}
               />
               <Button
-                onClick={e => this.save()}
-                title="Save Image (PNG)"
+                onClick={e => this.save({ format: this.state.saveAs })}
+                title="Save Image"
                 color="#c198fb"
                 style={{ marginRight: '8px' }}
               />
-              <Button
-                onClick={e => this.save({ format: 'svg' })}
-                title="Save Vector (SVG)"
-                color="#9fca56"
+              <Dropdown
+                selected={{ id: this.state.saveAs, name: `(${this.state.saveAs.toUpperCase()})` }}
+                list={['png', 'svg'].map(id => ({ id, name: id.toUpperCase() }))}
+                onChange={saveAs => this.setState({ saveAs: saveAs.id })}
               />
             </div>
           </Toolbar>