Merge pull request #430 from contentstack/stage_v3

v3.2.1

Author: faraazb

CHANGELOG.md

@@ -15,8 +15,8 @@ npm install @contentstack/live-preview-utils
 Alternatively, if you want to include the package directly in your website HTML code, use the following command:
 
 ```html
-<script type='module'  integrity='sha384-Q1kNLAr9TbfZ9lsUUXH&#x2F;vW79LERzfbYJc7aLNSYjKFLzBZQDp&#x2F;Jk09+ADHo9mhEq' crossorigin="anonymous">
-     import ContentstackLivePreview from 'https://esm.sh/@contentstack/live-preview-utils@3.2.0';
+<script type='module'  integrity='sha384-A8av+t5rI9uSevzozgzaoIRdBTs5pn1tt7F&#x2F;ekJQ7NAE1l3RenCKeJeMUTdrbtcM' crossorigin="anonymous">
+     import ContentstackLivePreview from 'https://esm.sh/@contentstack/live-preview-utils@3.2.1';
 
      ContentstackLivePreview.init({
         stackDetails: {

README.md

@@ -1,6 +1,6 @@
 {
     "name": "@contentstack/live-preview-utils",
-    "version": "3.2.0",
+    "version": "3.2.1",
     "description": "Contentstack provides the Live Preview SDK to establish a communication channel between the various Contentstack SDKs and your website, transmitting  live changes to the preview pane.",
     "type": "module",
     "types": "dist/legacy/index.d.ts",

package-lock.json

@@ -71,7 +71,9 @@ class LightLivePreviewHoC {
 }
 
 const ContentstackLivePreview =
-    process.env.PURGE_PREVIEW_SDK || process.env.REACT_APP_PURGE_PREVIEW_SDK
+    typeof process !== "undefined" &&
+    (process?.env?.PURGE_PREVIEW_SDK === "true" ||
+        process?.env?.REACT_APP_PURGE_PREVIEW_SDK === "true")
         ? LightLivePreviewHoC
         : ContentstackLivePreviewHOC;
 

package.json

@@ -8,7 +8,10 @@ export class PublicLogger {
             | Console["info"],
         message: any[]
     ): void {
-        if (process?.env?.NODE_ENV !== "test") {
+        if (
+            typeof process !== "undefined" &&
+            process?.env?.NODE_ENV !== "test"
+        ) {
             logCallback("Live_Preview_SDK:", ...message);
         }
     }

src/index.ts

@@ -35,6 +35,7 @@ vi.mock("../utils/visualBuilderPostMessage", async () => {
 Object.defineProperty(globalThis, "crypto", {
     value: {
         getRandomValues: (arr: Array<any>) => crypto.randomBytes(arr.length),
+        randomUUID: () => crypto.randomUUID()
     },
 });
 // Increase the timeout for the test

src/logger/logger.ts

@@ -296,6 +296,7 @@ export class VisualBuilder {
         if (!config.enable || config.mode < ILivePreviewModeConfig.BUILDER) {
             return;
         }
+
         visualBuilderPostMessage
             ?.send<IVisualBuilderInitEvent>("init", {
                 isSSR: config.ssr,

src/visualBuilder/__test__/index.test.ts

@@ -29,6 +29,7 @@ import { generateThread } from "../generators/generateThread";
 import { isCollabThread } from "../generators/generateThread";
 import { toggleCollabPopup } from "../generators/generateThread";
 import { fixSvgXPath } from "../utils/collabUtils";
+import { v4 as uuidV4 } from "uuid";
 
 type HandleBuilderInteractionParams = Omit<
     EventListenerHandlerParams,
@@ -79,6 +80,22 @@ async function handleBuilderInteraction(
         (eventTarget.hasAttribute("data-cslp") ||
             eventTarget.closest("[data-cslp]"));
 
+    // if multiple elements with the same cslp element are found,
+    // assign a unique ID to each element which we can use to identify
+    // them in updateFocussedState and other places where we
+    // would have queried the element by data-cslp
+    const duplicates = document.querySelectorAll(
+        `[data-cslp="${eventTarget?.getAttribute("data-cslp")}"]`
+    );
+    if (duplicates.length > 1) {
+        duplicates.forEach((ele) => {
+            if (!ele.hasAttribute("data-cslp-unique-id")) {
+                const uniqueId = `cslp-${uuidV4()}`;
+                ele.setAttribute("data-cslp-unique-id", uniqueId);
+            }
+        });
+    }
+
     // if the target element is a studio-ui element, return
     // this is currently used for the "Edit in Studio" button
     if (eventTarget?.getAttribute("data-studio-ui") === "true") {

src/visualBuilder/index.ts

@@ -128,26 +128,36 @@ describe("handle numeric field key down", () => {
 });
 
 describe("handle keydown in button contenteditable", () => {
-    let button: HTMLButtonElement | undefined;
-    let spiedPreventDefault: MockInstance<(e: []) => void> | undefined;
-    let spiedInsertSpaceAtCursor:
-        | MockInstance<(typeof insertSpaceAtCursor)["insertSpaceAtCursor"]>
-        | undefined;
+    let spiedSendFieldEvent: MockInstance<() => void> | undefined;
+
+    beforeEach(() => {
+        spiedSendFieldEvent = vi
+            .spyOn(generateOverlay, "sendFieldEvent")
+            .mockImplementation(() => {});
+        const visualBuilderContainer = document.createElement("div");
+        visualBuilderContainer.classList.add("visual-builder__container");
+        document.body.appendChild(visualBuilderContainer);
+    });
+
+    afterEach(() => {
+        vi.clearAllMocks();
+    });
 
     test("should insert space in button content-editable", () => {
+        let spiedPreventDefault: MockInstance<(e: []) => void> | undefined;
         vi.spyOn(window, "getSelection").mockReturnValue({
-            // @ts-ignore
+            // @ts-expect-error mocking only required properties
             getRangeAt: (n: number) => ({
                 startOffset: 0,
                 endOffset: 0,
             }),
         });
-        spiedInsertSpaceAtCursor = vi.spyOn(
+        const spiedInsertSpaceAtCursor = vi.spyOn(
             insertSpaceAtCursor,
             "insertSpaceAtCursor"
         );
 
-        button = document.createElement("button");
+        const button = document.createElement("button");
         button.innerHTML = "Test";
         button.setAttribute("contenteditable", "true");
         button.setAttribute(
@@ -169,6 +179,47 @@ describe("handle keydown in button contenteditable", () => {
 
         expect(spiedPreventDefault).toHaveBeenCalledTimes(1);
         expect(spiedInsertSpaceAtCursor).toHaveBeenCalledWith(button);
+        expect(spiedSendFieldEvent).toHaveBeenCalled();
+    });
+
+    test("should insert space in span content-editable inside button", () => {
+        let spiedPreventDefault: MockInstance<(e: []) => void> | undefined;
+        vi.spyOn(window, "getSelection").mockReturnValue({
+            // @ts-expect-error mocking only required properties
+            getRangeAt: (n: number) => ({
+                startOffset: 0,
+                endOffset: 0,
+            }),
+        });
+        const spiedInsertSpaceAtCursor = vi.spyOn(
+            insertSpaceAtCursor,
+            "insertSpaceAtCursor"
+        );
+
+        const button = document.createElement("button");
+        const span = document.createElement("span");
+        button.appendChild(span);
+        span.setAttribute("contenteditable", "true");
+        span.setAttribute(
+            VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,
+            "single_line"
+        );
+
+        span.addEventListener("keydown", (e) => {
+            spiedPreventDefault = vi.spyOn(e, "preventDefault");
+            handleFieldKeyDown(e);
+        });
+
+        const keyDownEvent = new KeyboardEvent("keydown", {
+            bubbles: true,
+            key: "Space",
+            code: "Space",
+        });
+        span.dispatchEvent(keyDownEvent);
+
+        expect(spiedPreventDefault).toHaveBeenCalledTimes(1);
+        expect(spiedInsertSpaceAtCursor).toHaveBeenCalledWith(span);
+        expect(spiedSendFieldEvent).toHaveBeenCalled();
     });
 });