From c2bf4586b77a3b0aa358d4ef97b0d8f625908fee Mon Sep 17 00:00:00 2001
From: Joe Fusco <joe.fusco@wpengine.com>
Date: Tue, 12 Sep 2023 12:16:51 -0400
Subject: [PATCH] Fix broken preview link

Signed-off-by: Joe Fusco <joe.fusco@wpengine.com>
---
 .../includes/replacement/previewlinks.js      | 58 +++++++++++--------
 1 file changed, 35 insertions(+), 23 deletions(-)

diff --git a/plugins/faustwp/includes/replacement/previewlinks.js b/plugins/faustwp/includes/replacement/previewlinks.js
index 40370a7d1..79ab4b8ce 100644
--- a/plugins/faustwp/includes/replacement/previewlinks.js
+++ b/plugins/faustwp/includes/replacement/previewlinks.js
@@ -3,18 +3,23 @@
  */
 
 document.addEventListener('DOMContentLoaded', function() {
+  // Validate required global variables and initialize them.
   const errors = [];
+  const faustwp = window._faustwp_preview_link;
+  let wpVersion, newPreviewLink;
 
-  // Validate required global variables
-  if (!window._faustwp_preview_link) {
+  if (faustwp) {
+    wpVersion = faustwp._wp_version;
+    newPreviewLink = faustwp._preview_link;
+  } else {
     errors.push("Required global variable _faustwp_preview_link is not set.");
   }
 
-  if (typeof window._faustwp_preview_link._wp_version === 'undefined') {
+  if (!wpVersion) {
     errors.push("The _wp_version property is missing in _faustwp_preview_link.");
   }
 
-  if (typeof window._faustwp_preview_link._preview_link === 'undefined') {
+  if (!newPreviewLink) {
     errors.push("The _preview_link property is missing in _faustwp_preview_link.");
   }
 
@@ -23,21 +28,22 @@ document.addEventListener('DOMContentLoaded', function() {
     return;
   }
 
-  const wpVersion = window._faustwp_preview_link._wp_version;
-  const newPreviewLink = window._faustwp_preview_link._preview_link;
-
-  // Safely update the 'href' attribute of an element
-  function safelyUpdateHref(element, newHref) {
-    if (element) {
-      element.setAttribute('href', newHref);
-    }
+  function debounce(func, wait) {
+    let timeout;
+    return function() {
+      const context = this;
+      const args = arguments;
+      clearTimeout(timeout);
+      timeout = setTimeout(function() {
+        func.apply(context, args);
+      }, wait);
+    };
   }
 
-  // Get selectors based on the WordPress version
+  // For future extensibility in order to account for future WordPress releases containing breaking changes for these selectors.
   function getSelectorByVersion(version) {
     switch (version) {
       default:
-        // Default selectors for unknown versions
         return {
           previewButton: '.edit-post-header-preview__grouping-external a',
           snackbar: '.components-snackbar__content a'
@@ -45,21 +51,27 @@ document.addEventListener('DOMContentLoaded', function() {
     }
   }
 
-  // Update UI elements based on the WordPress version
+  // Update UI elements based on the WordPress version.
   function updateUIElements() {
     const { previewButton, snackbar } = getSelectorByVersion(wpVersion);
 
-    // Update the Post Preview Button's 'href' attribute
-    safelyUpdateHref(document.querySelector(previewButton), newPreviewLink);
+    const previewButtonElement = document.querySelector(previewButton);
+    
+    // Clone the element and remove the original to remove attached events.
+    if (previewButtonElement) {
+      const clonedPreviewButtonElement = previewButtonElement.cloneNode(true);
+      previewButtonElement.parentNode.replaceChild(clonedPreviewButtonElement, previewButtonElement);
+      if (clonedPreviewButtonElement) clonedPreviewButtonElement.setAttribute('href', newPreviewLink);
+    }
 
-    // Update the Snackbar's 'href' attribute
-    safelyUpdateHref(document.querySelector(snackbar), newPreviewLink);
+    const snackbarElement = document.querySelector(snackbar);
+    if (snackbarElement) snackbarElement.setAttribute('href', newPreviewLink);
   }
 
-  // Run the update function on initial page load
-  updateUIElements();
+  // Run the update function on initial page load.
+  const debouncedUpdateUIElements = debounce(updateUIElements, 300);
 
-  // Observe DOM changes to update UI elements accordingly
-  const observer = new MutationObserver(updateUIElements);
+  // Observe DOM changes to update UI elements accordingly.
+  const observer = new MutationObserver(debouncedUpdateUIElements);
   observer.observe(document.body, { childList: true, subtree: true });
 });