Show:
                            (function () {
                                'use strict';
                            
                                /**
                                 * The ButtonStylesListItem class provides functionality for previewing a style definition
                                 * inside a list and applying it to the current editor selection.
                                 *
                                 * @uses ButtonActionStyle
                                 * @uses ButtonStyle
                                 *
                                 * @class ButtonStylesListItem
                                 */
                                var ButtonStylesListItem = React.createClass({
                                    mixins: [AlloyEditor.ButtonStyle, AlloyEditor.ButtonActionStyle],
                            
                                    // Lifecycle. Provides static properties to the widget.
                                    statics: {
                                        /**
                                         * The name which will be used as an alias of the button in the configuration.
                                         *
                                         * @static
                                         * @property {String} key
                                         * @default buttonStylesListItem
                                         */
                                        key: 'buttonStylesListItem'
                                    },
                            
                                    /**
                                     * Lifecycle. Invoked once, both on the client and server, immediately before the initial rendering occurs.
                                     *
                                     * @method componentWillMount
                                     */
                                    componentWillMount: function () {
                                        // Styles with wildcard element (*) generate an empty tag in their preview < class="custom-class" />.
                                        // We default to element span and remove the margins to obtain a more consistent set of previews.
                                        var styleCfg = {
                                            element: 'span',
                                            styles: {
                                                margin: 0
                                            }
                                        };
                            
                                        styleCfg = CKEDITOR.tools.merge(styleCfg, this.props.style);
                            
                                        this._preview = new CKEDITOR.style(styleCfg).buildPreview(this.props.name);
                                    },
                            
                                    /**
                                     * Lifecycle. Renders the UI of the button.
                                     *
                                     * @method render
                                     * @return {Object} The content which should be rendered.
                                     */
                                    render: function() {
                                        // We need to use dangerouselySetInnterHTML since we're not in control of the style
                                        // preview that is generated by CKEditor.
                                        var className = this.props.name === this.props.activeStyle ? 'ae-toolbar-element active' : 'ae-toolbar-element';
                            
                                        return (
                                            <button className={className} dangerouslySetInnerHTML={{__html: this._preview}} onClick={this._onClick} tabIndex={this.props.tabIndex}></button>
                                        );
                                    },
                            
                                    /**
                                     * Applies the item style to the editor selection.
                                     *
                                     * @protected
                                     * @method _onClick
                                     */
                                    _onClick: function() {
                                        // Typically, we want the style to be the only one applied to the current selection, so
                                        // we execute the 'removeFormat' command first. Note that block styles won't be cleaned.
                                        // However, this is consistent with other editors implementations of this feature.
                                        this.props.editor.get('nativeEditor').execCommand('removeFormat');
                            
                                        this.applyStyle();
                                    }
                                });
                            
                                AlloyEditor.ButtonStylesListItem = ButtonStylesListItem;
                            }());