Merge pull request #315 from contentstack/develop_v3

v3.0.2

Author: hiteshshetty-dev

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021-2024 Contentstack
+Copyright (c) 2021-2025 Contentstack
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@contentstack/live-preview-utils",
-    "version": "3.0.1",
+    "version": "3.0.2",
     "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",

package.json

@@ -370,6 +370,63 @@ describe("handleInitData()", () => {
             expect(config.stackDetails.locale).toBe("en-us");
         });
     });
+
+    describe("handleInitData() - editButton configuration", () => {
+        let config: DeepSignal<IConfig>;
+
+        beforeEach(() => {
+            Config.reset();
+            config = Config.get();
+        });
+
+        afterAll(() => {
+            Config.reset();
+        });
+
+        test("should set editButton enable from initData", () => {
+            const initData: Partial<IInitData> = {
+                editButton: {
+                    enable: false,
+                },
+            };
+
+            handleInitData(initData);
+            expect(config.editButton.enable).toBe(false);
+        });
+
+        test("should set editButton exclude from initData if it is an array", () => {
+            const initData: Partial<IInitData> = {
+                editButton: {
+                    exclude: ["insideLivePreviewPortal"],
+                },
+            };
+
+            handleInitData(initData);
+            expect(config.editButton.exclude).toEqual(["insideLivePreviewPortal"]);
+        });
+
+        test("should set editButton position from initData", () => {
+            const initData: Partial<IInitData> = {
+                editButton: {
+                    position: "bottom",
+                },
+            };
+
+            handleInitData(initData);
+            expect(config.editButton.position).toBe("bottom");
+        });
+
+        test("should set editButton includeByQueryParameter from initData", () => {
+            const initData: Partial<IInitData> = {
+                editButton: {
+                    includeByQueryParameter: false,
+                },
+            };
+
+            handleInitData(initData);
+            expect(config.editButton.includeByQueryParameter).toBe(false);
+        });
+    });
 });
 
 describe("handleClientUrlParams()", () => {

src/configManager/__test__/handleUserConfig.test.ts

@@ -109,6 +109,8 @@ function getParentPathDetails(
 
 /**
  * Returns metadata for a multiple field in a content entry.
+ * @summary ONLY USE THESE RETURNED VALUES WHEN FIELD IS MULTIPLE
+ * @summary IT GIVES WRONG DATA IF FIELD IS NOT MULTIPLE
  * @param content_type_uid - The UID of the content type.
  * @param entry_uid - The UID of the content entry.
  * @param locale - The locale of the content entry.

src/cslp/cslpdata.ts

@@ -1,10 +1,14 @@
-import { Mock } from "vitest";
+import { Mock, vitest } from "vitest";
 import { DOMRect } from "../../../__test__/utils";
 import {
     createMultipleEditButton,
     createSingularEditButton,
     getEditButtonPosition,
+    shouldRenderEditButton
 } from "../editButton";
+import Config from "../../../configManager/configManager";
+import * as inIframe from "../../../common/inIframe";
+import { PublicLogger } from "../../../logger/logger";
 
 let editCallback: Mock<(e: MouseEvent) => void> | undefined;
 let linkCallback: Mock<(e: MouseEvent) => void> | undefined;
@@ -241,3 +245,75 @@ describe("Edit button for Link", () => {
         expect(linkCallback).toBeCalled();
     });
 });
+
+describe("shouldRenderEditButton", () => {
+    test("should return true if the config has enabled as true", () => {
+        vitest.spyOn(Config, "get").mockReturnValue({ editButton: { enable: true } });
+        expect(shouldRenderEditButton()).toBe(true);
+    });
+    test("should return false if the config has enabled as false", () => {
+        vitest.spyOn(Config, "get").mockReturnValue({ editButton: { enable: false } });
+        expect(shouldRenderEditButton()).toBe(false);
+    });
+
+    describe("includeByQueryParameter", () => {
+        test("should log error and return false if enable key is undefined", () => {
+            const loggerSpy = vitest.spyOn(PublicLogger, "error");
+            vitest.spyOn(Config, "get").mockReturnValue({ editButton: {} });
+            expect(shouldRenderEditButton()).toBe(false);
+            expect(loggerSpy).toHaveBeenCalledWith("enable key is required inside editButton object");
+        });
+
+        test("should return true if cslp-buttons query parameter is true", () => {
+            vitest.spyOn(Config, "get").mockReturnValue({ editButton: { enable: true } });
+            vitest.spyOn(window, "location", "get").mockReturnValue({
+                href: "http://example.com?cslp-buttons=true",
+            } as Location);
+            expect(shouldRenderEditButton()).toBe(true);
+        });
+
+        test("should return false if cslp-buttons query parameter is false", () => {
+            vitest.spyOn(Config, "get").mockReturnValue({ editButton: { enable: true } });
+            vitest.spyOn(window, "location", "get").mockReturnValue({
+                href: "http://example.com?cslp-buttons=false",
+            } as Location);
+            expect(shouldRenderEditButton()).toBe(false);
+        });
+
+        test("should return true if cslp-buttons query parameter is not present", () => {
+            vitest.spyOn(Config, "get").mockReturnValue({ editButton: { enable: true } });
+            vitest.spyOn(window, "location", "get").mockReturnValue({
+                href: "http://example.com",
+            } as Location);
+            expect(shouldRenderEditButton()).toBe(true);
+        });
+    })
+    describe("exclude", () => {
+        test("should return false if the config has exclude as `insideLivePreviewPortal` and the element is inside live preview portal", () => {
+            vitest.spyOn(inIframe, "inIframe").mockReturnValue(true);
+            vitest.spyOn(Config, "get").mockReturnValue({ editButton: { enable: true, exclude: ["insideLivePreviewPortal"] } });
+            expect(shouldRenderEditButton()).toBe(false);
+        });
+        test("should return true if the config has exclude as `insideLivePreviewPortal` and the element is not inside live preview portal", () => {
+            vitest.spyOn(inIframe, "inIframe").mockReturnValue(false);
+            vitest.spyOn(Config, "get").mockReturnValue({ editButton: { enable: true, exclude: ["insideLivePreviewPortal"] } });
+            expect(shouldRenderEditButton()).toBe(true);
+        });
+        test("should return false if the config has exclude as `outsideLivePreviewPortal` and the element is not inside live preview portal", () => {
+            vitest.spyOn(inIframe, "inIframe").mockReturnValue(false);
+            vitest.spyOn(Config, "get").mockReturnValue({ editButton: { enable: true, exclude: ["outsideLivePreviewPortal"] } });
+            expect(shouldRenderEditButton()).toBe(false);
+        });
+        test("should return true if the config has exclude as `outsideLivePreviewPortal` and the element is inside live preview portal", () => {
+            vitest.spyOn(inIframe, "inIframe").mockReturnValue(true);
+            vitest.spyOn(Config, "get").mockReturnValue({ editButton: { enable: true, exclude: ["outsideLivePreviewPortal"] } });
+            expect(shouldRenderEditButton()).toBe(true);
+        });
+    })
+
+    test("should return false if the website is rendered in Builder", () => {
+        vitest.spyOn(Config, "get").mockReturnValue({ editButton: { enable: true }, windowType: "builder" });
+        vitest.spyOn(inIframe, "inIframe").mockReturnValue(true);
+        expect(shouldRenderEditButton()).toBe(false);
+    })
+})

src/livePreview/editButton/__test__/editButton.test.ts

@@ -225,6 +225,7 @@ export function shouldRenderEditButton(): boolean {
 
     // case outside live preview
     if (
+        !iFrameCheck &&
         config.editButton.exclude?.find(
             (exclude) => exclude === "outsideLivePreviewPortal"
         )

src/livePreview/editButton/__test__/shouldRenderEditButton.test.ts

@@ -18,6 +18,7 @@ const voidElements = new Set([
     "source",
     "track",
     "wbr",
+    "video"
 ]);
 
 const LEAF_CSLP_SELECTOR = "[data-cslp]:not(:has([data-cslp]))";

src/livePreview/editButton/editButton.ts

@@ -44,12 +44,12 @@ export const BASE_VARIANT_STATUS: IVariantStatus = {
 };
 
 export async function getFieldVariantStatus(
-    fieldPathWithIndex: string
+    fieldMetadata: CslpData
 ): Promise<IVariantStatus | undefined> {
     try {
         const result = await visualBuilderPostMessage?.send<IVariantStatus>(
             "get-field-variant-status",
-            fieldPathWithIndex
+            fieldMetadata
         );
         return result;
     } catch (error) {