Update font management interfaces for VM update

Author: GarboMuffin

src/components/tw-fonts-modal/add-custom-font.jsx

@@ -162,6 +162,7 @@ class AddCustomFont extends React.Component {
                             name={this.state.name}
                             onChange={this.handleChangeName}
                             fontManager={this.props.fontManager}
+                            isCustom
                         />
 
                         <LoadTemporaryFont url={this.state.url}>{family => (

src/components/tw-fonts-modal/add-system-font.jsx

@@ -17,24 +17,10 @@ class AddSystemFont extends React.Component {
         ]);
         this.state = {
             name: '',
-            fallback: FontFallback.DEFAULT,
-            localFonts: null
+            fallback: FontFallback.DEFAULT
         };
     }
 
-    componentDidMount () {
-        // Chrome-only API
-        if (typeof queryLocalFonts === 'function') {
-            // eslint-disable-next-line no-undef
-            queryLocalFonts().then(fonts => {
-                const uniqueFamilies = [...new Set(fonts.map(i => i.family))];
-                this.setState({
-                    localFonts: uniqueFamilies
-                });
-            });
-        }
-    }
-
     handleChangeName (name) {
         this.setState({
             name
@@ -69,7 +55,7 @@ class AddSystemFont extends React.Component {
                     onChange={this.handleChangeName}
                     fontManager={this.props.fontManager}
                     placeholder="Wingdings"
-                    options={this.state.localFonts}
+                    isCustom={false}
                 />
 
                 {this.state.name && (

src/components/tw-fonts-modal/font-name.jsx

@@ -19,12 +19,24 @@ class FontName extends React.Component {
         ]);
         this.state = {
             focused: false,
-            rect: null
+            rect: null,
+            localFonts: []
         };
     }
 
     componentDidMount () {
         window.addEventListener('resize', this.handleResize);
+
+        // Chrome-only API
+        if (typeof queryLocalFonts === 'function') {
+            // eslint-disable-next-line no-undef
+            queryLocalFonts().then(fonts => {
+                const uniqueFamilies = [...new Set(fonts.map(i => i.family))];
+                this.setState({
+                    localFonts: uniqueFamilies
+                });
+            });
+        }
     }
 
     componentWillUnmount () {
@@ -52,7 +64,12 @@ class FontName extends React.Component {
     }
 
     handleBlur () {
-        this.props.onChange(this.props.fontManager.getSafeName(this.props.name));
+        const sanitizedName = this.props.isCustom ? (
+            this.props.fontManager.getUnusedCustomFont(this.props.name)
+        ) : (
+            this.props.fontManager.getUnusedSystemFont(this.props.name)
+        );
+        this.props.onChange(sanitizedName);
         this.setState({
             focused: false
         });
@@ -78,13 +95,13 @@ class FontName extends React.Component {
     }
 
     getFilteredOptions () {
-        if (!this.state.focused || !this.props.options) {
+        if (this.props.isCustom || !this.state.focused) {
             return [];
         }
         const name = this.props.name.toLowerCase();
-        const candidates = this.props.options
+        const candidates = this.state.localFonts
             .filter(family => family.toLowerCase().includes(name));
-        if (candidates.length === 0 && candidates[0] === this.props.name) {
+        if (candidates.length === 1 && candidates[0] === this.props.name) {
             return [];
         }
         return candidates;
@@ -96,7 +113,7 @@ class FontName extends React.Component {
             name,
             onChange,
             fontManager,
-            options,
+            isCustom,
             /* eslint-enable no-unused-vars */
             ...props
         } = this.props;
@@ -145,9 +162,10 @@ FontName.propTypes = {
     name: PropTypes.string.isRequired,
     onChange: PropTypes.func.isRequired,
     fontManager: PropTypes.shape({
-        getSafeName: PropTypes.func.isRequired
+        getUnusedSystemFont: PropTypes.func.isRequired,
+        getUnusedCustomFont: PropTypes.func.isRequired,
     }).isRequired,
-    options: PropTypes.arrayOf(PropTypes.string.isRequired)
+    isCustom: PropTypes.bool.isRequired
 };
 
 export default FontName;

src/lib/vm-manager-hoc.jsx

@@ -15,6 +15,15 @@ import {
 } from '../reducers/project-state';
 import log from './log';
 
+/**
+ * List of fonts that could be used by security prompts.
+ */
+const SECURITY_CRITICAL_FONTS = [
+    'Helvetica Neue',
+    'Helvetica',
+    'Arial'
+];
+
 /*
  * Higher Order Component to manage events emitted by the VM
  * @param {React.Component} WrappedComponent component to manage VM events for
@@ -37,6 +46,9 @@ const vmManagerHOC = function (WrappedComponent) {
                 } catch (e) {
                     log.error('could not create scratch-audio', e);
                 }
+                for (const font of SECURITY_CRITICAL_FONTS) {
+                    this.props.vm.runtime.fontManager.restrictFont(font);
+                }
                 this.props.vm.initialized = true;
                 this.props.vm.setLocale(this.props.locale, this.props.messages);
             }