From 0b02a1d137bde20b7bedc18304dc0f97ed18ddc3 Mon Sep 17 00:00:00 2001 From: Srinadh Reddy Date: Thu, 31 Oct 2024 16:54:44 +0530 Subject: [PATCH 1/7] fix remove highlight variant field classes --- .../useVariantsPostMessageEvent.ts | 42 +++++++++++++------ 1 file changed, 29 insertions(+), 13 deletions(-) diff --git a/src/visualBuilder/eventManager/useVariantsPostMessageEvent.ts b/src/visualBuilder/eventManager/useVariantsPostMessageEvent.ts index d8c3fe3..bd8f529 100644 --- a/src/visualBuilder/eventManager/useVariantsPostMessageEvent.ts +++ b/src/visualBuilder/eventManager/useVariantsPostMessageEvent.ts @@ -11,6 +11,11 @@ interface VariantFieldsEvent { }; }; } +interface RemoveVariantFieldsEvent { + data: { + onlyHighlighted?: boolean; + }; +} interface AudienceEvent { data: { @@ -51,18 +56,29 @@ function addVariantFieldClass( }); } -function removeVariantFieldClass(): void { - const variantAndBaseFieldElements = document.querySelectorAll( - ".visual-builder__disabled-variant-field, .visual-builder__variant-field, .visual-builder__base-field" - ); - variantAndBaseFieldElements.forEach((element) => { - element.classList.remove( - "visual-builder__disabled-variant-field", - "visual-builder__variant-field", - visualBuilderStyles()["visual-builder__variant-field"], - "visual-builder__base-field" +function removeVariantFieldClass(onlyHighlighted: boolean = false): void { + if (onlyHighlighted) { + const variantElements = document.querySelectorAll( + `.${visualBuilderStyles()["visual-builder__variant-field"]}` ); - }); + variantElements.forEach((element) => { + element.classList.remove( + visualBuilderStyles()["visual-builder__variant-field"] + ); + }); + } else { + const variantAndBaseFieldElements = document.querySelectorAll( + ".visual-builder__disabled-variant-field, .visual-builder__variant-field, .visual-builder__base-field" + ); + variantAndBaseFieldElements.forEach((element) => { + element.classList.remove( + "visual-builder__disabled-variant-field", + "visual-builder__variant-field", + visualBuilderStyles()["visual-builder__variant-field"], + "visual-builder__base-field" + ); + }); + } } function setAudienceMode(mode: boolean): void { @@ -106,8 +122,8 @@ export function useVariantFieldsPostMessageEvent(): void { ); visualBuilderPostMessage?.on( VisualBuilderPostMessageEvents.REMOVE_VARIANT_FIELDS, - () => { - removeVariantFieldClass(); + (event: RemoveVariantFieldsEvent) => { + removeVariantFieldClass(event?.data?.onlyHighlighted); } ); } From c6c354bb74515a52cbe77d0c2bd9f03f057ef2dd Mon Sep 17 00:00:00 2001 From: Faraaz Biyabani Date: Mon, 11 Nov 2024 15:58:37 +0530 Subject: [PATCH 2/7] fix: psuedo-editable element re-positioning logic --- .../components/pseudoEditableField.tsx | 26 +-- src/visualBuilder/index.ts | 1 - .../utils/getPsuedoEditableStylesElement.ts | 26 +++ .../utils/getStyleOfAnElement.ts | 2 + .../utils/handleIndividualFields.ts | 1 - .../utils/updateFocussedState.ts | 171 +++++++++++------- 6 files changed, 136 insertions(+), 91 deletions(-) create mode 100644 src/visualBuilder/utils/getPsuedoEditableStylesElement.ts diff --git a/src/visualBuilder/components/pseudoEditableField.tsx b/src/visualBuilder/components/pseudoEditableField.tsx index 3a895aa..302b27b 100644 --- a/src/visualBuilder/components/pseudoEditableField.tsx +++ b/src/visualBuilder/components/pseudoEditableField.tsx @@ -1,8 +1,7 @@ import classNames from "classnames"; -import getCamelCaseStyles from "../utils/getCamelCaseStyles"; -import getStyleOfAnElement from "../utils/getStyleOfAnElement"; import React from "preact/compat"; import { visualBuilderStyles } from "../visualBuilder.style"; +import { getPsuedoEditableElementStyles } from "../utils/getPsuedoEditableStylesElement"; interface PseudoEditableFieldProps { editableElement: HTMLElement; @@ -12,27 +11,14 @@ interface PseudoEditableFieldProps { function PseudoEditableFieldComponent( props: PseudoEditableFieldProps ): JSX.Element { - const styles = getCamelCaseStyles( - getStyleOfAnElement(props.editableElement) - ); - // Get the offsetTop and offsetLeft of the editable element and set the position of the pseudo editable element - // The pseudo editable element is positioned absolutely at the same location as the editable element - const rect = props.editableElement.getBoundingClientRect(); - - styles.position = "absolute"; - styles.top = `${rect.top + window.scrollY}px`; - styles.left = `${rect.left + window.scrollX}px`; - // setting height to auto so that the element can grow based on the content - // and the resize observer can detect the change in height - styles.height = "auto"; - styles.whiteSpace = "pre-line" - styles.textTransform = "none" + const styles = getPsuedoEditableElementStyles(props.editableElement, true); return (
diff --git a/src/visualBuilder/index.ts b/src/visualBuilder/index.ts index d422384..dbbc208 100644 --- a/src/visualBuilder/index.ts +++ b/src/visualBuilder/index.ts @@ -76,7 +76,6 @@ export class VisualBuilder { visualBuilderContainer: this.visualBuilderContainer, overlayWrapper: this.overlayWrapper, focusedToolbar: this.focusedToolbar, - resizeObserver: this.resizeObserver, }); } diff --git a/src/visualBuilder/utils/getPsuedoEditableStylesElement.ts b/src/visualBuilder/utils/getPsuedoEditableStylesElement.ts new file mode 100644 index 0000000..e2369d6 --- /dev/null +++ b/src/visualBuilder/utils/getPsuedoEditableStylesElement.ts @@ -0,0 +1,26 @@ +import getCamelCaseStyles from "./getCamelCaseStyles"; +import getStyleOfAnElement from "./getStyleOfAnElement"; + +export function getPsuedoEditableElementStyles( + psuedoEditableElement: HTMLElement, + camelCase?: boolean +): { [key: string]: string } { + let styles = getStyleOfAnElement(psuedoEditableElement); + if (camelCase) { + styles = getCamelCaseStyles(styles); + } + // Get the offsetTop and offsetLeft of the editable element and set the position of the pseudo editable element + // The pseudo editable element is positioned absolutely at the same location as the editable element + const rect = psuedoEditableElement.getBoundingClientRect(); + + styles.position = "absolute"; + styles.top = `${rect.top + window.scrollY}px`; + styles.left = `${rect.left + window.scrollX}px`; + // setting height to auto so that the element can grow based on the content + // and the resize observer can detect the change in height + styles.height = "auto"; + styles.whiteSpace = "pre-line"; + styles.textTransform = "none"; + + return styles; +} diff --git a/src/visualBuilder/utils/getStyleOfAnElement.ts b/src/visualBuilder/utils/getStyleOfAnElement.ts index ae55576..d70a78b 100644 --- a/src/visualBuilder/utils/getStyleOfAnElement.ts +++ b/src/visualBuilder/utils/getStyleOfAnElement.ts @@ -17,6 +17,8 @@ export default function getStyleOfAnElement(element: HTMLElement): { "right", "bottom", "text-overflow", + // allows seeing the text from CMS field as-is + "text-transform", "margin", "margin-block-end", "margin-block-start", diff --git a/src/visualBuilder/utils/handleIndividualFields.ts b/src/visualBuilder/utils/handleIndividualFields.ts index 5853c47..a371679 100644 --- a/src/visualBuilder/utils/handleIndividualFields.ts +++ b/src/visualBuilder/utils/handleIndividualFields.ts @@ -200,7 +200,6 @@ export async function handleIndividualFields( editableElement: actualEditableField, visualBuilderContainer, overlayWrapper, - resizeObserver, focusedToolbar, }); }, 200); diff --git a/src/visualBuilder/utils/updateFocussedState.ts b/src/visualBuilder/utils/updateFocussedState.ts index 1d6ecaa..2bd5934 100644 --- a/src/visualBuilder/utils/updateFocussedState.ts +++ b/src/visualBuilder/utils/updateFocussedState.ts @@ -3,8 +3,14 @@ import { extractDetailsFromCslp } from "../../cslp"; import { getAddInstanceButtons } from "../generators/generateAddInstanceButtons"; import { addFocusOverlay } from "../generators/generateOverlay"; import { hideHoverOutline } from "../listeners/mouseHover"; -import { LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX, RIGHT_EDGE_BUFFER, TOOLBAR_EDGE_BUFFER, TOP_EDGE_BUFFER } from "./constants"; +import { + LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX, + RIGHT_EDGE_BUFFER, + TOOLBAR_EDGE_BUFFER, + TOP_EDGE_BUFFER, +} from "./constants"; import getChildrenDirection from "./getChildrenDirection"; +import { getPsuedoEditableElementStyles } from "./getPsuedoEditableStylesElement"; import getStyleOfAnElement from "./getStyleOfAnElement"; interface ToolbarPositionParams { @@ -14,29 +20,38 @@ interface ToolbarPositionParams { /** * Adjust the position of the field toolbar instead of clearing the innerhtml fo the focused toolbar. * By doing this, can avoid the re-rendering of the focus field toolbar. -*/ + */ function positionToolbar({ focusedToolbar, selectedElementDimension, }: ToolbarPositionParams): void { if (focusedToolbar) { - const targetElementRightEdgeOffset = window.scrollX + window.innerWidth - selectedElementDimension.left; - const distanceFromTop = selectedElementDimension.top + window.scrollY - TOOLBAR_EDGE_BUFFER; + const targetElementRightEdgeOffset = + window.scrollX + window.innerWidth - selectedElementDimension.left; + const distanceFromTop = + selectedElementDimension.top + window.scrollY - TOOLBAR_EDGE_BUFFER; // Adjust top position based on the available space - const adjustedDistanceFromTop = + const adjustedDistanceFromTop = selectedElementDimension.top + window.scrollY < TOP_EDGE_BUFFER - ? distanceFromTop + selectedElementDimension.height + TOP_EDGE_BUFFER + ? distanceFromTop + + selectedElementDimension.height + + TOP_EDGE_BUFFER : distanceFromTop; - const distanceFromLeft = selectedElementDimension.left - LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX; - const adjustedDistanceFromLeft = Math.max(distanceFromLeft, TOOLBAR_EDGE_BUFFER); + const distanceFromLeft = + selectedElementDimension.left - LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX; + const adjustedDistanceFromLeft = Math.max( + distanceFromLeft, + TOOLBAR_EDGE_BUFFER + ); // Handle right-edge overflow if ( targetElementRightEdgeOffset < RIGHT_EDGE_BUFFER && (focusedToolbar.style.justifyContent !== "flex-end" || - focusedToolbar.style.left !== `${selectedElementDimension.right + LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX}px`) + focusedToolbar.style.left !== + `${selectedElementDimension.right + LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX}px`) ) { focusedToolbar.style.justifyContent = "flex-end"; focusedToolbar.style.left = `${selectedElementDimension.right + LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX}px`; @@ -67,13 +82,11 @@ export function updateFocussedState({ visualBuilderContainer, overlayWrapper, focusedToolbar, - resizeObserver, }: { editableElement: HTMLElement | null; visualBuilderContainer: HTMLDivElement | null; overlayWrapper: HTMLDivElement | null; focusedToolbar: HTMLDivElement | null; - resizeObserver: ResizeObserver; }): void { const previousSelectedEditableDOM = VisualBuilder.VisualBuilderGlobalState.value @@ -94,7 +107,7 @@ export function updateFocussedState({ ".visual-builder__pseudo-editable-element" ) as HTMLElement; if (psuedoEditableElement) { - const styles = getStyleOfAnElement(editableElement); + const styles = getPsuedoEditableElementStyles(editableElement); const styleString = Object.entries(styles).reduce( (acc, [key, value]) => { return `${acc}${key}:${value};`; @@ -102,10 +115,10 @@ export function updateFocussedState({ "" ); psuedoEditableElement.style.cssText = styleString; + // since we are copying styles from the editableEl + // it will now have a visibility of hidden, which we added + // when creating the pseudo editable element, so make the psuedo visible psuedoEditableElement.style.visibility = "visible"; - psuedoEditableElement.style.position = "absolute"; - psuedoEditableElement.style.top = `${editableElement.offsetTop}px`; - psuedoEditableElement.style.left = `${editableElement.offsetLeft}px`; } const cslp = editableElement?.getAttribute("data-cslp") || ""; @@ -113,10 +126,11 @@ export function updateFocussedState({ const targetElementDimension = editableElement.getBoundingClientRect(); if (targetElementDimension.width && targetElementDimension.height) { - const selectedElement = VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM; + const selectedElement = + VisualBuilder.VisualBuilderGlobalState.value + .previousSelectedEditableDOM; - if(!selectedElement) - return; + if (!selectedElement) return; // position the focused tool bar positionToolbar({ focusedToolbar: focusedToolbar, @@ -176,15 +190,15 @@ export function updateFocussedState({ export function updateFocussedStateOnMutation( focusOverlayWrapper: HTMLDivElement | null, focusedToolbar: HTMLDivElement | null, - visualBuilderContainer: HTMLDivElement | null, + visualBuilderContainer: HTMLDivElement | null ) { - if (!focusOverlayWrapper) return; - const selectedElement = VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM; + const selectedElement = + VisualBuilder.VisualBuilderGlobalState.value + .previousSelectedEditableDOM; - if(!selectedElement) - return; + if (!selectedElement) return; const selectedElementDimension = selectedElement.getBoundingClientRect(); @@ -197,7 +211,7 @@ export function updateFocussedStateOnMutation( if (focusOutline) { const focusOutlineDimension = focusOutline.getBoundingClientRect(); - if(!isSameRect(selectedElementDimension, focusOutlineDimension)){ + if (!isSameRect(selectedElementDimension, focusOutlineDimension)) { focusOutline.style.top = `${selectedElementDimension.top + window.scrollY}px`; focusOutline.style.left = `${selectedElementDimension.left}px`; focusOutline.style.width = `${selectedElementDimension.width}px`; @@ -212,29 +226,37 @@ export function updateFocussedStateOnMutation( const focusedOverlayTop = focusOverlayWrapper.querySelector( ".visual-builder__overlay--top" ); - const focusedOverlayBottom = focusOverlayWrapper.querySelector( - ".visual-builder__overlay--bottom" - ); - const focusedOverlayLeft = focusOverlayWrapper.querySelector( - ".visual-builder__overlay--left" - ); - const focusedOverlayRight = focusOverlayWrapper.querySelector( - ".visual-builder__overlay--right" - ); + const focusedOverlayBottom = + focusOverlayWrapper.querySelector( + ".visual-builder__overlay--bottom" + ); + const focusedOverlayLeft = + focusOverlayWrapper.querySelector( + ".visual-builder__overlay--left" + ); + const focusedOverlayRight = + focusOverlayWrapper.querySelector( + ".visual-builder__overlay--right" + ); const distanceFromTop = selectedElementDimension.top + window.scrollY; if (focusedOverlayTop) { const dimension = focusedOverlayTop.getBoundingClientRect(); - if(dimension.height !== distanceFromTop) { + if (dimension.height !== distanceFromTop) { focusedOverlayTop.style.height = `calc(${distanceFromTop}px)`; } } if (focusedOverlayBottom) { const dimension = focusedOverlayBottom.getBoundingClientRect(); - if(dimension.top !== selectedElementDimension.bottom || - dimension.height !== window.document.body.scrollHeight - selectedElementDimension.bottom - window.scrollY) { + if ( + dimension.top !== selectedElementDimension.bottom || + dimension.height !== + window.document.body.scrollHeight - + selectedElementDimension.bottom - + window.scrollY + ) { focusedOverlayBottom.style.top = `${ selectedElementDimension.bottom + window.scrollY }px`; @@ -248,9 +270,11 @@ export function updateFocussedStateOnMutation( if (focusedOverlayLeft) { const dimension = focusedOverlayLeft.getBoundingClientRect(); - if(dimension.top + window.scrollY !== distanceFromTop || + if ( + dimension.top + window.scrollY !== distanceFromTop || dimension.height !== selectedElementDimension.height || - dimension.width !== selectedElementDimension.left) { + dimension.width !== selectedElementDimension.left + ) { focusedOverlayLeft.style.top = `${distanceFromTop}px`; focusedOverlayLeft.style.height = `${selectedElementDimension.height}px`; focusedOverlayLeft.style.width = `${selectedElementDimension.left}px`; @@ -259,16 +283,21 @@ export function updateFocussedStateOnMutation( if (focusedOverlayRight) { const dimension = focusedOverlayRight.getBoundingClientRect(); - if(dimension.left !== selectedElementDimension.right || + if ( + dimension.left !== selectedElementDimension.right || dimension.top + window.scrollY !== distanceFromTop || dimension.height !== selectedElementDimension.height || - dimension.width !== document.documentElement.clientWidth - selectedElementDimension.right) { - focusedOverlayRight.style.left = `${selectedElementDimension.right}px`; - focusedOverlayRight.style.top = `${distanceFromTop}px`; - focusedOverlayRight.style.height = `${selectedElementDimension.height}px`; - focusedOverlayRight.style.width = `${ - document.documentElement.clientWidth - selectedElementDimension.right - }px`; + dimension.width !== + document.documentElement.clientWidth - + selectedElementDimension.right + ) { + focusedOverlayRight.style.left = `${selectedElementDimension.right}px`; + focusedOverlayRight.style.top = `${distanceFromTop}px`; + focusedOverlayRight.style.height = `${selectedElementDimension.height}px`; + focusedOverlayRight.style.width = `${ + document.documentElement.clientWidth - + selectedElementDimension.right + }px`; } } @@ -277,13 +306,16 @@ export function updateFocussedStateOnMutation( */ if (focusedToolbar) { - const targetElementRightEdgeOffset = window.scrollX + window.innerWidth - selectedElementDimension.left; + const targetElementRightEdgeOffset = + window.scrollX + window.innerWidth - selectedElementDimension.left; const distanceFromTop = selectedElementDimension.top + window.scrollY - TOOLBAR_EDGE_BUFFER; // Position the toolbar at the top unless there's insufficient space or scrolling up is not possible (topmost element targetted). const adjustedDistanceFromTop = selectedElementDimension.top + window.scrollY < TOP_EDGE_BUFFER - ? distanceFromTop + selectedElementDimension.height + TOP_EDGE_BUFFER + ? distanceFromTop + + selectedElementDimension.height + + TOP_EDGE_BUFFER : distanceFromTop; const distanceFromLeft = @@ -293,25 +325,30 @@ export function updateFocussedStateOnMutation( TOOLBAR_EDGE_BUFFER ); - if (targetElementRightEdgeOffset < RIGHT_EDGE_BUFFER && - ( focusedToolbar.style.justifyContent !== "flex-end" || - focusedToolbar.style.left !== `${ - selectedElementDimension.right + LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX - }px` ) + if ( + targetElementRightEdgeOffset < RIGHT_EDGE_BUFFER && + (focusedToolbar.style.justifyContent !== "flex-end" || + focusedToolbar.style.left !== + `${ + selectedElementDimension.right + + LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX + }px`) ) { // Overflow / Cutoff on right edge focusedToolbar.style.justifyContent = "flex-end"; focusedToolbar.style.left = `${ - selectedElementDimension.right + LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX + selectedElementDimension.right + + LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX }px`; - } else if (focusedToolbar.style.justifyContent !== "flex-start" || + } else if ( + focusedToolbar.style.justifyContent !== "flex-start" || focusedToolbar.style.left !== `${adjustedDistanceFromLeft}px` ) { focusedToolbar.style.justifyContent = "flex-start"; // default focusedToolbar.style.left = `${adjustedDistanceFromLeft}px`; } - if(focusedToolbar.style.top !== `${adjustedDistanceFromTop}px`){ + if (focusedToolbar.style.top !== `${adjustedDistanceFromTop}px`) { focusedToolbar.style.top = `${adjustedDistanceFromTop}px`; } } @@ -325,27 +362,23 @@ export function updateFocussedStateOnMutation( ".visual-builder__pseudo-editable-element" ) as HTMLElement; const editableElement = selectedElement as HTMLElement; - const styles = getStyleOfAnElement(editableElement); + const styles = getPsuedoEditableElementStyles(editableElement); const styleString = Object.entries(styles).reduce( (acc, [key, value]) => { return `${acc}${key}:${value};`; }, "" ); - if (psuedoEditableElement && - ( - psuedoEditableElement.style.cssText !== styleString || - psuedoEditableElement.style.visibility !== "visible" || - psuedoEditableElement.style.position !== "absolute" || - psuedoEditableElement.style.top !== `${editableElement.offsetTop}px` || - psuedoEditableElement.style.left !== `${editableElement.offsetLeft}px` - ) + if ( + psuedoEditableElement && + (psuedoEditableElement.style.cssText !== styleString || + psuedoEditableElement.style.visibility !== "visible") ) { psuedoEditableElement.style.cssText = styleString; + // since we are copying styles from the editableEl + // it will now have a visibility of hidden, which we added + // when creating the pseudo editable element, so make the psuedo visible psuedoEditableElement.style.visibility = "visible"; - psuedoEditableElement.style.position = "absolute"; - psuedoEditableElement.style.top = `${editableElement.offsetTop}px`; - psuedoEditableElement.style.left = `${editableElement.offsetLeft}px`; } } } @@ -357,4 +390,4 @@ function isSameRect(rect1: DOMRect, rect2: DOMRect) { rect1.width === rect2.width && rect1.height === rect2.height ); -} \ No newline at end of file +} From 7a9a14ef91cb79b96e8b90b25c3e1f45a817edb2 Mon Sep 17 00:00:00 2001 From: Sairaj Chouhan Date: Mon, 11 Nov 2024 16:38:31 +0530 Subject: [PATCH 3/7] chore: hide overlay on delete event --- src/visualBuilder/components/FieldToolbar.tsx | 9 +++++++++ src/visualBuilder/generators/generateToolbar.tsx | 9 ++++++--- src/visualBuilder/listeners/mouseClick.ts | 12 ++++++++++-- 3 files changed, 25 insertions(+), 5 deletions(-) diff --git a/src/visualBuilder/components/FieldToolbar.tsx b/src/visualBuilder/components/FieldToolbar.tsx index 1c91694..b2794a5 100644 --- a/src/visualBuilder/components/FieldToolbar.tsx +++ b/src/visualBuilder/components/FieldToolbar.tsx @@ -46,6 +46,7 @@ const TOOLTIP_TOP_EDGE_BUFFER = 96; interface MultipleFieldToolbarProps { eventDetails: VisualBuilderCslpEventDetails; + hideOverlay: () => void; }; function handleReplaceAsset(fieldMetadata: CslpData) { @@ -309,6 +310,14 @@ function FieldToolbarComponent( fetchFieldSchema(); }, [fieldMetadata]); + useEffect(() => { + visualBuilderPostMessage?.on(VisualBuilderPostMessageEvents.DELETE_INSTANCE, (args: { data: { path: string } }) => { + if(args.data?.path === fieldMetadata.instance.fieldPathWithIndex){ + props.hideOverlay() + } + }) + }, []) + const multipleFieldToolbarButtonClasses = classNames( "visual-builder__button visual-builder__button--secondary", visualBuilderStyles()["visual-builder__button"], diff --git a/src/visualBuilder/generators/generateToolbar.tsx b/src/visualBuilder/generators/generateToolbar.tsx index 25b75ac..862a758 100644 --- a/src/visualBuilder/generators/generateToolbar.tsx +++ b/src/visualBuilder/generators/generateToolbar.tsx @@ -15,15 +15,17 @@ import FieldLabelWrapperComponent from "../components/fieldLabelWrapper"; export function appendFocusedToolbar( eventDetails: VisualBuilderCslpEventDetails, - focusedToolbarElement: HTMLDivElement + focusedToolbarElement: HTMLDivElement, + hideOverlay: () => void ): void { appendFieldPathDropdown(eventDetails, focusedToolbarElement); - appendFieldToolbar(eventDetails, focusedToolbarElement); + appendFieldToolbar(eventDetails, focusedToolbarElement, hideOverlay); } export function appendFieldToolbar( eventDetails: VisualBuilderCslpEventDetails, - focusedToolbarElement: HTMLDivElement + focusedToolbarElement: HTMLDivElement, + hideOverlay: () => void ): void { if ( focusedToolbarElement.querySelector( @@ -35,6 +37,7 @@ export function appendFieldToolbar( render( , wrapper ); diff --git a/src/visualBuilder/listeners/mouseClick.ts b/src/visualBuilder/listeners/mouseClick.ts index a596d8b..9e1b81b 100644 --- a/src/visualBuilder/listeners/mouseClick.ts +++ b/src/visualBuilder/listeners/mouseClick.ts @@ -35,7 +35,7 @@ type AddFocusOverlayParams = Pick< type AddFocusedToolbarParams = Pick< EventListenerHandlerParams, "eventDetails" | "focusedToolbar" ->; +> & { hideOverlay: () => void }; function addOverlay(params: AddFocusOverlayParams) { if (!params.overlayWrapper || !params.editableElement) return; @@ -53,7 +53,7 @@ export function addFocusedToolbar(params: AddFocusedToolbarParams): void { if (!editableElement || !params.focusedToolbar) return; - appendFocusedToolbar(params.eventDetails, params.focusedToolbar); + appendFocusedToolbar(params.eventDetails, params.focusedToolbar, params.hideOverlay); } async function handleBuilderInteraction( @@ -143,6 +143,14 @@ async function handleBuilderInteraction( addFocusedToolbar({ eventDetails: eventDetails, focusedToolbar: params.focusedToolbar, + hideOverlay: () => { + hideOverlay({ + visualBuilderContainer: params.visualBuilderContainer, + visualBuilderOverlayWrapper: params.overlayWrapper, + focusedToolbar: params.focusedToolbar, + resizeObserver: params.resizeObserver, + }); + } }); const { content_type_uid, fieldPath, cslpValue } = fieldMetadata; From acf814e0010f1d300cdaeb2197eb4b894d01d362 Mon Sep 17 00:00:00 2001 From: Srinadh Reddy Date: Tue, 12 Nov 2024 11:09:04 +0530 Subject: [PATCH 4/7] remove position relative on element --- src/livePreview/editButton/editButton.style.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/livePreview/editButton/editButton.style.ts b/src/livePreview/editButton/editButton.style.ts index f9e0e45..6855f15 100644 --- a/src/livePreview/editButton/editButton.style.ts +++ b/src/livePreview/editButton/editButton.style.ts @@ -4,7 +4,6 @@ export function cslpTagStyles() { return { "cslp-edit-mode": css` outline: 1px dashed #6c5ce7 !important; - position: relative !important; `, "cslp-tooltip": css` padding: 0; From 43ae117dee35f6248200bbbee8227839b8066875 Mon Sep 17 00:00:00 2001 From: Faraaz Biyabani Date: Tue, 12 Nov 2024 12:03:14 +0530 Subject: [PATCH 5/7] 3.0.1 --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index b44e598..0e1d0ee 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@contentstack/live-preview-utils", - "version": "3.0.0", + "version": "3.0.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@contentstack/live-preview-utils", - "version": "3.0.0", + "version": "3.0.1", "license": "MIT", "dependencies": { "@preact/compat": "^17.1.2", diff --git a/package.json b/package.json index baa8088..b841385 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@contentstack/live-preview-utils", - "version": "3.0.0", + "version": "3.0.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", From 7a5edf52fb6b04f3ee1d0464d6016550a0c84693 Mon Sep 17 00:00:00 2001 From: Faraaz Biyabani Date: Tue, 12 Nov 2024 15:52:51 +0530 Subject: [PATCH 6/7] chore: update version --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 285d049..c34b991 100644 --- a/README.md +++ b/README.md @@ -16,7 +16,7 @@ Alternatively, if you want to include the package directly in your website HTML ```html