[APP-1097] Fix preview load

elementor · Feb 11, 2025 · 3134308 · 3134308
1 parent f4b45cf
commit 3134308
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 11 deletions.
diff --git a/modules/settings/assets/js/components/widget-loader/index.js b/modules/settings/assets/js/components/widget-loader/index.js
@@ -1,6 +1,6 @@
 import { useSettings } from '@ea11y/hooks';
 import { useEffect } from '@wordpress/element';
-import { WIDGET_PREVIEW_ID } from '../../constants';
+import { WIDGET_PREVIEW_ROOT } from '../../constants';
 
 const WidgetLoader = ({ src, onLoad, onError }) => {
 	const { planData } = useSettings();
@@ -33,16 +33,12 @@ const WidgetLoader = ({ src, onLoad, onError }) => {
 
 		// Attach onLoad and onError handlers
 		script.onload = () => {
-			if (document.getElementById(WIDGET_PREVIEW_ID)) {
-				console.log(`Script loaded successfully: ${script.src}`);
-				if (onLoad) {
-					onLoad();
-				} else {
-					handleScriptLoad();
-				}
-				window?.ea11yWidget?.widget?.open();
+			console.log(`Script loaded successfully: ${script.src}`);
+			if (onLoad) {
+				onLoad();
 			} else {
-				console.log(`Preview container does not exist! Preview ignored`);
+				handleScriptLoad();
+				window?.ea11yWidget?.widget?.open();
 			}
 		};
 
@@ -60,6 +56,9 @@ const WidgetLoader = ({ src, onLoad, onError }) => {
 
 		// Cleanup: Remove the script if the component unmounts
 		return () => {
+			if (document.getElementById(WIDGET_PREVIEW_ROOT)) {
+				document.getElementById(WIDGET_PREVIEW_ROOT).remove();
+			}
 			document.head.removeChild(script);
 			console.log(`Script removed: ${script.src}`);
 		};

diff --git a/modules/settings/assets/js/constants/index.js b/modules/settings/assets/js/constants/index.js
@@ -9,3 +9,4 @@ export const SKELETON_OPTIONS = Object.freeze({
 });
 
 export const WIDGET_PREVIEW_ID = 'ea11y-widget-preview--container';
+export const WIDGET_PREVIEW_ROOT = 'ea11y-root';
diff --git a/modules/settings/assets/js/layouts/widget-preview.js b/modules/settings/assets/js/layouts/widget-preview.js
@@ -44,7 +44,13 @@ const WidgetPreview = () => {
 
 				<StyledPreview id={WIDGET_PREVIEW_ID}></StyledPreview>
 			</Card>
-			<WidgetLoader />
+			<WidgetLoader
+				onLoad={() => {
+					if (document.getElementById(WIDGET_PREVIEW_ID)) {
+						window?.ea11yWidget?.widget?.open();
+					}
+				}}
+			/>
 		</>
 	);
 };
Original file line number	Diff line number	Diff line change
Expand Up		@@ -9,3 +9,4 @@ export const SKELETON_OPTIONS = Object.freeze({
		});

		export const WIDGET_PREVIEW_ID = 'ea11y-widget-preview--container';
		export const WIDGET_PREVIEW_ROOT = 'ea11y-root';