chore(VE-6918/error-text): warning message improved

.talismanrc

@@ -5,7 +5,7 @@ fileignoreconfig:
     - filename: README.md
       checksum: 568289bbe7c088967493db246dbf29e465382648ac574c1b1236be57d5662a38
     - filename: CHANGELOG.md
-      checksum: 09ed2613ba45ee13b6dbb4fc178911e93674d4e5c40af026d66266ea172374a4
+      checksum: ed794e2f5c5884f74af12e5f5bfbb117c08ba454104f929df3deb7627407317a
     - filename: src/visualBuilder/components/__test__/fieldToolbar.test.tsx
       checksum: 3badd6a142456b6a361569e6fc546349a38ac6b366bef7fd5255d1e93220444e
     - filename: src/visualBuilder/components/Collab/ThreadPopup/__test__/CommentTextArea.test.tsx

CHANGELOG.md

@@ -1,8 +1,27 @@
 # Changelog
 
+## [v3.3.0](https://github.com/contentstack/live-preview-sdk/compare/v3.2.5...v3.3.0)
+
+> 24 July 2025
+
+### Fixes
+
+- Fix: HoverToolbar to not render when focussed (Ayush Dubey - [#461](https://github.com/contentstack/live-preview-sdk/pull/461))
+
+### General Changes
+
+- Release 24 July to stage_v3 (Sairaj - [#473](https://github.com/contentstack/live-preview-sdk/pull/473))
+- HoverToolbar: Requested Changes (Ayush Dubey - [#464](https://github.com/contentstack/live-preview-sdk/pull/464))
+- [Feature] HoverToolbar (Ayush Dubey - [#455](https://github.com/contentstack/live-preview-sdk/pull/455))
+
 ## [v3.2.5](https://github.com/contentstack/live-preview-sdk/compare/v3.2.4...v3.2.5)
 
-> 9 July 2025
+> 10 July 2025
+
+### New Features
+
+- feat: v3.2.5 lp sdk (Karan Gandhi - [#454](https://github.com/contentstack/live-preview-sdk/pull/454))
+- feat: v3.2.5 (Karan Gandhi - [#452](https://github.com/contentstack/live-preview-sdk/pull/452))
 
 ### Fixes
 
@@ -24,9 +43,11 @@
 - fix: psuedo-editable height collapse (Faraaz Biyabani - [f28d629](https://github.com/contentstack/live-preview-sdk/commit/f28d629d362d5820b8583f748b42bd98d464c180))
 - fix: changed DOM events (csAyushDubey - [8e433b4](https://github.com/contentstack/live-preview-sdk/commit/8e433b41328acefd969ba157d25cf6f6ad5cc351))
 - fix: test fix (csAyushDubey - [af6acf5](https://github.com/contentstack/live-preview-sdk/commit/af6acf5eba9236ba3fb13bb32da8fdade9063d51))
+- fix: talisman update (Karan Gandhi - [cf73f0b](https://github.com/contentstack/live-preview-sdk/commit/cf73f0b267e3c42e2fce13579ca014d5edae1a57))
 
 ### Chores And Housekeeping
 
+- chore: changelog update (Karan Gandhi - [f3a512e](https://github.com/contentstack/live-preview-sdk/commit/f3a512e3b72c9a956b2d1580af34d6c4c7e94ecc))
 - chore: update README.md to reference ContentstackLivePreview version 3.2.5 (hiteshshetty-dev - [e063d6e](https://github.com/contentstack/live-preview-sdk/commit/e063d6ef8fd95faaef612981f4586b4db66f9e4d))
 
 ## [v3.2.4](https://github.com/contentstack/live-preview-sdk/compare/v3.2.3...v3.2.4)

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@contentstack/live-preview-utils",
-    "version": "3.2.5",
+    "version": "3.3.0",
     "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/visualBuilder/components/__test__/emptyBlock.test.tsx

@@ -0,0 +1,73 @@
+import React from "preact/compat";
+import { render, fireEvent, waitFor } from "@testing-library/preact";
+import { EmptyBlock } from "../emptyBlock";
+import visualBuilderPostMessage from "../../utils/visualBuilderPostMessage";
+import { observeParentAndFocusNewInstance } from "../../utils/multipleElementAddButton";
+import { CslpData } from "../../../cslp/types/cslp.types";
+import { ISchemaFieldMap } from "../../utils/types/index.types";
+import { VisualBuilderPostMessageEvents } from "../../utils/types/postMessage.types";
+
+vi.mock("../../utils/visualBuilderPostMessage", () => ({
+    default: {
+        send: vi.fn(),
+    },
+}));
+
+vi.mock("../../utils/multipleElementAddButton", () => ({
+    observeParentAndFocusNewInstance: vi.fn(),
+}));
+
+describe("EmptyBlock", () => {
+    const mockDetails = {
+        fieldMetadata: {
+            cslpValue: "parent.cslp.value",
+        } as CslpData,
+        fieldSchema: {
+            display_name: "Test Block",
+        } as ISchemaFieldMap,
+    };
+
+    afterEach(() => {
+        vi.clearAllMocks();
+    });
+
+    test("should render correctly", () => {
+        const { getByText, getByTestId } = render(
+            <EmptyBlock details={mockDetails} />
+        );
+
+        expect(
+            getByText(
+                (_, element) =>
+                    element?.textContent ===
+                    "This page doesn’t have any Test Block added. Click the button below to add one."
+            )
+        ).toBeTruthy();
+        expect(
+            getByTestId("visual-builder__empty-block-add-button")
+        ).toBeTruthy();
+        expect(getByText("Add Test Block")).toBeTruthy();
+    });
+
+    test("should call sendAddInstanceEvent on button click", async () => {
+        const { getByTestId } = render(<EmptyBlock details={mockDetails} />);
+        const addButton = getByTestId("visual-builder__empty-block-add-button");
+
+        fireEvent.click(addButton);
+
+        await waitFor(() => {
+            expect((visualBuilderPostMessage as any).send).toHaveBeenCalledWith(
+                VisualBuilderPostMessageEvents.ADD_INSTANCE,
+                {
+                    fieldMetadata: mockDetails.fieldMetadata,
+                    index: 0,
+                }
+            );
+        });
+
+        expect(observeParentAndFocusNewInstance).toHaveBeenCalledWith({
+            parentCslp: mockDetails.fieldMetadata.cslpValue,
+            index: 0,
+        });
+    });
+});

src/visualBuilder/components/emptyBlock.tsx

@@ -6,6 +6,7 @@ import { observeParentAndFocusNewInstance } from "../utils/multipleElementAddBut
 import { ISchemaFieldMap } from "../utils/types/index.types";
 import { VisualBuilderPostMessageEvents } from "../utils/types/postMessage.types";
 import React from "preact/compat";
+import { startCase, toLower } from "lodash-es";
 
 interface EmptyBlockProps {
     details: {
@@ -46,7 +47,18 @@ export function EmptyBlock(props: EmptyBlockProps): JSX.Element {
                     visualBuilderStyles()["visual-builder__empty-block-title"]
                 )}
             >
-                There are no {blockParentName.toLowerCase()} on this page yet. Click the button below to add one.
+                This page doesn’t have any{" "}
+                <span
+                    className={classNames(
+                        "visual-builder__empty-block-field-name",
+                        visualBuilderStyles()[
+                            "visual-builder__empty-block-field-name"
+                        ]
+                    )}
+                >
+                    {startCase(toLower(blockParentName))}
+                </span>{" "}
+                added. Click the button below to add one.
             </div>
             <button
                 className={classNames(
@@ -59,8 +71,17 @@ export function EmptyBlock(props: EmptyBlockProps): JSX.Element {
                 type="button"
                 data-testid="visual-builder__empty-block-add-button"
             >
-                <i className="fas fa-plus"></i> &nbsp;
-                {blockParentName}
+                <span
+                    className={classNames(
+                        "visual-builder__empty-block-plus-icon",
+                        visualBuilderStyles()[
+                            "visual-builder__empty-block-plus-icon"
+                        ]
+                    )}
+                >
+                    +
+                </span>
+                &nbsp; Add {blockParentName}
             </button>
         </div>
     );

src/visualBuilder/components/icons/index.tsx

@@ -311,22 +311,6 @@ export function WarningOctagonIcon(): JSX.Element {
     );
 }
 
-export function MoreIcon(): JSX.Element {
-    return (
-        <svg
-            width="32"
-            height="32"
-            viewBox="0 0 24 24"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-        >
-            <circle cx="12" cy="6" r="2" fill="#475161" />
-            <circle cx="12" cy="12" r="2" fill="#475161" />
-            <circle cx="12" cy="18" r="2" fill="#475161" />
-        </svg>
-    );
-}
-
 export function ContentTypeIcon(): JSX.Element {
     return (
         <div

src/visualBuilder/generators/generateToolbar.tsx

@@ -178,7 +178,6 @@ export function removeFieldToolbar(toolbar: Element) {
     const toolbarEvents = [
         VisualBuilderPostMessageEvents.DELETE_INSTANCE,
         VisualBuilderPostMessageEvents.UPDATE_DISCUSSION_ID,
-        VisualBuilderPostMessageEvents.FIELD_LOCATION_DATA
     ];
     toolbarEvents.forEach((event) => {
         //@ts-expect-error - We are accessing private method here, but it is necessary to clean up the event listeners.

src/visualBuilder/listeners/mouseHover.ts

@@ -200,10 +200,6 @@ function isFieldPathDropdown(target: HTMLElement): boolean {
     return target.classList.contains("visual-builder__focused-toolbar__field-label-wrapper") || target.classList.contains("visual-builder__focused-toolbar__field-label-wrapper__current-field");
 }
 
-function isFieldPathParent(target: HTMLElement): boolean {
-    return target.classList.contains("visual-builder__focused-toolbar__field-label-wrapper__parent-field");
-}
-
 const throttledMouseHover = throttle(async (params: HandleMouseHoverParams) => {
     const eventDetails = getCsDataOfElement(params.event);
     const eventTarget = params.event.target as HTMLElement | null;
@@ -225,7 +221,7 @@ const throttledMouseHover = throttle(async (params: HandleMouseHoverParams) => {
         }
         if(
             eventTarget &&
-            (isFieldPathDropdown(eventTarget) || isFieldPathParent(eventTarget))
+            isFieldPathDropdown(eventTarget)
         ) {
             params.customCursor && hideCustomCursor(params.customCursor);
             showOutline();

src/visualBuilder/utils/types/postMessage.types.ts

@@ -52,5 +52,4 @@ export enum VisualBuilderPostMessageEvents {
     COLLAB_THREADS_REMOVE = "collab-threads-remove",
     COLLAB_THREAD_REOPEN = "collab-thread-reopen",
     COLLAB_THREAD_HIGHLIGHT = "collab-thread-highlight",
-    TOGGLE_SCROLL = "toggle-scroll",
 }

src/visualBuilder/visualBuilder.style.ts

@@ -121,6 +121,13 @@ export function visualBuilderStyles() {
                 visibility: visible;
             }
         `,
+        "visual-builder__empty-block-plus-icon": css`
+            font-size: 22px;
+            font-weight: 300;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        `,
         "visual-builder__overlay--outline": css`
             position: absolute;
             outline: 4px solid #715cdd;
@@ -571,19 +578,24 @@ export function visualBuilderStyles() {
             line-height: 100%;
             color: #647696;
         `,
+        "visual-builder__empty-block-field-name": css`
+            font-weight: 700;
+        `,
         "visual-builder__empty-block-add-button": css`
             height: 32px;
             border-radius: 4px;
             background: #f9f8ff;
             border-color: #6c5ce7;
             border-width: 1px;
-            padding: 8px 16px 8px 16px;
+            padding: 0 16px;
             font-size: 0.9rem;
             font-family: Inter;
             font-weight: 600;
             color: #6c5ce7;
-            padding-block: 0px;
             letter-spacing: 0.01rem;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
         `,
         "visual-builder__hover-outline": css`
             position: absolute;