Merge branch 'develop_v4' into vitest-3-optimizing

karancs06 · web-flow · commit 5b8c3f822159 · 2025-12-01T10:18:26.000+05:30
diff --git a/CHANGELOG.md b/CHANGELOG.md
diff --git a/README.md b/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.1';
+     import ContentstackLivePreview from 'https://esm.sh/@contentstack/live-preview-utils@4.1.2';
 
      ContentstackLivePreview.init({
         stackDetails: {
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@contentstack/live-preview-utils",
-    "version": "4.1.1",
+    "version": "4.1.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",
diff --git a/src/visualBuilder/components/fieldLabelWrapper.tsx b/src/visualBuilder/components/fieldLabelWrapper.tsx
@@ -113,9 +113,11 @@ function FieldLabelWrapperComponent(
             const allPaths = uniqBy(
                 [
                     props.fieldMetadata,
-                    ...props.parentPaths.map((path) => {
-                        return extractDetailsFromCslp(path);
-                    }),
+                    ...props.parentPaths
+                        .filter((path) => path)
+                        .map((path) => {
+                            return extractDetailsFromCslp(path);
+                        }),
                 ],
                 "cslpValue"
             );
@@ -142,12 +144,14 @@ function FieldLabelWrapperComponent(
                 const domAncestor = eventDetails.editableElement.closest(`[data-cslp]:not([data-cslp^="${props.fieldMetadata.content_type_uid}"])`);
                 if(domAncestor) {
                     const domAncestorCslp = domAncestor.getAttribute("data-cslp");
-                    const domAncestorDetails = extractDetailsFromCslp(domAncestorCslp!);
-                    const domAncestorContentTypeUid = domAncestorDetails.content_type_uid;
-                    const domAncestorContentParent = referenceData?.find(data => data.contentTypeUid === domAncestorContentTypeUid);
-                    if(domAncestorContentParent) {
-                        referenceFieldName = domAncestorContentParent.referenceFieldName;
-                        parentContentTypeName = domAncestorContentParent.contentTypeTitle;
+                    if (domAncestorCslp) {
+                        const domAncestorDetails = extractDetailsFromCslp(domAncestorCslp);
+                        const domAncestorContentTypeUid = domAncestorDetails.content_type_uid;
+                        const domAncestorContentParent = referenceData?.find(data => data.contentTypeUid === domAncestorContentTypeUid);
+                        if(domAncestorContentParent) {
+                            referenceFieldName = domAncestorContentParent.referenceFieldName;
+                            parentContentTypeName = domAncestorContentParent.contentTypeTitle;
+                        }
                     }
                 }
             }
diff --git a/src/visualBuilder/generators/__test__/generateOverlay.test.ts b/src/visualBuilder/generators/__test__/generateOverlay.test.ts
@@ -0,0 +1,63 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { sendFieldEvent } from "../generateOverlay";
+import { VisualBuilder } from "../..";
+import { VisualBuilderPostMessageEvents } from "../../utils/types/postMessage.types";
+import visualBuilderPostMessage from "../../utils/visualBuilderPostMessage";
+import { FieldSchemaMap } from "../../utils/fieldSchemaMap";
+import { extractDetailsFromCslp } from "../../../cslp/cslpdata";
+
+vi.mock("../../utils/visualBuilderPostMessage", () => ({
+    default: {
+        send: vi.fn(),
+    },
+}));
+
+vi.mock("../../utils/fieldSchemaMap", () => ({
+    FieldSchemaMap: {
+        getFieldSchema: vi.fn().mockResolvedValue({
+            display_name: "Test Field",
+            data_type: "text",
+        }),
+    },
+}));
+
+vi.mock("../../../cslp/cslpdata", () => ({
+    extractDetailsFromCslp: vi.fn(),
+}));
+
+describe("sendFieldEvent", () => {
+    let previousSelectedEditableDOM: HTMLElement;
+    let visualBuilderContainer: HTMLElement;
+
+    beforeEach(() => {
+        previousSelectedEditableDOM = document.createElement("div");
+        previousSelectedEditableDOM.setAttribute("contenteditable", "true");
+        previousSelectedEditableDOM.innerText = "Test content";
+        document.body.appendChild(previousSelectedEditableDOM);
+
+        visualBuilderContainer = document.createElement("div");
+        document.body.appendChild(visualBuilderContainer);
+
+        VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM =
+            previousSelectedEditableDOM;
+    });
+
+    afterEach(() => {
+        document.body.innerHTML = "";
+        vi.clearAllMocks();
+    });
+
+    it("should return early and not send event when data-cslp attribute is invalid", () => {
+        previousSelectedEditableDOM.setAttribute("data-cslp", "");
+
+        sendFieldEvent({
+            visualBuilderContainer,
+            eventType: VisualBuilderPostMessageEvents.UPDATE_FIELD,
+        });
+
+        expect(extractDetailsFromCslp).not.toHaveBeenCalled();
+        expect(FieldSchemaMap.getFieldSchema).not.toHaveBeenCalled();
+        expect(visualBuilderPostMessage?.send).not.toHaveBeenCalled();
+    });
+});
+
diff --git a/src/visualBuilder/generators/generateOverlay.tsx b/src/visualBuilder/generators/generateOverlay.tsx
@@ -177,9 +177,12 @@ export function sendFieldEvent(options: ISendFieldEventParams): void {
                 ? actualEditedElement.innerText
                 : actualEditedElement.textContent;
 
-        const fieldMetadata = extractDetailsFromCslp(
-            previousSelectedEditableDOM.getAttribute("data-cslp") as string
-        );
+        const cslpData = previousSelectedEditableDOM.getAttribute("data-cslp");
+        if (!cslpData) {
+            return;
+        }
+
+        const fieldMetadata = extractDetailsFromCslp(cslpData);
 
         FieldSchemaMap.getFieldSchema(
             fieldMetadata.content_type_uid,
diff --git a/src/visualBuilder/utils/__test__/getCsDataOfElement.test.ts b/src/visualBuilder/utils/__test__/getCsDataOfElement.test.ts
@@ -217,4 +217,46 @@ describe("getDOMEditStack", () => {
         const editStack = getDOMEditStack(leafEl);
         expect(editStack.length).toBe(2);
     });
+
+    test("get dom edit stack should filter out elements with same prefix", () => {
+        const dom = new JSDOM(`
+            <div data-cslp="page.pageuid.en-us.group">
+                <div data-cslp="page.pageuid.en-us.group.field1">
+                    <div data-cslp="page.pageuid.en-us.group.field1.nested">
+                        <span data-cslp="page.pageuid.en-us.group.field1.nested.leaf">leaf</span>
+                    </div>
+                </div>
+            </div>
+        `).window.document;
+        const leafEl = dom.querySelector(
+            '[data-cslp="page.pageuid.en-us.group.field1.nested.leaf"]'
+        ) as HTMLElement;
+        const editStack = getDOMEditStack(leafEl);
+        // Should only have one entry since all have same prefix (page.pageuid.en-us)
+        expect(editStack.length).toBe(1);
+        expect(editStack[0].content_type_uid).toBe("page");
+        expect(editStack[0].entry_uid).toBe("pageuid");
+    });
+
+    test("get dom edit stack should filter out elements with invalid data-cslp attribute", () => {
+        const dom = new JSDOM(`
+            <div data-cslp="page.pageuid.en-us.group">
+                <div data-cslp>
+                    <div data-cslp="">
+                        <div data-cslp="blog.bloguid.fr-fr.title">
+                            <span data-cslp="blog.bloguid.fr-fr.title.name">name</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        `).window.document;
+        const leafEl = dom.querySelector(
+            '[data-cslp="blog.bloguid.fr-fr.title.name"]'
+        ) as HTMLElement;
+        const editStack = getDOMEditStack(leafEl);
+        // Should have two entries (page, blog) - invalid cslp attributes (empty or no value) should be filtered out
+        expect(editStack.length).toBe(2);
+        expect(editStack[0].content_type_uid).toBe("page");
+        expect(editStack[1].content_type_uid).toBe("blog");
+    });
 });
diff --git a/src/visualBuilder/utils/__test__/getEntryIdentifiersInCurrentPage.test.ts b/src/visualBuilder/utils/__test__/getEntryIdentifiersInCurrentPage.test.ts
@@ -47,4 +47,17 @@ describe("getEntryIdentifiersInCurrentPage", () => {
         expect(entriesInCurrentPage.length).toBe(0);
         expect(entriesInCurrentPage).toEqual([]);
     });
+
+    test("should filter out elements with empty data-cslp attribute and not break", () => {
+        document.body.innerHTML = `
+            <div>
+                <h1 data-cslp="">Empty CSLP</h1>
+                <h2 data-cslp>Empty CSLP</h2>
+                <h1 data-cslp="page.bltf5bb5f8fb088a332.en-us.page_components.0.hero_banner.banner_title">Valid CSLP</h1>
+            </div>
+        `;
+        const { entriesInCurrentPage } = getEntryIdentifiersInCurrentPage();
+        expect(entriesInCurrentPage.length).toBe(1);
+        expect(entriesInCurrentPage[0].entryUid).toBe('bltf5bb5f8fb088a332');
+    });
 });
diff --git a/src/visualBuilder/utils/__test__/getVisualBuilderRedirectionUrl.test.ts b/src/visualBuilder/utils/__test__/getVisualBuilderRedirectionUrl.test.ts
@@ -84,4 +84,25 @@ describe('getVisualBuilderRedirectionUrl', () => {
         const result = getVisualBuilderRedirectionUrl();
         expect(result.toString()).toBe('https://app.example.com/#!/stack/12345/visual-builder?branch=main&environment=production&target-url=https%3A%2F%2Fexample.com%2F');
     });
+
+    it('should ignore invalid data-cslp attribute and use locale from config', () => {
+        document.body.innerHTML = '<div data-cslp></div>';
+        Config.get.mockReturnValue({
+            stackDetails: {
+                branch: 'main',
+                apiKey: '12345',
+                environment: 'production',
+                locale: 'en-US'
+            },
+            clientUrlParams: {
+                url: 'https://app.example.com'
+            }
+        });
+
+        const result = getVisualBuilderRedirectionUrl();
+        // Should use locale from config when data-cslp attribute is invalid (empty or no value)
+        expect(result.toString()).toBe('https://app.example.com/#!/stack/12345/visual-builder?branch=main&environment=production&target-url=https%3A%2F%2Fexample.com%2F&locale=en-US');
+        // Should not call extractDetailsFromCslp for invalid cslp
+        expect(extractDetailsFromCslp).not.toHaveBeenCalled();
+    });
 });
diff --git a/src/visualBuilder/utils/__test__/updateFocussedState.test.ts b/src/visualBuilder/utils/__test__/updateFocussedState.test.ts
@@ -6,7 +6,7 @@ import {
 import { VisualBuilder } from "../..";
 import {
     addFocusOverlay,
-    hideFocusOverlay,
+    hideOverlay,
 } from "../../generators/generateOverlay";
 import { mockGetBoundingClientRect } from "../../../__test__/utils";
 import { act } from "@testing-library/preact";
@@ -16,7 +16,7 @@ import { isFieldDisabled } from "../isFieldDisabled";
 
 vi.mock("../../generators/generateOverlay", () => ({
     addFocusOverlay: vi.fn(),
-    hideFocusOverlay: vi.fn(),
+    hideOverlay: vi.fn(),
 }));
 
 vi.mock("../fetchEntryPermissionsAndStageDetails", () => ({
@@ -39,10 +39,10 @@ vi.mock("../../utils/fieldSchemaMap", () => {
     };
 });
 
+
 describe("updateFocussedState", () => {
     beforeEach(() => {
-        let previousSelectedEditableDOM: HTMLElement;
-        previousSelectedEditableDOM = document.createElement("div");
+        const previousSelectedEditableDOM = document.createElement("div");
         previousSelectedEditableDOM.setAttribute(
             "data-cslp",
             "content_type_uid.entry_uid.locale.field_path"
@@ -77,6 +77,7 @@ describe("updateFocussedState", () => {
         document.body.innerHTML = "";
         VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM =
             null;
+        vi.clearAllMocks();
     });
     it("should return early if required elements are not provided", async () => {
         const result = await updateFocussedState({
@@ -89,7 +90,7 @@ describe("updateFocussedState", () => {
         expect(result).toBeUndefined();
     });
 
-    it("should hide focus overlay if newPreviousSelectedElement is not found", () => {
+    it("should call hideOverlay if newPreviousSelectedElement is not found", () => {
         const resizeObserverMock = {
             disconnect: vi.fn(),
         } as unknown as ResizeObserver;
@@ -110,7 +111,13 @@ describe("updateFocussedState", () => {
             resizeObserver: resizeObserverMock,
         });
 
-        expect(hideFocusOverlay).toHaveBeenCalled();
+        expect(hideOverlay).toHaveBeenCalledWith({
+            visualBuilderOverlayWrapper: overlayWrapperMock,
+            focusedToolbar: focusedToolbarMock,
+            visualBuilderContainer: visualBuilderContainerMock,
+            resizeObserver: resizeObserverMock,
+            noTrigger: true,
+        });
         spyQuerySelector.mockRestore();
     });
 
@@ -268,12 +275,43 @@ describe("updateFocussedState", () => {
             expect.any(Boolean)
         );
     });
+
+    it("should return early if data-cslp attribute is invalid", async () => {
+        const editableElementMock = document.createElement("div");
+        editableElementMock.setAttribute("data-cslp", "");
+        const visualBuilderContainerMock = document.createElement("div");
+        const overlayWrapperMock = document.createElement("div");
+        const focusedToolbarMock = document.createElement("div");
+        const resizeObserverMock = {
+            disconnect: vi.fn(),
+        } as unknown as ResizeObserver;
+
+        const previousSelectedEditableDOM = document.createElement("div");
+        previousSelectedEditableDOM.setAttribute("data-cslp", "content_type_uid.entry_uid.locale.field_path");
+        document.body.appendChild(previousSelectedEditableDOM);
+        VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM =
+            previousSelectedEditableDOM;
+
+        document.querySelector = vi.fn().mockReturnValue(previousSelectedEditableDOM);
+
+        const result = await updateFocussedState({
+            editableElement: editableElementMock,
+            visualBuilderContainer: visualBuilderContainerMock,
+            overlayWrapper: overlayWrapperMock,
+            focusedToolbar: focusedToolbarMock,
+            resizeObserver: resizeObserverMock,
+        });
+
+        // Should return early without processing
+        expect(result).toBeUndefined();
+        expect(getEntryPermissionsCached).not.toHaveBeenCalled();
+        expect(addFocusOverlay).not.toHaveBeenCalled();
+    });
 });
 
 describe("updateFocussedStateOnMutation", () => {
     beforeEach(() => {
-        let previousSelectedEditableDOM: HTMLElement;
-        previousSelectedEditableDOM = document.createElement("div");
+        const previousSelectedEditableDOM = document.createElement("div");
         previousSelectedEditableDOM.setAttribute(
             "data-cslp",
             "content_type_uid.entry_uid.locale.field_path"
@@ -292,7 +330,7 @@ describe("updateFocussedStateOnMutation", () => {
         expect(result).toBeUndefined();
     });
 
-    it("should hide focus overlay if newSelectedElement is not found", () => {
+    it("should call hideOverlay if newSelectedElement is not found", () => {
         const resizeObserverMock = {
             disconnect: vi.fn(),
         } as unknown as ResizeObserver;
@@ -309,7 +347,13 @@ describe("updateFocussedStateOnMutation", () => {
             resizeObserverMock
         );
 
-        expect(hideFocusOverlay).toHaveBeenCalled();
+        expect(hideOverlay).toHaveBeenCalledWith({
+            visualBuilderOverlayWrapper: focusOverlayWrapperMock,
+            focusedToolbar: focusedToolbarMock,
+            visualBuilderContainer: visualBuilderContainerMock,
+            resizeObserver: resizeObserverMock,
+            noTrigger: true,
+        });
     });
 
     it("should update focus outline dimensions", () => {
diff --git a/src/visualBuilder/utils/getCsDataOfElement.ts b/src/visualBuilder/utils/getCsDataOfElement.ts
@@ -54,7 +54,11 @@ export function getDOMEditStack(ele: Element): CslpData[] {
     const cslpSet: string[] = [];
     let curr: any = ele.closest(`[${DATA_CSLP_ATTR_SELECTOR}]`);
     while (curr) {
-        const cslp = curr.getAttribute(DATA_CSLP_ATTR_SELECTOR)!;
+        const cslp = curr.getAttribute(DATA_CSLP_ATTR_SELECTOR);
+        if (!cslp) {
+            curr = curr.parentElement?.closest(`[${DATA_CSLP_ATTR_SELECTOR}]`);
+            continue;
+        }
         const entryPrefix = getPrefix(cslp);
         const hasSamePrevPrefix = getPrefix(cslpSet.at(0) || "").startsWith(
             entryPrefix
@@ -64,5 +68,5 @@ export function getDOMEditStack(ele: Element): CslpData[] {
         }
         curr = curr.parentElement?.closest(`[${DATA_CSLP_ATTR_SELECTOR}]`);
     }
-    return cslpSet.map((cslp) => extractDetailsFromCslp(cslp));
+    return cslpSet.filter((cslp) => cslp).map((cslp) => extractDetailsFromCslp(cslp));
 }
diff --git a/src/visualBuilder/utils/getEntryIdentifiersInCurrentPage.ts b/src/visualBuilder/utils/getEntryIdentifiersInCurrentPage.ts
diff --git a/src/visualBuilder/utils/getVisualBuilderRedirectionUrl.ts b/src/visualBuilder/utils/getVisualBuilderRedirectionUrl.ts
diff --git a/src/visualBuilder/utils/updateFocussedState.ts b/src/visualBuilder/utils/updateFocussedState.ts

-Original file line number
+Diff line change
 ```html
 <script type='module' crossorigin="anonymous">
 -     import ContentstackLivePreview from 'https://esm.sh/@contentstack/[email protected].1';
 +     import ContentstackLivePreview from 'https://esm.sh/@contentstack/[email protected].2';
      ContentstackLivePreview.init({
         stackDetails: {
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@contentstack/live-preview-utils",`
`3`		`- "version": "4.1.1",`
	`3`	`+ "version": "4.1.2",`
`4`	`4`	`"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.",`
`5`	`5`	`"type": "module",`
`6`	`6`	`"types": "dist/legacy/index.d.ts",`