Live preview outside iframe

README.md

@@ -16,7 +16,7 @@ Alternatively, if you want to include the package directly in your website HTML
 
 ```html
 <script type='module'  integrity='sha384-b6G+ggU20rGxqCqsgaS6zludFgj5N11xsuXhMEIARMuQY2PtyDS04TU0H5goP+32' crossorigin="anonymous">
-     import ContentstackLivePreview from 'https://esm.sh/@contentstack/live-preview-utils@3.4.0';
+     import ContentstackLivePreview from 'https://esm.sh/@contentstack/live-preview-utils@4.0.0';
 
      ContentstackLivePreview.init({
         stackDetails: {

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@contentstack/live-preview-utils",
-    "version": "3.4.0",
+    "version": "4.0.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/common/inIframe.ts

@@ -1,7 +1,20 @@
+import { hasWindow } from "../utils";
+
 export function inIframe(): boolean {
     try {
         return window.self !== window.top;
     } catch (e) {
         return true;
     }
 }
+
+export function isOpeningInNewTab(): boolean {
+    try {
+        if(hasWindow()) {
+            return !!window.opener;
+        }
+        return false;
+    } catch (e) {
+        return false;
+    }
+}

src/livePreview/editButton/editButton.ts

@@ -1,5 +1,5 @@
 import { effect } from "@preact/signals";
-import { inIframe } from "../../common/inIframe";
+import { inIframe, isOpeningInNewTab } from "../../common/inIframe";
 import Config from "../../configManager/configManager";
 import { addCslpOutline, extractDetailsFromCslp } from "../../cslp";
 import { cslpTagStyles } from "./editButton.style";
@@ -448,7 +448,7 @@ export class LivePreviewEditButton {
                 fieldPathWithIndex,
             } = extractDetailsFromCslp(cslpTag);
 
-            if (inIframe()) {
+            if (inIframe() || isOpeningInNewTab()) {
                 livePreviewPostMessage?.send("scroll", {
                     field: fieldPathWithIndex,
                     content_type_uid,

src/livePreview/eventManager/__test__/livePreviewEventManager.test.ts

@@ -0,0 +1,252 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { vi } from "vitest";
+import { EventManager } from "@contentstack/advanced-post-message";
+import { LIVE_PREVIEW_CHANNEL_ID } from "../livePreviewEventManager.constant";
+
+// Mock dependencies
+vi.mock("@contentstack/advanced-post-message", () => ({
+    EventManager: vi.fn(),
+}));
+
+vi.mock("../../../common/inIframe", () => ({
+    isOpeningInNewTab: vi.fn(),
+}));
+
+// Import after mocking
+import { isOpeningInNewTab } from "../../../common/inIframe";
+
+describe("livePreviewEventManager", () => {
+    let mockEventManager: any;
+    let originalWindow: any;
+
+    beforeEach(() => {
+        // Reset all mocks
+        vi.clearAllMocks();
+
+        // Create mock EventManager
+        mockEventManager = {
+            on: vi.fn(),
+            send: vi.fn(),
+        };
+        (EventManager as any).mockImplementation(() => mockEventManager);
+
+        // Store original window
+        originalWindow = global.window;
+
+        // Reset isOpeningInNewTab mock
+        (isOpeningInNewTab as any).mockReturnValue(false);
+    });
+
+    afterEach(() => {
+        // Restore original window
+        global.window = originalWindow;
+
+        // Clear module cache to reset the module state
+        vi.resetModules();
+    });
+
+    describe("when window is undefined", () => {
+        beforeEach(() => {
+            // Mock window as undefined
+            Object.defineProperty(global, "window", {
+                value: undefined,
+                writable: true,
+            });
+        });
+
+        it("should not initialize EventManager when window is undefined", async () => {
+            // Re-import the module to trigger initialization
+            const module = await import("../livePreviewEventManager");
+
+            expect(EventManager).not.toHaveBeenCalled();
+            expect(module.default).toBeUndefined();
+        });
+    });
+
+    describe("when window is defined", () => {
+        let mockWindow: any;
+
+        beforeEach(() => {
+            // Create mock window object
+            mockWindow = {
+                parent: { postMessage: vi.fn() },
+                opener: { postMessage: vi.fn() },
+            };
+
+            Object.defineProperty(global, "window", {
+                value: mockWindow,
+                writable: true,
+            });
+        });
+
+        it("should initialize EventManager with window.parent as target when not in new tab", async () => {
+            (isOpeningInNewTab as any).mockReturnValue(false);
+
+            // Re-import the module to trigger initialization
+            const module = await import("../livePreviewEventManager");
+
+            expect(EventManager).toHaveBeenCalledWith(LIVE_PREVIEW_CHANNEL_ID, {
+                target: mockWindow.parent,
+                debug: false,
+                suppressErrors: true,
+            });
+            expect(module.default).toBe(mockEventManager);
+        });
+
+        it("should initialize EventManager with window.opener as target when in new tab", async () => {
+            (isOpeningInNewTab as any).mockReturnValue(true);
+
+            // Re-import the module to trigger initialization
+            const module = await import("../livePreviewEventManager");
+
+            expect(EventManager).toHaveBeenCalledWith(LIVE_PREVIEW_CHANNEL_ID, {
+                target: mockWindow.opener,
+                debug: false,
+                suppressErrors: true,
+            });
+            expect(module.default).toBe(mockEventManager);
+        });
+
+        it("should call isOpeningInNewTab to determine the target", async () => {
+            // Re-import the module to trigger initialization
+            await import("../livePreviewEventManager");
+
+            expect(isOpeningInNewTab).toHaveBeenCalled();
+        });
+
+        it("should use correct channel ID", async () => {
+            // Re-import the module to trigger initialization
+            await import("../livePreviewEventManager");
+
+            expect(EventManager).toHaveBeenCalledWith(
+                LIVE_PREVIEW_CHANNEL_ID,
+                expect.any(Object)
+            );
+        });
+
+        it("should set correct default event options", async () => {
+            (isOpeningInNewTab as any).mockReturnValue(false);
+
+            // Re-import the module to trigger initialization
+            await import("../livePreviewEventManager");
+
+            expect(EventManager).toHaveBeenCalledWith(
+                expect.any(String),
+                expect.objectContaining({
+                    debug: false,
+                    suppressErrors: true,
+                })
+            );
+        });
+
+        describe("target selection logic", () => {
+            it("should prioritize window.opener when isOpeningInNewTab returns true", async () => {
+                (isOpeningInNewTab as any).mockReturnValue(true);
+
+                // Re-import the module to trigger initialization
+                await import("../livePreviewEventManager");
+
+                const callArgs = (EventManager as any).mock.calls[0];
+                expect(callArgs[1].target).toBe(mockWindow.opener);
+                expect(callArgs[1].target).not.toBe(mockWindow.parent);
+            });
+
+            it("should use window.parent when isOpeningInNewTab returns false", async () => {
+                (isOpeningInNewTab as any).mockReturnValue(false);
+
+                // Re-import the module to trigger initialization
+                await import("../livePreviewEventManager");
+
+                const callArgs = (EventManager as any).mock.calls[0];
+                expect(callArgs[1].target).toBe(mockWindow.parent);
+                expect(callArgs[1].target).not.toBe(mockWindow.opener);
+            });
+
+            it("should throw error when isOpeningInNewTab throws an error", async () => {
+                (isOpeningInNewTab as any).mockImplementation(() => {
+                    throw new Error("isOpeningInNewTab error");
+                });
+
+                // Should throw because isOpeningInNewTab error is not caught in the implementation
+                await expect(async () => {
+                    await import("../livePreviewEventManager");
+                }).rejects.toThrow("isOpeningInNewTab error");
+            });
+        });
+
+        describe("edge cases", () => {
+            it("should handle missing window.parent gracefully", async () => {
+                mockWindow.parent = undefined;
+                (isOpeningInNewTab as any).mockReturnValue(false);
+
+                // Re-import the module to trigger initialization
+                const module = await import("../livePreviewEventManager");
+
+                expect(EventManager).toHaveBeenCalledWith(LIVE_PREVIEW_CHANNEL_ID, {
+                    target: undefined,
+                    debug: false,
+                    suppressErrors: true,
+                });
+                expect(module.default).toBe(mockEventManager);
+            });
+
+            it("should handle missing window.opener gracefully", async () => {
+                mockWindow.opener = undefined;
+                (isOpeningInNewTab as any).mockReturnValue(true);
+
+                // Re-import the module to trigger initialization
+                const module = await import("../livePreviewEventManager");
+
+                expect(EventManager).toHaveBeenCalledWith(LIVE_PREVIEW_CHANNEL_ID, {
+                    target: undefined,
+                    debug: false,
+                    suppressErrors: true,
+                });
+                expect(module.default).toBe(mockEventManager);
+            });
+
+            it("should handle when EventManager constructor throws", async () => {
+                (EventManager as any).mockImplementation(() => {
+                    throw new Error("EventManager constructor error");
+                });
+
+                // Should not crash the module initialization
+                expect(async () => {
+                    await import("../livePreviewEventManager");
+                }).not.toThrow();
+            });
+        });
+    });
+
+    describe("module export", () => {
+        it("should export the EventManager instance when window is available", async () => {
+            const mockWindow = {
+                parent: { postMessage: vi.fn() },
+                opener: { postMessage: vi.fn() },
+            };
+
+            Object.defineProperty(global, "window", {
+                value: mockWindow,
+                writable: true,
+            });
+
+            const module = await import("../livePreviewEventManager");
+
+            expect(module.default).toBe(mockEventManager);
+        });
+
+        it("should export undefined when window is not available", async () => {
+            Object.defineProperty(global, "window", {
+                value: undefined,
+                writable: true,
+            });
+
+            const module = await import("../livePreviewEventManager");
+
+            expect(module.default).toBeUndefined();
+        });
+    });
+});