Update to TinyMCE 4.7.13, refactor image selector dialog, add style f…

…or Elastic skin

CHANGELOG

@@ -12,6 +12,7 @@ CHANGELOG Roundcube Webmail
 - Support for IMAP folders that cannot contain both folders and messages (#5057)
 - Update to jQuery-3.3.1
 - Update to jQuery-minicolors 2.2.6
+- Update to TinyMCE 4.7.13
 - Remove sample PHP configuration from .htaccess and .user.ini files (#5850)
 - Use Masterminds/HTML5 parser for better HTML5 support (#5761)
 - Add More actions button in Contacts toolbar with Copy/Move actions (#6081)

jsdeps.json

@@ -36,10 +36,10 @@
     },
     {
       "lib": "tinymce",
-      "version": "4.5.8",
+      "version": "4.7.13",
       "url": "http://download.ephox.com/tinymce/community/tinymce_$v.zip",
       "dest": "program/js",
-      "sha1": "08b0757264adb86066940bbafb7aa9ec0c7c6685",
+      "sha1": "7f988f3899aebee6d49bd55e981331da07eee6c5",
       "license": "LGPL",
       "copyright": "Copyright (c) 1999-2015 Ephox Corp. All rights reserved",
       "rm": "program/js/tinymce",
@@ -56,7 +56,7 @@
     },
     {
       "lib": "tinymce-langs",
-      "version": "4.5.8",
+      "version": "4.7.13",
       "url": "https://tinymce-services.azurewebsites.net/1/i18n/download?langs=ar,hy,az,eu,be,bs,bg_BG,ca,zh_CN,zh_TW,hr,cs,cs_CZ,da,nl,en_CA,en_GB,eo,et,fo,fi,fr_FR,fr_CH,gd,gl,ka_GE,de,de_AT,el,he_IL,hi_IN,hu_HU,is_IS,id,ga,it,ja,kab,km_KH,ko_KR,ku,ku_IQ,lv,lt,lb,mk_MK,ml_IN,nb_NO,oc,fa,fa_IR,pl,pt_BR,pt_PT,ro,ru,sk,sl_SI,es,es_MX,sv_SE,tg,ta,ta_IN,tt,th_TH,tr,tr_TR,ug,uk,uk_UA,vi,vi_VN,cy",
       "dest": "program/js/tinymce"
     },

program/include/rcmail.php

@@ -1998,7 +1998,13 @@ public function html_editor($mode = '')
 
         $this->output->add_label('selectimage', 'addimage', 'selectmedia', 'addmedia');
         $this->output->set_env('editor_config', $config);
-        $this->output->include_css('program/resources/tinymce/browser.css');
+
+        if ($path = $this->config->get('media_browser_css_location', 'program/resources/tinymce/browser.css')) {
+            if ($path != 'none') {
+                $this->output->include_css($path);
+            }
+        }
+
         $this->output->include_script('tinymce/tinymce.min.js');
         $this->output->include_script('editor.js');
     }

program/js/editor.js

@@ -39,7 +39,7 @@ function rcube_text_editor(config, id)
     abs_url = location.href.replace(/[?#].*$/, '').replace(/\/$/, ''),
     conf = {
       selector: '#' + ($('#' + id).is('.mce_editor') ? id : 'fake-editor-id'),
-      cache_suffix: 's=4050800',
+      cache_suffix: 's=4071300',
       theme: 'modern',
       language: config.lang,
       content_css: rcmail.assets_path('program/resources/tinymce/content.css'),
@@ -55,7 +55,9 @@ function rcube_text_editor(config, id)
       image_description: false,
       paste_webkit_style: "color font-size font-family",
       paste_data_images: true,
-      browser_spellcheck: true
+      browser_spellcheck: true,
+      anchor_bottom: false,
+      anchor_top: false
     };
 
   // register spellchecker for plain text editor
@@ -146,6 +148,9 @@ function rcube_text_editor(config, id)
         return false;
       }
     });
+    ed.on('focus blur', function(e) {
+      $(ed.getContainer()).toggleClass('focused');
+    });
   };
 
   rcmail.triggerEvent('editor-init', {config: conf, ref: ref});
@@ -648,69 +653,72 @@ function rcube_text_editor(config, id)
   // image selector
   this.file_browser_callback = function(field_name, url, type)
   {
-    var i, elem, cancel, dialog, fn, list = [];
+    var i, button, elem, cancel, dialog, fn, hint, list = [],
+      form = $('.upload-form').clone();
 
     // open image selector dialog
-    dialog = this.editor.windowManager.open({
+    this.editor.windowManager.open({
       title: rcmail.get_label('select' + type),
       width: 500,
-      height: 300,
-      html: '<div id="image-selector-list"><ul></ul></div>'
-        + '<div id="image-selector-form"><div id="image-upload-button" class="mce-widget mce-btn" role="button" tabindex="0"></div></div>',
+      html: '<div id="image-selector" class="image-selector file-upload"><ul id="image-selector-list" class="attachmentslist"></ul></div>',
       buttons: [{text: 'Cancel', onclick: function() { ref.file_browser_close(); }}]
     });
 
     rcmail.env.file_browser_field = field_name;
     rcmail.env.file_browser_type = type;
 
+    dialog = $('#image-selector');
+
+    if (form.length)
+      button = dialog.prepend(form).find('button,a.button')
+        .text(rcmail.get_label('add' + type))
+        .focus();
+
     // fill images list with available images
     for (i in rcmail.env.attachments) {
       if (elem = ref.file_browser_entry(i, rcmail.env.attachments[i])) {
         list.push(elem);
       }
     }
 
-    if (list.length) {
-      $('#image-selector-list > ul').append(list).find('li:first').focus();
-    }
+    cancel = dialog.parent().parent().find('button:last').parent();
 
-    // add hint about max file size (in dialog footer)
-    $('div.mce-abs-end', dialog.getEl()).append($('<div class="hint">')
-      .text($('div.hint', rcmail.gui_objects.uploadform).text()));
+    // Add custom Tab key handlers, tabindex does not work
+    list = $('#image-selector-list').append(list).on('keydown', 'li', function(e) {
+        if (e.which == 9) {
+          if (rcube_event.get_modifier(e) == SHIFT_KEY) {
+            if (!$(this).prev().focus().length) {
+              button.focus();
+            }
+          }
+          else if (!$(this).next().focus().length) {
+            cancel.focus();
+          }
 
-    // init upload button
-    elem = $('#image-upload-button').append($('<span>').text(rcmail.get_label('add' + type)));
-    cancel = elem.parents('.mce-panel').find('button:last').parent();
+          return false;
+        }
+      });
 
-    // we need custom Tab key handlers, until we find out why
-    // tabindex do not work here as expected
-    elem.keydown(function(e) {
+    button.keydown(function(e) {
       if (e.which == 9) {
-        // on Tab + Shift focus first file
-        if (rcube_event.get_modifier(e) == SHIFT_KEY)
-          $('#image-selector-list li:last').focus();
-        // on Tab focus Cancel button
-        else
+        if (rcube_event.get_modifier(e) == SHIFT_KEY || !list.find('li:first').focus().length) {
           cancel.focus();
+        }
 
         return false;
       }
     });
+
     cancel.keydown(function(e) {
       if (e.which == 9) {
-        // on Tab + Shift focus upload button
-        if (rcube_event.get_modifier(e) == SHIFT_KEY)
-          elem.focus();
-        else
-          $('#image-selector-list li:first').focus();
+        if (rcube_event.get_modifier(e) != SHIFT_KEY || !list.find('li:last').focus().length) {
+          button.focus();
+        }
 
         return false;
       }
     });
 
-    // enable (smart) upload button
-    this.hack_file_input(elem, rcmail.gui_objects.uploadform);
-
     // enable drag-n-drop area
     if ((window.XMLHttpRequest && XMLHttpRequest.prototype && XMLHttpRequest.prototype.sendAsBinary) || window.FormData) {
       if (!rcmail.env.filedrop) {
@@ -720,7 +728,7 @@ function rcube_text_editor(config, id)
         rcmail.env.old_file_drop = rcmail.gui_objects.filedrop;
       }
 
-      rcmail.gui_objects.filedrop = $('#image-selector-form');
+      rcmail.gui_objects.filedrop = $('#image-selector');
       rcmail.gui_objects.filedrop.addClass('droptarget')
         .on('dragover dragleave', function(e) {
           e.preventDefault();
@@ -736,7 +744,7 @@ function rcube_text_editor(config, id)
       rcmail.addEventListener('fileuploaded', function(attr) {
         var elem;
         if (elem = ref.file_browser_entry(attr.name, attr.attachment)) {
-          $('#image-selector-list > ul').prepend(elem);
+          list.prepend(elem);
           elem.focus();
         }
       });
@@ -781,7 +789,7 @@ function rcube_text_editor(config, id)
 
       case 'media':
         rx = /^video\//i;
-        img_src = 'program/resources/tinymce/video.png';
+        img_src = rcmail.assets_path('program/resources/tinymce/video.png');
         break;
 
       default:
@@ -803,82 +811,7 @@ function rcube_text_editor(config, id)
           if (e.which == 13) {
             ref.file_browser_close($(this).data('url'));
           }
-          // we need custom Tab key handlers, until we find out why
-          // tabindex do not work here as expected
-          else if (e.which == 9) {
-            if (rcube_event.get_modifier(e) == SHIFT_KEY) {
-              if (!$(this).prev().focus().length)
-                $('#image-upload-button').parents('.mce-panel').find('button:last').parent().focus();
-            }
-            else {
-              if (!$(this).next().focus().length)
-                $('#image-upload-button').focus();
-            }
-
-            return false;
-          }
         });
     }
   };
-
-  // create smart files upload button
-  this.hack_file_input = function(elem, clone_form)
-  {
-    var offset, link = $(elem),
-      file = $('<input>').attr('name', '_file[]'),
-      form = $('<form>').attr({method: 'post', enctype: 'multipart/form-data'});
-
-    // clone existing upload form
-    if (clone_form) {
-      file.attr('name', $('input[type="file"]', clone_form).attr('name'));
-      form.attr('action', $(clone_form).attr('action'))
-        .append($('<input>').attr({type: 'hidden', name: '_token', value: rcmail.env.request_token}));
-    }
-
-    function move_file_input(e) {
-      if (!offset) offset = link.offset();
-      file.css({top: (e.pageY - offset.top - 10) + 'px', left: (e.pageX - offset.left - 10) + 'px'});
-    }
-
-    file.attr({type: 'file', multiple: 'multiple', size: 5, title: '', tabindex: -1})
-      .change(function() { rcmail.upload_file(form, 'upload'); })
-      .click(function() { setTimeout(function() { link.mouseleave(); }, 20); })
-      // opacity:0 does the trick, display/visibility doesn't work
-      .css({opacity: 0, cursor: 'pointer', position: 'relative', outline: 'none'})
-      .appendTo(form);
-
-    // In FF and IE we need to move the browser file-input's button under the cursor
-    // Thanks to the size attribute above we know the length of the input field
-    if (navigator.userAgent.match(/Firefox|MSIE/))
-      file.css({marginLeft: '-80px'});
-
-    // Note: now, I observe problem with cursor style on FF < 4 only
-    link.css({overflow: 'hidden', cursor: 'pointer'})
-      .mouseenter(function() { this.__active = true; })
-      // place button under the cursor
-      .mousemove(function(e) {
-        if (this.__active)
-          move_file_input(e);
-        // move the input away if button is disabled
-        else
-          $(this).mouseleave();
-      })
-      .mouseleave(function() {
-        file.css({top: '-10000px', left: '-10000px'});
-        this.__active = false;
-      })
-      .click(function(e) {
-        // forward click if mouse-enter event was missed
-        if (!this.__active) {
-          this.__active = true;
-          move_file_input(e);
-          file.trigger(e);
-        }
-      })
-      .keydown(function(e) {
-        if (e.which == 13) file.trigger('click');
-      })
-      .mouseleave()
-      .append(form);
-  };
 }