Merge pull request #468 from contentstack/VE_6811

feat: live preview: added outside iframe code

Author: contentstackMridul

src/livePreview/eventManager/livePreviewEventManager.constant.ts

@@ -5,6 +5,7 @@ export const LIVE_PREVIEW_POST_MESSAGE_EVENTS = {
     CHECK_ENTRY_PAGE: "check-entry-page",
     URL_CHANGE: "url-change",
     VARIANT_PATCH: "variant-patch-update",
+    ON_RELOAD: "cslp-reload"
 } as const;
 
 export const LIVE_PREVIEW_CHANNEL_ID = "live-preview";

src/livePreview/eventManager/livePreviewEventManager.ts

@@ -4,11 +4,17 @@ import { LIVE_PREVIEW_CHANNEL_ID } from "./livePreviewEventManager.constant";
 let livePreviewPostMessage: EventManager | undefined;
 
 if (typeof window !== "undefined") {
-    livePreviewPostMessage = new EventManager(LIVE_PREVIEW_CHANNEL_ID, {
+    let eventOptions = {
         target: window.parent,
         debug: false,
-        suppressErrors: true,
-    });
+        suppressErrors: true
+    };
+
+    if (window.opener) {
+        eventOptions.target = window.opener;
+    }
+
+    livePreviewPostMessage = new EventManager(LIVE_PREVIEW_CHANNEL_ID, eventOptions);
 }
 
 export default livePreviewPostMessage;

src/livePreview/eventManager/postMessageEvent.hooks.ts

@@ -7,6 +7,7 @@ import {
     HistoryLivePreviewPostMessageEventData,
     LivePreviewInitEventResponse,
     OnChangeLivePreviewPostMessageEventData,
+    OnReloadLivePreviewPostMessageEventData,
 } from "./types/livePreviewPostMessageEvent.type";
 
 /**
@@ -57,6 +58,20 @@ export function useOnEntryUpdatePostMessageEvent(): void {
     );
 }
 
+export function useOnReloadPostMessageEvent(): void {
+    livePreviewPostMessage?.on<OnReloadLivePreviewPostMessageEventData>(
+        LIVE_PREVIEW_POST_MESSAGE_EVENTS.ON_RELOAD,
+        (event) => {
+            setConfigFromParams({
+                live_preview: event.data.hash,
+            });
+            if (window) {
+                window.location?.reload();
+            }
+        }
+    );
+}
+
 export function sendInitializeLivePreviewPostMessageEvent(): void {
     livePreviewPostMessage
         ?.send<LivePreviewInitEventResponse>(
@@ -109,6 +124,7 @@ export function sendInitializeLivePreviewPostMessageEvent(): void {
 
             useHistoryPostMessageEvent();
             useOnEntryUpdatePostMessageEvent();
+            useOnReloadPostMessageEvent();
         })
         .catch((e) => {
             // TODO: add debug logs that runs conditionally

src/livePreview/eventManager/types/livePreviewPostMessageEvent.type.ts

@@ -8,6 +8,10 @@ export interface OnChangeLivePreviewPostMessageEventData {
     hash: string;
 }
 
+export interface OnReloadLivePreviewPostMessageEventData {
+    hash: string;
+}
+
 export interface LivePreviewInitEventResponse {
     contentTypeUid: string;
     entryUid: string;