[CLOSED] Font family not correctly shown in HtmlEditor with Chrome

[Peter.Treier]

Dear Support,
I am using Ext.Net v 2.5.2 in an asp.net application having .NET Framework 4.5.2 as target framework.

An instance of the HtmlEditor is declared in the markup code, inside a container, providing a custom list of font families to manage:

                            <ext:Container runat="server" ID="MessageHtmlEditorContainer" Layout="HBoxLayout" Width="698">
                                <Items>
                                    <ext:Label runat="server" Width="105" Text="<%$ I18n: Label_Message %>" ID="MessageLabel" />
                                    <ext:HtmlEditor
                                        ID="MessageHtmlEditor"
                                        runat="server"
                                        Width="593"
                                        Height="200" 
                                        FontFamilies="Agency FB, Albertina, Antiqua, Architect, Arial, BankFuturistic, BankGothic, Blackletter, Blagovest, Calibri, 
                                                      Comic Sans MS, Courier, Cursive, Decorative, Fantasy, Fraktur, Frosty, Garamond, Georgia, Helvetica, Impact, 
                                                      Minion, Modern, Monospace, Open Sans, Palatino, Perpetua, Roman, Sans-serif, Serif, Script, Swiss, Times, Times New Roman, 
                                                      Tw Cen MT, Verdana">
                                    </ext:HtmlEditor>
                                </Items>
                            </ext:Container>

Navigating with Chrome browser (Version 75.0.3770.142 (Official Build) (64-bit)) the font families having name with blank space inside, like "Times new roman", or "Courier new", when selected, are not shown in the font family selector combo. They are perfectly visible in the dropdown when the font family selector is open.
See the attached picture.



On other browsers: Edge, IE, Firefox all the font families are perfectly shown.

Thanks in advance for your help.

Peter Treier

[geoffrey.mcgill]

Hi Peter. We are investigating and attempting to reproduce locally. We will respond with an update today.

[fabricio.murta]

Hello Peter Treier!

It seems at some point, Chrome implemented a new behavior in the return of Document.queryCommandValue() (sorry, no specific documentation from MDN), that keeps quotes in the response when it has white spaces within. And that's quite a breaking change.

Well, and Ext.NET relied on that, which resulted in a bug that went fixed along the road to versions 3 and 4.

Here's something you can do to get rid of this problem in v2, by simply overriding the current implementation to strip extra quotes from the font name while updating the toolbar of the HTMLEditor component:

function stripQuotes(where) {
    var retVal = where;
    if (retVal.startsWith('"')) {
        retVal = retVal.substr(1);
    }

    if (retVal.endsWith('"')) {
        retVal = retVal.substr(0, retVal.length - 1);
    }

    return retVal;
}

Ext.define("fixFontSpaceDisplay", {
    override: "Ext.form.field.HtmlEditor",
    updateToolbar: function() {
        var me = this,
            i, l, btns, doc, name, queriedName, fontSelect,
            toolbarSubmenus;

        if (me.readOnly) {
            return;
        }

        if (!me.activated) {
            me.onFirstFocus();
            return;
        }

        btns = me.getToolbar().items.map;
        doc = me.getDoc();

        if (me.enableFont && !Ext.isSafari2) {
            queriedName = stripQuotes(doc.queryCommandValue('fontName'));
            name = (queriedName ? queriedName.split(",")[0].replace(/^'/,'').replace(/'$/,'') : me.defaultFont).toLowerCase();
            fontSelect = me.fontSelect.dom;
            if (name !== fontSelect.value || name != queriedName) {
                fontSelect.value = name;
            }
        }

        function updateButtons() {
            var state;
            
            for (i = 0, l = arguments.length, name; i < l; i++) {
                name  = arguments[i];
                
                
                
                try {
                    state = doc.queryCommandState(name);
                }
                catch (e) {
                    state = false;
                }
                
                btns[name].toggle(state);
            }
        }
        if(me.enableFormat){
            updateButtons('bold', 'italic', 'underline');
        }
        if(me.enableAlignments){
            updateButtons('justifyleft', 'justifycenter', 'justifyright');
        }
        if(!Ext.isSafari2 && me.enableLists){
            updateButtons('insertorderedlist', 'insertunorderedlist');
        }

        
        
        toolbarSubmenus = me.toolbar.query('menu');
        for (i = 0; i < toolbarSubmenus.length; i++) {
            toolbarSubmenus[i].hide();
        }
        me.syncValue();
    },
});

Hope this helps!

[Peter.Treier]

Hello Fabricio,
It perfectly fixed the behavior.
Many thanks.

[fabricio.murta]

Glad it helped, thanks for the feedback!