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;