close settings dialog on font upload

components/Editor.js

@@ -26,7 +26,8 @@ import {
   DEFAULT_SETTINGS,
   DEFAULT_LANGUAGE,
   DEFAULT_PRESET_ID,
-  DEFAULT_THEME
+  DEFAULT_THEME,
+  FONTS
 } from '../lib/constants'
 import { serializeState, getRouteState } from '../lib/routing'
 import { getSettings, unescapeHtml, formatCode, omit } from '../lib/util'
@@ -86,6 +87,10 @@ class Editor extends React.Component {
       newState.language = unescapeHtml(newState.language)
     }
 
+    if (newState.fontFamily && !FONTS.find(({ id }) => id === newState.fontFamily)) {
+      newState.fontFamily = DEFAULT_SETTINGS.fontFamily
+    }
+
     this.updateState(newState)
 
     this.isSafari =

components/FontSelect.js

@@ -13,15 +13,12 @@ const Font = ({ id, name }) => (
 
 function FontSelect(props) {
   const inputEl = React.useRef(null)
-  const [fonts, updateFonts] = React.useState(FONTS)
 
   function onChange(id) {
     if (id === 'upload') {
       inputEl.current.click()
     } else {
-      props.onChange('fontFamily', id)
+      props.onChange(id)
-      const font = fonts.find(f => f.id === id)
-      props.onChange('fontUrl', font.url || null)
     }
   }
 
@@ -31,16 +28,14 @@ function FontSelect(props) {
     const name = files[0].name.split('.')[0]
     const url = await blobToUrl(files[0])
 
-    updateFonts(fonts => [{ id: name, name, url }, ...fonts])
+    props.onUpload(name, url)
-    props.onChange('fontFamily', name)
-    props.onChange('fontUrl', url)
   }
 
   return (
     <div>
       <ListSetting
         title="Font"
-        items={[{ id: 'upload', name: 'Upload +' }, ...fonts]}
+        items={[{ id: 'upload', name: 'Upload +' }, ...FONTS]}
         {...props}
         onChange={onChange}
       >

components/Settings.js

@@ -106,10 +106,14 @@ const WindowSettings = React.memo(
 )
 
 const TypeSettings = React.memo(
-  ({ onChange, font, size, lineHeight, onWidthChanging, onWidthChanged }) => {
+  ({ onChange, onUpload, font, size, lineHeight, onWidthChanging, onWidthChanged }) => {
     return (
       <div className="settings-content">
-        <FontSelect selected={font} onChange={onChange} />
+        <FontSelect
+          selected={font}
+          onUpload={onUpload}
+          onChange={onChange.bind(null, 'fontFamily')}
+        />
         <Slider
           label="Size"
           value={size}
@@ -241,6 +245,12 @@ class Settings extends React.PureComponent {
     this.setState({ previousSettings: null })
   }
 
+  handleFontUpload = (id, url) => {
+    this.props.onChange('fontFamily', id)
+    this.props.onChange('fontUrl', url)
+    this.props.toggleVisibility()
+  }
+
   getSettingsFromProps = () =>
     omitBy(this.props, (v, k) => typeof v === 'function' || k === 'preset')
 
@@ -321,6 +331,7 @@ class Settings extends React.PureComponent {
         return (
           <TypeSettings
             onChange={this.handleChange}
+            onUpload={this.handleFontUpload}
             onWidthChanging={this.handleWidthChanging}
             onWidthChanged={this.handleWidthChanged}
             font={this.props.fontFamily}