v3.2.1

README.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: {

package.json

@@ -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",

src/index.ts

@@ -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;
 

src/logger/logger.ts

@@ -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/visualBuilder/__test__/index.test.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/visualBuilder/index.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/listeners/mouseClick.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/utils/__test__/handleFieldMouseDown.test.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();
     });
 });
 

src/visualBuilder/utils/collabUtils.ts

@@ -90,13 +90,17 @@ export const getMessageWithDisplayName = (
 
     let tempText = sanitizeData(comment.message).replace(/<[^>]*>/g, "");
 
-    comment?.toUsers?.forEach((user) => {
+    comment.toUsers?.forEach((user) => {
         const userPattern = new RegExp(`{{${user}}}`, "g");
         const userData = userState.userMap[user];
+        const displayName = userData
+            ? userData.display || getUserName(userData)
+            : `unknown user`;
+
         const replacement =
             profile === "html"
-                ? `<b class="collab-thread-comment--message">@${userData.display || getUserName(userData)}</b>`
-                : `@${userData.display || getUserName(userData)}`;
+                ? `<b class="collab-thread-comment--message">@${displayName}</b>`
+                : `@${displayName}`;
         tempText = tempText.replace(userPattern, replacement);
     });
 

src/visualBuilder/utils/handleFieldMouseDown.ts

@@ -44,7 +44,15 @@ export function handleFieldKeyDown(e: Event): void {
         VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY
     ) as FieldDataType | null;
 
-    if (targetElement.tagName === "BUTTON") {
+    if (
+        event
+            .composedPath()
+            .some(
+                (element) =>
+                    element instanceof Element && element.tagName === "BUTTON"
+            )
+    ) {
+        // custom space handling when a button is involved
         handleKeyDownOnButton(event);
     }
     if (fieldType === FieldDataType.NUMBER) {
@@ -56,11 +64,12 @@ export function handleFieldKeyDown(e: Event): void {
 
 // spaces do not work inside a button content-editable
 // this adds a space and moves the cursor ahead, the
-// button press event is also prevented
+// button press event is also prevented, finally syncs the field
 function handleKeyDownOnButton(e: KeyboardEvent) {
     if (e.code === "Space" && e.target) {
         e.preventDefault();
         insertSpaceAtCursor(e.target as HTMLElement);
+        throttledFieldSync();
     }
 }
 

src/visualBuilder/utils/updateFocussedState.ts

@@ -105,11 +105,16 @@ export function updateFocussedState({
         return;
     }
 
-    const previousSelectedElementCslp =
-        previousSelectedEditableDOM?.getAttribute("data-cslp");
-    const newPreviousSelectedElement = document.querySelector(
-        `[data-cslp="${previousSelectedElementCslp}"]`
-    );
+    // prefer data-cslp-unique-id when available else use data-cslp.
+    // unique ID is added on click when multiple elements with same
+    // data-cslp are found.
+    const previousSelectedElementCslp = editableElement?.getAttribute("data-cslp") || "";
+    const previousSelectedElementCslpUniqueId =
+        previousSelectedEditableDOM?.getAttribute("data-cslp-unique-id");
+    const newPreviousSelectedElement =
+        document.querySelector(
+            `[data-cslp-unique-id="${previousSelectedElementCslpUniqueId}"]`
+        ) || document.querySelector(`[data-cslp="${previousSelectedElementCslp}"]`);
     if (!newPreviousSelectedElement && resizeObserver) {
         hideFocusOverlay({
             visualBuilderOverlayWrapper: overlayWrapper,
@@ -148,8 +153,7 @@ export function updateFocussedState({
         psuedoEditableElement.style.visibility = "visible";
     }
 
-    const cslp = editableElement?.getAttribute("data-cslp") || "";
-    const fieldMetadata = extractDetailsFromCslp(cslp);
+    const fieldMetadata = extractDetailsFromCslp(previousSelectedElementCslp);
 
     const targetElementDimension = editableElement.getBoundingClientRect();
     if (targetElementDimension.width && targetElementDimension.height) {
@@ -228,9 +232,13 @@ export function updateFocussedStateOnMutation(
     if (!selectedElement) return;
 
     const selectedElementCslp = selectedElement?.getAttribute("data-cslp");
-    const newSelectedElement = document.querySelector(
-        `[data-cslp="${selectedElementCslp}"]`
+    const selectedElementCslpUniqueId = selectedElement?.getAttribute(
+        "data-cslp-unique-id"
     );
+    const newSelectedElement =
+        document.querySelector(
+            `[data-cslp-unique-id="${selectedElementCslpUniqueId}"]`
+        ) || document.querySelector(`[data-cslp="${selectedElementCslp}"]`);
     if (!newSelectedElement && resizeObserver) {
         hideFocusOverlay({
             visualBuilderOverlayWrapper: focusOverlayWrapper,