From 8719e25dfd6758dfdbd8d02a7fc254e0feaa62c6 Mon Sep 17 00:00:00 2001 From: Mridul Sharma Date: Tue, 10 Mar 2026 15:49:16 +0530 Subject: [PATCH 1/3] fix: live preview fixed new tab default setup --- package.json | 2 +- .../__test__/configManager.test.ts | 8 +++--- .../__test__/handleUserConfig.test.ts | 4 +-- src/configManager/config.default.ts | 4 +-- src/configManager/handleUserConfig.ts | 7 ++++- .../__test__/postMessageEvent.hooks.test.ts | 17 ++++++++++++ .../eventManager/postMessageEvent.hooks.ts | 26 ++++++++++++++----- src/types/types.ts | 4 +-- 8 files changed, 53 insertions(+), 19 deletions(-) diff --git a/package.json b/package.json index dfe5c648..dba44d09 100644 --- a/package.json +++ b/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", diff --git a/src/configManager/__test__/configManager.test.ts b/src/configManager/__test__/configManager.test.ts index 8d28818b..74f6328d 100644 --- a/src/configManager/__test__/configManager.test.ts +++ b/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(); }); }); diff --git a/src/configManager/__test__/handleUserConfig.test.ts b/src/configManager/__test__/handleUserConfig.test.ts index 5833cc04..3d61e808 100644 --- a/src/configManager/__test__/handleUserConfig.test.ts +++ b/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 = {}; handleInitData(initData); - expect(config.enableLivePreviewOutsideIframe).toBe(false); + expect(config.enableLivePreviewOutsideIframe).toBeUndefined(); }); test("should set to true when provided as true", () => { diff --git a/src/configManager/config.default.ts b/src/configManager/config.default.ts index 8a20a7be..5a62351b 100644 --- a/src/configManager/config.default.ts +++ b/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, }; } diff --git a/src/configManager/handleUserConfig.ts b/src/configManager/handleUserConfig.ts index a964e773..4b46aaba 100644 --- a/src/configManager/handleUserConfig.ts +++ b/src/configManager/handleUserConfig.ts @@ -121,7 +121,12 @@ export const handleInitData = (initData: Partial): 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( diff --git a/src/livePreview/eventManager/__test__/postMessageEvent.hooks.test.ts b/src/livePreview/eventManager/__test__/postMessageEvent.hooks.test.ts index e9f08798..f48b8bcc 100644 --- a/src/livePreview/eventManager/__test__/postMessageEvent.hooks.test.ts +++ b/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 diff --git a/src/livePreview/eventManager/postMessageEvent.hooks.ts b/src/livePreview/eventManager/postMessageEvent.hooks.ts index 1ef706d3..9e9f903d 100644 --- a/src/livePreview/eventManager/postMessageEvent.hooks.ts +++ b/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( 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) => { diff --git a/src/types/types.ts b/src/types/types.ts index 76986262..93602ecd 100644 --- a/src/types/types.ts +++ b/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 = Partial> & Omit; From 5bf0505beb073e3083160c3a364a93dcefb7198e Mon Sep 17 00:00:00 2001 From: Mridul Sharma Date: Tue, 10 Mar 2026 15:51:07 +0530 Subject: [PATCH 2/3] chore: updated readme file --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 2e4b0c2b..c826f875 100644 --- a/README.md +++ b/README.md @@ -16,7 +16,7 @@ Alternatively, if you want to include the package directly in your website HTML ```html