diff --git a/.talismanrc b/.talismanrc
index 2b8bd7d7..c7951c73 100644
--- a/.talismanrc
+++ b/.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
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3ab06bca..03e0a92b 100644
--- a/CHANGELOG.md
+++ b/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)
diff --git a/package-lock.json b/package-lock.json
index 108a66dc..b592b69a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "@contentstack/live-preview-utils",
- "version": "3.2.5",
+ "version": "3.3.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "@contentstack/live-preview-utils",
- "version": "3.2.5",
+ "version": "3.3.0",
"license": "MIT",
"dependencies": {
"@floating-ui/dom": "^1.7.2",
diff --git a/package.json b/package.json
index 7df616aa..537db588 100644
--- a/package.json
+++ b/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",
diff --git a/src/visualBuilder/components/__test__/emptyBlock.test.tsx b/src/visualBuilder/components/__test__/emptyBlock.test.tsx
new file mode 100644
index 00000000..d7d5b2c8
--- /dev/null
+++ b/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(
+
+ );
+
+ 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();
+ 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,
+ });
+ });
+});
diff --git a/src/visualBuilder/components/emptyBlock.tsx b/src/visualBuilder/components/emptyBlock.tsx
index 4de70fef..ad932e70 100644
--- a/src/visualBuilder/components/emptyBlock.tsx
+++ b/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{" "}
+
+ {startCase(toLower(blockParentName))}
+ {" "}
+ added. Click the button below to add one.
);
diff --git a/src/visualBuilder/components/icons/index.tsx b/src/visualBuilder/components/icons/index.tsx
index e8be7c7d..d209df86 100644
--- a/src/visualBuilder/components/icons/index.tsx
+++ b/src/visualBuilder/components/icons/index.tsx
@@ -311,22 +311,6 @@ export function WarningOctagonIcon(): JSX.Element {
);
}
-export function MoreIcon(): JSX.Element {
- return (
-
- );
-}
-
export function ContentTypeIcon(): JSX.Element {
return (
{
//@ts-expect-error - We are accessing private method here, but it is necessary to clean up the event listeners.
diff --git a/src/visualBuilder/listeners/mouseHover.ts b/src/visualBuilder/listeners/mouseHover.ts
index 38adc4d8..e1cdc0e9 100644
--- a/src/visualBuilder/listeners/mouseHover.ts
+++ b/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();
diff --git a/src/visualBuilder/utils/types/postMessage.types.ts b/src/visualBuilder/utils/types/postMessage.types.ts
index ec960e3e..58fff010 100644
--- a/src/visualBuilder/utils/types/postMessage.types.ts
+++ b/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",
}
diff --git a/src/visualBuilder/visualBuilder.style.ts b/src/visualBuilder/visualBuilder.style.ts
index c4a1f4f0..19603c87 100644
--- a/src/visualBuilder/visualBuilder.style.ts
+++ b/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;