fix: live preview fixed new tab default setup

Author: contentstackMridul

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@contentstack/live-preview-utils",
-    "version": "4.1.2",
+    "version": "4.3.0",
     "description": "Contentstack provides the Live Preview SDK to establish a communication channel between the various Contentstack SDKs and your website, transmitting  live changes to the preview pane.",
     "type": "module",
     "types": "dist/legacy/index.d.ts",

src/configManager/__test__/configManager.test.ts

@@ -91,14 +91,14 @@ describe("Config", () => {
 });
 
 describe("config default flags", () => {
-    test("enableLivePreviewOutsideIframe defaults to false in getDefaultConfig", () => {
+    test("enableLivePreviewOutsideIframe defaults to undefined in getDefaultConfig", () => {
         const defaultConfig = getDefaultConfig();
-        expect(defaultConfig.enableLivePreviewOutsideIframe).toBe(false);
+        expect(defaultConfig.enableLivePreviewOutsideIframe).toBeUndefined();
     });
 
-    test("enableLivePreviewOutsideIframe defaults to false in getUserInitData", () => {
+    test("enableLivePreviewOutsideIframe defaults to undefined in getUserInitData", () => {
         const initData = getUserInitData();
-        expect(initData.enableLivePreviewOutsideIframe).toBe(false);
+        expect(initData.enableLivePreviewOutsideIframe).toBeUndefined();
     });
 });
 

src/configManager/__test__/handleUserConfig.test.ts

@@ -423,10 +423,10 @@ describe("handleInitData() - enableLivePreviewOutsideIframe", () => {
         Config.reset();
     });
 
-    test("should default to false when not provided", () => {
+    test("should default to undefined when not provided", () => {
         const initData: Partial<IInitData> = {};
         handleInitData(initData);
-        expect(config.enableLivePreviewOutsideIframe).toBe(false);
+        expect(config.enableLivePreviewOutsideIframe).toBeUndefined();
     });
 
     test("should set to true when provided as true", () => {

src/configManager/config.default.ts

@@ -39,7 +39,7 @@ export function getUserInitData(): IInitData {
             environment: "",
         },
         runScriptsOnUpdate: false,
-        enableLivePreviewOutsideIframe: false,
+        enableLivePreviewOutsideIframe: undefined,
     };
 }
 
@@ -111,6 +111,6 @@ export function getDefaultConfig(): IConfig {
             },
             payload: [],
         },
-        enableLivePreviewOutsideIframe: false,
+        enableLivePreviewOutsideIframe: undefined,
     };
 }

src/configManager/handleUserConfig.ts

@@ -121,7 +121,12 @@ export const handleInitData = (initData: Partial<IInitData>): void => {
             "bottom-right",
     })
 
-    Config.set("enableLivePreviewOutsideIframe", initData.enableLivePreviewOutsideIframe ?? config.enableLivePreviewOutsideIframe ?? false);
+    Config.set(
+        "enableLivePreviewOutsideIframe",
+        initData.enableLivePreviewOutsideIframe ??
+            stackSdk.live_preview?.enableLivePreviewOutsideIframe ??
+            config.enableLivePreviewOutsideIframe
+    );
 
     // client URL params
     handleClientUrlParams(

src/livePreview/eventManager/__test__/postMessageEvent.hooks.test.ts

@@ -432,6 +432,23 @@ describe("postMessageEvent.hooks", () => {
             });
         });
 
+        it("should omit enableLivePreviewOutsideIframe in INIT payload when config is unset", async () => {
+            mockConfig = {
+                ssr: true,
+                mode: 1,
+                enableLivePreviewOutsideIframe: undefined,
+            };
+            (Config.get as any).mockReturnValue(mockConfig);
+
+            await sendInitializeLivePreviewPostMessageEvent();
+            await Promise.resolve();
+
+            const initPayload = (livePreviewPostMessage?.send as any).mock.calls.at(-1)?.[1];
+            expect(initPayload.config).not.toHaveProperty(
+                "enableLivePreviewOutsideIframe"
+            );
+        });
+
         it("should include enableLivePreviewOutsideIframe=false in INIT payload", async () => {
             mockConfig = {
                 ssr: true, // avoid timers

src/livePreview/eventManager/postMessageEvent.hooks.ts

@@ -119,17 +119,29 @@ export function useOnEntryUpdatePostMessageEvent(): void {
 }
 
 export function sendInitializeLivePreviewPostMessageEvent(): void {
+    const config = Config.get();
+    const initConfig: {
+        shouldReload: boolean;
+        href: string;
+        sdkVersion: string | undefined;
+        mode: number;
+        enableLivePreviewOutsideIframe?: boolean;
+    } = {
+        shouldReload: config.ssr,
+        href: window.location.href,
+        sdkVersion: process?.env?.PACKAGE_VERSION,
+        mode: config.mode,
+    };
+
+    if (config.enableLivePreviewOutsideIframe !== undefined) {
+        initConfig.enableLivePreviewOutsideIframe = config.enableLivePreviewOutsideIframe;
+    }
+
     livePreviewPostMessage
         ?.send<LivePreviewInitEventResponse>(
             LIVE_PREVIEW_POST_MESSAGE_EVENTS.INIT,
             {
-                config: {
-                    shouldReload: Config.get().ssr,
-                    href: window.location.href,
-                    sdkVersion: process?.env?.PACKAGE_VERSION,
-                    mode: Config.get().mode,
-                    enableLivePreviewOutsideIframe: Config.get().enableLivePreviewOutsideIframe,
-                },
+                config: initConfig,
             }
         )
         .then((data) => {

src/types/types.ts

@@ -87,7 +87,7 @@ export declare interface IConfig {
         highlightedElement: HTMLElement | null;
     };
     collab: ICollabConfig["collab"];
-    enableLivePreviewOutsideIframe: boolean;
+    enableLivePreviewOutsideIframe: boolean | undefined;
 }
 
 
@@ -133,7 +133,7 @@ export declare interface IInitData {
     editButton: IConfigEditButton;
     editInVisualBuilderButton: IConfigEditInVisualBuilderButton;
     mode: ILivePreviewMode;
-    enableLivePreviewOutsideIframe: boolean; // default: false
+    enableLivePreviewOutsideIframe: boolean | undefined; // default: undefined
 }
 
 // type PickPartial<T, K extends keyof T> = Partial<Pick<T, K>> & Omit<T, K>;