From d84f7895406353ecf7707007e84820db48e66568 Mon Sep 17 00:00:00 2001
From: Alexander Misel <7542439+AlexanderMisel@users.noreply.github.com>
Date: Wed, 20 Dec 2017 16:30:38 +0800
Subject: [PATCH] change font name with CSS

As a global CSS font setting often overrides <font face="xxx">, we should style with CSS. Change `ontentDefault` to not repeat the icon used by fontsize. Additionally, I think the FontName setting don't need to clear.
---
 src/js/extensions/fontname.js | 18 +++---------------
 1 file changed, 3 insertions(+), 15 deletions(-)

diff --git a/src/js/extensions/fontname.js b/src/js/extensions/fontname.js
index df54d73a2..9824369c0 100644
--- a/src/js/extensions/fontname.js
+++ b/src/js/extensions/fontname.js
@@ -6,7 +6,7 @@
         name: 'fontname',
         action: 'fontName',
         aria: 'change font name',
-        contentDefault: '&#xB1;', // ±
+        contentDefault: '<b>A</b>', // ±
         contentFA: '<i class="fa fa-font"></i>',
 
         fonts: ['', 'Arial', 'Verdana', 'Times New Roman'],
@@ -82,7 +82,6 @@
 
         doFormCancel: function () {
             this.base.restoreSelection();
-            this.clearFontName();
             this.base.checkSelection();
         },
 
@@ -145,21 +144,10 @@
             return this.getForm().querySelector('select.medium-editor-toolbar-select');
         },
 
-        clearFontName: function () {
-            MediumEditor.selection.getSelectedElements(this.document).forEach(function (el) {
-                if (el.nodeName.toLowerCase() === 'font' && el.hasAttribute('face')) {
-                    el.removeAttribute('face');
-                }
-            });
-        },
-
         handleFontChange: function () {
             var font = this.getSelect().value;
-            if (font === '') {
-                this.clearFontName();
-            } else {
-                this.execAction('fontName', { value: font });
-            }
+            this.base.options.ownerDocument.execCommand('styleWithCSS', false, true);
+            this.execAction('fontName', { value: font });
         },
 
         handleFormClick: function (event) {