Fix TinyMCE loading behavior after page change

The old intersection observer was still active after leaving and reentering the page editor. An old intersection observer will now disconnect on initializer. This is not optimal, but we don't have a lifecycle hook to destroy the intersection on page leave.

Reference: AlchemyCMS#2485

package/src/tinymce.js

@@ -38,30 +38,32 @@ function initEditors(ids) {
   })
 }
 
-// initialize IntersectionObserver if it is not already initialized
+// initialize IntersectionObserver
 // the observer will initialize Tinymce if the textarea becomes visible
 function initializeIntersectionObserver() {
-  if (tinymceIntersectionObserver === null) {
-    const observerCallback = (entries, observer) => {
-      entries.forEach((entry) => {
-        if (entry.intersectionRatio > 0) {
-          initTinymceEditor(entry.target)
-          // disable observer after the Tinymce was initialized
-          observer.unobserve(entry.target)
-        }
-      })
-    }
-    const options = {
-      root: Alchemy.ElementEditors.element_area.get(0),
-      rootMargin: "0px",
-      threshold: [0.05]
-    }
+  if (tinymceIntersectionObserver !== null) {
+    tinymceIntersectionObserver.disconnect()
+  }
 
-    tinymceIntersectionObserver = new IntersectionObserver(
-      observerCallback,
-      options
-    )
+  const observerCallback = (entries, observer) => {
+    entries.forEach((entry) => {
+      if (entry.intersectionRatio > 0) {
+        initTinymceEditor(entry.target)
+        // disable observer after the Tinymce was initialized
+        observer.unobserve(entry.target)
+      }
+    })
+  }
+  const options = {
+    root: Alchemy.ElementEditors.element_area.get(0),
+    rootMargin: "0px",
+    threshold: [0.05]
   }
+
+  tinymceIntersectionObserver = new IntersectionObserver(
+    observerCallback,
+    options
+  )
 }
 
 // Initializes one specific TinyMCE editor