Advance custom plugin.

hallo-custombuttons.js

(function () {
    (function (jQuery) {
        return jQuery.widget("IKS.blockquote", {
            options: {
                editable: null,
                toolbar: null,
                uuid: '',
                quotes: {
                    blockquotebutton: true,
                    blockquotebuttonwithclass: true,
                    blockquotebuttoncite: true
                },
                buttonCssClass: null
            },
            populateToolbar: function (toolbar) {
                var buttonize, buttonset,
                    _this = this;

                getEnclosingQuote = function () {
                    var node;

                    node = _this.options.editable.getSelection().commonAncestorContainer;
                    return $(node).parents('blockquote').get(0);
                };

                getEnclosingQuoteWithClass = function () {
                    var node;

                    node = _this.options.editable.getSelection().commonAncestorContainer;
                    return $(node).parents('.pull-out').get(0);
                };

                getEnclosingCite = function () {
                    var node;

                    node = _this.options.editable.getSelection().commonAncestorContainer;
                    return $(node).parents('cite').get(0);
                };
                buttonset = jQuery("<span class=\"" + _this.widgetName + "\"></span>");
                buttonize = function (type, label) {
                    var buttonElement;
                    buttonElement = jQuery('<span></span>');
                    buttonElement.hallobutton({
                        uuid: _this.options.uuid,
                        editable: _this.options.editable,
                        label: label,
                        icon: 'fa fa-' + (type == 'blockquotebutton' ? 'quote-left' : type == 'blockquotebuttoncite' ? 'comment-o' : 'stack-exchange'),
                        command: null,
                        queryState: function (event) {
                            if (type === 'blockquotebutton') {
                                return buttonElement.hallobutton('checked', getEnclosingQuote());
                            }
                            if (type === 'blockquotebuttonwithclass') {
                                var refreshedButton = buttonElement.hallobutton('checked', getEnclosingQuoteWithClass());
                                if ($(refreshedButton).hasClass('ui-state-active')) {
                                    $(toolbar).find('button').not($(buttonElement).children()[0]).removeClass('ui-state-active');
                                }
                                return refreshedButton;
                            }
                            if (type === 'blockquotebuttoncite') {
                                var refreshedButton = buttonElement.hallobutton('checked', getEnclosingCite());
                                if ($(refreshedButton).hasClass('ui-state-active')) {
                                    $(toolbar).find('button').not($(buttonElement).children()[0]).removeClass('ui-state-active');
                                }
                                return refreshedButton;
                            }
                        }
                    });

                    buttonset.append(buttonElement);

                    if (type === 'blockquotebutton') {
                        buttonElement.on('click', function (event) {
                            var lastSelection;
                            var enclosingQuote = getEnclosingQuote();

                            if (!enclosingQuote) {
                                lastSelection = _this.options.editable.getSelection();

                                if (!lastSelection.collapsed) {
                                    var newNode = document.createElement("blockquote");
                                    newNode.appendChild(document.createTextNode(lastSelection.toString()));

                                    lastSelection.deleteContents();
                                    lastSelection.insertNode(newNode);
                                    lastSelection.setStartAfter(newNode);
                                    lastSelection.setEndAfter(newNode);

                                    newNode = document.createElement("br");
                                    lastSelection.insertNode(newNode);
                                    lastSelection.setStartAfter(newNode);
                                    lastSelection.setEndAfter(newNode);

                                    _this.options.editable.element.trigger('change');
                                }
                            }
                            else {
                                $(enclosingQuote).replaceWith($(enclosingQuote).text());
                                buttonElement.hallobutton('checked', false);
                                _this.options.editable.element.trigger('change');
                            }
                            return false;
                        });
                    }
                    if (type === 'blockquotebuttonwithclass') {
                        buttonElement.on('click', function (event) {
                            var lastSelection;
                            var enclosingQuote = getEnclosingQuoteWithClass();

                            if (!getEnclosingQuoteWithClass()) {
                                lastSelection = _this.options.editable.getSelection();

                                if (!lastSelection.collapsed) {
                                    var newNode = document.createElement("blockquote");
                                    newNode.className = "pull-out";
                                    newNode.appendChild(document.createTextNode(lastSelection.toString()));

                                    lastSelection.deleteContents();
                                    lastSelection.insertNode(newNode);
                                    lastSelection.setStartAfter(newNode);
                                    lastSelection.setEndAfter(newNode);

                                    newNode = document.createElement("br");
                                    lastSelection.insertNode(newNode);
                                    lastSelection.setStartAfter(newNode);
                                    lastSelection.setEndAfter(newNode);

                                    _this.options.editable.element.trigger('change');
                                }
                            }
                            else {
                                $(enclosingQuote).replaceWith($(enclosingQuote).text());
                                buttonElement.hallobutton('checked', false);
                                _this.options.editable.element.trigger('change');
                            }
                            return false;
                        });
                    }
                    if (type === 'blockquotebuttoncite') {
                        buttonElement.on('click', function (event) {
                            var lastSelection, parentElement, eol;
                            var enclosingCite = getEnclosingCite();

                            if (!enclosingCite) {
                                lastSelection = _this.options.editable.getSelection();

                                if (!lastSelection.collapsed) {
                                    parentElement = $(lastSelection.endContainer).parent();

                                    if (parentElement.is("blockquote")) {
                                        parentElement.append(lastSelection.createContextualFragment("<cite>" + lastSelection.toString() + "</cite>"));
                                        lastSelection.deleteContents();
                                        eol = $("<br/>").insertAfter(parentElement);
                                        placeCaretAtEnd(eol[0]);
                                        _this.options.editable.element.trigger('change');
                                    }

                                }

                            }
                            else {
                                $(enclosingCite).replaceWith($(enclosingCite).text());
                                buttonElement.hallobutton('checked', false);
                                _this.options.editable.element.trigger('change');
                            }
                            return false;
                        });
                    }
                };
                if (this.options.quotes.blockquotebutton) {
                    buttonize("blockquotebutton", "Block quote");
                }
                if (this.options.quotes.blockquotebuttonwithclass) {
                    buttonize("blockquotebuttonwithclass", "Pull out quote");
                }
                if (this.options.quotes.blockquotebuttoncite) {
                    buttonize("blockquotebuttoncite", "Cite");
                }
                buttonset.hallobuttonset();
                return toolbar.append(buttonset);
            }
        });
    })(jQuery);
}).call(this);