xmt_froala 0.3.1

data/vendor/assets/javascripts/xmt_froala/plugins/lists.min.js

@@ -0,0 +1,7 @@
+/*!
+ * froala_editor v2.8.1 (https://www.froala.com/wysiwyg-editor)
+ * License https://froala.com/wysiwyg-editor/terms/
+ * Copyright 2014-2018 Froala Labs
+ */
+
+!function(n){"function"==typeof define&&define.amd?define(["jquery"],n):"object"==typeof module&&module.exports?module.exports=function(e,t){return t===undefined&&(t="undefined"!=typeof window?require("jquery"):require("jquery")(e)),n(t)}:n(window.jQuery)}(function(m){m.FE.PLUGINS.lists=function(d){function g(e){return'<span class="fr-open-'+e.toLowerCase()+'"></span>'}function c(e){return'<span class="fr-close-'+e.toLowerCase()+'"></span>'}function a(e,t){!function(e,t){for(var n=[],a=0;a<e.length;a++){var r=e[a].parentNode;"LI"==e[a].tagName&&r.tagName!=t&&n.indexOf(r)<0&&n.push(r)}for(a=n.length-1;0<=a;a--){var i=m(n[a]);i.replaceWith("<"+t.toLowerCase()+" "+d.node.attributes(i.get(0))+">"+i.html()+"</"+t.toLowerCase()+">")}}(e,t);var n,a=d.html.defaultTag(),r=null;e.length&&(n="rtl"==d.opts.direction||"rtl"==m(e[0]).css("direction")?"margin-right":"margin-left");for(var i=0;i<e.length;i++)if("LI"!=e[i].tagName){var o=d.helpers.getPX(m(e[i]).css(n))||0;(e[i].style.marginLeft=null)===r&&(r=o);var l=0<r?"<"+t+' style="'+n+": "+r+'px;">':"<"+t+">",s="</"+t+">";for(o-=r;0<o/d.opts.indentMargin;)l+="<"+t+">",s+=s,o-=d.opts.indentMargin;a&&e[i].tagName.toLowerCase()==a?m(e[i]).replaceWith(l+"<li"+d.node.attributes(e[i])+">"+m(e[i]).html()+"</li>"+s):m(e[i]).wrap(l+"<li></li>"+s)}d.clean.lists()}function r(e){var t,n;for(t=e.length-1;0<=t;t--)for(n=t-1;0<=n;n--)if(m(e[n]).find(e[t]).length||e[n]==e[t]){e.splice(t,1);break}var a=[];for(t=0;t<e.length;t++){var r=m(e[t]),i=e[t].parentNode,o=r.attr("class");if(r.before(c(i.tagName)),"LI"==i.parentNode.tagName)r.before(c("LI")),r.after(g("LI"));else{var l="";o&&(l+=' class="'+o+'"');var s="rtl"==d.opts.direction||"rtl"==r.css("direction")?"margin-right":"margin-left";d.helpers.getPX(m(i).css(s))&&0<=(m(i).attr("style")||"").indexOf(s+":")&&(l+=' style="'+s+":"+d.helpers.getPX(m(i).css(s))+'px;"'),d.html.defaultTag()&&0===r.find(d.html.blockTagsQuery()).length&&r.wrapInner("<"+d.html.defaultTag()+l+"></"+d.html.defaultTag()+">"),d.node.isEmpty(r.get(0),!0)||0!==r.find(d.html.blockTagsQuery()).length||r.append("<br>"),r.append(g("LI")),r.prepend(c("LI"))}r.after(g(i.tagName)),"LI"==i.parentNode.tagName&&(i=i.parentNode.parentNode),a.indexOf(i)<0&&a.push(i)}for(t=0;t<a.length;t++){var f=m(a[t]),p=f.html();p=(p=p.replace(/<span class="fr-close-([a-z]*)"><\/span>/g,"</$1>")).replace(/<span class="fr-open-([a-z]*)"><\/span>/g,"<$1>"),f.replaceWith(d.node.openTagString(f.get(0))+p+d.node.closeTagString(f.get(0)))}d.$el.find("li:empty").remove(),d.$el.find("ul:empty, ol:empty").remove(),d.clean.lists(),d.html.wrap()}function i(e){d.selection.save();for(var t=0;t<e.length;t++){var n=e[t].previousSibling;if(n){var a=m(e[t]).find("> ul, > ol").last().get(0);if(a){for(var r=m("<li>").prependTo(m(a)),i=d.node.contents(e[t])[0];i&&!d.node.isList(i);){var o=i.nextSibling;r.append(i),i=o}m(n).append(m(a)),m(e[t]).remove()}else{var l=m(n).find("> ul, > ol").last().get(0);if(l)m(l).append(m(e[t]));else{var s=m("<"+e[t].parentNode.tagName+">");m(n).append(s),s.append(m(e[t]))}}}}d.clean.lists(),d.selection.restore()}function o(e){d.selection.save(),r(e),d.selection.restore()}function e(e){if("indent"==e||"outdent"==e){for(var t=!1,n=d.selection.blocks(),a=[],r=0;r<n.length;r++)"LI"==n[r].tagName?(t=!0,a.push(n[r])):"LI"==n[r].parentNode.tagName&&(t=!0,a.push(n[r].parentNode));t&&("indent"==e?i(a):o(a))}}return{_init:function(){d.events.on("commands.after",e),d.events.on("keydown",function(e){if(e.which==m.FE.KEYCODE.TAB){for(var t=d.selection.blocks(),n=[],a=0;a<t.length;a++)"LI"==t[a].tagName?n.push(t[a]):"LI"==t[a].parentNode.tagName&&n.push(t[a].parentNode);if(1<n.length||n.length&&(d.selection.info(n[0]).atStart||d.node.isEmpty(n[0])))return e.preventDefault(),e.stopPropagation(),e.shiftKey?o(n):i(n),!1}},!0)},format:function(e){d.selection.save(),d.html.wrap(!0,!0,!0,!0),d.selection.restore();for(var t=d.selection.blocks(),n=0;n<t.length;n++)"LI"!=t[n].tagName&&"LI"==t[n].parentNode.tagName&&(t[n]=t[n].parentNode);d.selection.save(),function(e,t){for(var n=!0,a=0;a<e.length;a++){if("LI"!=e[a].tagName)return!1;e[a].parentNode.tagName!=t&&(n=!1)}return n}(t,e)?r(t):a(t,e),d.html.unwrap(),d.selection.restore()},refresh:function(e,t){var n=m(d.selection.element());if(n.get(0)!=d.el){var a=n.get(0);(a="LI"!=a.tagName&&a.firstElementChild&&"LI"!=a.firstElementChild.tagName?n.parents("li").get(0):"LI"==a.tagName||a.firstElementChild?a.firstElementChild&&"LI"==a.firstElementChild.tagName?n.get(0).firstChild:n.get(0):n.parents("li").get(0))&&a.parentNode.tagName==t&&d.el.contains(a.parentNode)&&e.addClass("fr-active")}}}},m.FE.RegisterCommand("formatUL",{title:"Unordered List",refresh:function(e){this.lists.refresh(e,"UL")},callback:function(){this.lists.format("UL")},plugin:"lists"}),m.FE.RegisterCommand("formatOL",{title:"Ordered List",refresh:function(e){this.lists.refresh(e,"OL")},callback:function(){this.lists.format("OL")},plugin:"lists"}),m.FE.DefineIcon("formatUL",{NAME:"list-ul"}),m.FE.DefineIcon("formatOL",{NAME:"list-ol"})});

data/vendor/assets/javascripts/xmt_froala/plugins/paragraph_format.js

@@ -0,0 +1,290 @@
+/*!
+ * froala_editor v2.8.1 (https://www.froala.com/wysiwyg-editor)
+ * License https://froala.com/wysiwyg-editor/terms/
+ * Copyright 2014-2018 Froala Labs
+ */
+
+(function (factory) {
+    if (typeof define === 'function' && define.amd) {
+        // AMD. Register as an anonymous module.
+        define(['jquery'], factory);
+    } else if (typeof module === 'object' && module.exports) {
+        // Node/CommonJS
+        module.exports = function( root, jQuery ) {
+            if ( jQuery === undefined ) {
+                // require('jQuery') returns a factory that requires window to
+                // build a jQuery instance, we normalize how we use modules
+                // that require this pattern but the window provided is a noop
+                // if it's defined (how jquery works)
+                if ( typeof window !== 'undefined' ) {
+                    jQuery = require('jquery');
+                }
+                else {
+                    jQuery = require('jquery')(root);
+                }
+            }
+            return factory(jQuery);
+        };
+    } else {
+        // Browser globals
+        factory(window.jQuery);
+    }
+}(function ($) {
+
+  
+
+  $.extend($.FE.DEFAULTS, {
+    paragraphFormat: {
+      N: 'Normal',
+      H1: 'Heading 1',
+      H2: 'Heading 2',
+      H3: 'Heading 3',
+      H4: 'Heading 4',
+      PRE: 'Code'
+    },
+    paragraphFormatSelection: false,
+    paragraphDefaultSelection: 'Paragraph Format'
+  })
+
+  $.FE.PLUGINS.paragraphFormat = function (editor) {
+
+    /**
+     * Style content inside LI when LI is selected.
+     * This case happens only when the LI contains a nested list or when it has no block tag inside.
+     */
+    function _styleLiWithoutBlocks($li, val) {
+      var defaultTag = editor.html.defaultTag();
+
+      // If val is null or default tag already do nothing.
+      if (val && val.toLowerCase() != defaultTag) {
+
+        // Deal with nested lists.
+        if ($li.find('ul, ol').length > 0) {
+          var $el = $('<' + val + '>');
+          $li.prepend($el);
+          var node = editor.node.contents($li.get(0))[0];
+
+          while (node && ['UL', 'OL'].indexOf(node.tagName) < 0) {
+            var next_node = node.nextSibling;
+            $el.append(node);
+            node = next_node;
+          }
+        }
+
+        // Wrap list content.
+        else {
+          $li.html('<' + val + '>' + $li.html() + '</' + val + '>');
+        }
+      }
+    }
+
+    /**
+     * Style content inside LI.
+     */
+    function _styleLiWithBlocks($blk, val) {
+      var defaultTag = editor.html.defaultTag();
+
+      // Prepare a temp div.
+      if (!val || val.toLowerCase() == defaultTag) val = 'div class="fr-temp-div"';
+
+      $blk.replaceWith($('<' + val + '>').html($blk.html()));
+    }
+
+    /**
+     * Style content inside TD.
+     */
+    function _styleTdWithBlocks($blk, val) {
+      var defaultTag = editor.html.defaultTag();
+
+      // Prepare a temp div.
+      if (!val) val = 'div class="fr-temp-div"' + (editor.node.isEmpty($blk.get(0), true) ? ' data-empty="true"' : '');
+
+      // Return to the regular case. We don't use P inside TD/TH.
+      if (val.toLowerCase() == defaultTag) {
+
+        // If node is not empty, then add a BR.
+        if (!editor.node.isEmpty($blk.get(0), true)) {
+          $blk.append('<br/>');
+        }
+
+        $blk.replaceWith($blk.html());
+      }
+
+      // Replace with the new tag.
+      else {
+        $blk.replaceWith($('<' + val  + '>').html($blk.html()));
+      }
+    }
+
+    /**
+     * Basic style.
+     */
+    function _style($blk, val) {
+      if (!val) val = 'div class="fr-temp-div"' + (editor.node.isEmpty($blk.get(0), true) ? ' data-empty="true"' : '');
+      $blk.replaceWith($('<' + val  + ' ' + editor.node.attributes($blk.get(0)) + '>').html($blk.html()).removeAttr('data-empty'));
+    }
+
+    /**
+     * Apply style.
+     */
+    function apply (val) {
+
+      // Normal.
+      if (val == 'N') val = editor.html.defaultTag();
+
+      // Wrap.
+      editor.selection.save();
+      editor.html.wrap(true, true, !editor.opts.paragraphFormat.BLOCKQUOTE, true, true);
+      editor.selection.restore();
+
+      // Get blocks.
+      var blocks = editor.selection.blocks();
+
+      // Save selection to restore it later.
+      editor.selection.save();
+
+      editor.$el.find('pre').attr('skip', true);
+
+      // Go through each block and apply style to it.
+      for (var i = 0; i < blocks.length; i++) {
+        if (blocks[i].tagName != val && !editor.node.isList(blocks[i])) {
+          var $blk = $(blocks[i]);
+
+          // Style the content inside LI when there is selection right in LI.
+          if (blocks[i].tagName == 'LI') {
+            _styleLiWithoutBlocks($blk, val);
+          }
+
+          // Style the content inside LI when we have other tag in LI.
+          else if (blocks[i].parentNode.tagName == 'LI' && blocks[i]) {
+            _styleLiWithBlocks($blk, val);
+          }
+
+          // Style the content inside TD/TH.
+          else if (['TD', 'TH'].indexOf(blocks[i].parentNode.tagName) >= 0) {
+            _styleTdWithBlocks($blk, val);
+          }
+
+          // Regular case.
+          else {
+            _style($blk, val);
+          }
+        }
+      }
+
+      // Join PRE together.
+      editor.$el.find('pre:not([skip="true"]) + pre:not([skip="true"])').each(function () {
+        $(this).prev().append('<br>' + $(this).html());
+        $(this).remove();
+      });
+      editor.$el.find('pre').removeAttr('skip');
+
+      // Unwrap temp divs.
+      editor.html.unwrap();
+
+      // Restore selection.
+      editor.selection.restore();
+    }
+
+    function refreshOnShow($btn, $dropdown) {
+      var blocks = editor.selection.blocks();
+
+      if (blocks.length) {
+        var blk = blocks[0];
+        var tag = 'N';
+        var default_tag = editor.html.defaultTag();
+
+        if (blk.tagName.toLowerCase() != default_tag && blk != editor.el) {
+          tag = blk.tagName;
+        }
+
+        $dropdown.find('.fr-command[data-param1="' + tag + '"]').addClass('fr-active').attr('aria-selected', true);
+      }
+      else {
+        $dropdown.find('.fr-command[data-param1="N"]').addClass('fr-active').attr('aria-selected', true);
+      }
+    }
+
+    function refresh ($btn) {
+      if (editor.opts.paragraphFormatSelection) {
+        var blocks = editor.selection.blocks();
+
+        if (blocks.length) {
+          var blk = blocks[0];
+          var tag = 'N';
+          var default_tag = editor.html.defaultTag();
+
+          if (blk.tagName.toLowerCase() != default_tag && blk != editor.el) {
+            tag = blk.tagName;
+          }
+
+          if (['LI', 'TD', 'TH'].indexOf(tag) >= 0) {
+            tag = 'N';
+          }
+
+          $btn.find('> span').text(editor.language.translate(editor.opts.paragraphFormat[tag]));
+        }
+        else {
+          $btn.find('> span').text(editor.language.translate(editor.opts.paragraphFormat.N));
+        }
+      }
+    }
+
+    return {
+      apply: apply,
+      refreshOnShow: refreshOnShow,
+      refresh: refresh
+    }
+  }
+
+  // Register the font size command.
+  $.FE.RegisterCommand('paragraphFormat', {
+    type: 'dropdown',
+    displaySelection: function (editor) {
+      return editor.opts.paragraphFormatSelection;
+    },
+    defaultSelection: function (editor) {
+      return editor.language.translate(editor.opts.paragraphDefaultSelection);
+    },
+    displaySelectionWidth: 125,
+    html: function () {
+      var c = '<ul class="fr-dropdown-list" role="presentation">';
+      var options =  this.opts.paragraphFormat;
+
+      for (var val in options) {
+        if (options.hasOwnProperty(val)) {
+          var shortcut = this.shortcuts.get('paragraphFormat.' + val);
+
+          if (shortcut) {
+            shortcut = '<span class="fr-shortcut">' + shortcut + '</span>';
+          }
+          else {
+            shortcut = '';
+          }
+
+          c += '<li role="presentation"><' + (val == 'N' ? this.html.defaultTag() || 'DIV' : val) + ' style="padding: 0 !important; margin: 0 !important;" role="presentation"><a class="fr-command" tabIndex="-1" role="option" data-cmd="paragraphFormat" data-param1="' + val + '" title="' + this.language.translate(options[val]) + '">' + this.language.translate(options[val]) + '</a></' + (val == 'N' ? this.html.defaultTag() || 'DIV' : val) + '></li>';
+        }
+      }
+      c += '</ul>';
+
+      return c;
+    },
+    title: 'Paragraph Format',
+    callback: function (cmd, val) {
+      this.paragraphFormat.apply(val);
+    },
+    refresh: function ($btn) {
+      this.paragraphFormat.refresh($btn);
+    },
+    refreshOnShow: function ($btn, $dropdown) {
+      this.paragraphFormat.refreshOnShow($btn, $dropdown);
+    },
+    plugin: 'paragraphFormat'
+  })
+
+  // Add the font size icon.
+  $.FE.DefineIcon('paragraphFormat', {
+    NAME: 'paragraph'
+  });
+
+}));

data/vendor/assets/javascripts/xmt_froala/plugins/paragraph_format.min.js

@@ -0,0 +1,7 @@
+/*!
+ * froala_editor v2.8.1 (https://www.froala.com/wysiwyg-editor)
+ * License https://froala.com/wysiwyg-editor/terms/
+ * Copyright 2014-2018 Froala Labs
+ */
+
+!function(t){"function"==typeof define&&define.amd?define(["jquery"],t):"object"==typeof module&&module.exports?module.exports=function(a,e){return e===undefined&&(e="undefined"!=typeof window?require("jquery"):require("jquery")(a)),t(e)}:t(window.jQuery)}(function(g){g.extend(g.FE.DEFAULTS,{paragraphFormat:{N:"Normal",H1:"Heading 1",H2:"Heading 2",H3:"Heading 3",H4:"Heading 4",PRE:"Code"},paragraphFormatSelection:!1,paragraphDefaultSelection:"Paragraph Format"}),g.FE.PLUGINS.paragraphFormat=function(h){function f(a,e){var t=h.html.defaultTag();if(e&&e.toLowerCase()!=t)if(0<a.find("ul, ol").length){var r=g("<"+e+">");a.prepend(r);for(var n=h.node.contents(a.get(0))[0];n&&["UL","OL"].indexOf(n.tagName)<0;){var o=n.nextSibling;r.append(n),n=o}}else a.html("<"+e+">"+a.html()+"</"+e+">")}return{apply:function(a){"N"==a&&(a=h.html.defaultTag()),h.selection.save(),h.html.wrap(!0,!0,!h.opts.paragraphFormat.BLOCKQUOTE,!0,!0),h.selection.restore();var e,t,r,n,o,i,p,l,s=h.selection.blocks();h.selection.save(),h.$el.find("pre").attr("skip",!0);for(var d=0;d<s.length;d++)if(s[d].tagName!=a&&!h.node.isList(s[d])){var m=g(s[d]);"LI"==s[d].tagName?f(m,a):"LI"==s[d].parentNode.tagName&&s[d]?(i=m,p=a,l=h.html.defaultTag(),p&&p.toLowerCase()!=l||(p='div class="fr-temp-div"'),i.replaceWith(g("<"+p+">").html(i.html()))):0<=["TD","TH"].indexOf(s[d].parentNode.tagName)?(r=m,n=a,o=h.html.defaultTag(),n||(n='div class="fr-temp-div"'+(h.node.isEmpty(r.get(0),!0)?' data-empty="true"':"")),n.toLowerCase()==o?(h.node.isEmpty(r.get(0),!0)||r.append("<br/>"),r.replaceWith(r.html())):r.replaceWith(g("<"+n+">").html(r.html()))):(e=m,(t=a)||(t='div class="fr-temp-div"'+(h.node.isEmpty(e.get(0),!0)?' data-empty="true"':"")),e.replaceWith(g("<"+t+" "+h.node.attributes(e.get(0))+">").html(e.html()).removeAttr("data-empty")))}h.$el.find('pre:not([skip="true"]) + pre:not([skip="true"])').each(function(){g(this).prev().append("<br>"+g(this).html()),g(this).remove()}),h.$el.find("pre").removeAttr("skip"),h.html.unwrap(),h.selection.restore()},refreshOnShow:function(a,e){var t=h.selection.blocks();if(t.length){var r=t[0],n="N",o=h.html.defaultTag();r.tagName.toLowerCase()!=o&&r!=h.el&&(n=r.tagName),e.find('.fr-command[data-param1="'+n+'"]').addClass("fr-active").attr("aria-selected",!0)}else e.find('.fr-command[data-param1="N"]').addClass("fr-active").attr("aria-selected",!0)},refresh:function(a){if(h.opts.paragraphFormatSelection){var e=h.selection.blocks();if(e.length){var t=e[0],r="N",n=h.html.defaultTag();t.tagName.toLowerCase()!=n&&t!=h.el&&(r=t.tagName),0<=["LI","TD","TH"].indexOf(r)&&(r="N"),a.find("> span").text(h.language.translate(h.opts.paragraphFormat[r]))}else a.find("> span").text(h.language.translate(h.opts.paragraphFormat.N))}}}},g.FE.RegisterCommand("paragraphFormat",{type:"dropdown",displaySelection:function(a){return a.opts.paragraphFormatSelection},defaultSelection:function(a){return a.language.translate(a.opts.paragraphDefaultSelection)},displaySelectionWidth:125,html:function(){var a='<ul class="fr-dropdown-list" role="presentation">',e=this.opts.paragraphFormat;for(var t in e)if(e.hasOwnProperty(t)){var r=this.shortcuts.get("paragraphFormat."+t);r=r?'<span class="fr-shortcut">'+r+"</span>":"",a+='<li role="presentation"><'+("N"==t?this.html.defaultTag()||"DIV":t)+' style="padding: 0 !important; margin: 0 !important;" role="presentation"><a class="fr-command" tabIndex="-1" role="option" data-cmd="paragraphFormat" data-param1="'+t+'" title="'+this.language.translate(e[t])+'">'+this.language.translate(e[t])+"</a></"+("N"==t?this.html.defaultTag()||"DIV":t)+"></li>"}return a+="</ul>"},title:"Paragraph Format",callback:function(a,e){this.paragraphFormat.apply(e)},refresh:function(a){this.paragraphFormat.refresh(a)},refreshOnShow:function(a,e){this.paragraphFormat.refreshOnShow(a,e)},plugin:"paragraphFormat"}),g.FE.DefineIcon("paragraphFormat",{NAME:"paragraph"})});

data/vendor/assets/javascripts/xmt_froala/plugins/paragraph_style.js

@@ -0,0 +1,144 @@
+/*!
+ * froala_editor v2.8.1 (https://www.froala.com/wysiwyg-editor)
+ * License https://froala.com/wysiwyg-editor/terms/
+ * Copyright 2014-2018 Froala Labs
+ */
+
+(function (factory) {
+    if (typeof define === 'function' && define.amd) {
+        // AMD. Register as an anonymous module.
+        define(['jquery'], factory);
+    } else if (typeof module === 'object' && module.exports) {
+        // Node/CommonJS
+        module.exports = function( root, jQuery ) {
+            if ( jQuery === undefined ) {
+                // require('jQuery') returns a factory that requires window to
+                // build a jQuery instance, we normalize how we use modules
+                // that require this pattern but the window provided is a noop
+                // if it's defined (how jquery works)
+                if ( typeof window !== 'undefined' ) {
+                    jQuery = require('jquery');
+                }
+                else {
+                    jQuery = require('jquery')(root);
+                }
+            }
+            return factory(jQuery);
+        };
+    } else {
+        // Browser globals
+        factory(window.jQuery);
+    }
+}(function ($) {
+
+  
+
+  $.extend($.FE.DEFAULTS, {
+    paragraphStyles: {
+      'fr-text-gray': 'Gray',
+      'fr-text-bordered': 'Bordered',
+      'fr-text-spaced': 'Spaced',
+      'fr-text-uppercase': 'Uppercase'
+    },
+    paragraphMultipleStyles: true
+  });
+
+  $.FE.PLUGINS.paragraphStyle = function (editor) {
+    /**
+     * Apply style.
+     */
+    function apply (val, paragraphStyles, paragraphMultipleStyles) {
+      if (typeof paragraphStyles == 'undefined') paragraphStyles = editor.opts.paragraphStyles;
+
+      if (typeof paragraphMultipleStyles == 'undefined') paragraphMultipleStyles = editor.opts.paragraphMultipleStyles;
+
+      var styles = '';
+
+      // Remove multiple styles.
+      if (!paragraphMultipleStyles) {
+        styles = Object.keys(paragraphStyles);
+        styles.splice(styles.indexOf(val), 1);
+        styles = styles.join(' ');
+      }
+      editor.selection.save();
+      editor.html.wrap(true, true, true, true);
+      editor.selection.restore();
+
+      var blocks = editor.selection.blocks();
+
+      // Save selection to restore it later.
+      editor.selection.save();
+
+      var hasClass = $(blocks[0]).hasClass(val);
+
+      for (var i = 0; i < blocks.length; i++) {
+        $(blocks[i]).removeClass(styles).toggleClass(val, !hasClass);
+
+        if ($(blocks[i]).hasClass('fr-temp-div')) $(blocks[i]).removeClass('fr-temp-div');
+
+        if ($(blocks[i]).attr('class') === '') $(blocks[i]).removeAttr('class');
+      }
+
+      // Unwrap temp divs.
+      editor.html.unwrap();
+
+      // Restore selection.
+      editor.selection.restore();
+    }
+
+    function refreshOnShow($btn, $dropdown) {
+      var blocks = editor.selection.blocks();
+
+      if (blocks.length) {
+        var $blk = $(blocks[0]);
+
+        $dropdown.find('.fr-command').each (function () {
+          var cls = $(this).data('param1');
+          var active = $blk.hasClass(cls);
+          $(this).toggleClass('fr-active', active).attr('aria-selected', active);
+        })
+      }
+    }
+
+    function _init () {
+    }
+
+    return {
+      _init: _init,
+      apply: apply,
+      refreshOnShow: refreshOnShow
+    }
+  }
+
+  // Register the font size command.
+  $.FE.RegisterCommand('paragraphStyle', {
+    type: 'dropdown',
+    html: function () {
+      var c = '<ul class="fr-dropdown-list" role="presentation">';
+      var options =  this.opts.paragraphStyles;
+
+      for (var val in options) {
+        if (options.hasOwnProperty(val)) {
+          c += '<li role="presentation"><a class="fr-command ' + val + '" tabIndex="-1" role="option" data-cmd="paragraphStyle" data-param1="' + val + '" title="' + this.language.translate(options[val]) + '">' + this.language.translate(options[val]) + '</a></li>';
+        }
+      }
+      c += '</ul>';
+
+      return c;
+    },
+    title: 'Paragraph Style',
+    callback: function (cmd, val) {
+      this.paragraphStyle.apply(val);
+    },
+    refreshOnShow: function ($btn, $dropdown) {
+      this.paragraphStyle.refreshOnShow($btn, $dropdown);
+    },
+    plugin: 'paragraphStyle'
+  })
+
+  // Add the font size icon.
+  $.FE.DefineIcon('paragraphStyle', {
+    NAME: 'magic'
+  });
+
+}));