Vp 444 by default bug fix (#558)

* fix: live preview fixed new tab default setup

* chore: updated readme file

* fix: updated stackSDK usage in init new data flag

Author: contentstackMridul

README.md

@@ -16,7 +16,7 @@ Alternatively, if you want to include the package directly in your website HTML
 
 ```html
 <script type='module' crossorigin="anonymous">
-     import ContentstackLivePreview from 'https://esm.sh/@contentstack/live-preview-utils@4.1.2';
+     import ContentstackLivePreview from 'https://esm.sh/@contentstack/live-preview-utils@4.3.0';
 
      ContentstackLivePreview.init({
         stackDetails: {
@@ -51,7 +51,7 @@ ContentstackLivePreview.init({
 
 MIT License
 
-Copyright © 2021-2025 [Contentstack](https://www.contentstack.com/). All Rights Reserved
+Copyright © 2021-2026 [Contentstack](https://www.contentstack.com/). All Rights Reserved
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

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,11 @@ export const handleInitData = (initData: Partial<IInitData>): void => {
             "bottom-right",
     })
 
-    Config.set("enableLivePreviewOutsideIframe", initData.enableLivePreviewOutsideIframe ?? config.enableLivePreviewOutsideIframe ?? false);
+    Config.set(
+        "enableLivePreviewOutsideIframe",
+        initData.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>;