Fix broken preview link

Signed-off-by: Joe Fusco <[email protected]>

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,43 +28,50 @@ 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'
         };
     }
   }
 
-  // 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 });
 });