WYSIWYGTextEditor - Change font sizes

Question

I am having some trouble changing the font sizes and name of the fonts in the WYSIWYGTextEditor drop down. I am using Blazor to implement the text editor.

So my problem currently is in the JS where the select is populating the font sizes.

var SIZES = ['small', false, 'large', 'huge'];

key: 'buildPickers', value: function buildPickers(selects, icons) { var _this2 = this;

this.pickers = selects.map(function (select) {
    if (select.classList.contains('ql-align')) {
        if (select.querySelector('option') == null) {
            fillSelect(select, ALIGNS);
        }
        return new _iconPicker2.default(select, icons.align);
    } else if (select.classList.contains('ql-background') || select.classList.contains('ql-color')) {
        var format = select.classList.contains('ql-background') ? 'background' : 'color';
        if (select.querySelector('option') == null) {
            fillSelect(select, COLORS, format === 'background' ? '#ffffff' : '#000000');
        }
        return new _colorPicker2.default(select, icons[format]);
    } else {
        if (select.querySelector('option') == null) {
            if (select.classList.contains('ql-font')) {
                fillSelect(select, FONTS);
            } else if (select.classList.contains('ql-header')) {
                fillSelect(select, HEADERS);
            } else if (select.classList.contains('ql-size')) {
                fillSelect(select, SIZES);
            }
        }
        return new _picker2.default(select);
    }
});
var update = function update() {
    _this2.pickers.forEach(function (picker) {
        picker.update();
    });
};
this.quill.on(_emitter2.default.events.EDITOR_CHANGE, update);

}

function fillSelect(select, values) { var defaultValue = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;

values.forEach(function (value) {
    var option = document.createElement('option');
    if (value === defaultValue) {
        option.setAttribute('selected', 'selected');
    } else {
        option.setAttribute('value', value);
    }
    select.appendChild(option);
});

}

so here if I change the values in "SIZES" it does not update in the select, the fillSelect function also never hit with the values with of SIZES, it does however hit with the COLORS array. Is there a reason for that? This is from the quill.js script.

If any additional information is required, please let me know.

Any help would be appreciated.

WYSIWYGTextEditor, changing the font names and add more on the select on the text editor.