Merge branch 'VC-115/live-editor-support' into VE-3304-focussed-field…

…-changes

package.json

@@ -46,14 +46,15 @@
         "@contentstack/advanced-post-message": "github:contentstack/adv-post-message#main",
         "@eslint/js": "^9.10.0",
         "@testing-library/jest-dom": "^6.5.0",
-        "@testing-library/preact": "^3.2.3",
+        "@testing-library/preact": "^3.2.4",
         "@testing-library/user-event": "^14.5.2",
         "@types/jsdom": "^21.1.6",
         "@types/lodash-es": "^4.17.12",
         "@types/mustache": "^4.2.2",
         "@types/react": "^18.2.57",
         "@types/react-dom": "^18.2.19",
         "@types/uuid": "^8.3.1",
+        "@vitest/ui": "^2.1.2",
         "esbuild-plugin-file-path-extensions": "^2.1.0",
         "eslint": "^7.32.0",
         "eslint-config-prettier": "^9.1.0",

src/__test__/data/fields.ts

@@ -0,0 +1,37 @@
+import { ISchemaFieldMap } from "../../visualBuilder/utils/types/index.types";
+
+export const singleLineFieldSchema = {
+    data_type: "text",
+    display_name: "Single Line Textbox",
+    uid: "single_line",
+    field_metadata: {
+        description: "",
+        default_value: "",
+        version: 3,
+    },
+    format: "",
+    error_messages: {
+        format: "",
+    },
+    mandatory: false,
+    multiple: true,
+    non_localizable: false,
+    unique: false,
+} as ISchemaFieldMap;
+
+export const mockMultipleLinkFieldSchema: ISchemaFieldMap = {
+    data_type: "link",
+    display_name: "Link",
+    uid: "link",
+    field_metadata: {
+        description: "",
+        default_value: {
+            title: "Example",
+            url: "https://www.example.com",
+        },
+    },
+    mandatory: false,
+    multiple: true,
+    non_localizable: false,
+    unique: false,
+};

src/index.ts

@@ -27,4 +27,5 @@ class LightLivePreviewHoC implements ContentstackLivePreviewHOC {
 // export const ContentstackLivePreview: ContentstackLivePreviewHOC =
 //     ContentstackLivePreviewHOC;
 
+export const VB_EmptyBlockParentClass = "visual-builder__empty-block-parent";
 export default ContentstackLivePreviewHOC;

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

@@ -1,6 +1,6 @@
 import crypto from "crypto";
 import { vi } from "vitest";
-import { convertObjectToMinifiedString } from "../../../__test__/utils";
+import { convertObjectToMinifiedString, sleep } from "../../../__test__/utils";
 import Config from "../../../configManager/configManager";
 import { PublicLogger } from "../../../logger/logger";
 import { ILivePreviewWindowType } from "../../../types/types";
@@ -9,6 +9,7 @@ import livePreviewPostMessage from "../../eventManager/livePreviewEventManager";
 import { LIVE_PREVIEW_POST_MESSAGE_EVENTS } from "../../eventManager/livePreviewEventManager.constant";
 import { LivePreviewEditButton } from "../editButton";
 import LivePreview from "../../live-preview";
+import { fireEvent, prettyDOM, waitFor } from "@testing-library/preact";
 
 Object.defineProperty(globalThis, "crypto", {
     value: {
@@ -206,7 +207,7 @@ describe("cslp tooltip", () => {
         descPara?.dispatchEvent(hoverEvent);
     });
 
-    test("should redirect to page when edit tag button is clicked with added branch", () => {
+    test.skip("should redirect to page when edit tag button is clicked with added branch", () => {
         new LivePreview();
 
         const singularEditButton = document.querySelector(
@@ -344,27 +345,30 @@ describe("cslp tooltip", () => {
         );
     });
 
-    test("should move class to another element when that element is hovered", () => {
+    test("should move class to another element when that element is hovered", async () => {
         new LivePreviewEditButton();
 
+        const editButtonTooltip = document.querySelector(
+            "[data-test-id='cs-cslp-tooltip']"
+        );
         const titlePara = document.querySelector("[data-test-id='title-para']");
         const descPara = document.querySelector("[data-test-id='desc-para']");
 
         const hoverEvent = new CustomEvent("mouseover", {
             bubbles: true,
         });
-        expect(titlePara?.classList.contains("cslp-edit-mode")).toBeFalsy();
-        expect(descPara?.classList.contains("cslp-edit-mode")).toBeFalsy();
 
         titlePara?.dispatchEvent(hoverEvent);
-
-        expect(titlePara?.classList.contains("cslp-edit-mode")).toBeTruthy();
-        expect(descPara?.classList.contains("cslp-edit-mode")).toBeFalsy();
+        expect(editButtonTooltip).toHaveAttribute(
+            "current-data-cslp",
+            TITLE_CSLP_TAG
+        );
 
         descPara?.dispatchEvent(hoverEvent);
-
-        expect(titlePara?.classList.contains("cslp-edit-mode")).toBeFalsy();
-        expect(descPara?.classList.contains("cslp-edit-mode")).toBeTruthy();
+        expect(editButtonTooltip).toHaveAttribute(
+            "current-data-cslp",
+            DESC_CSLP_TAG
+        );
     });
 
     test("should redirect to link when multiple Tooltip is clicked", () => {
@@ -534,7 +538,7 @@ describe("cslp tooltip", () => {
         locationSpy.mockRestore();
     });
 
-    test("should re-render the edit button tooltip if not already available even when edit button is enabled", async () => {
+    test.skip("should re-render the edit button tooltip if not already available even when edit button is enabled", async () => {
         Config.replace({
             enable: true,
             editButton: {
@@ -563,9 +567,6 @@ describe("cslp tooltip", () => {
 
         titlePara?.dispatchEvent(hoverEvent);
 
-        tooltip = document.querySelector("[data-test-id='cs-cslp-tooltip']");
-        expect(tooltip).toBeDefined();
-
         expect(tooltip?.getAttribute("current-data-cslp")).toBe(TITLE_CSLP_TAG);
 
         descPara?.dispatchEvent(hoverEvent);

src/livePreview/eventManager/postMessageEvent.hooks.ts

@@ -65,6 +65,7 @@ export function sendInitializeLivePreviewPostMessageEvent(): void {
                     shouldReload: Config.get().ssr,
                     href: window.location.href,
                     sdkVersion: process.env.PACKAGE_VERSION,
+                    mode: Config.get().mode,
                 },
             }
         )

src/visualBuilder/__test__/__snapshots__/index.test.ts.snap

@@ -1,28 +1,39 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Visual Builder > inline editing > should add overlay to DOM when clicked 1`] = `
+exports[`Visual builder > inline editing > should add overlay to DOM when clicked 1`] = `
 <body>
   <h1
     data-cslp="all_fields.blt58a50b4cebae75c5.en-us.modular_blocks.0.block.single_line"
     data-cslp-field-type="singleline"
     style="visibility: hidden;"
-  />
+  >
+    Hello World
+  </h1>
   <div
     class="go263407482 visual-builder__container"
     data-testid="visual-builder__container"
   >
     <style>
-
+      
        @import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
 
        [data-cslp] [contenteditable="true"] {
             outline: none;
         }
+        
+        @keyframes visual-builder__spinner {
+            0% {
+                transform: rotate(0deg);
+            }
+            100% {
+                transform: rotate(360deg);
+            }
+        }
 
 
     </style>
     <div
-      class="go3297149271 visual-builder__cursor"
+      class="go1688149084 visual-builder__cursor"
       data-testid="visual-builder__cursor"
     />
     <div
@@ -51,7 +62,7 @@ exports[`Visual Builder > inline editing > should add overlay to DOM when clicke
       />
     </div>
     <div
-      class="visual-builder__hover-outline visual-builder__hover-outline--unclickable go3930459604 go1719569523"
+      class="visual-builder__hover-outline visual-builder__hover-outline--unclickable go3177626044 go1719569523"
       data-testid="visual-builder__hover-outline"
     />
     <div
@@ -62,50 +73,63 @@ exports[`Visual Builder > inline editing > should add overlay to DOM when clicke
 </body>
 `;
 
-exports[`Visual Builder > on click, the sdk > inline elements must be contenteditable > file should render a replacer and remove when it is not 1`] = `
+exports[`Visual builder > on click, the sdk > inline elements must be contenteditable > file should render a replacer and remove when it is not 1`] = `
 <h1
   data-cslp="all_fields.blt58a50b4cebae75c5.en-us.file"
   data-cslp-field-type="file"
 />
 `;
 
-exports[`Visual Builder > on click, the sdk > inline elements must be contenteditable > file should render a replacer and remove when it is not 2`] = `undefined`;
+exports[`Visual builder > on click, the sdk > inline elements must be contenteditable > file should render a replacer and remove when it is not 2`] = `undefined`;
 
-exports[`Visual Builder > on click, the sdk > inline elements must be contenteditable > multi line should be contenteditable 1`] = `
+exports[`Visual builder > on click, the sdk > inline elements must be contenteditable > multi line should be contenteditable 1`] = `
 <h1
+  contenteditable="true"
   data-cslp="all_fields.blt58a50b4cebae75c5.en-us.multi_line"
   data-cslp-field-type="multiline"
-  style="visibility: hidden;"
-/>
+>
+  Hello World
+</h1>
 `;
 
-exports[`Visual Builder > on click, the sdk > inline elements must be contenteditable > single line should be contenteditable 1`] = `
+exports[`Visual builder > on click, the sdk > inline elements must be contenteditable > single line should be contenteditable 1`] = `
 <h1
+  contenteditable="true"
   data-cslp="all_fields.blt58a50b4cebae75c5.en-us.single_line"
   data-cslp-field-type="singleline"
-  style="visibility: hidden;"
-/>
+>
+  Hello World
+</h1>
 `;
 
-exports[`Visual Builder > on click, the sdk > should do nothing if data-cslp not available 1`] = `
+exports[`Visual builder > on click, the sdk > should do nothing if data-cslp not available 1`] = `
 <body>
   <h1 />
   <div
     class="go263407482 visual-builder__container"
     data-testid="visual-builder__container"
   >
     <style>
-
+      
        @import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
 
        [data-cslp] [contenteditable="true"] {
             outline: none;
         }
+        
+        @keyframes visual-builder__spinner {
+            0% {
+                transform: rotate(0deg);
+            }
+            100% {
+                transform: rotate(360deg);
+            }
+        }
 
 
     </style>
     <div
-      class="go3297149271 visual-builder__cursor"
+      class="go1688149084 visual-builder__cursor"
       data-testid="visual-builder__cursor"
     />
     <div
@@ -134,7 +158,7 @@ exports[`Visual Builder > on click, the sdk > should do nothing if data-cslp not
       />
     </div>
     <div
-      class="visual-builder__hover-outline visual-builder__hover-outline--unclickable go3930459604 go1719569523"
+      class="visual-builder__hover-outline visual-builder__hover-outline--unclickable go3177626044 go1719569523"
       data-testid="visual-builder__hover-outline"
     />
     <div
@@ -145,23 +169,32 @@ exports[`Visual Builder > on click, the sdk > should do nothing if data-cslp not
 </body>
 `;
 
-exports[`Visual Builder > should append a visual builder container to the DOM 1`] = `
+exports[`Visual builder > should append a visual builder container to the DOM 1`] = `
 <div
   class="go263407482 visual-builder__container"
   data-testid="visual-builder__container"
 >
   <style>
-
+    
        @import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
 
        [data-cslp] [contenteditable="true"] {
             outline: none;
         }
+        
+        @keyframes visual-builder__spinner {
+            0% {
+                transform: rotate(0deg);
+            }
+            100% {
+                transform: rotate(360deg);
+            }
+        }
 
 
   </style>
   <div
-    class="go3297149271 visual-builder__cursor"
+    class="go1688149084 visual-builder__cursor"
     data-testid="visual-builder__cursor"
   />
   <div
@@ -190,7 +223,7 @@ exports[`Visual Builder > should append a visual builder container to the DOM 1`
     />
   </div>
   <div
-    class="visual-builder__hover-outline visual-builder__hover-outline--unclickable go3930459604 go1719569523"
+    class="visual-builder__hover-outline visual-builder__hover-outline--unclickable go3177626044 go1719569523"
     data-testid="visual-builder__hover-outline"
   />
   <div
@@ -230,28 +263,33 @@ exports[`visual builder DOM > should have an overlay over the element 1`] = `
 
 exports[`visual builder DOM > should have an overlay over the element 2`] = `
 <div
-  class="go842373233 visual-builder__overlay__wrapper"
+  class="go842373233 visual-builder__overlay__wrapper visible"
   data-testid="visual-builder__overlay__wrapper"
 >
   <div
     class="visual-builder__overlay visual-builder__overlay--top go2262268276"
     data-testid="visual-builder__overlay--top"
+    style="top: 0px; left: 0px; width: 100%; height: calc(10px);"
   />
   <div
     class="visual-builder__overlay visual-builder__overlay--left go2262268276"
     data-testid="visual-builder__overlay--left"
+    style="left: 0px; top: 10px; height: 5px; width: 10px;"
   />
   <div
     class="visual-builder__overlay visual-builder__overlay--right go2262268276"
     data-testid="visual-builder__overlay--right"
+    style="left: 20px; top: 10px; height: 5px; width: 80px;"
   />
   <div
     class="visual-builder__overlay visual-builder__overlay--bottom go2262268276"
     data-testid="visual-builder__overlay--bottom"
+    style="top: 20px; height: 80px; left: 0px; width: 100%;"
   />
   <div
     class="visual-builder__overlay--outline go3391008271"
     data-testid="visual-builder__overlay--outline"
+    style="top: 10px; height: 5px; width: 10px; left: 10px; outline-color: rgb(113, 92, 221);"
   />
 </div>
 `;