Fix slow loading of long HTML content into the HTML editor (#8108)

4 files changed, 31 insertions, 9 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index abed33c56..ca5c9b3ee 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 - Update to jQuery-UI 1.13.1 (#8455)
 - Password: Add support for ssha256 algorithm (#8459)
+- Fix slow loading of long HTML content into the HTML editor (#8108)
 - Fix bug where SMTP password didn't work if it contained '%p' (#8435)
 - Enigma: Fix initial synchronization of private keys
 - Enigma: Fix double quoted-printable encoding of pgp-signed messages with no attachments (#8413)
diff --git a/program/actions/mail/compose.php b/program/actions/mail/compose.php
index 5f28f25f5..d9356b717 100644
--- a/program/actions/mail/compose.php
+++ b/program/actions/mail/compose.php
@@ -793,6 +793,7 @@ class rcmail_action_mail_compose extends rcmail_action_mail_index
         $attrib['data-html-editor'] = true;
         if (self::$HTML_MODE) {
             $attrib['class'] = trim(($attrib['class'] ?? '') . ' mce_editor');
+            $attrib['data-html-editor-content-element'] = $attrib['id'] . '-content';
         }
 
         $attrib['name'] = '_message';
@@ -808,12 +809,22 @@ class rcmail_action_mail_compose extends rcmail_action_mail_index
 
         $rcmail->output->set_env('composebody', $attrib['id']);
 
+        $content = $hidden->show() . "\n";
+
+        // We're adding a hidden textarea with the HTML content to workaround browsers' performance
+        // issues with rendering/loading long content. It will be copied to the main editor (#8108)
+        if (strlen(self::$MESSAGE_BODY) > 50 * 1024) {
+            $contentArea = new html_textarea(['style' => 'display:none', 'id' => $attrib['id'] . '-content']);
+            $content .= $contentArea->show(self::$MESSAGE_BODY) . "\n" . $textarea->show();
+        }
+        else {
+            $content .= $textarea->show(self::$MESSAGE_BODY);
+        }
+
         // include HTML editor
         self::html_editor();
 
-        return ($form_start ? "$form_start\n" : '')
-            . "\n" . $hidden->show() . "\n" . $textarea->show(self::$MESSAGE_BODY)
-            . ($form_end ? "\n$form_end\n" : '');
+        return "$form_start\n$content\n$form_end\n";
     }
 
     public static function create_reply_body($body, $bodyIsHtml)
diff --git a/program/include/rcmail_action.php b/program/include/rcmail_action.php
index 79f3814fc..5d211fb10 100644
--- a/program/include/rcmail_action.php
+++ b/program/include/rcmail_action.php
@@ -369,8 +369,8 @@ abstract class rcmail_action
                 'mode'             => $mode,
                 'disabled_plugins' => $disabled_plugins,
                 'disabled_buttons' => $disabled_buttons,
-                'extra_plugins' => $extra_plugins,
-                'extra_buttons' => $extra_buttons,
+                'extra_plugins'    => $extra_plugins,
+                'extra_buttons'    => $extra_buttons,
         ]);
 
         if (!empty($hook['abort'])) {
diff --git a/program/js/editor.js b/program/js/editor.js
index de74a0006..ce421df95 100644
--- a/program/js/editor.js
+++ b/program/js/editor.js
@@ -36,10 +36,11 @@
 function rcube_text_editor(config, id)
 {
   var ref = this,
+    editorElement = $('#' + id),
     abs_url = location.href.replace(/[?#].*$/, '').replace(/\/$/, ''),
     conf = {
-      selector: '#' + ($('#' + id).is('.mce_editor') ? id : 'fake-editor-id'),
-      readonly: $('#' + id).is('[readonly],[disabled]'),
+      selector: '#' + (editorElement.is('.mce_editor') ? id : 'fake-editor-id'),
+      readonly: editorElement.is('[readonly],[disabled]'),
       cache_suffix: 's=5080200',
       theme: 'silver',
       language: config.lang,
@@ -180,6 +181,15 @@ function rcube_text_editor(config, id)
   {
     this.editor = editor;
 
+    // Browsers have performance problems with rendering a lot of content in a textarea.
+    // To workaround that we create a separate hidden textarea for the content and copy it
+    // to the editor after the page is already loaded (#8108)
+    var content, editorContentElement = editorElement.data('html-editor-content-element');
+    if (editorContentElement && (content = $('#' + editorContentElement).val())) {
+      editor.setContent(content);
+      $('#' + editorContentElement).remove();
+    }
+
     if (rcmail.env.action == 'compose') {
       var area = $('#' + this.id),
         height = $('div.tox-toolbar__group', area.parent()).first().height();
@@ -207,10 +217,10 @@ function rcube_text_editor(config, id)
       }
     }
 
-    rcmail.triggerEvent('editor-load', {config: conf, ref: ref});
+    rcmail.triggerEvent('editor-load', {config: conf, ref: this});
 
     // set tabIndex and set focus to element that was focused before
-    ref.tabindex(ref.force_focus || (fe && fe.id == ref.id));
+    this.tabindex(this.force_focus || (fe && fe.id == this.id));
 
     // Trigger resize (needed for proper editor resizing in some browsers)
     $(window).resize();