<commit_before>{% trans_default_domain 'admin' %}

(function () {
    var widgetName        = '{{ widget.name }}';
    var widgetPlaceholder = '{{ widget.placeholder|raw }}';
    {% if icon %}

    var widgetIcon        = '{{ icon|raw }}';
    {% endif %}

    CKEDITOR.plugins.add(widgetName, {
        requires: 'widget',
        init:     function (editor) {
            var widgetTitle = '{{ widget.resolvedOptions.title|trans }}';

            editor.widgets.add(widgetName, {
                template:        '<div class="' + widgetName + '">' + widgetPlaceholder + '</div>',
                allowedContent:  'div(!' + widgetName + ')',
                requiredContent: 'div(' + widgetName + ')',
                upcast:          function (element) {
                    return 'div' === element.name
                        && element.hasClass(widgetName)
                        && 1 === element.children.length
                        && widgetPlaceholder === element.children[0].value;
                },
                init: function () {
                    this.element.setHtml('');
                    this.element.setAttribute('title', widgetTitle);
                },
                downcast: function (element) {
                    delete element.attributes.title;
                    element.setHtml(widgetPlaceholder);
                }
            });

            editor.ui.addButton(widgetName, {
                label:   widgetTitle,
                command: widgetName{% if icon %},{% endif %}
                {% if icon %}

                icon:    widgetName
                {% endif %}

            });
            {% if icon %}

            editor.on('instanceReady', function () {
                var icons = document.getElementsByClassName('cke_button__' + widgetName + '_icon');

                if (!icons.length) {
                    return;
                }

                var style = 'background: url("' + widgetIcon + '"); background-size: 16px 16px;';

                for (var i = 0; i < icons.length; i++) {
                    icons[i].setAttribute('style', style);
                    {% if letter is not same as(null) %}

                    if (!icons[i].children.length) {
                        var letter = document.createElement('span');
                        letter.innerHTML = '{{ letter }}';
                        letter.setAttribute('style', [
                            'position:    absolute',
                            'right:       2px',
                            'bottom:      0',
                            'color:       #fff',
                            'font-size:   12px',
                            'font-weight: bold',
                            'text-shadow: 0px 0px 1px #000;'
                        ].join(';'));

                        icons[i].appendChild(letter);
                    }
                    {% endif %}
<commit_msg>Style CKEditor button letter using class.<commit_after>{% trans_default_domain 'admin' %}

(function () {
    var widgetName        = '{{ widget.name }}';
    var widgetPlaceholder = '{{ widget.placeholder|raw }}';
    {% if icon %}

    var widgetIcon        = '{{ icon|raw }}';
    {% endif %}

    CKEDITOR.plugins.add(widgetName, {
        requires: 'widget',
        init:     function (editor) {
            var widgetTitle = '{{ widget.resolvedOptions.title|trans }}';

            editor.widgets.add(widgetName, {
                template:        '<div class="' + widgetName + '">' + widgetPlaceholder + '</div>',
                allowedContent:  'div(!' + widgetName + ')',
                requiredContent: 'div(' + widgetName + ')',
                upcast:          function (element) {
                    return 'div' === element.name
                        && element.hasClass(widgetName)
                        && 1 === element.children.length
                        && widgetPlaceholder === element.children[0].value;
                },
                init: function () {
                    this.element.setHtml('');
                    this.element.setAttribute('title', widgetTitle);
                },
                downcast: function (element) {
                    delete element.attributes.title;
                    element.setHtml(widgetPlaceholder);
                }
            });

            editor.ui.addButton(widgetName, {
                label:   widgetTitle,
                command: widgetName{% if icon %},{% endif %}
                {% if icon %}

                icon:    widgetName
                {% endif %}

            });
            {% if icon %}

            editor.on('instanceReady', function () {
                var icons = document.getElementsByClassName('cke_button__' + widgetName + '_icon');

                if (!icons.length) {
                    return;
                }

                var style = 'background: url("' + widgetIcon + '"); background-size: 16px 16px;';

                for (var i = 0; i < icons.length; i++) {
                    icons[i].setAttribute('style', style);
                    {% if letter is not same as(null) %}

                    if (!icons[i].children.length) {
                        var letter = document.createElement('span');
                        letter.innerHTML = '{{ letter }}';
                        letter.setAttribute('class', 'cke_button_letter');

                        icons[i].appendChild(letter);
                    }
                    {% endif %}

{'fraction_non_alphanumeric': 0.12879752592323085, 'fraction_numerical': 0.004366017827906131, 'mean_word_length': 1.2160419185812172, 'pattern_counts': {'":': 0, '<': 9, '<?xml version=': 0, '>': 7, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1996145', 'n_tokens_mistral': 1408, 'n_tokens_neox': 1247, 'n_words': 260}