font selector with proper styles and functionality + local font selector

src/components/font_control/font_control.js

@@ -1,13 +1,19 @@
-import { set } from 'lodash'
+import { set, clone } from 'lodash'
 import Select from '../select/select.vue'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 import Popover from 'src/components/popover/popover.vue'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
-import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons'
+import {
+  faExclamationTriangle,
+  faKeyboard,
+  faFont
+} from '@fortawesome/free-solid-svg-icons'
 
 library.add(
-  faExclamationTriangle
+  faExclamationTriangle,
+  faKeyboard,
+  faFont
 )
 
 const PRESET_FONTS = new Set(['serif', 'sans-serif', 'monospace', 'inherit'])
@@ -24,20 +30,38 @@ export default {
   emits: ['update:modelValue'],
   data () {
     return {
-      localValue: this.modelValue,
-      customFamily: '',
+      manualEntry: true,
+      localValue: clone(this.modelValue),
+      familyCustomLocal: null,
       availableOptions: [
         this.noInherit ? '' : 'inherit',
-        'local',
-        ...(this.options || []),
         'serif',
+        'sans-serif',
         'monospace',
-        'sans-serif'
+        'local',
+        ...(this.options || [])
       ].filter(_ => _)
     }
   },
   beforeUpdate () {
-    this.localValue = this.modelValue
+    this.localValue = clone(this.modelValue)
+    if (this.familyCustomLocal === null && !this.isInvalidFamily(this.modelValue?.family)) {
+      this.familyCustomLocal = this.modelValue?.family
+    }
+  },
+  methods: {
+    lookupLocalFonts () {
+      if (!this.fontsList) {
+        this.$store.dispatch('queryLocalFonts')
+      }
+      this.toggleManualEntry()
+    },
+    isInvalidFamily (value) {
+      return PRESET_FONTS.has(value) || (value === '')
+    },
+    toggleManualEntry () {
+      this.manualEntry = !this.manualEntry
+    }
   },
   computed: {
     present () {
@@ -46,32 +70,39 @@ export default {
     defaultValue () {
       return this.localValue || this.fallback || {}
     },
+    fontsListCapable () {
+      return this.$store.state.interface.browserSupport.localFonts
+    },
+    fontsList () {
+      return this.$store.state.interface.localFonts
+    },
     family: {
       get () {
         return this.defaultValue.family
       },
       set (v) {
+        this.familyCustomLocal = ''
         set(this.localValue, 'family', v)
         this.$emit('update:modelValue', this.localValue)
       }
     },
     familyCustom: {
       get () {
-        return this.customFamily
+        return this.familyCustomLocal
       },
       set (v) {
-        this.customFamily = v
-        if (!PRESET_FONTS.has(this.customFamily)) {
+        this.familyCustomLocal = v
+        if (!this.isInvalidFamily(v)) {
           set(this.localValue, 'family', v)
-          this.$emit('update:modelValue', this.customFamily)
+          this.$emit('update:modelValue', this.localValue)
         }
       }
     },
     invalidCustom () {
-      return PRESET_FONTS.has(this.customFamily)
+      return this.isInvalidFamily(this.familyCustomLocal)
     },
     isCustom () {
-      return !PRESET_FONTS.has(this.family)
+      return !PRESET_FONTS.has(this.defaultValue.family)
     },
     preset: {
       get () {