From bc1e84325c7edfb52b07c7e6bde881b09280c3ba Mon Sep 17 00:00:00 2001
From: Dan Brown <ssddanbrown@googlemail.com>
Date: Sun, 31 Jan 2021 16:23:15 +0000
Subject: [PATCH] Made codemirror editor load a lot more efficient

Brings down total editor load time from about 11s to 7s from testing in
4x reduced CPU speed in chrome.
About 1.5 seconds of that is editor init/page load.
Post editor-init/page-load time is now 60% of previous from testing.

Related to #2518
---
 resources/js/components/wysiwyg-editor.js | 13 ++++++++++++-
 resources/js/services/code.js             |  4 +---
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/resources/js/components/wysiwyg-editor.js b/resources/js/components/wysiwyg-editor.js
index 41b2273e2..a6ab54218 100644
--- a/resources/js/components/wysiwyg-editor.js
+++ b/resources/js/components/wysiwyg-editor.js
@@ -212,7 +212,7 @@ function codePlugin() {
             showPopup(editor);
         });
 
-        editor.on('SetContent', function () {
+        function parseCodeMirrorInstances() {
 
             // Recover broken codemirror instances
             $('.CodeMirrorContainer').filter((index ,elem) => {
@@ -231,6 +231,17 @@ function codePlugin() {
                     Code.wysiwygView(elem);
                 });
             });
+        }
+
+        editor.on('init', function() {
+            // Parse code mirror instances on init, but delay a little so this runs after
+            // initial styles are fetched into the editor.
+            parseCodeMirrorInstances();
+            // Parsed code mirror blocks when content is set but wait before setting this handler
+            // to avoid any init 'SetContent' events.
+            setTimeout(() => {
+                editor.on('SetContent', parseCodeMirrorInstances);
+            }, 200);
         });
 
     });
diff --git a/resources/js/services/code.js b/resources/js/services/code.js
index e2aca1aad..5727cd2b7 100644
--- a/resources/js/services/code.js
+++ b/resources/js/services/code.js
@@ -238,9 +238,7 @@ function wysiwygView(elem) {
         theme: getTheme(),
         readOnly: true
     });
-    setTimeout(() => {
-        cm.refresh();
-    }, 300);
+
     return {wrap: newWrap, editor: cm};
 }