From 8e80517437e979fd143a162cc5b293cabb84e94e Mon Sep 17 00:00:00 2001 From: SahilCs15 Date: Fri, 13 Jun 2025 20:06:22 +0530 Subject: [PATCH 01/10] feat: add isOpenInBuilder utility function and integrate into VisualBuilder components --- src/utils/index.ts | 11 +- .../__test__/click/fields/boolean.test.tsx | 15 +- .../__test__/click/fields/date.test.tsx | 14 +- .../__test__/click/fields/file.test.tsx | 19 +- .../__test__/click/fields/group.test.tsx | 19 +- .../__test__/click/fields/html-rte.test.tsx | 19 +- .../__test__/click/fields/json-rte.test.tsx | 19 +- .../__test__/click/fields/link.test.tsx | 19 +- .../__test__/click/fields/markdown.test.tsx | 20 +- .../__test__/click/fields/multi-line.test.tsx | 23 +- .../__test__/click/fields/number.test.tsx | 19 +- .../__test__/click/fields/reference.test.tsx | 42 +- .../__test__/click/fields/select.test.tsx | 20 +- .../click/fields/single-line.test.tsx | 24 +- .../__test__/hover/fields/boolean.test.ts | 20 +- .../__test__/hover/fields/date.test.ts | 16 +- .../__test__/hover/fields/file.test.ts | 47 ++- .../__test__/hover/fields/group.test.ts | 23 +- .../__test__/hover/fields/html-rte.test.ts | 21 +- .../__test__/hover/fields/json-rte.test.ts | 21 +- .../__test__/hover/fields/link.test.ts | 15 +- .../__test__/hover/fields/markdown.test.ts | 21 +- .../__test__/hover/fields/multi-line.test.ts | 21 +- .../__test__/hover/fields/number.test.ts | 21 +- .../__test__/hover/fields/reference.test.ts | 17 +- .../__test__/hover/fields/select.test.ts | 9 + .../__test__/hover/fields/single-line.test.ts | 31 +- src/visualBuilder/__test__/index.test.ts | 388 +++++++++++------- .../__test__/withoutIframe.test.ts | 16 +- .../components/VisualBuilder.tsx | 7 +- .../__test__/visualBuilder.test.tsx | 98 ++++- src/visualBuilder/components/index.tsx | 6 +- .../__test__/focusOverlayWrapper.test.ts | 38 +- 33 files changed, 832 insertions(+), 287 deletions(-) diff --git a/src/utils/index.ts b/src/utils/index.ts index 4030ca0d..97b91903 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -27,4 +27,13 @@ export function isOpeningInTimeline(): boolean { return !!previewTimestamp; } return false; -} \ No newline at end of file +} + +export function isOpenInBuilder(): boolean { + if (hasWindow()) { + const urlParams = new URLSearchParams(window.location.search); + const builder = urlParams.get("builder"); + return !!builder; + } + return false; +} diff --git a/src/visualBuilder/__test__/click/fields/boolean.test.tsx b/src/visualBuilder/__test__/click/fields/boolean.test.tsx index 9d68237e..15c66c92 100644 --- a/src/visualBuilder/__test__/click/fields/boolean.test.tsx +++ b/src/visualBuilder/__test__/click/fields/boolean.test.tsx @@ -60,6 +60,15 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => { }; }); +vi.mock("../../../../utils/index.ts", async () => { + const actual = await vi.importActual("../../../../utils"); + return { + __esModule: true, + ...actual, + isOpenInBuilder: vi.fn().mockReturnValue(true), + }; +}); + describe("When an element is clicked in visual builder mode", () => { let mouseClickEvent: Event; @@ -107,7 +116,10 @@ describe("When an element is clicked in visual builder mode", () => { document.body.appendChild(booleanField); visualBuilder = new VisualBuilder(); - await triggerAndWaitForClickAction(visualBuilderPostMessage, booleanField); + await triggerAndWaitForClickAction( + visualBuilderPostMessage, + booleanField + ); }); afterAll(() => { @@ -147,7 +159,6 @@ describe("When an element is clicked in visual builder mode", () => { }); test("should send a focus field message to parent", async () => { - await waitFor(() => { expect(visualBuilderPostMessage?.send).toBeCalledWith( VisualBuilderPostMessageEvents.FOCUS_FIELD, diff --git a/src/visualBuilder/__test__/click/fields/date.test.tsx b/src/visualBuilder/__test__/click/fields/date.test.tsx index 2fd2c808..ede2493c 100644 --- a/src/visualBuilder/__test__/click/fields/date.test.tsx +++ b/src/visualBuilder/__test__/click/fields/date.test.tsx @@ -60,6 +60,15 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => { }; }); +vi.mock("../../../../utils/index.ts", async () => { + const actual = await vi.importActual("../../../../utils"); + return { + __esModule: true, + ...actual, + isOpenInBuilder: vi.fn().mockReturnValue(true), + }; +}); + describe("When an element is clicked in visual builder mode", () => { let mouseClickEvent: Event; @@ -107,7 +116,10 @@ describe("When an element is clicked in visual builder mode", () => { document.body.appendChild(dateField); visualBuilder = new VisualBuilder(); - await triggerAndWaitForClickAction(visualBuilderPostMessage, dateField); + await triggerAndWaitForClickAction( + visualBuilderPostMessage, + dateField + ); }); afterAll(() => { diff --git a/src/visualBuilder/__test__/click/fields/file.test.tsx b/src/visualBuilder/__test__/click/fields/file.test.tsx index e4a1c63f..ddeba7cc 100644 --- a/src/visualBuilder/__test__/click/fields/file.test.tsx +++ b/src/visualBuilder/__test__/click/fields/file.test.tsx @@ -49,6 +49,15 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => { }; }); +vi.mock("../../../../utils/index.ts", async () => { + const actual = await vi.importActual("../../../../utils"); + return { + __esModule: true, + ...actual, + isOpenInBuilder: vi.fn().mockReturnValue(true), + }; +}); + describe("When an element is clicked in visual builder mode", () => { let mouseClickEvent: Event; @@ -105,7 +114,10 @@ describe("When an element is clicked in visual builder mode", () => { document.body.appendChild(fileField); document.body.appendChild(imageField); visualBuilder = new VisualBuilder(); - await triggerAndWaitForClickAction(visualBuilderPostMessage, fileField); + await triggerAndWaitForClickAction( + visualBuilderPostMessage, + fileField + ); }); afterAll(() => { @@ -202,7 +214,10 @@ describe("When an element is clicked in visual builder mode", () => { document.body.appendChild(container); visualBuilder = new VisualBuilder(); - await triggerAndWaitForClickAction(visualBuilderPostMessage, container); + await triggerAndWaitForClickAction( + visualBuilderPostMessage, + container + ); }); afterAll(() => { diff --git a/src/visualBuilder/__test__/click/fields/group.test.tsx b/src/visualBuilder/__test__/click/fields/group.test.tsx index 59d708ac..29e85aa5 100644 --- a/src/visualBuilder/__test__/click/fields/group.test.tsx +++ b/src/visualBuilder/__test__/click/fields/group.test.tsx @@ -49,6 +49,15 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => { }; }); +vi.mock("../../../../utils/index.ts", async () => { + const actual = await vi.importActual("../../../../utils"); + return { + __esModule: true, + ...actual, + isOpenInBuilder: vi.fn().mockReturnValue(true), + }; +}); + describe("When an element is clicked in visual builder mode", () => { let mouseClickEvent: Event; @@ -98,7 +107,10 @@ describe("When an element is clicked in visual builder mode", () => { document.body.appendChild(groupField); visualBuilder = new VisualBuilder(); - await triggerAndWaitForClickAction(visualBuilderPostMessage, groupField); + await triggerAndWaitForClickAction( + visualBuilderPostMessage, + groupField + ); }); afterAll(() => { @@ -190,7 +202,10 @@ describe("When an element is clicked in visual builder mode", () => { document.body.appendChild(container); visualBuilder = new VisualBuilder(); - await triggerAndWaitForClickAction(visualBuilderPostMessage, container); + await triggerAndWaitForClickAction( + visualBuilderPostMessage, + container + ); }); afterAll(() => { diff --git a/src/visualBuilder/__test__/click/fields/html-rte.test.tsx b/src/visualBuilder/__test__/click/fields/html-rte.test.tsx index df4cf553..a1dc4146 100644 --- a/src/visualBuilder/__test__/click/fields/html-rte.test.tsx +++ b/src/visualBuilder/__test__/click/fields/html-rte.test.tsx @@ -49,6 +49,15 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => { }; }); +vi.mock("../../../../utils/index.ts", async () => { + const actual = await vi.importActual("../../../../utils"); + return { + __esModule: true, + ...actual, + isOpenInBuilder: vi.fn().mockReturnValue(true), + }; +}); + describe("When an element is clicked in visual builder mode", () => { let mouseClickEvent: Event; @@ -96,7 +105,10 @@ describe("When an element is clicked in visual builder mode", () => { ); document.body.appendChild(htmlRteField); visualBuilder = new VisualBuilder(); - await triggerAndWaitForClickAction(visualBuilderPostMessage, htmlRteField) + await triggerAndWaitForClickAction( + visualBuilderPostMessage, + htmlRteField + ); }); afterAll(() => { @@ -177,7 +189,10 @@ describe("When an element is clicked in visual builder mode", () => { document.body.appendChild(container); visualBuilder = new VisualBuilder(); - await triggerAndWaitForClickAction(visualBuilderPostMessage, container); + await triggerAndWaitForClickAction( + visualBuilderPostMessage, + container + ); }); afterAll(() => { visualBuilder.destroy(); diff --git a/src/visualBuilder/__test__/click/fields/json-rte.test.tsx b/src/visualBuilder/__test__/click/fields/json-rte.test.tsx index db4198a6..d59f60b0 100644 --- a/src/visualBuilder/__test__/click/fields/json-rte.test.tsx +++ b/src/visualBuilder/__test__/click/fields/json-rte.test.tsx @@ -49,6 +49,15 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => { }; }); +vi.mock("../../../../utils/index.ts", async () => { + const actual = await vi.importActual("../../../../utils"); + return { + __esModule: true, + ...actual, + isOpenInBuilder: vi.fn().mockReturnValue(true), + }; +}); + describe("When an element is clicked in visual builder mode", () => { let mouseClickEvent: Event; @@ -97,7 +106,10 @@ describe("When an element is clicked in visual builder mode", () => { document.body.appendChild(jsonRteField); visualBuilder = new VisualBuilder(); - await triggerAndWaitForClickAction(visualBuilderPostMessage, jsonRteField); + await triggerAndWaitForClickAction( + visualBuilderPostMessage, + jsonRteField + ); }); afterAll(() => { @@ -178,7 +190,10 @@ describe("When an element is clicked in visual builder mode", () => { document.body.appendChild(container); visualBuilder = new VisualBuilder(); - await triggerAndWaitForClickAction(visualBuilderPostMessage, container); + await triggerAndWaitForClickAction( + visualBuilderPostMessage, + container + ); }); afterAll(() => { diff --git a/src/visualBuilder/__test__/click/fields/link.test.tsx b/src/visualBuilder/__test__/click/fields/link.test.tsx index 39555366..f715526c 100644 --- a/src/visualBuilder/__test__/click/fields/link.test.tsx +++ b/src/visualBuilder/__test__/click/fields/link.test.tsx @@ -49,6 +49,15 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => { }; }); +vi.mock("../../../../utils/index.ts", async () => { + const actual = await vi.importActual("../../../../utils"); + return { + __esModule: true, + ...actual, + isOpenInBuilder: vi.fn().mockReturnValue(true), + }; +}); + describe("When an element is clicked in visual builder mode", () => { beforeAll(() => { FieldSchemaMap.setFieldSchema( @@ -91,7 +100,10 @@ describe("When an element is clicked in visual builder mode", () => { document.body.appendChild(linkField); visualBuilder = new VisualBuilder(); - await triggerAndWaitForClickAction(visualBuilderPostMessage, linkField); + await triggerAndWaitForClickAction( + visualBuilderPostMessage, + linkField + ); }); afterAll(() => { @@ -173,7 +185,10 @@ describe("When an element is clicked in visual builder mode", () => { document.body.appendChild(container); visualBuilder = new VisualBuilder(); - await triggerAndWaitForClickAction(visualBuilderPostMessage, container); + await triggerAndWaitForClickAction( + visualBuilderPostMessage, + container + ); }); afterAll(() => { diff --git a/src/visualBuilder/__test__/click/fields/markdown.test.tsx b/src/visualBuilder/__test__/click/fields/markdown.test.tsx index 1c9c67ef..1ac38aa0 100644 --- a/src/visualBuilder/__test__/click/fields/markdown.test.tsx +++ b/src/visualBuilder/__test__/click/fields/markdown.test.tsx @@ -49,8 +49,16 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => { }; }); -describe("When an element is clicked in visual builder mode", () => { +vi.mock("../../../../utils/index.ts", async () => { + const actual = await vi.importActual("../../../../utils"); + return { + __esModule: true, + ...actual, + isOpenInBuilder: vi.fn().mockReturnValue(true), + }; +}); +describe("When an element is clicked in visual builder mode", () => { beforeAll(() => { FieldSchemaMap.setFieldSchema( "all_fields", @@ -93,7 +101,10 @@ describe("When an element is clicked in visual builder mode", () => { document.body.appendChild(markdownField); visualBuilder = new VisualBuilder(); - await triggerAndWaitForClickAction(visualBuilderPostMessage, markdownField); + await triggerAndWaitForClickAction( + visualBuilderPostMessage, + markdownField + ); }); afterAll(() => { @@ -174,7 +185,10 @@ describe("When an element is clicked in visual builder mode", () => { document.body.appendChild(container); visualBuilder = new VisualBuilder(); - await triggerAndWaitForClickAction(visualBuilderPostMessage, container); + await triggerAndWaitForClickAction( + visualBuilderPostMessage, + container + ); }); afterAll(() => { diff --git a/src/visualBuilder/__test__/click/fields/multi-line.test.tsx b/src/visualBuilder/__test__/click/fields/multi-line.test.tsx index d4bb1c79..5892dcd7 100644 --- a/src/visualBuilder/__test__/click/fields/multi-line.test.tsx +++ b/src/visualBuilder/__test__/click/fields/multi-line.test.tsx @@ -49,8 +49,16 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => { }; }); -describe("When an element is clicked in visual builder mode", () => { +vi.mock("../../../../utils/index.ts", async () => { + const actual = await vi.importActual("../../../../utils"); + return { + __esModule: true, + ...actual, + isOpenInBuilder: vi.fn().mockReturnValue(true), + }; +}); +describe("When an element is clicked in visual builder mode", () => { beforeAll(async () => { FieldSchemaMap.setFieldSchema( "all_fields", @@ -115,7 +123,10 @@ describe("When an element is clicked in visual builder mode", () => { document.body.appendChild(multiLineField); visualBuilder = new VisualBuilder(); - await triggerAndWaitForClickAction(visualBuilderPostMessage, multiLineField) + await triggerAndWaitForClickAction( + visualBuilderPostMessage, + multiLineField + ); }); afterAll(() => { @@ -222,12 +233,15 @@ describe("When an element is clicked in visual builder mode", () => { audienceMode: false, }; visualBuilder = new VisualBuilder(); - await triggerAndWaitForClickAction(visualBuilderPostMessage, container); + await triggerAndWaitForClickAction( + visualBuilderPostMessage, + container + ); }); afterAll(() => { visualBuilder.destroy(); - }) + }); test("should have outline", () => { expect(container.classList.contains("cslp-edit-mode")); }); @@ -252,7 +266,6 @@ describe("When an element is clicked in visual builder mode", () => { VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY ); }); - }); test("container should not contain a contenteditable attribute but the children can", async () => { diff --git a/src/visualBuilder/__test__/click/fields/number.test.tsx b/src/visualBuilder/__test__/click/fields/number.test.tsx index 2ac743d2..66669c22 100644 --- a/src/visualBuilder/__test__/click/fields/number.test.tsx +++ b/src/visualBuilder/__test__/click/fields/number.test.tsx @@ -53,6 +53,15 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => { }; }); +vi.mock("../../../../utils/index.ts", async () => { + const actual = await vi.importActual("../../../../utils"); + return { + __esModule: true, + ...actual, + isOpenInBuilder: vi.fn().mockReturnValue(true), + }; +}); + describe("When an element is clicked in visual builder mode", () => { beforeAll(async () => { FieldSchemaMap.setFieldSchema( @@ -118,7 +127,10 @@ describe("When an element is clicked in visual builder mode", () => { document.body.appendChild(numberField); visualBuilder = new VisualBuilder(); - await triggerAndWaitForClickAction(visualBuilderPostMessage, numberField) + await triggerAndWaitForClickAction( + visualBuilderPostMessage, + numberField + ); }); afterAll(() => { @@ -214,7 +226,10 @@ describe("When an element is clicked in visual builder mode", () => { document.body.appendChild(container); visualBuilder = new VisualBuilder(); - await triggerAndWaitForClickAction(visualBuilderPostMessage, container) + await triggerAndWaitForClickAction( + visualBuilderPostMessage, + container + ); }); afterAll(() => { diff --git a/src/visualBuilder/__test__/click/fields/reference.test.tsx b/src/visualBuilder/__test__/click/fields/reference.test.tsx index d15b8798..980ae7f5 100644 --- a/src/visualBuilder/__test__/click/fields/reference.test.tsx +++ b/src/visualBuilder/__test__/click/fields/reference.test.tsx @@ -9,7 +9,11 @@ import visualBuilderPostMessage from "../../../utils/visualBuilderPostMessage"; import { vi } from "vitest"; import { VisualBuilderPostMessageEvents } from "../../../utils/types/postMessage.types"; import { VisualBuilder } from "../../../index"; -import { mockGetBoundingClientRect, sleep, triggerAndWaitForClickAction } from "../../../../__test__/utils"; +import { + mockGetBoundingClientRect, + sleep, + triggerAndWaitForClickAction, +} from "../../../../__test__/utils"; vi.mock("../../../components/FieldToolbar", () => { return { @@ -49,8 +53,16 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => { }; }); -describe("When an element is clicked in visual builder mode", () => { +vi.mock("../../../../utils/index.ts", async () => { + const actual = await vi.importActual("../../../../utils"); + return { + __esModule: true, + ...actual, + isOpenInBuilder: vi.fn().mockReturnValue(true), + }; +}); +describe("When an element is clicked in visual builder mode", () => { beforeAll(async () => { FieldSchemaMap.setFieldSchema( "all_fields", @@ -93,7 +105,10 @@ describe("When an element is clicked in visual builder mode", () => { document.body.appendChild(referenceField); visualBuilder = new VisualBuilder(); - await triggerAndWaitForClickAction(visualBuilderPostMessage, referenceField) + await triggerAndWaitForClickAction( + visualBuilderPostMessage, + referenceField + ); }); afterAll(() => { @@ -105,10 +120,13 @@ describe("When an element is clicked in visual builder mode", () => { "[data-testid='visual-builder__overlay--outline']" ); await waitFor(() => { - expect(hoverOutline).toHaveAttribute("style") + expect(hoverOutline).toHaveAttribute("style"); }); - - expect(hoverOutline).toHaveAttribute("style", "top: 10px; height: 5px; width: 10px; left: 10px; outline-color: rgb(113, 92, 221);"); + + expect(hoverOutline).toHaveAttribute( + "style", + "top: 10px; height: 5px; width: 10px; left: 10px; outline-color: rgb(113, 92, 221);" + ); }); test("should have an overlay", () => { @@ -180,7 +198,10 @@ describe("When an element is clicked in visual builder mode", () => { document.body.appendChild(container); visualBuilder = new VisualBuilder(); - await triggerAndWaitForClickAction(visualBuilderPostMessage, container); + await triggerAndWaitForClickAction( + visualBuilderPostMessage, + container + ); }); afterAll(() => { @@ -192,9 +213,12 @@ describe("When an element is clicked in visual builder mode", () => { "[data-testid='visual-builder__overlay--outline']" ); await waitFor(() => { - expect(hoverOutline).toHaveAttribute("style") + expect(hoverOutline).toHaveAttribute("style"); }); - expect(hoverOutline).toHaveAttribute("style", "top: 10px; height: 5px; width: 10px; left: 10px; outline-color: rgb(113, 92, 221);"); + expect(hoverOutline).toHaveAttribute( + "style", + "top: 10px; height: 5px; width: 10px; left: 10px; outline-color: rgb(113, 92, 221);" + ); }); test("should have an overlay", () => { diff --git a/src/visualBuilder/__test__/click/fields/select.test.tsx b/src/visualBuilder/__test__/click/fields/select.test.tsx index 06613e3e..658ebff4 100644 --- a/src/visualBuilder/__test__/click/fields/select.test.tsx +++ b/src/visualBuilder/__test__/click/fields/select.test.tsx @@ -54,8 +54,16 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => { }; }); -describe("When an element is clicked in visual builder mode", () => { +vi.mock("../../../../utils/index.ts", async () => { + const actual = await vi.importActual("../../../../utils"); + return { + __esModule: true, + ...actual, + isOpenInBuilder: vi.fn().mockReturnValue(true), + }; +}); +describe("When an element is clicked in visual builder mode", () => { beforeAll(() => { FieldSchemaMap.setFieldSchema( "all_fields", @@ -97,7 +105,10 @@ describe("When an element is clicked in visual builder mode", () => { document.body.appendChild(selectField); visualBuilder = new VisualBuilder(); - await triggerAndWaitForClickAction(visualBuilderPostMessage, selectField); + await triggerAndWaitForClickAction( + visualBuilderPostMessage, + selectField + ); }); afterAll(() => { @@ -178,7 +189,10 @@ describe("When an element is clicked in visual builder mode", () => { document.body.appendChild(container); visualBuilder = new VisualBuilder(); - await triggerAndWaitForClickAction(visualBuilderPostMessage, container); + await triggerAndWaitForClickAction( + visualBuilderPostMessage, + container + ); }); afterAll(() => { diff --git a/src/visualBuilder/__test__/click/fields/single-line.test.tsx b/src/visualBuilder/__test__/click/fields/single-line.test.tsx index 2e96ef95..a85720ea 100644 --- a/src/visualBuilder/__test__/click/fields/single-line.test.tsx +++ b/src/visualBuilder/__test__/click/fields/single-line.test.tsx @@ -55,8 +55,16 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => { }; }); -describe("When an element is clicked in visual builder mode", () => { +vi.mock("../../../../utils/index.ts", async () => { + const actual = await vi.importActual("../../../../utils"); + return { + __esModule: true, + ...actual, + isOpenInBuilder: vi.fn().mockReturnValue(true), + }; +}); +describe("When an element is clicked in visual builder mode", () => { beforeAll(() => { FieldSchemaMap.setFieldSchema( "all_fields", @@ -134,12 +142,15 @@ describe("When an element is clicked in visual builder mode", () => { audienceMode: false, }; visualBuilder = new VisualBuilder(); - await triggerAndWaitForClickAction(visualBuilderPostMessage, singleLineField); + await triggerAndWaitForClickAction( + visualBuilderPostMessage, + singleLineField + ); }); afterAll(() => { visualBuilder.destroy(); - }) + }); test("should have outline", () => { expect(singleLineField.classList.contains("cslp-edit-mode")); @@ -210,7 +221,7 @@ describe("When an element is clicked in visual builder mode", () => { return Promise.resolve({}); } ); - + container = document.createElement("div"); container.setAttribute( "data-cslp", @@ -243,7 +254,10 @@ describe("When an element is clicked in visual builder mode", () => { audienceMode: false, }; visualBuilder = new VisualBuilder(); - await triggerAndWaitForClickAction(visualBuilderPostMessage, container); + await triggerAndWaitForClickAction( + visualBuilderPostMessage, + container + ); }); afterAll(() => { diff --git a/src/visualBuilder/__test__/hover/fields/boolean.test.ts b/src/visualBuilder/__test__/hover/fields/boolean.test.ts index 585919f9..5fb7c0a8 100644 --- a/src/visualBuilder/__test__/hover/fields/boolean.test.ts +++ b/src/visualBuilder/__test__/hover/fields/boolean.test.ts @@ -1,12 +1,16 @@ import { screen } from "@testing-library/preact"; import { getFieldSchemaMap } from "../../../../__test__/data/fieldSchemaMap"; -import { waitForBuilderSDKToBeInitialized, waitForHoverOutline } from "../../../../__test__/utils"; +import { + waitForBuilderSDKToBeInitialized, + waitForHoverOutline, +} from "../../../../__test__/utils"; import Config from "../../../../configManager/configManager"; import { VisualBuilder } from "../../../index"; import { FieldSchemaMap } from "../../../utils/fieldSchemaMap"; import { mockDomRect } from "./mockDomRect"; import visualBuilderPostMessage from "../../../utils/visualBuilderPostMessage"; import { act } from "@testing-library/preact"; +import { isOpenInBuilder } from "../../../../utils"; vi.mock("../../../utils/visualBuilderPostMessage", async () => { const { getAllContentTypes } = await vi.importActual< @@ -28,6 +32,15 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => { }; }); +vi.mock("../../../../utils/index.ts", async () => { + const actual = await vi.importActual("../../../../utils"); + return { + __esModule: true, + ...actual, + isOpenInBuilder: vi.fn().mockReturnValue(true), + }; +}); + global.ResizeObserver = vi.fn().mockImplementation(() => ({ observe: vi.fn(), unobserve: vi.fn(), @@ -91,7 +104,10 @@ describe("When an element is hovered in visual builder mode", () => { booleanField.dispatchEvent(mousemoveEvent); }); await waitForHoverOutline(); - expect(booleanField).toHaveAttribute("data-cslp", "all_fields.bltapikey.en-us.boolean"); + expect(booleanField).toHaveAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.boolean" + ); expect(booleanField).not.toHaveAttribute("contenteditable"); const hoverOutline = document.querySelector( "[data-testid='visual-builder__hover-outline']" diff --git a/src/visualBuilder/__test__/hover/fields/date.test.ts b/src/visualBuilder/__test__/hover/fields/date.test.ts index 054c017d..7a885c71 100644 --- a/src/visualBuilder/__test__/hover/fields/date.test.ts +++ b/src/visualBuilder/__test__/hover/fields/date.test.ts @@ -26,6 +26,17 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => { }; }); +vi.mock("../../../../utils/index.ts", () => { + return { + __esModule: true, + isOpenInBuilder: vi.fn().mockReturnValue(true), + isOpeningInTimeline: vi.fn().mockReturnValue(false), + hasWindow: vi.fn().mockReturnValue(true), + addLivePreviewQueryTags: vi.fn(), + addParamsToUrl: vi.fn(), + }; +}); + global.ResizeObserver = vi.fn().mockImplementation(() => ({ observe: vi.fn(), unobserve: vi.fn(), @@ -89,7 +100,10 @@ describe("When an element is hovered in visual builder mode", () => { dataField.dispatchEvent(mousemoveEvent); }); await waitForHoverOutline(); - expect(dataField).toHaveAttribute("data-cslp", "all_fields.bltapikey.en-us.date"); + expect(dataField).toHaveAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.date" + ); expect(dataField).not.toHaveAttribute("contenteditable"); const hoverOutline = document.querySelector( "[data-testid='visual-builder__hover-outline']" diff --git a/src/visualBuilder/__test__/hover/fields/file.test.ts b/src/visualBuilder/__test__/hover/fields/file.test.ts index 1e1d3912..50483592 100644 --- a/src/visualBuilder/__test__/hover/fields/file.test.ts +++ b/src/visualBuilder/__test__/hover/fields/file.test.ts @@ -26,18 +26,32 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => { }; }); +vi.mock("../../../../utils/index.ts", async () => { + const actual = await vi.importActual("../../../../utils"); + return { + __esModule: true, + ...actual, + isOpenInBuilder: vi.fn().mockReturnValue(true), + }; +}); + const convertToPx = (value: number) => { - return `${value}px` -} + return `${value}px`; +}; const matchDimensions = (element: HTMLElement, hoverOutline: HTMLElement) => { - const elementDimensions = element.getBoundingClientRect() + const elementDimensions = element.getBoundingClientRect(); // @ts-expect-error - TS doesn't know that style is a CSSStyleDeclaration - const hoverOutlineDimensions = hoverOutline?.style?._values as CSSStyleDeclaration; + const hoverOutlineDimensions = hoverOutline?.style + ?._values as CSSStyleDeclaration; expect(convertToPx(elementDimensions.x)).toBe(hoverOutlineDimensions.left); expect(convertToPx(elementDimensions.y)).toBe(hoverOutlineDimensions.top); - expect(convertToPx(elementDimensions.width)).toBe(hoverOutlineDimensions.width); - expect(convertToPx(elementDimensions.height)).toBe(hoverOutlineDimensions.height); -} + expect(convertToPx(elementDimensions.width)).toBe( + hoverOutlineDimensions.width + ); + expect(convertToPx(elementDimensions.height)).toBe( + hoverOutlineDimensions.height + ); +}; describe("When an element is hovered in visual builder mode", () => { let mousemoveEvent: Event; @@ -117,12 +131,12 @@ describe("When an element is hovered in visual builder mode", () => { const hoverOutline = document.querySelector( "[data-testid='visual-builder__hover-outline']" ); - expect(hoverOutline).toHaveAttribute('style'); + expect(hoverOutline).toHaveAttribute("style"); const customCursor = document.querySelector( `[data-testid="visual-builder__cursor"]` ); - expect(customCursor).toHaveAttribute('data-icon', 'file'); + expect(customCursor).toHaveAttribute("data-icon", "file"); expect(customCursor?.classList.contains("visible")).toBeTruthy(); }); @@ -135,13 +149,13 @@ describe("When an element is hovered in visual builder mode", () => { const hoverOutline = document.querySelector( "[data-testid='visual-builder__hover-outline']" ); - expect(hoverOutline).toHaveAttribute('style'); + expect(hoverOutline).toHaveAttribute("style"); const customCursor = document.querySelector( `[data-testid="visual-builder__cursor"]` ); - expect(customCursor).toHaveAttribute('data-icon', 'file'); + expect(customCursor).toHaveAttribute("data-icon", "file"); expect(customCursor?.classList.contains("visible")).toBeTruthy(); }); }); @@ -224,12 +238,12 @@ describe("When an element is hovered in visual builder mode", () => { const hoverOutline = document.querySelector( "[data-testid='visual-builder__hover-outline']" ); - expect(hoverOutline).toHaveAttribute('style'); + expect(hoverOutline).toHaveAttribute("style"); const customCursor = document.querySelector( `[data-testid="visual-builder__cursor"]` ); - expect(customCursor?.getAttribute('data-icon')).toBe('file'); + expect(customCursor?.getAttribute("data-icon")).toBe("file"); expect(customCursor?.classList.contains("visible")).toBeTruthy(); }); @@ -241,16 +255,15 @@ describe("When an element is hovered in visual builder mode", () => { const hoverOutline = document.querySelector( "[data-testid='visual-builder__hover-outline']" ) as HTMLElement; - expect(hoverOutline).toHaveAttribute('style'); + expect(hoverOutline).toHaveAttribute("style"); matchDimensions(firstFileField, hoverOutline); const customCursor = document.querySelector( `[data-testid="visual-builder__cursor"]` ); - expect(customCursor?.getAttribute('data-icon')).toBe('file'); + expect(customCursor?.getAttribute("data-icon")).toBe("file"); expect(customCursor?.classList.contains("visible")).toBeTruthy(); - }); test("should have outline and custom cursor on the url", async () => { @@ -261,7 +274,7 @@ describe("When an element is hovered in visual builder mode", () => { const hoverOutline = document.querySelector( "[data-testid='visual-builder__hover-outline']" ) as HTMLElement; - expect(hoverOutline).toHaveAttribute('style'); + expect(hoverOutline).toHaveAttribute("style"); matchDimensions(firstImageField, hoverOutline); const customCursor = document.querySelector( `[data-testid="visual-builder__cursor"]` diff --git a/src/visualBuilder/__test__/hover/fields/group.test.ts b/src/visualBuilder/__test__/hover/fields/group.test.ts index 9626054a..91fedae0 100644 --- a/src/visualBuilder/__test__/hover/fields/group.test.ts +++ b/src/visualBuilder/__test__/hover/fields/group.test.ts @@ -32,6 +32,15 @@ global.ResizeObserver = vi.fn().mockImplementation(() => ({ disconnect: vi.fn(), })); +vi.mock("../../../../utils/index.ts", async () => { + const actual = await vi.importActual("../../../../utils"); + return { + __esModule: true, + ...actual, + isOpenInBuilder: vi.fn().mockReturnValue(true), + }; +}); + describe("When an element is hovered in visual builder mode", () => { let mousemoveEvent: Event; @@ -104,13 +113,13 @@ describe("When an element is hovered in visual builder mode", () => { const hoverOutline = document.querySelector( "[data-testid='visual-builder__hover-outline']" ); - expect(hoverOutline).toHaveAttribute('style'); + expect(hoverOutline).toHaveAttribute("style"); const customCursor = document.querySelector( `[data-testid="visual-builder__cursor"]` ); - expect(customCursor).toHaveAttribute('data-icon', 'group'); + expect(customCursor).toHaveAttribute("data-icon", "group"); expect(customCursor?.classList.contains("visible")).toBeTruthy(); }); @@ -134,13 +143,13 @@ describe("When an element is hovered in visual builder mode", () => { const hoverOutline = document.querySelector( "[data-testid='visual-builder__hover-outline']" ); - expect(hoverOutline).toHaveAttribute('style'); + expect(hoverOutline).toHaveAttribute("style"); const customCursor = document.querySelector( `[data-testid="visual-builder__cursor"]` ); - expect(customCursor).toHaveAttribute('data-icon', 'singleline'); + expect(customCursor).toHaveAttribute("data-icon", "singleline"); expect(customCursor?.classList.contains("visible")).toBeTruthy(); }); }); @@ -215,13 +224,13 @@ describe("When an element is hovered in visual builder mode", () => { const hoverOutline = document.querySelector( "[data-testid='visual-builder__hover-outline']" ); - expect(hoverOutline).toHaveAttribute('style'); + expect(hoverOutline).toHaveAttribute("style"); const customCursor = document.querySelector( `[data-testid="visual-builder__cursor"]` ); - expect(customCursor).toHaveAttribute('data-icon', 'group'); + expect(customCursor).toHaveAttribute("data-icon", "group"); expect(customCursor?.classList.contains("visible")).toBeTruthy(); await act(async () => { @@ -232,7 +241,7 @@ describe("When an element is hovered in visual builder mode", () => { const newCustomCursor = document.querySelector( `[data-testid="visual-builder__cursor"]` ); - expect(newCustomCursor).toHaveAttribute('data-icon', 'multiline'); + expect(newCustomCursor).toHaveAttribute("data-icon", "multiline"); expect(newCustomCursor?.classList.contains("visible")).toBeTruthy(); }); }); diff --git a/src/visualBuilder/__test__/hover/fields/html-rte.test.ts b/src/visualBuilder/__test__/hover/fields/html-rte.test.ts index f71092e5..7850d9d5 100644 --- a/src/visualBuilder/__test__/hover/fields/html-rte.test.ts +++ b/src/visualBuilder/__test__/hover/fields/html-rte.test.ts @@ -26,6 +26,15 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => { }; }); +vi.mock("../../../../utils/index.ts", async () => { + const actual = await vi.importActual("../../../../utils"); + return { + __esModule: true, + ...actual, + isOpenInBuilder: vi.fn().mockReturnValue(true), + }; +}); + global.ResizeObserver = vi.fn().mockImplementation(() => ({ observe: vi.fn(), unobserve: vi.fn(), @@ -92,13 +101,13 @@ describe("When an element is hovered in visual builder mode", () => { const hoverOutline = document.querySelector( "[data-testid='visual-builder__hover-outline']" ); - expect(hoverOutline).toHaveAttribute('style'); + expect(hoverOutline).toHaveAttribute("style"); const customCursor = document.querySelector( `[data-testid="visual-builder__cursor"]` ); - expect(customCursor).toHaveAttribute('data-icon', 'html_rte'); + expect(customCursor).toHaveAttribute("data-icon", "html_rte"); expect(customCursor?.classList.contains("visible")).toBeTruthy(); }); }); @@ -159,13 +168,13 @@ describe("When an element is hovered in visual builder mode", () => { const hoverOutline = document.querySelector( "[data-testid='visual-builder__hover-outline']" ); - expect(hoverOutline).toHaveAttribute('style'); + expect(hoverOutline).toHaveAttribute("style"); const customCursor = document.querySelector( `[data-testid="visual-builder__cursor"]` ); - expect(customCursor).toHaveAttribute('data-icon', 'html_rte'); + expect(customCursor).toHaveAttribute("data-icon", "html_rte"); expect(customCursor?.classList.contains("visible")).toBeTruthy(); }); @@ -177,13 +186,13 @@ describe("When an element is hovered in visual builder mode", () => { const hoverOutline = document.querySelector( "[data-testid='visual-builder__hover-outline']" ); - expect(hoverOutline).toHaveAttribute('style'); + expect(hoverOutline).toHaveAttribute("style"); const customCursor = document.querySelector( `[data-testid="visual-builder__cursor"]` ); - expect(customCursor).toHaveAttribute('data-icon', 'html_rte'); + expect(customCursor).toHaveAttribute("data-icon", "html_rte"); expect(customCursor?.classList.contains("visible")).toBeTruthy(); }); }); diff --git a/src/visualBuilder/__test__/hover/fields/json-rte.test.ts b/src/visualBuilder/__test__/hover/fields/json-rte.test.ts index 835cba9a..4b1ad7a4 100644 --- a/src/visualBuilder/__test__/hover/fields/json-rte.test.ts +++ b/src/visualBuilder/__test__/hover/fields/json-rte.test.ts @@ -26,6 +26,15 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => { }; }); +vi.mock("../../../../utils/index.ts", async () => { + const actual = await vi.importActual("../../../../utils"); + return { + __esModule: true, + ...actual, + isOpenInBuilder: vi.fn().mockReturnValue(true), + }; +}); + global.ResizeObserver = vi.fn().mockImplementation(() => ({ observe: vi.fn(), unobserve: vi.fn(), @@ -92,13 +101,13 @@ describe("When an element is hovered in visual builder mode", () => { const hoverOutline = document.querySelector( "[data-testid='visual-builder__hover-outline']" ); - expect(hoverOutline).toHaveAttribute('style'); + expect(hoverOutline).toHaveAttribute("style"); const customCursor = document.querySelector( `[data-testid="visual-builder__cursor"]` ); - expect(customCursor).toHaveAttribute('data-icon', 'json_rte'); + expect(customCursor).toHaveAttribute("data-icon", "json_rte"); expect(customCursor?.classList.contains("visible")).toBeTruthy(); }); }); @@ -159,13 +168,13 @@ describe("When an element is hovered in visual builder mode", () => { const hoverOutline = document.querySelector( "[data-testid='visual-builder__hover-outline']" ); - expect(hoverOutline).toHaveAttribute('style'); + expect(hoverOutline).toHaveAttribute("style"); const customCursor = document.querySelector( `[data-testid="visual-builder__cursor"]` ); - expect(customCursor).toHaveAttribute('data-icon', 'json_rte'); + expect(customCursor).toHaveAttribute("data-icon", "json_rte"); expect(customCursor?.classList.contains("visible")).toBeTruthy(); }); @@ -177,13 +186,13 @@ describe("When an element is hovered in visual builder mode", () => { const hoverOutline = document.querySelector( "[data-testid='visual-builder__hover-outline']" ); - expect(hoverOutline).toHaveAttribute('style'); + expect(hoverOutline).toHaveAttribute("style"); const customCursor = document.querySelector( `[data-testid="visual-builder__cursor"]` ); - expect(customCursor).toHaveAttribute('data-icon', 'json_rte'); + expect(customCursor).toHaveAttribute("data-icon", "json_rte"); expect(customCursor?.classList.contains("visible")).toBeTruthy(); }); }); diff --git a/src/visualBuilder/__test__/hover/fields/link.test.ts b/src/visualBuilder/__test__/hover/fields/link.test.ts index 88044fb5..bd9ca996 100644 --- a/src/visualBuilder/__test__/hover/fields/link.test.ts +++ b/src/visualBuilder/__test__/hover/fields/link.test.ts @@ -26,6 +26,15 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => { }; }); +vi.mock("../../../../utils/index.ts", async () => { + const actual = await vi.importActual("../../../../utils"); + return { + __esModule: true, + ...actual, + isOpenInBuilder: vi.fn().mockReturnValue(true), + }; +}); + global.ResizeObserver = vi.fn().mockImplementation(() => ({ observe: vi.fn(), unobserve: vi.fn(), @@ -98,7 +107,7 @@ describe("When an element is hovered in visual builder mode", () => { `[data-testid="visual-builder__cursor"]` ); - expect(customCursor).toHaveAttribute('data-icon', 'link'); + expect(customCursor).toHaveAttribute("data-icon", "link"); expect(customCursor?.classList.contains("visible")).toBeTruthy(); }); }); @@ -162,7 +171,7 @@ describe("When an element is hovered in visual builder mode", () => { `[data-testid="visual-builder__cursor"]` ); - expect(customCursor).toHaveAttribute('data-icon', 'link'); + expect(customCursor).toHaveAttribute("data-icon", "link"); expect(customCursor?.classList.contains("visible")).toBeTruthy(); }); @@ -180,7 +189,7 @@ describe("When an element is hovered in visual builder mode", () => { `[data-testid="visual-builder__cursor"]` ); - expect(customCursor).toHaveAttribute('data-icon', 'link'); + expect(customCursor).toHaveAttribute("data-icon", "link"); expect(customCursor?.classList.contains("visible")).toBeTruthy(); }); }); diff --git a/src/visualBuilder/__test__/hover/fields/markdown.test.ts b/src/visualBuilder/__test__/hover/fields/markdown.test.ts index 2595450c..04a3bba9 100644 --- a/src/visualBuilder/__test__/hover/fields/markdown.test.ts +++ b/src/visualBuilder/__test__/hover/fields/markdown.test.ts @@ -32,6 +32,15 @@ global.ResizeObserver = vi.fn().mockImplementation(() => ({ disconnect: vi.fn(), })); +vi.mock("../../../../utils/index.ts", async () => { + const actual = await vi.importActual("../../../../utils"); + return { + __esModule: true, + ...actual, + isOpenInBuilder: vi.fn().mockReturnValue(true), + }; +}); + describe("When an element is hovered in visual builder mode", () => { let mousemoveEvent: Event; @@ -93,13 +102,13 @@ describe("When an element is hovered in visual builder mode", () => { const hoverOutline = document.querySelector( "[data-testid='visual-builder__hover-outline']" ); - expect(hoverOutline).toHaveAttribute('style'); + expect(hoverOutline).toHaveAttribute("style"); const customCursor = document.querySelector( `[data-testid="visual-builder__cursor"]` ); - expect(customCursor).toHaveAttribute('data-icon', 'markdown_rte'); + expect(customCursor).toHaveAttribute("data-icon", "markdown_rte"); expect(customCursor?.classList.contains("visible")).toBeTruthy(); }); }); @@ -160,13 +169,13 @@ describe("When an element is hovered in visual builder mode", () => { const hoverOutline = document.querySelector( "[data-testid='visual-builder__hover-outline']" ); - expect(hoverOutline).toHaveAttribute('style'); + expect(hoverOutline).toHaveAttribute("style"); const customCursor = document.querySelector( `[data-testid="visual-builder__cursor"]` ); - expect(customCursor).toHaveAttribute('data-icon', 'markdown_rte'); + expect(customCursor).toHaveAttribute("data-icon", "markdown_rte"); expect(customCursor?.classList.contains("visible")).toBeTruthy(); }); @@ -178,13 +187,13 @@ describe("When an element is hovered in visual builder mode", () => { const hoverOutline = document.querySelector( "[data-testid='visual-builder__hover-outline']" ); - expect(hoverOutline).toHaveAttribute('style'); + expect(hoverOutline).toHaveAttribute("style"); const customCursor = document.querySelector( `[data-testid="visual-builder__cursor"]` ); - expect(customCursor).toHaveAttribute('data-icon', 'markdown_rte'); + expect(customCursor).toHaveAttribute("data-icon", "markdown_rte"); expect(customCursor?.classList.contains("visible")).toBeTruthy(); }); }); diff --git a/src/visualBuilder/__test__/hover/fields/multi-line.test.ts b/src/visualBuilder/__test__/hover/fields/multi-line.test.ts index d47ead2e..e86b9d26 100644 --- a/src/visualBuilder/__test__/hover/fields/multi-line.test.ts +++ b/src/visualBuilder/__test__/hover/fields/multi-line.test.ts @@ -32,6 +32,15 @@ global.ResizeObserver = vi.fn().mockImplementation(() => ({ disconnect: vi.fn(), })); +vi.mock("../../../../utils/index.ts", async () => { + const actual = await vi.importActual("../../../../utils"); + return { + __esModule: true, + ...actual, + isOpenInBuilder: vi.fn().mockReturnValue(true), + }; +}); + describe("When an element is hovered in visual builder mode", () => { let mousemoveEvent: Event; @@ -92,13 +101,13 @@ describe("When an element is hovered in visual builder mode", () => { const hoverOutline = screen.getByTestId( "visual-builder__hover-outline" ); - expect(hoverOutline).toHaveAttribute('style'); + expect(hoverOutline).toHaveAttribute("style"); const customCursor = document.querySelector( `[data-testid="visual-builder__cursor"]` ); - expect(customCursor).toHaveAttribute('data-icon', 'multiline'); + expect(customCursor).toHaveAttribute("data-icon", "multiline"); expect(customCursor?.classList.contains("visible")).toBeTruthy(); }); }); @@ -158,13 +167,13 @@ describe("When an element is hovered in visual builder mode", () => { const hoverOutline = document.querySelector( "[data-testid='visual-builder__hover-outline']" ); - expect(hoverOutline).toHaveAttribute('style'); + expect(hoverOutline).toHaveAttribute("style"); const customCursor = document.querySelector( `[data-testid="visual-builder__cursor"]` ); - expect(customCursor).toHaveAttribute('data-icon', 'multiline'); + expect(customCursor).toHaveAttribute("data-icon", "multiline"); expect(customCursor?.classList.contains("visible")).toBeTruthy(); }); @@ -176,13 +185,13 @@ describe("When an element is hovered in visual builder mode", () => { const hoverOutline = document.querySelector( "[data-testid='visual-builder__hover-outline']" ); - expect(hoverOutline).toHaveAttribute('style'); + expect(hoverOutline).toHaveAttribute("style"); const customCursor = document.querySelector( `[data-testid="visual-builder__cursor"]` ); - expect(customCursor).toHaveAttribute('data-icon', 'multiline'); + expect(customCursor).toHaveAttribute("data-icon", "multiline"); expect(customCursor?.classList.contains("visible")).toBeTruthy(); }); }); diff --git a/src/visualBuilder/__test__/hover/fields/number.test.ts b/src/visualBuilder/__test__/hover/fields/number.test.ts index 4d4f6854..0732bdda 100644 --- a/src/visualBuilder/__test__/hover/fields/number.test.ts +++ b/src/visualBuilder/__test__/hover/fields/number.test.ts @@ -26,6 +26,15 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => { }; }); +vi.mock("../../../../utils/index.ts", async () => { + const actual = await vi.importActual("../../../../utils"); + return { + __esModule: true, + ...actual, + isOpenInBuilder: vi.fn().mockReturnValue(true), + }; +}); + global.ResizeObserver = vi.fn().mockImplementation(() => ({ observe: vi.fn(), unobserve: vi.fn(), @@ -92,13 +101,13 @@ describe("When an element is hovered in visual builder mode", () => { const hoverOutline = document.querySelector( "[data-testid='visual-builder__hover-outline']" ); - expect(hoverOutline).toHaveAttribute('style'); + expect(hoverOutline).toHaveAttribute("style"); const customCursor = document.querySelector( `[data-testid="visual-builder__cursor"]` ); - expect(customCursor).toHaveAttribute('data-icon', 'number'); + expect(customCursor).toHaveAttribute("data-icon", "number"); expect(customCursor?.classList.contains("visible")).toBeTruthy(); }); }); @@ -156,13 +165,13 @@ describe("When an element is hovered in visual builder mode", () => { const hoverOutline = document.querySelector( "[data-testid='visual-builder__hover-outline']" ); - expect(hoverOutline).toHaveAttribute('style'); + expect(hoverOutline).toHaveAttribute("style"); const customCursor = document.querySelector( `[data-testid="visual-builder__cursor"]` ); - expect(customCursor).toHaveAttribute('data-icon', 'number'); + expect(customCursor).toHaveAttribute("data-icon", "number"); expect(customCursor?.classList.contains("visible")).toBeTruthy(); }); @@ -174,13 +183,13 @@ describe("When an element is hovered in visual builder mode", () => { const hoverOutline = document.querySelector( "[data-testid='visual-builder__hover-outline']" ); - expect(hoverOutline).toHaveAttribute('style'); + expect(hoverOutline).toHaveAttribute("style"); const customCursor = document.querySelector( `[data-testid="visual-builder__cursor"]` ); - expect(customCursor).toHaveAttribute('data-icon', 'number'); + expect(customCursor).toHaveAttribute("data-icon", "number"); expect(customCursor?.classList.contains("visible")).toBeTruthy(); }); }); diff --git a/src/visualBuilder/__test__/hover/fields/reference.test.ts b/src/visualBuilder/__test__/hover/fields/reference.test.ts index c37a5bf4..f7076cce 100644 --- a/src/visualBuilder/__test__/hover/fields/reference.test.ts +++ b/src/visualBuilder/__test__/hover/fields/reference.test.ts @@ -26,6 +26,15 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => { }; }); +vi.mock("../../../../utils/index.ts", async () => { + const actual = await vi.importActual("../../../../utils"); + return { + __esModule: true, + ...actual, + isOpenInBuilder: vi.fn().mockReturnValue(true), + }; +}); + global.ResizeObserver = vi.fn().mockImplementation(() => ({ observe: vi.fn(), unobserve: vi.fn(), @@ -89,7 +98,7 @@ describe("When an element is hovered in visual builder mode", () => { referenceField.dispatchEvent(mousemoveEvent); }); await waitForHoverOutline(); - + const hoverOutline = document.querySelector( "[data-testid='visual-builder__hover-outline']" ); @@ -99,7 +108,7 @@ describe("When an element is hovered in visual builder mode", () => { `[data-testid="visual-builder__cursor"]` ); - expect(customCursor).toHaveAttribute('data-icon', 'reference'); + expect(customCursor).toHaveAttribute("data-icon", "reference"); expect(customCursor?.classList.contains("visible")).toBeTruthy(); }); }); @@ -165,7 +174,7 @@ describe("When an element is hovered in visual builder mode", () => { `[data-testid="visual-builder__cursor"]` ); - expect(customCursor).toHaveAttribute('data-icon', 'reference'); + expect(customCursor).toHaveAttribute("data-icon", "reference"); expect(customCursor?.classList.contains("visible")).toBeTruthy(); }); @@ -183,7 +192,7 @@ describe("When an element is hovered in visual builder mode", () => { `[data-testid="visual-builder__cursor"]` ); - expect(customCursor).toHaveAttribute('data-icon', 'reference'); + expect(customCursor).toHaveAttribute("data-icon", "reference"); expect(customCursor?.classList.contains("visible")).toBeTruthy(); }); }); diff --git a/src/visualBuilder/__test__/hover/fields/select.test.ts b/src/visualBuilder/__test__/hover/fields/select.test.ts index adf80857..34c54d37 100644 --- a/src/visualBuilder/__test__/hover/fields/select.test.ts +++ b/src/visualBuilder/__test__/hover/fields/select.test.ts @@ -31,6 +31,15 @@ global.ResizeObserver = vi.fn().mockImplementation(() => ({ disconnect: vi.fn(), })); +vi.mock("../../../../utils/index.ts", async () => { + const actual = await vi.importActual("../../../../utils"); + return { + __esModule: true, + ...actual, + isOpenInBuilder: vi.fn().mockReturnValue(true), + }; +}); + describe("When an element is hovered in visual builder mode", () => { let mousemoveEvent: Event; diff --git a/src/visualBuilder/__test__/hover/fields/single-line.test.ts b/src/visualBuilder/__test__/hover/fields/single-line.test.ts index 14ceba69..63694781 100644 --- a/src/visualBuilder/__test__/hover/fields/single-line.test.ts +++ b/src/visualBuilder/__test__/hover/fields/single-line.test.ts @@ -31,6 +31,15 @@ global.ResizeObserver = vi.fn().mockImplementation(() => ({ disconnect: vi.fn(), })); +vi.mock("../../../../utils/index.ts", async () => { + const actual = await vi.importActual("../../../../utils"); + return { + __esModule: true, + ...actual, + isOpenInBuilder: vi.fn().mockReturnValue(true), + }; +}); + describe("When an element is hovered in visual builder mode", () => { let mousemoveEvent: Event; @@ -90,7 +99,9 @@ describe("When an element is hovered in visual builder mode", () => { const hoverOutline = screen.getByTestId( "visual-builder__hover-outline" ); - expect(hoverOutline).toHaveStyle("top: 51px; left: 51px; width: 27.7734375px; height: 20.3984375px;"); + expect(hoverOutline).toHaveStyle( + "top: 51px; left: 51px; width: 27.7734375px; height: 20.3984375px;" + ); const customCursor = document.querySelector( `[data-testid="visual-builder__cursor"]` @@ -124,7 +135,7 @@ describe("When an element is hovered in visual builder mode", () => { test("should have outline and custom cursor", async () => { await act(() => { - singleLineField.dispatchEvent(mousemoveEvent); + singleLineField.dispatchEvent(mousemoveEvent); }); await waitForHoverOutline(); expect(singleLineField).not.toHaveAttribute("style"); @@ -189,18 +200,20 @@ describe("When an element is hovered in visual builder mode", () => { }); container.dispatchEvent(mousemoveEvent); await waitForHoverOutline(); - expect(container).not.toHaveAttribute('style'); + expect(container).not.toHaveAttribute("style"); const hoverOutline = document.querySelector( "[data-testid='visual-builder__hover-outline']" ); - expect(hoverOutline).toHaveStyle("top: 34px; left: 34px; width: 828px; height: 54.3984375px;"); + expect(hoverOutline).toHaveStyle( + "top: 34px; left: 34px; width: 828px; height: 54.3984375px;" + ); const customCursor = document.querySelector( `[data-testid="visual-builder__cursor"]` ); - expect(customCursor).toHaveAttribute('data-icon', 'singleline'); + expect(customCursor).toHaveAttribute("data-icon", "singleline"); expect(customCursor?.classList.contains("visible")).toBeTruthy(); }); @@ -209,17 +222,19 @@ describe("When an element is hovered in visual builder mode", () => { firstSingleLineField.dispatchEvent(mousemoveEvent); }); await waitForHoverOutline(); - expect(firstSingleLineField).not.toHaveAttribute('style'); + expect(firstSingleLineField).not.toHaveAttribute("style"); const hoverOutline = document.querySelector( "[data-testid='visual-builder__hover-outline']" ); - expect(hoverOutline).toHaveStyle("top: 51px; left: 51px; width: 27.7734375px; height: 20.3984375px;"); + expect(hoverOutline).toHaveStyle( + "top: 51px; left: 51px; width: 27.7734375px; height: 20.3984375px;" + ); const customCursor = document.querySelector( `[data-testid="visual-builder__cursor"]` ); - expect(customCursor).toHaveAttribute('data-icon', 'singleline'); + expect(customCursor).toHaveAttribute("data-icon", "singleline"); expect(customCursor?.classList.contains("visible")).toBeTruthy(); }); }); diff --git a/src/visualBuilder/__test__/index.test.ts b/src/visualBuilder/__test__/index.test.ts index 4eba7789..571902d0 100644 --- a/src/visualBuilder/__test__/index.test.ts +++ b/src/visualBuilder/__test__/index.test.ts @@ -1,6 +1,13 @@ import crypto from "crypto"; import { getFieldSchemaMap } from "../../__test__/data/fieldSchemaMap"; -import { getElementBytestId, mockGetBoundingClientRect, sleep, triggerAndWaitForClickAction, waitForBuilderSDKToBeInitialized, waitForToolbaxToBeVisible } from "../../__test__/utils"; +import { + getElementBytestId, + mockGetBoundingClientRect, + sleep, + triggerAndWaitForClickAction, + waitForBuilderSDKToBeInitialized, + waitForToolbaxToBeVisible, +} from "../../__test__/utils"; import Config from "../../configManager/configManager"; import { FieldSchemaMap } from "../utils/fieldSchemaMap"; import { waitFor, screen, cleanup } from "@testing-library/preact"; @@ -32,184 +39,251 @@ vi.mock("../utils/visualBuilderPostMessage", async () => { }; }); +vi.mock("../../utils/index.ts", async () => { + const actual = await vi.importActual("../../utils"); + return { + __esModule: true, + ...actual, + isOpenInBuilder: vi.fn().mockReturnValue(true), + }; +}); + Object.defineProperty(globalThis, "crypto", { value: { getRandomValues: (arr: Array) => crypto.randomBytes(arr.length), - randomUUID: () => crypto.randomUUID() + randomUUID: () => crypto.randomUUID(), }, }); // Increase the timeout for the test -describe("Visual builder", () => { - beforeAll(() => { - FieldSchemaMap.setFieldSchema( - "all_fields", - getFieldSchemaMap().all_fields - ); - Config.set("mode", 2); - vi.spyOn( - document.documentElement, - "clientWidth", - "get" - ).mockReturnValue(100); - vi.spyOn( - document.documentElement, - "clientHeight", - "get" - ).mockReturnValue(100); - vi.spyOn(document.body, "scrollHeight", "get").mockReturnValue(100); - }); - - beforeEach(() => { - (visualBuilderPostMessage?.send as Mock).mockClear(); - document.getElementsByTagName("html")[0].innerHTML = ""; - cleanup(); - }); - - afterAll(() => { - FieldSchemaMap.clear(); - }); - - test("should append a visual builder container to the DOM", async () => { - let visualBuilderDOM = document.querySelector( - ".visual-builder__container" - ); - - expect(visualBuilderDOM).toBeNull(); - - const x = new VisualBuilder(); - await waitForBuilderSDKToBeInitialized(visualBuilderPostMessage); - - visualBuilderDOM = document.querySelector( - `[data-testid="visual-builder__container"]` - ); - - expect(document.querySelector('[data-testid="visual-builder__cursor"]')).toBeInTheDocument(); - expect(document.querySelector('[data-testid="visual-builder__focused-toolbar"]')).toBeInTheDocument(); - expect(document.querySelector('[data-testid="visual-builder__hover-outline"]')).toBeInTheDocument(); - expect(document.querySelector('[data-testid="visual-builder__overlay__wrapper"]')).toBeInTheDocument(); - x.destroy(); - }, { timeout: 20 * 1000 }); - - test("should add overlay to DOM when clicked", async () => { - const h1Tag = document.createElement("h1"); - h1Tag.textContent = INLINE_EDITABLE_FIELD_VALUE; - h1Tag.setAttribute( - "data-cslp", - "all_fields.blt58a50b4cebae75c5.en-us.modular_blocks.0.block.single_line" - ); - document.body.appendChild(h1Tag); - mockGetBoundingClientRect(h1Tag); - const x = new VisualBuilder(); - await triggerAndWaitForClickAction(visualBuilderPostMessage, h1Tag); - await waitFor(() => { - const overlayOutline = document.querySelector('[data-testid="visual-builder__overlay--outline"]'); - expect(overlayOutline).toHaveStyle({ - top: "10px", - left: "10px", - width: "10px", - height: "5px", - "outline-color": "rgb(113, 92, 221)" - }); - }) - x.destroy(); - }, { timeout: 20 * 1000 }); +describe( + "Visual builder", + () => { + beforeAll(() => { + FieldSchemaMap.setFieldSchema( + "all_fields", + getFieldSchemaMap().all_fields + ); + Config.set("mode", 2); + vi.spyOn( + document.documentElement, + "clientWidth", + "get" + ).mockReturnValue(100); + vi.spyOn( + document.documentElement, + "clientHeight", + "get" + ).mockReturnValue(100); + vi.spyOn(document.body, "scrollHeight", "get").mockReturnValue(100); + }); - describe("on click, the sdk", () => { - afterEach(() => { + beforeEach(() => { + (visualBuilderPostMessage?.send as Mock).mockClear(); document.getElementsByTagName("html")[0].innerHTML = ""; + cleanup(); }); - test("should do nothing if data-cslp not available", async () => { - const h1 = document.createElement("h1"); + afterAll(() => { + FieldSchemaMap.clear(); + }); - document.body.appendChild(h1); - const x = new VisualBuilder(); - await triggerAndWaitForClickAction(visualBuilderPostMessage, h1, {skipWaitForFieldType: true}); + test( + "should append a visual builder container to the DOM", + async () => { + let visualBuilderDOM = document.querySelector( + ".visual-builder__container" + ); - expect(h1).not.toHaveAttribute("contenteditable"); - expect(h1).not.toHaveAttribute("data-cslp-field-type"); - x.destroy(); - }); + expect(visualBuilderDOM).toBeNull(); - describe("inline elements must be contenteditable", () => { - let visualBuilder: VisualBuilder; - let h1: HTMLHeadingElement - beforeAll(() => { - (visualBuilderPostMessage?.send as Mock).mockImplementation( - (eventName: string, args) => { - if ( - eventName === - VisualBuilderPostMessageEvents.GET_FIELD_DATA - ) { - const values: Record = { - single_line: INLINE_EDITABLE_FIELD_VALUE, - multi_line: INLINE_EDITABLE_FIELD_VALUE, - file: { - uid: "fileUid", - }, - }; - return Promise.resolve({ - fieldData: values[args.entryPath], - }); - } else if ( - eventName === - VisualBuilderPostMessageEvents.GET_FIELD_DISPLAY_NAMES - ) { - const names: Record = { - "all_fields.blt58a50b4cebae75c5.en-us.single_line": - "Single Line", - "all_fields.blt58a50b4cebae75c5.en-us.multi_line": - "Multi Line", - "all_fields.blt58a50b4cebae75c5.en-us.file": - "File", - }; - return Promise.resolve({ - [args.cslp]: names[args.cslp], - }); - } - return Promise.resolve({}); - } + const x = new VisualBuilder(); + await waitForBuilderSDKToBeInitialized( + visualBuilderPostMessage ); - }); - beforeEach(async () => { - document.getElementsByTagName("html")[0].innerHTML = ""; - h1 = document.createElement("h1"); - h1.textContent = INLINE_EDITABLE_FIELD_VALUE; - mockGetBoundingClientRect(h1); - h1.setAttribute( + visualBuilderDOM = document.querySelector( + `[data-testid="visual-builder__container"]` + ); + + expect( + document.querySelector( + '[data-testid="visual-builder__cursor"]' + ) + ).toBeInTheDocument(); + expect( + document.querySelector( + '[data-testid="visual-builder__focused-toolbar"]' + ) + ).toBeInTheDocument(); + expect( + document.querySelector( + '[data-testid="visual-builder__hover-outline"]' + ) + ).toBeInTheDocument(); + expect( + document.querySelector( + '[data-testid="visual-builder__overlay__wrapper"]' + ) + ).toBeInTheDocument(); + x.destroy(); + }, + { timeout: 20 * 1000 } + ); + + test( + "should add overlay to DOM when clicked", + async () => { + const h1Tag = document.createElement("h1"); + h1Tag.textContent = INLINE_EDITABLE_FIELD_VALUE; + h1Tag.setAttribute( "data-cslp", - "all_fields.blt58a50b4cebae75c5.en-us.single_line" + "all_fields.blt58a50b4cebae75c5.en-us.modular_blocks.0.block.single_line" + ); + document.body.appendChild(h1Tag); + mockGetBoundingClientRect(h1Tag); + const x = new VisualBuilder(); + await triggerAndWaitForClickAction( + visualBuilderPostMessage, + h1Tag ); + await waitFor(() => { + const overlayOutline = document.querySelector( + '[data-testid="visual-builder__overlay--outline"]' + ); + expect(overlayOutline).toHaveStyle({ + top: "10px", + left: "10px", + width: "10px", + height: "5px", + "outline-color": "rgb(113, 92, 221)", + }); + }); + x.destroy(); + }, + { timeout: 20 * 1000 } + ); - document.body.appendChild(h1); - visualBuilder = new VisualBuilder(); - }) + describe("on click, the sdk", () => { afterEach(() => { - visualBuilder.destroy(); - }) - test("single line should be contenteditable", async () => { - await triggerAndWaitForClickAction(visualBuilderPostMessage, h1); + document.getElementsByTagName("html")[0].innerHTML = ""; + }); - await waitFor(() => { - expect(h1).toHaveAttribute("contenteditable"); - expect(h1).toHaveAttribute("data-cslp-field-type", "singleline"); - }) - }, { timeout: 40 * 1000 }); + test("should do nothing if data-cslp not available", async () => { + const h1 = document.createElement("h1"); - test("multi line should be contenteditable", async () => { - h1.setAttribute( - "data-cslp", - "all_fields.blt58a50b4cebae75c5.en-us.multi_line" + document.body.appendChild(h1); + const x = new VisualBuilder(); + await triggerAndWaitForClickAction( + visualBuilderPostMessage, + h1, + { skipWaitForFieldType: true } ); - await triggerAndWaitForClickAction(visualBuilderPostMessage, h1); - await waitFor(() => { - expect(h1).toHaveAttribute("contenteditable"); - expect(h1).toHaveAttribute("data-cslp-field-type", "multiline"); - }) - }, { timeout: 40 * 1000 }); + expect(h1).not.toHaveAttribute("contenteditable"); + expect(h1).not.toHaveAttribute("data-cslp-field-type"); + x.destroy(); + }); + + describe("inline elements must be contenteditable", () => { + let visualBuilder: VisualBuilder; + let h1: HTMLHeadingElement; + beforeAll(() => { + (visualBuilderPostMessage?.send as Mock).mockImplementation( + (eventName: string, args) => { + if ( + eventName === + VisualBuilderPostMessageEvents.GET_FIELD_DATA + ) { + const values: Record = { + single_line: INLINE_EDITABLE_FIELD_VALUE, + multi_line: INLINE_EDITABLE_FIELD_VALUE, + file: { + uid: "fileUid", + }, + }; + return Promise.resolve({ + fieldData: values[args.entryPath], + }); + } else if ( + eventName === + VisualBuilderPostMessageEvents.GET_FIELD_DISPLAY_NAMES + ) { + const names: Record = { + "all_fields.blt58a50b4cebae75c5.en-us.single_line": + "Single Line", + "all_fields.blt58a50b4cebae75c5.en-us.multi_line": + "Multi Line", + "all_fields.blt58a50b4cebae75c5.en-us.file": + "File", + }; + return Promise.resolve({ + [args.cslp]: names[args.cslp], + }); + } + return Promise.resolve({}); + } + ); + }); + beforeEach(async () => { + document.getElementsByTagName("html")[0].innerHTML = ""; + h1 = document.createElement("h1"); + h1.textContent = INLINE_EDITABLE_FIELD_VALUE; + mockGetBoundingClientRect(h1); + h1.setAttribute( + "data-cslp", + "all_fields.blt58a50b4cebae75c5.en-us.single_line" + ); + + document.body.appendChild(h1); + visualBuilder = new VisualBuilder(); + }); + afterEach(() => { + visualBuilder.destroy(); + }); + test( + "single line should be contenteditable", + async () => { + await triggerAndWaitForClickAction( + visualBuilderPostMessage, + h1 + ); + + await waitFor(() => { + expect(h1).toHaveAttribute("contenteditable"); + expect(h1).toHaveAttribute( + "data-cslp-field-type", + "singleline" + ); + }); + }, + { timeout: 40 * 1000 } + ); + + test( + "multi line should be contenteditable", + async () => { + h1.setAttribute( + "data-cslp", + "all_fields.blt58a50b4cebae75c5.en-us.multi_line" + ); + await triggerAndWaitForClickAction( + visualBuilderPostMessage, + h1 + ); + + await waitFor(() => { + expect(h1).toHaveAttribute("contenteditable"); + expect(h1).toHaveAttribute( + "data-cslp-field-type", + "multiline" + ); + }); + }, + { timeout: 40 * 1000 } + ); + }); }); - }); -}, { timeout: 20 * 1000 }); + }, + { timeout: 20 * 1000 } +); diff --git a/src/visualBuilder/__test__/withoutIframe.test.ts b/src/visualBuilder/__test__/withoutIframe.test.ts index 251c7d3a..1a61c115 100644 --- a/src/visualBuilder/__test__/withoutIframe.test.ts +++ b/src/visualBuilder/__test__/withoutIframe.test.ts @@ -1,8 +1,12 @@ import crypto from "crypto"; -import { triggerAndWaitForClickAction, waitForBuilderSDKToBeInitialized } from "../../__test__/utils"; +import { + triggerAndWaitForClickAction, + waitForBuilderSDKToBeInitialized, +} from "../../__test__/utils"; import { VisualBuilder } from "../index"; import Config from "../../configManager/configManager"; +import { isOpenInBuilder } from "../../utils"; vi.mock("../utils/visualBuilderPostMessage", async () => { const { getAllContentTypes } = await vi.importActual< @@ -24,6 +28,16 @@ vi.mock("../utils/visualBuilderPostMessage", async () => { }, }; }); + +vi.mock("../../utils/index.ts", async () => { + const actual = await vi.importActual("../../utils"); + return { + __esModule: true, + ...actual, + isOpenInBuilder: vi.fn().mockReturnValue(true), + }; +}); + import visualBuilderPostMessage from "../utils/visualBuilderPostMessage"; import { act, fireEvent, waitFor, screen } from "@testing-library/preact"; diff --git a/src/visualBuilder/components/VisualBuilder.tsx b/src/visualBuilder/components/VisualBuilder.tsx index f44aa7f7..867db23e 100644 --- a/src/visualBuilder/components/VisualBuilder.tsx +++ b/src/visualBuilder/components/VisualBuilder.tsx @@ -5,13 +5,18 @@ import { VisualBuilderGlobalStyles, } from "../visualBuilder.style"; import React from "preact/compat"; +import { isOpenInBuilder } from "../../utils"; interface VisualBuilderProps { visualBuilderContainer: HTMLDivElement | null; resizeObserver: ResizeObserver; } -function VisualBuilderComponent(props: VisualBuilderProps): JSX.Element { +function VisualBuilderComponent(props: VisualBuilderProps): JSX.Element | null { + if (!isOpenInBuilder()) { + return null; + } + return ( <> {/* For some reason, goober's glob and createGlobalStyle were not working in this case. */} diff --git a/src/visualBuilder/components/__test__/visualBuilder.test.tsx b/src/visualBuilder/components/__test__/visualBuilder.test.tsx index 794a14d5..c6f137d0 100644 --- a/src/visualBuilder/components/__test__/visualBuilder.test.tsx +++ b/src/visualBuilder/components/__test__/visualBuilder.test.tsx @@ -3,6 +3,7 @@ import { hideOverlay } from "../../generators/generateOverlay"; import { VisualBuilder } from "../.."; import VisualBuilderComponent from "../VisualBuilder"; import { asyncRender } from "../../../__test__/utils"; +import * as utils from "../../../utils"; vi.mock("../../generators/generateOverlay", () => ({ hideOverlay: vi.fn(), @@ -14,13 +15,23 @@ const mockResizeObserver = { disconnect: vi.fn(), }; +vi.mock("../../../utils/index.ts", async () => { + const actual = await vi.importActual("../../../utils"); + return { + __esModule: true, + ...actual, + isOpenInBuilder: vi.fn().mockReturnValue(true), + }; +}); + describe("VisualBuilderComponent", () => { beforeEach(() => { document.body.innerHTML = ""; - }) + vi.clearAllMocks(); + }); afterEach(() => { cleanup(); - }) + }); test("renders VisualBuilderComponent correctly", async () => { const { getByTestId } = await asyncRender( { const overlayWrapper = getByTestId("visual-builder__overlay__wrapper"); fireEvent.click(overlayWrapper); }); + + test("does not render VisualBuilderComponent when not in builder mode", async () => { + vi.spyOn(utils, "isOpenInBuilder").mockReturnValueOnce(false); + const { queryByTestId } = await asyncRender( + + ); + + expect(queryByTestId("visual-builder__cursor")).not.toBeInTheDocument(); + expect( + queryByTestId("visual-builder__overlay__wrapper") + ).not.toBeInTheDocument(); + expect( + queryByTestId("visual-builder__focused-toolbar") + ).not.toBeInTheDocument(); + }); + + test("does not render any overlay sections when not in builder mode", async () => { + vi.spyOn(utils, "isOpenInBuilder").mockReturnValueOnce(false); + const { queryByTestId } = await asyncRender( + + ); + + expect( + queryByTestId("visual-builder__overlay--top") + ).not.toBeInTheDocument(); + expect( + queryByTestId("visual-builder__overlay--left") + ).not.toBeInTheDocument(); + expect( + queryByTestId("visual-builder__overlay--right") + ).not.toBeInTheDocument(); + expect( + queryByTestId("visual-builder__overlay--bottom") + ).not.toBeInTheDocument(); + expect( + queryByTestId("visual-builder__overlay--outline") + ).not.toBeInTheDocument(); + }); + + test("does not render hover outline when not in builder mode", async () => { + vi.spyOn(utils, "isOpenInBuilder").mockReturnValueOnce(false); + const { queryByTestId } = await asyncRender( + + ); + + expect( + queryByTestId("visual-builder__hover-outline") + ).not.toBeInTheDocument(); + }); + + test("does not call hideOverlay when not in builder mode", async () => { + vi.spyOn(utils, "isOpenInBuilder").mockReturnValueOnce(false); + const visualBuilderContainer = document.createElement("div"); + await asyncRender( + + ); + + expect(hideOverlay).not.toHaveBeenCalled(); + }); + + test("does not observe elements when not in builder mode", async () => { + vi.spyOn(utils, "isOpenInBuilder").mockReturnValueOnce(false); + await asyncRender( + + ); + + expect(mockResizeObserver.observe).not.toHaveBeenCalled(); + }); }); diff --git a/src/visualBuilder/components/index.tsx b/src/visualBuilder/components/index.tsx index ede594be..6c08da3a 100644 --- a/src/visualBuilder/components/index.tsx +++ b/src/visualBuilder/components/index.tsx @@ -2,6 +2,7 @@ import { render } from "preact"; import VisualBuilderComponent from "./VisualBuilder"; import { visualBuilderStyles } from "../visualBuilder.style"; import React from "preact/compat"; +import { isOpenInBuilder } from "../../utils"; interface InitUIParams { resizeObserver: ResizeObserver; @@ -11,7 +12,10 @@ function initUI(props: InitUIParams): void { const visualBuilderDOM = document.querySelector( `.visual-builder__container` ); - if (!visualBuilderDOM) { + + const isInBuilder = isOpenInBuilder(); + + if (!visualBuilderDOM && isInBuilder) { const visualBuilderContainer = document.createElement("div"); visualBuilderContainer.classList.add( visualBuilderStyles()["visual-builder__container"], diff --git a/src/visualBuilder/utils/__test__/focusOverlayWrapper.test.ts b/src/visualBuilder/utils/__test__/focusOverlayWrapper.test.ts index c963c3d4..1d80c172 100644 --- a/src/visualBuilder/utils/__test__/focusOverlayWrapper.test.ts +++ b/src/visualBuilder/utils/__test__/focusOverlayWrapper.test.ts @@ -13,7 +13,7 @@ import { mockMultipleLinkFieldSchema } from "../../../__test__/data/fields"; // this is probably because of cyclic dependencies import { VisualBuilder } from "../.."; import { screen } from "@testing-library/preact"; - +import { isOpenInBuilder } from "../../../utils"; vi.mock("../visualBuilderPostMessage", () => { return { __esModule: true, @@ -31,6 +31,15 @@ vi.mock("../handleIndividualFields", () => { }; }); +vi.mock("../../../utils/index.ts", async () => { + const actual = await vi.importActual("../../../utils"); + return { + __esModule: true, + ...actual, + isOpenInBuilder: vi.fn().mockReturnValue(true), + }; +}); + const mockResizeObserver = { observe: vi.fn(), unobserve: vi.fn(), @@ -78,14 +87,17 @@ describe("addFocusOverlay", () => { "data-cslp", "all_fields.blt58a50b4cebae75c5.en-us.title" ); - targetElement.getBoundingClientRect = vi.fn(() => ({ - left: 10, - right: 20, - top: 10, - bottom: 20, - height: 10, - width: 10 - } as DOMRect)) as any; + targetElement.getBoundingClientRect = vi.fn( + () => + ({ + left: 10, + right: 20, + top: 10, + bottom: 20, + height: 10, + width: 10, + }) as DOMRect + ) as any; visualBuilderContainer.appendChild(targetElement); }); @@ -138,8 +150,10 @@ describe("addFocusOverlay", () => { const overlayOutline = document.querySelector( `[data-testid="visual-builder__overlay--outline"]` - ) - expect(overlayOutline).toHaveStyle("top: 10px; height: 10px; width: 10px; left: 10px; outline-color: rgb(113, 92, 221);"); + ); + expect(overlayOutline).toHaveStyle( + "top: 10px; height: 10px; width: 10px; left: 10px; outline-color: rgb(113, 92, 221);" + ); }); }); @@ -286,7 +300,7 @@ describe("hideFocusOverlay", () => { visualBuilderOverlayWrapper: focusOverlayWrapper, focusedToolbar: document.querySelector(".visual-builder__toolbar"), resizeObserver: mockResizeObserver, - noTrigger: false + noTrigger: false, }); expect(focusOverlayWrapper.classList.contains("visible")).toBe(false); From 618abf168014ce71ab02e86e035b411f0facb7ce Mon Sep 17 00:00:00 2001 From: hiteshshetty-dev Date: Tue, 24 Jun 2025 15:57:10 +0530 Subject: [PATCH 02/10] 3.2.5 --- CHANGELOG.md | 89 ++++++++++++++++++++++++++++++----------------- package-lock.json | 4 +-- package.json | 2 +- 3 files changed, 60 insertions(+), 35 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5b2b5a45..3d5c463d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,13 +1,32 @@ # Changelog +## [v3.2.5](https://github.com/contentstack/live-preview-sdk/compare/v3.2.4...v3.2.5) + +> 24 June 2025 + +### General Changes + +- VE-6559:add isOpenInBuilder utility function and integrate into VisualBuilder components (Sahil Chalke - [#446](https://github.com/contentstack/live-preview-sdk/pull/446)) + +### New Features + +- feat: add isOpenInBuilder utility function and integrate into VisualBuilder components (SahilCs15 - [8e80517](https://github.com/contentstack/live-preview-sdk/commit/8e80517437e979fd143a162cc5b293cabb84e94e)) + ## [v3.2.4](https://github.com/contentstack/live-preview-sdk/compare/v3.2.3...v3.2.4) -> 10 June 2025 +> 16 June 2025 ### General Changes +- Release - 12th June (merge `stage_v3`) (Hitesh Shetty - [#445](https://github.com/contentstack/live-preview-sdk/pull/445)) +- Staging develop_v3 (Ayush Dubey - [#444](https://github.com/contentstack/live-preview-sdk/pull/444)) - Revert 441 revert 439 collab (diwakarmk7 - [#443](https://github.com/contentstack/live-preview-sdk/pull/443)) +### Chores And Housekeeping + +- chore: talismanrc update (csAyushDubey - [c9c9bda](https://github.com/contentstack/live-preview-sdk/commit/c9c9bda746467c15da4cba9ac22f6428bbc7e1ef)) +- chore: readme update (csAyushDubey - [76bb848](https://github.com/contentstack/live-preview-sdk/commit/76bb84894055450762aa64df0c2a453d0f7782cd)) + ### General Changes - Revert "Revert "Collab"" (diwakarmk7 - [087ab2a](https://github.com/contentstack/live-preview-sdk/commit/087ab2aa818897ce409c61c2472f4b03cbf9762b)) @@ -20,6 +39,7 @@ ### Fixes - fix: update LightLivePreviewHoC config to use IExportedConfig type (Kirtesh Suthar - [#438](https://github.com/contentstack/live-preview-sdk/pull/438)) +- fix(VE-5851): error handling for getEntryPermissionsCached (Hitesh Shetty - [#434](https://github.com/contentstack/live-preview-sdk/pull/434)) ### General Changes @@ -27,18 +47,31 @@ - Revert "Collab" (diwakarmk7 - [#441](https://github.com/contentstack/live-preview-sdk/pull/441)) - Collab (diwakarmk7 - [#439](https://github.com/contentstack/live-preview-sdk/pull/439)) - Prepare for release from - Develop v3 (Kirtesh Suthar - [#440](https://github.com/contentstack/live-preview-sdk/pull/440)) +- v3.2.2 (Hitesh Shetty - [#435](https://github.com/contentstack/live-preview-sdk/pull/435)) +- Stage v3.2.2 (Hitesh Shetty - [#433](https://github.com/contentstack/live-preview-sdk/pull/433)) ### Fixes - fix: update Contentstack Live Preview utils import to version 3.2.3 in README.md (Kirtesh Suthar - [e7da871](https://github.com/contentstack/live-preview-sdk/commit/e7da8715787d6636cff4ad4c09233e57a727af72)) +- fix: error handling for getEntryPermissionsCached usages (Faraaz Biyabani - [25b1be6](https://github.com/contentstack/live-preview-sdk/commit/25b1be665d40b4950d510b781ef17fb3fbc7e6eb)) - fix(collab): username display difference fix (diwakarmk7 - [bfc29e3](https://github.com/contentstack/live-preview-sdk/commit/bfc29e36527e62fa682089769bb3653dbc924dbc)) - fix: update checksum for README.md in .talismanrc (Kirtesh Suthar - [45c8c99](https://github.com/contentstack/live-preview-sdk/commit/45c8c9976ae04970a0fcf11dd2fce35f4dee949b)) - fix: update script integrity hash in README.md for Contentstack Live Preview utils (Kirtesh Suthar - [1f024ce](https://github.com/contentstack/live-preview-sdk/commit/1f024ce31c299cd312cfb26ba85498d967f02d25)) +### Chores And Housekeeping + +- chore: add CHANGELOG.md and fieldToolbar.test.tsx to talismanrc with checksums (hiteshshetty-dev - [6dc5eed](https://github.com/contentstack/live-preview-sdk/commit/6dc5eed360eb0dfa5db96b7c4638f9194f4f40f3)) +- chore: update Contentstack Live Preview utils to version 3.2.2 in README (hiteshshetty-dev - [5da31f1](https://github.com/contentstack/live-preview-sdk/commit/5da31f1c8f26e7de1cf1432483768b6f7b32d241)) +- chore: add README.md to talismanrc file with checksum (hiteshshetty-dev - [7640872](https://github.com/contentstack/live-preview-sdk/commit/7640872c97395ee44e7d6e3abe570b6555bf455b)) + ### Refactoring and Updates - refactor: move LightLivePreviewHoC to a new file and simplify index.ts (Kirtesh Suthar - [e248309](https://github.com/contentstack/live-preview-sdk/commit/e248309141411ac1398b7661bdc5bd83dfab8857)) +### Changes to Test Assests + +- test: update field mouse hover tests (Faraaz Biyabani - [16306dd](https://github.com/contentstack/live-preview-sdk/commit/16306dd590cfa0dc996a1d8ffa32ef762997caa6)) + ### General Changes - conflict resolve (diwakarmk7 - [45d4c6f](https://github.com/contentstack/live-preview-sdk/commit/45d4c6f77a05a4a254f9b96624b87a2453f03679)) @@ -48,7 +81,7 @@ ## [v3.2.2](https://github.com/contentstack/live-preview-sdk/compare/v3.2.1...v3.2.2) -> 16 May 2025 +> 13 May 2025 ### New Features @@ -56,18 +89,11 @@ ### Fixes -- fix(VE-5851): error handling for getEntryPermissionsCached (Hitesh Shetty - [#434](https://github.com/contentstack/live-preview-sdk/pull/434)) - fix(VE-5361): update field event is not sent when input event does not occur in inline editable fields (Faraaz Biyabani - [#422](https://github.com/contentstack/live-preview-sdk/pull/422)) - fix(VE-6191): clear field schema map on variant change (Faraaz Biyabani - [#432](https://github.com/contentstack/live-preview-sdk/pull/432)) -### General Changes - -- v3.2.2 (Hitesh Shetty - [#435](https://github.com/contentstack/live-preview-sdk/pull/435)) -- Stage v3.2.2 (Hitesh Shetty - [#433](https://github.com/contentstack/live-preview-sdk/pull/433)) - ### Fixes -- fix: error handling for getEntryPermissionsCached usages (Faraaz Biyabani - [25b1be6](https://github.com/contentstack/live-preview-sdk/commit/25b1be665d40b4950d510b781ef17fb3fbc7e6eb)) - fix: update field event is not sent when input event does not occur in inline editable fields (Faraaz Biyabani - [15e016d](https://github.com/contentstack/live-preview-sdk/commit/15e016da1d5801fe0770ff31387e47b3b4835d71)) - fix: disable variant entry actions when no entry edit permission (Faraaz Biyabani - [6d31575](https://github.com/contentstack/live-preview-sdk/commit/6d315751c128d6231f15ee76d8ef83e5fdb1a1bf)) - fix: clear field schema map on variant change (Faraaz Biyabani - [1d1fd4f](https://github.com/contentstack/live-preview-sdk/commit/1d1fd4fc5c0220486a7eef2470a7bb62464ee2f0)) @@ -76,15 +102,11 @@ ### Chores And Housekeeping - chore: remove formatting changes and do a global mock for getEntryPermissionsCached (Faraaz Biyabani - [696a803](https://github.com/contentstack/live-preview-sdk/commit/696a80376028204dfa3e44b5342426c84f052d6c)) -- chore: add CHANGELOG.md and fieldToolbar.test.tsx to talismanrc with checksums (hiteshshetty-dev - [6dc5eed](https://github.com/contentstack/live-preview-sdk/commit/6dc5eed360eb0dfa5db96b7c4638f9194f4f40f3)) -- chore: update Contentstack Live Preview utils to version 3.2.2 in README (hiteshshetty-dev - [5da31f1](https://github.com/contentstack/live-preview-sdk/commit/5da31f1c8f26e7de1cf1432483768b6f7b32d241)) -- chore: add README.md to talismanrc file with checksum (hiteshshetty-dev - [7640872](https://github.com/contentstack/live-preview-sdk/commit/7640872c97395ee44e7d6e3abe570b6555bf455b)) ### Changes to Test Assests - test: update fieldSchemaMap tests and add tests for variant event handlers (Faraaz Biyabani - [5d4a695](https://github.com/contentstack/live-preview-sdk/commit/5d4a6956a2a4cd653ba8b852eb24270cc3db4653)) - test: add tests for various modules (Faraaz Biyabani - [ce30b02](https://github.com/contentstack/live-preview-sdk/commit/ce30b02e94c5f7ceae8bf754518a764a59b530ea)) -- test: update field mouse hover tests (Faraaz Biyabani - [16306dd](https://github.com/contentstack/live-preview-sdk/commit/16306dd590cfa0dc996a1d8ffa32ef762997caa6)) - test: createCachedFetch (Faraaz Biyabani - [c4711b4](https://github.com/contentstack/live-preview-sdk/commit/c4711b4527982766d480b294af9b9d7bf2e4c8f3)) - test: not sending field event in handleFieldInput (Faraaz Biyabani - [8e6a56d](https://github.com/contentstack/live-preview-sdk/commit/8e6a56d55e9f0d9a097a91f1ca06db8002a154b6)) - test: update failing tests (Faraaz Biyabani - [c05998b](https://github.com/contentstack/live-preview-sdk/commit/c05998bca1aea2d010856d5bd41fd699817cc145)) @@ -152,6 +174,11 @@ > 11 April 2025 +### General Changes + +- v3.1.3 (Sairaj - [#413](https://github.com/contentstack/live-preview-sdk/pull/413)) +- Stage-v3.1.3 (Hitesh Shetty - [#412](https://github.com/contentstack/live-preview-sdk/pull/412)) + ### New Features - feat(collab): add ui-components and collab feature handling (MohammedZuhairAhmed - [8d15af3](https://github.com/contentstack/live-preview-sdk/commit/8d15af302c1129cfeee6acf39e99c282ed275f00)) @@ -192,6 +219,8 @@ - chore(collab): addressed pr comments (MohammedZuhairAhmed - [0a2e644](https://github.com/contentstack/live-preview-sdk/commit/0a2e6447ee9912136927aaab3b0d27eb717d10a1)) - chore(collab): fix email styles (Pratyush Biswas - [ecfde0a](https://github.com/contentstack/live-preview-sdk/commit/ecfde0ae403807c7e36461e3777d0a720eb82ae1)) +- chore: add tagPattern to auto-changelog configuration in package.json (hiteshshetty-dev - [e0a208b](https://github.com/contentstack/live-preview-sdk/commit/e0a208bab316535abfb9c0e1ead19dab95b76f2d)) +- chore: update ContentstackLivePreview import to version 3.1.3 in README.md (hiteshshetty-dev - [6b52088](https://github.com/contentstack/live-preview-sdk/commit/6b52088ec4605c5d95358f3bc06002ef136e4f2c)) ### Refactoring and Updates @@ -222,10 +251,15 @@ - remove unused styles (Pratyush Biswas - [1db60c4](https://github.com/contentstack/live-preview-sdk/commit/1db60c49ae5f2decd6ec57a825d8d55206171096)) - Fix resolve button style (Pratyush Biswas - [e0ecaaa](https://github.com/contentstack/live-preview-sdk/commit/e0ecaaaa0fbf04b1bc61736541302cb0d62e8a9b)) - added id to tousers list (diwakarmk7 - [df62756](https://github.com/contentstack/live-preview-sdk/commit/df6275625518c222909b8039eb55d21ca38df7aa)) +- Update src/visualBuilder/utils/handleInlineEditableField.ts (Hitesh Shetty - [3052877](https://github.com/contentstack/live-preview-sdk/commit/30528770bec19e0ca4a5b29b778fb53b1739bd60)) ## [v3.1.3](https://github.com/contentstack/live-preview-sdk/compare/v3.1.2...v3.1.3) -> 4 April 2025 +> 28 March 2025 + +### New Features + +- feat: v3.1.2 (Faraaz Biyabani - [#381](https://github.com/contentstack/live-preview-sdk/pull/381)) ### Fixes @@ -234,15 +268,18 @@ - fix(VE-5555): add instance button loading state (Faraaz Biyabani - [#406](https://github.com/contentstack/live-preview-sdk/pull/406)) - fix: call onChangeCallback when live_preview parameter is present in URL (Faraaz Biyabani - [#363](https://github.com/contentstack/live-preview-sdk/pull/363)) +### Chores And Housekeeping + +- chore: rename `editButtonBulider` to `editInVisualBuilderButton` (Hitesh Shetty - [#379](https://github.com/contentstack/live-preview-sdk/pull/379)) + ### Changes to Test Assests - test(VE-5478): add unit test for inline editing related functions (Faraaz Biyabani - [#398](https://github.com/contentstack/live-preview-sdk/pull/398)) ### General Changes -- v3.1.3 (Sairaj - [#413](https://github.com/contentstack/live-preview-sdk/pull/413)) -- Stage-v3.1.3 (Hitesh Shetty - [#412](https://github.com/contentstack/live-preview-sdk/pull/412)) - VE-5544: Investigate button click issue with `data-cslp` attribute (Sairaj - [#408](https://github.com/contentstack/live-preview-sdk/pull/408)) +- Stage: v3.1.2 (Faraaz Biyabani - [#377](https://github.com/contentstack/live-preview-sdk/pull/377)) ### New Features @@ -256,26 +293,22 @@ ### Chores And Housekeeping -- chore: add tagPattern to auto-changelog configuration in package.json (hiteshshetty-dev - [e0a208b](https://github.com/contentstack/live-preview-sdk/commit/e0a208bab316535abfb9c0e1ead19dab95b76f2d)) -- chore: update ContentstackLivePreview import to version 3.1.3 in README.md (hiteshshetty-dev - [6b52088](https://github.com/contentstack/live-preview-sdk/commit/6b52088ec4605c5d95358f3bc06002ef136e4f2c)) +- chore: rename editButtonBulider to editInVisualBuilderButton (Sairaj Chouhan - [bd8be29](https://github.com/contentstack/live-preview-sdk/commit/bd8be29d97c151fc85aad98f55573a6821b3d4fc)) +- chore: update integrity (hiteshshetty-dev - [ad2c8aa](https://github.com/contentstack/live-preview-sdk/commit/ad2c8aa3780b973233a82e5a978254f777773af2)) ### Changes to Test Assests - test: add unit test for inline editing related functions (Faraaz Biyabani - [50a2167](https://github.com/contentstack/live-preview-sdk/commit/50a21675271c7ec65d0959a1e20334011119a729)) - test: fix unit tests related to add instance button (Faraaz Biyabani - [b6af0cc](https://github.com/contentstack/live-preview-sdk/commit/b6af0cc1d6142c9cfcbcdbef745ac245d0f271ca)) - test: add test for replace button visibility in multiple file fields (Sairaj Chouhan - [aa1d818](https://github.com/contentstack/live-preview-sdk/commit/aa1d818533f8759cfc428c6a2c32691041beef93)) - -### General Changes - -- Update src/visualBuilder/utils/handleInlineEditableField.ts (Hitesh Shetty - [3052877](https://github.com/contentstack/live-preview-sdk/commit/30528770bec19e0ca4a5b29b778fb53b1739bd60)) +- test: fix failing test cases (Sairaj Chouhan - [6d36acb](https://github.com/contentstack/live-preview-sdk/commit/6d36acbd5c4e717f92ce40e2e4490df28a857948)) ## [v3.1.2](https://github.com/contentstack/live-preview-sdk/compare/v3.1.1...v3.1.2) -> 7 March 2025 +> 3 March 2025 ### New Features -- feat: v3.1.2 (Faraaz Biyabani - [#381](https://github.com/contentstack/live-preview-sdk/pull/381)) - feat: improve edit button rendering (Faraaz Biyabani - [#371](https://github.com/contentstack/live-preview-sdk/pull/371)) - feat(VE-5170): add plus button configuration (Sairaj - [#349](https://github.com/contentstack/live-preview-sdk/pull/349)) - feat: allow click on elements with studio-ui attribute (Faraaz Biyabani - [#355](https://github.com/contentstack/live-preview-sdk/pull/355)) @@ -290,17 +323,12 @@ - fix(VE-5012): add variant classes in case of adding multiple instances (srinad007 - [#351](https://github.com/contentstack/live-preview-sdk/pull/351)) - fix(VE-5080): fix z-index for hover outline and add button (srinad007 - [#341](https://github.com/contentstack/live-preview-sdk/pull/341)) -### Chores And Housekeeping - -- chore: rename `editButtonBulider` to `editInVisualBuilderButton` (Hitesh Shetty - [#379](https://github.com/contentstack/live-preview-sdk/pull/379)) - ### Documentation Changes - docs: add docs for start edit button configuration (Sairaj - [#376](https://github.com/contentstack/live-preview-sdk/pull/376)) ### General Changes -- Stage: v3.1.2 (Faraaz Biyabani - [#377](https://github.com/contentstack/live-preview-sdk/pull/377)) - Ve 5139 (srinad007 - [#343](https://github.com/contentstack/live-preview-sdk/pull/343)) ### New Features @@ -318,16 +346,13 @@ ### Chores And Housekeeping -- chore: rename editButtonBulider to editInVisualBuilderButton (Sairaj Chouhan - [bd8be29](https://github.com/contentstack/live-preview-sdk/commit/bd8be29d97c151fc85aad98f55573a6821b3d4fc)) - chore: remove else block (Sairaj Chouhan - [834c3e7](https://github.com/contentstack/live-preview-sdk/commit/834c3e78250f36b32e21c948bda313818f0db7bc)) -- chore: update integrity (hiteshshetty-dev - [ad2c8aa](https://github.com/contentstack/live-preview-sdk/commit/ad2c8aa3780b973233a82e5a978254f777773af2)) - chore: remove `describe.only` (Faraaz Biyabani - [5aa5958](https://github.com/contentstack/live-preview-sdk/commit/5aa59587217ff7f64d495240f9e252bcf5b60a9c)) ### Changes to Test Assests - test: isPointerWithinEditButtonSafeZone (Faraaz Biyabani - [3c340e8](https://github.com/contentstack/live-preview-sdk/commit/3c340e8ce52d768f06fbb6b2050ab541a6ac47cb)) - test: add tests for start editing button in builder (Sairaj Chouhan - [f9988a7](https://github.com/contentstack/live-preview-sdk/commit/f9988a74ed9416cc99ce30ed9f3d25314f7eef5c)) -- test: fix failing test cases (Sairaj Chouhan - [6d36acb](https://github.com/contentstack/live-preview-sdk/commit/6d36acbd5c4e717f92ce40e2e4490df28a857948)) - test: increase timeout for contenteditable tests (Sairaj Chouhan - [66fee50](https://github.com/contentstack/live-preview-sdk/commit/66fee50387f0a8a9b0ec61b945bec00418dc34f9)) ### General Changes diff --git a/package-lock.json b/package-lock.json index 9c3f3650..11bc3a7e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@contentstack/live-preview-utils", - "version": "3.2.4", + "version": "3.2.5", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@contentstack/live-preview-utils", - "version": "3.2.4", + "version": "3.2.5", "license": "MIT", "dependencies": { "@preact/compat": "17.1.2", diff --git a/package.json b/package.json index ef28d398..90997057 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@contentstack/live-preview-utils", - "version": "3.2.4", + "version": "3.2.5", "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", From e063d6ef8fd95faaef612981f4586b4db66f9e4d Mon Sep 17 00:00:00 2001 From: hiteshshetty-dev Date: Tue, 24 Jun 2025 16:01:57 +0530 Subject: [PATCH 03/10] chore: update README.md to reference ContentstackLivePreview version 3.2.5 --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 79f3a344..dea08ca9 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