Updated tinymce code block handling to help prevent breaking history states

Only used an undo transaction on startup and added a small delay
to codeMirror parsing on SetContent's to help avoid
the rendering activities getting caught in undoManager states.
Seemed to improve things a lot in Firefox & chrome on my dev machine.

For #2602

diff --git a/resources/js/components/wysiwyg-editor.js b/resources/js/components/wysiwyg-editor.js
index a6ab542181b9c20558bf0f030b98254181fc804c..a44ab1c62bfa67508b63339aec33ccda4ca7e1c8 100644 (file)
--- a/resources/js/components/wysiwyg-editor.js
+++ b/resources/js/components/wysiwyg-editor.js
@@ -152,8 +152,8 @@ function codePlugin() {
             return;
         }
 
             return;
         }
 

-        let lang = selectedNode.hasAttribute('data-lang') ? selectedNode.getAttribute('data-lang') : '';
-        let currentCode = selectedNode.querySelector('textarea').textContent;
+        const lang = selectedNode.hasAttribute('data-lang') ? selectedNode.getAttribute('data-lang') : '';
+        const currentCode = selectedNode.querySelector('textarea').textContent;

 
         window.components.first('code-editor').open(currentCode, lang, (code, lang) => {
             const editorElem = selectedNode.querySelector('.CodeMirror');
 
         window.components.first('code-editor').open(currentCode, lang, (code, lang) => {
             const editorElem = selectedNode.querySelector('.CodeMirror');


@@ -225,22 +225,23 @@ function codePlugin() {
                 return elem.contentEditable !== "false";
             });
 
                 return elem.contentEditable !== "false";
             });
 

-            if (!codeSamples.length) return;
-            editor.undoManager.transact(function () {
-                codeSamples.each((index, elem) => {
-                    Code.wysiwygView(elem);
-                });
+            codeSamples.each((index, elem) => {
+                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.
             });
         }
 
         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();
+            editor.undoManager.transact(function () {
+                parseCodeMirrorInstances();
+            });

             // Parsed code mirror blocks when content is set but wait before setting this handler
             // to avoid any init 'SetContent' events.
             setTimeout(() => {
             // 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);
+                editor.on('SetContent', () => {
+                    setTimeout(parseCodeMirrorInstances, 100);
+                });

             }, 200);
         });
 
             }, 200);
         });