Ability to name file downloads (#562)

* Ability to name file downloads

- Closes #561

* fix codemirror-graphql

components/Editor.js

@@ -199,10 +199,11 @@ class Editor extends React.Component {
     const link = document.createElement('a')
 
     const timestamp = this.state.timestamp ? `_${formatTimestamp()}` : ''
+    const prefix = this.state.filename || 'carbon'
 
     return this.getCarbonImage({ format, type: 'blob' }).then(url => {
       if (format !== 'open ↗') {
-        link.download = `carbon${timestamp}.${format}`
+        link.download = `${prefix}${timestamp}.${format}`
       }
       link.href = url
       document.body.appendChild(link)

components/Settings.js

@@ -20,6 +20,7 @@ class Settings extends React.PureComponent {
     }
     this.toggle = this.toggle.bind(this)
     this.format = this.format.bind(this)
+    this.handleInputChange = this.handleInputChange.bind(this)
   }
 
   toggle() {
@@ -30,6 +31,10 @@ class Settings extends React.PureComponent {
     this.setState({ isVisible: false })
   }
 
+  handleInputChange(e) {
+    this.props.onChange(e.target.name, e.target.value)
+  }
+
   format() {
     return formatCode(this.props.code)
       .then(this.props.onChange.bind(this, 'code'))
@@ -53,6 +58,13 @@ class Settings extends React.PureComponent {
             selected={this.props.windowTheme || 'none'}
             onChange={this.props.onChange.bind(null, 'windowTheme')}
           />
+          <input
+            title="filename"
+            placeholder="File name..."
+            value={this.props.filename}
+            name="filename"
+            onChange={this.handleInputChange}
+          />
           <FontSelect
             selected={this.props.fontFamily || 'Hack'}
             onChange={this.props.onChange.bind(null, 'fontFamily')}
@@ -203,6 +215,17 @@ class Settings extends React.PureComponent {
             .red {
               color: red;
             }
+
+            input {
+              padding: 8px;
+              width: 100%;
+              font-size: 12px;
+              color: ${COLORS.SECONDARY};
+              background: ${COLORS.BLACK};
+              border: none;
+              border-bottom: solid 1px ${COLORS.SECONDARY};
+              outline: none;
+            }
           `}
         </style>
       </div>

package.json

@@ -20,7 +20,7 @@
   "dependencies": {
     "axios": "^0.18.0",
     "codemirror": "^5.40.2",
-    "codemirror-graphql": "^0.8.2",
+    "codemirror-graphql": "0.7.1",
     "codemirror-mode-elixir": "^1.1.1",
     "dom-to-image": "^2.5.2",
     "downshift": "^3.1.4",

pages/index.js

@@ -13,7 +13,10 @@ import { saveState } from '../lib/util'
 class Index extends React.Component {
   onEditorUpdate = state => {
     updateQueryString(this.props.router, state)
-    saveState(localStorage, omit(state, ['code', 'backgroundImage', 'backgroundImageSelection']))
+    saveState(
+      localStorage,
+      omit(state, ['code', 'backgroundImage', 'backgroundImageSelection', 'filename'])
+    )
   }
 
   render() {