activeadmin_trumbowyg 1.1.0 → 1.2.0

data/app/assets/javascripts/activeadmin/trumbowyg/trumbowyg.js

@@ -1,8 +1,8 @@
 /**
- * Trumbowyg v2.25.1 - A lightweight WYSIWYG editor
+ * Trumbowyg v2.31.0 - A lightweight WYSIWYG editor
  * Trumbowyg core file
  * ------------------------
- * @link http://alex-d.github.io/Trumbowyg
+ * @link https://alex-d.github.io/Trumbowyg/
  * @license MIT
  * @author Alexandre Demode (Alex-D)
  *         Twitter : @AlexandreDemode
@@ -43,6 +43,9 @@ jQuery.trumbowyg = {
             createLink: 'Insert link',
             unlink: 'Remove link',
 
+            _self: 'Same tab (default)',
+            _blank: 'New tab',
+
             justifyLeft: 'Align Left',
             justifyCenter: 'Align Center',
             justifyRight: 'Align Right',
@@ -126,7 +129,7 @@ Object.defineProperty(jQuery.trumbowyg, 'defaultOptions', {
 
         urlProtocol: false,
         minimalLinks: false,
-        defaultLinkTarget: undefined,
+        linkTargets: ['_self', '_blank'],
 
         svgPath: null
     },
@@ -206,7 +209,7 @@ Object.defineProperty(jQuery.trumbowyg, 'defaultOptions', {
     };
 
     // @param: editorElem is the DOM element
-    var Trumbowyg = function (editorElem, options) {
+    var Trumbowyg = function (editorElem, options) { // jshint ignore:line
         var t = this,
             trumbowygIconsId = 'trumbowyg-icons',
             $trumbowyg = $.trumbowyg;
@@ -253,26 +256,27 @@ Object.defineProperty(jQuery.trumbowyg, 'defaultOptions', {
                 console.warn('You must define svgPath: https://goo.gl/CfTY9U'); // jshint ignore:line
             } else if (!$trumbowyg.svgAbsoluteUseHref) {
                 var div = t.doc.createElement('div');
+                div.style.width = '0';
+                div.style.height = '0';
+                div.style.overflow = 'hidden';
+                div.style.visibility = 'hidden';
                 div.id = trumbowygIconsId;
                 t.doc.body.insertBefore(div, t.doc.body.childNodes[0]);
-                $.ajax({
-                    async: true,
-                    type: 'GET',
-                    contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
-                    dataType: 'xml',
-                    crossDomain: true,
-                    url: svgPathOption,
-                    data: null,
-                    beforeSend: null,
-                    complete: null,
-                    success: function (data) {
-                        div.innerHTML = new XMLSerializer().serializeToString(data.documentElement);
+                fetch(svgPathOption, {
+                    method: 'GET',
+                    headers: {
+                        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
                     }
+                }).then((response) => {
+                    response.text()
+                        .then((svg) => {
+                            div.innerHTML = svg;
+                        });
                 });
             }
         }
 
-        var baseHref = !!t.doc.querySelector('base') ? window.location.href.split(/[?#]/)[0] : '';
+        var baseHref = !!t.doc.querySelector('base') ? window.location.href.replace(window.location.hash, '') : '';
         t.svgPath = $trumbowyg.svgAbsoluteUseHref ? svgPathOption : baseHref;
 
 
@@ -295,7 +299,7 @@ Object.defineProperty(jQuery.trumbowyg, 'defaultOptions', {
         t.btnsDef = {
             viewHTML: {
                 fn: 'toggle',
-                class: 'trumbowyg-not-disable',
+                class: 'trumbowyg-not-disable'
             },
 
             undo: {
@@ -482,7 +486,7 @@ Object.defineProperty(jQuery.trumbowyg, 'defaultOptions', {
 
         init: function () {
             var t = this;
-            t.height = t.$ta.height();
+            t.height = t.$ta.outerHeight() - 39; // Remove button pane height
 
             t.initPlugins();
 
@@ -533,15 +537,20 @@ Object.defineProperty(jQuery.trumbowyg, 'defaultOptions', {
                 class: prefix + 'box ' + prefix + 'editor-visible ' + prefix + t.o.lang + ' trumbowyg'
             });
 
+            t.$edBox = $('<div/>', {
+                class: prefix + 'editor-box'
+            });
+
             // $ta = Textarea
             // $ed = Editor
             t.isTextarea = t.$ta.is('textarea');
             if (t.isTextarea) {
                 html = t.$ta.val();
-                t.$ed = $('<div/>');
+                t.$ed = $('<div/>')
+                    .appendTo(t.$edBox);
                 t.$box
                     .insertAfter(t.$ta)
-                    .append(t.$ed, t.$ta);
+                    .append(t.$edBox, t.$ta);
             } else {
                 t.$ed = t.$ta;
                 html = t.$ed.html();
@@ -553,7 +562,8 @@ Object.defineProperty(jQuery.trumbowyg, 'defaultOptions', {
 
                 t.$box
                     .insertAfter(t.$ed)
-                    .append(t.$ta, t.$ed);
+                    .append(t.$ta, t.$edBox);
+                t.$edBox.append(t.$ed);
                 t.syncCode();
             }
 
@@ -587,13 +597,8 @@ Object.defineProperty(jQuery.trumbowyg, 'defaultOptions', {
                 t.$ed.addClass(prefix + 'reset-css');
             }
 
-            if (!t.o.autogrow) {
-                t.$ta.add(t.$ed).css({
-                    height: t.height
-                });
-            }
-
             t.semanticCode();
+            t.applyTagClasses();
 
             if (t.o.autogrowOnEnter) {
                 t.$ed.addClass(prefix + 'autogrow-on-enter');
@@ -658,7 +663,7 @@ Object.defineProperty(jQuery.trumbowyg, 'defaultOptions', {
                     if ((e.ctrlKey || e.metaKey) && (keyCode === 89 || keyCode === 90)) {
                         t.semanticCode(false, true);
                         t.$c.trigger('tbwchange');
-                    } else if (!ctrl && keyCode !== 17) {
+                    } else if (!ctrl && keyCode !== 16 && keyCode !== 17) {
                         var compositionEndIE = t.isIE ? e.type === 'compositionend' : true;
                         t.semanticCode(false, compositionEndIE && keyCode === 13);
                         t.$c.trigger('tbwchange');
@@ -670,6 +675,14 @@ Object.defineProperty(jQuery.trumbowyg, 'defaultOptions', {
                         ctrl = false;
                     }, 50);
                 })
+                .on('input', function (e) {
+                    // Trigger change event when spelling fixes applied
+                    var event = e.originalEvent;
+                    if (typeof event === 'object' && (event.inputType === 'insertReplacementText' ||
+                        (event.inputType === 'insertText' && event.data === null))) {
+                        t.$c.trigger('tbwchange');
+                    }
+                })
                 .on('mouseup keydown keyup', function (e) {
                     if ((!e.ctrlKey && !e.metaKey) || e.altKey) {
                         setTimeout(function () { // "hold on" to the ctrl key for 50ms
@@ -694,13 +707,13 @@ Object.defineProperty(jQuery.trumbowyg, 'defaultOptions', {
                             t.autogrowOnEnterWasFocused = true;
                             t.autogrowEditorOnEnter();
                         } else if (!t.o.autogrow) {
-                            t.$ed.css({height: t.$ed.css('min-height')});
+                            t.$edBox.css({height: t.$edBox.css('min-height')});
                             t.$c.trigger('tbwresize');
                         }
                     }
                 })
                 .on('keyup focus', function () {
-                  if (!t.$ta.val().match(/<.*>/) && !t.$ed.html().match(/<.*>/)) {
+                    if (!t.$ta.val().match(/<.*>/) && !t.$ed.html().match(/<.*>/)) {
                         setTimeout(function () {
                             var block = t.isIE ? '<p>' : 'p';
                             t.doc.execCommand('formatBlock', false, block);
@@ -775,13 +788,13 @@ Object.defineProperty(jQuery.trumbowyg, 'defaultOptions', {
             var t = this;
             t.$ed.removeClass('autogrow-on-enter');
             var oldHeight = t.$ed[0].clientHeight;
-            t.$ed.height('auto');
+            t.$edBox.height('auto');
             var totalHeight = t.$ed[0].scrollHeight;
             t.$ed.addClass('autogrow-on-enter');
             if (oldHeight !== totalHeight) {
-                t.$ed.height(oldHeight);
+                t.$edBox.height(oldHeight);
                 setTimeout(function () {
-                    t.$ed.css({height: totalHeight});
+                    t.$edBox.css({height: totalHeight});
                     t.$c.trigger('tbwresize');
                 }, 0);
             }
@@ -798,7 +811,7 @@ Object.defineProperty(jQuery.trumbowyg, 'defaultOptions', {
             });
 
             $.each(t.o.btns, function (i, btnGrp) {
-                if (!$.isArray(btnGrp)) {
+                if (!Array.isArray(btnGrp)) {
                     btnGrp = [btnGrp];
                 }
 
@@ -824,7 +837,8 @@ Object.defineProperty(jQuery.trumbowyg, 'defaultOptions', {
 
 
         // Build a button and his action
-        buildBtn: function (btnName) { // btnName is name of the button
+        // @param btnName The name of the button
+        buildBtn: function (btnName) { // jshint ignore:line
             var t = this,
                 prefix = t.o.prefix,
                 btn = t.btnsDef[btnName],
@@ -1035,7 +1049,7 @@ Object.defineProperty(jQuery.trumbowyg, 'defaultOptions', {
                 );
             } else {
                 t.$box.after(
-                    t.$ed
+                    t.$edBox
                         .css({height: ''})
                         .removeClass(prefix + 'editor')
                         .removeAttr('contenteditable')
@@ -1060,6 +1074,7 @@ Object.defineProperty(jQuery.trumbowyg, 'defaultOptions', {
 
         // Empty the editor
         empty: function () {
+            this.doc.execCommand('insertHTML', false, '');
             this.$ta.val('');
             this.syncCode(true);
         },
@@ -1175,17 +1190,17 @@ Object.defineProperty(jQuery.trumbowyg, 'defaultOptions', {
             }
 
             if (t.o.autogrow) {
-                t.height = t.$ed.height();
+                t.height = t.$edBox.height();
                 if (t.height !== t.$ta.css('height')) {
                     t.$ta.css({height: t.height});
                     t.$c.trigger('tbwresize');
                 }
             }
             if (t.o.autogrowOnEnter) {
-                t.$ed.height('auto');
-                var totalHeight = t.autogrowOnEnterWasFocused ? t.$ed[0].scrollHeight : t.$ed.css('min-height');
+                t.$edBox.height('auto');
+                var totalHeight = t.autogrowOnEnterWasFocused ? t.$edBox[0].scrollHeight : t.$edBox.css('min-height');
                 if (totalHeight !== t.$ta.css('height')) {
-                    t.$ed.css({height: totalHeight});
+                    t.$edBox.css({height: totalHeight});
                     t.$c.trigger('tbwresize');
                 }
             }
@@ -1260,7 +1275,7 @@ Object.defineProperty(jQuery.trumbowyg, 'defaultOptions', {
                 return;
             }
 
-            if(revert) {
+            if (revert) {
                 oldTag = newTag;
                 newTag = tmpTag;
             }
@@ -1284,7 +1299,7 @@ Object.defineProperty(jQuery.trumbowyg, 'defaultOptions', {
                 }
                 $newTag.html($oldTag.html());
                 $oldTag.remove();
-                if(resetRange === true) {
+                if (resetRange === true) {
                     t.range.selectNodeContents($newTag.get(0));
                     t.range.collapse(false);
                 }
@@ -1300,7 +1315,8 @@ Object.defineProperty(jQuery.trumbowyg, 'defaultOptions', {
                 text = new XMLSerializer().serializeToString(selectedRange.cloneContents()) || selectedRange + '',
                 url,
                 title,
-                target;
+                target,
+                linkDefaultTarget = t.o.linkTargets[0];
 
             while (['A', 'DIV'].indexOf(node.nodeName) < 0) {
                 node = node.parentNode;
@@ -1312,7 +1328,7 @@ Object.defineProperty(jQuery.trumbowyg, 'defaultOptions', {
                 url = $a.attr('href');
                 if (!t.o.minimalLinks) {
                     title = $a.attr('title');
-                    target = $a.attr('target') || t.o.defaultLinkTarget;
+                    target = $a.attr('target') || linkDefaultTarget;
                 }
                 var range = t.doc.createRange();
                 range.selectNode(node);
@@ -1334,6 +1350,12 @@ Object.defineProperty(jQuery.trumbowyg, 'defaultOptions', {
                 }
             };
             if (!t.o.minimalLinks) {
+                var targetOptions = t.o.linkTargets.reduce(function (options, optionValue) {
+                    options[optionValue] = t.lang[optionValue];
+
+                    return options;
+                }, {});
+
                 $.extend(options, {
                     title: {
                         label: t.lang.title,
@@ -1341,7 +1363,8 @@ Object.defineProperty(jQuery.trumbowyg, 'defaultOptions', {
                     },
                     target: {
                         label: t.lang.target,
-                        value: target
+                        value: target,
+                        options: targetOptions
                     }
                 });
             }
@@ -1357,8 +1380,8 @@ Object.defineProperty(jQuery.trumbowyg, 'defaultOptions', {
                 if (v.title) {
                     link.attr('title', v.title);
                 }
-                if (v.target || t.o.defaultLinkTarget) {
-                    link.attr('target', v.target || t.o.defaultLinkTarget);
+                if (v.target || linkDefaultTarget) {
+                    link.attr('target', v.target || linkDefaultTarget);
                 }
                 t.range.deleteContents();
                 t.range.insertNode(link[0]);
@@ -1468,6 +1491,13 @@ Object.defineProperty(jQuery.trumbowyg, 'defaultOptions', {
             t.$c.trigger('tbw' + (isFullscreen ? 'open' : 'close') + 'fullscreen');
         },
 
+        applyTagClasses: function () {
+            var t = this;
+            for (const tag of Object.keys(t.o.tagClasses)) {
+                $(tag, t.$ed).addClass(t.o.tagClasses[tag]);
+            }
+            t.syncCode();
+        },
 
         /*
          * Call method of trumbowyg if exist
@@ -1482,7 +1512,7 @@ Object.defineProperty(jQuery.trumbowyg, 'defaultOptions', {
                 t.$ed.focus();
             }
 
-            if(cmd === 'strikethrough' && t.o.semantic) {
+            if (cmd === 'strikethrough' && t.o.semantic) {
                 t.semanticTag('strike', t.o.semanticKeepAttributes, true); // browsers cannot undo e.g. <del> as they expect <strike>
             }
 
@@ -1507,19 +1537,6 @@ Object.defineProperty(jQuery.trumbowyg, 'defaultOptions', {
 
                     t.syncCode();
                     t.semanticCode(false, true);
-                    try {
-                        var listId = window.getSelection().focusNode;
-                        if(!$(window.getSelection().focusNode.parentNode).hasClass('trumbowyg-editor')){
-                            listId = window.getSelection().focusNode.parentNode;
-                        }
-                        var classes = t.o.tagClasses[param];
-                        if (classes) {
-                            $(listId).addClass(classes);
-                        }
-                    } catch (e) {
-
-                    }
-
                 }
 
                 if (cmd !== 'dropdown') {
@@ -1527,6 +1544,11 @@ Object.defineProperty(jQuery.trumbowyg, 'defaultOptions', {
                     t.$c.trigger('tbwchange');
                 }
             }
+
+            try {
+                t.applyTagClasses();
+            } catch (e) {
+            }
         },
 
 
@@ -1559,6 +1581,11 @@ Object.defineProperty(jQuery.trumbowyg, 'defaultOptions', {
                 zIndex: 99999
             }).appendTo($(t.doc.body));
 
+            var darkClass = prefix + 'dark';
+            if (t.$c.parents('.' + darkClass).length !== 0) {
+                $modal.addClass(darkClass);
+            }
+
             // Click on overlay close modal by cancelling them
             t.$overlay.one('click', function () {
                 $modal.trigger(CANCEL_EVENT);
@@ -1598,7 +1625,7 @@ Object.defineProperty(jQuery.trumbowyg, 'defaultOptions', {
                 .css({
                     top: '-' + t.$btnPane.outerHeight(),
                     opacity: 0,
-                    paddingBottom: buildForm ? null : '5%',
+                    paddingBottom: buildForm ? null : '5%'
                 })
                 .appendTo($modal)
                 .animate({
@@ -1647,6 +1674,11 @@ Object.defineProperty(jQuery.trumbowyg, 'defaultOptions', {
             var t = this,
                 prefix = t.o.prefix;
 
+            // Prevent multiple calls when having multiple editors in the same page
+            if (!t.$btnPane.hasClass(prefix + 'disable')) {
+                return;
+            }
+
             t.$btnPane.removeClass(prefix + 'disable');
             t.$overlay.off();
 
@@ -1682,17 +1714,31 @@ Object.defineProperty(jQuery.trumbowyg, 'defaultOptions', {
                 }).join(' ');
 
                 if (typeof field.type === 'function') {
-                  if (!field.name) {
-                    field.name = n;
-                  }
-                  html += field.type(field, fieldId, prefix, lg);
+                    if (!field.name) {
+                        field.name = n;
+                    }
+
+                    html += field.type(field, fieldId, prefix, lg);
+
+                    return;
+                }
+
+                html += '<div class="' + prefix + 'input-row">';
+                html += '<div class="' + prefix + 'input-infos"><label for="' + fieldId + '"><span>' + (lg[l] ? lg[l] : l) + '</span></label></div>';
+                html += '<div class="' + prefix + 'input-html">';
+
+                if ($.isPlainObject(field.options)) {
+                    html += '<select id="' + fieldId + '" name="' + n + '">';
+                    html += Object.keys(field.options).map((optionValue) => {
+                        return '<option value="' + optionValue + '" ' + (optionValue === field.value ? 'selected' : '') + '>' + field.options[optionValue] + '</option>';
+                    }).join('');
+                    html += '</select>';
                 } else {
-                  html += '<div class="' + prefix + 'input-row">' +
-                    '<div class="' + prefix + 'input-infos"><label for="' + fieldId + '"><span>' + (lg[l] ? lg[l] : l) + '</span></label></div>' +
-                    '<div class="' + prefix + 'input-html"><input id="' + fieldId + '" type="' + (field.type || 'text') + '" name="' + n + '" ' + attr;
-                    html += (field.type === 'checkbox' && field.value ? ' checked="checked"' : '') + ' value="' + (field.value || '').replace(/"/g, '&quot;') + '"></div>';
-                  html += '</div>';
+                    html += '<input id="' + fieldId + '" type="' + (field.type || 'text') + '" name="' + n + '" ' + attr;
+                    html += (field.type === 'checkbox' && field.value ? ' checked="checked"' : '') + ' value="' + (field.value || '').replace(/"/g, '&quot;') + '">';
                 }
+
+                html += '</div></div>';
             });
 
             return t.openModal(title, html)
@@ -1715,7 +1761,7 @@ Object.defineProperty(jQuery.trumbowyg, 'defaultOptions', {
                                 values[n] = $field.filter(':checked').val();
                                 break;
                             default:
-                                values[n] = $.trim($field.val());
+                                values[n] = $field.val().trim();
                                 break;
                         }
                         // Validate value
@@ -1750,13 +1796,11 @@ Object.defineProperty(jQuery.trumbowyg, 'defaultOptions', {
                 $row = $field.closest('.' + prefix + 'input-row');
 
             $field
-                .on('change keyup', function () {
+                .one('change keyup', function () {
                     $row.removeClass(prefix + 'input-error');
-                    setTimeout(function () {
-                        $row.find('.' + spanErrorClass).remove();
-                    }, 150);
                 });
 
+            $row.find('.' + spanErrorClass).remove();
             $row
                 .addClass(prefix + 'input-error')
                 .find('.' + prefix + 'input-infos label')
@@ -1920,7 +1964,7 @@ Object.defineProperty(jQuery.trumbowyg, 'defaultOptions', {
                 prefix = t.o.prefix,
                 activeClasses = prefix + 'active-button ' + prefix + 'active',
                 originalIconClass = prefix + 'original-icon',
-                tags = t.getTagsRecursive(t.doc.getSelection().focusNode);
+                tags = t.getTagsRecursive(t.doc.getSelection().anchorNode);
 
             t.clearButtonPaneStatus();
 
@@ -1962,7 +2006,9 @@ Object.defineProperty(jQuery.trumbowyg, 'defaultOptions', {
             tags = tags || (element && element.tagName ? [element.tagName] : []);
 
             if (element && element.parentNode) {
-                element = element.parentNode;
+                if (element.nodeType !== Node.ELEMENT_NODE) {
+                    element = element.parentNode;
+                }
             } else {
                 return tags;
             }
@@ -1981,7 +2027,7 @@ Object.defineProperty(jQuery.trumbowyg, 'defaultOptions', {
 
             tags.push(tag);
 
-            return t.getTagsRecursive(element, tags).filter(function (tag) {
+            return t.getTagsRecursive(element.parentNode, tags).filter(function (tag) {
                 return tag != null;
             });
         },