npm - @contentstack/live-preview-utils - Versions diffs - 3.0.0 → 3.0.1 - Mend

@contentstack/live-preview-utils 3.0.0 → 3.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (118) hide show

package/dist/legacy/visualBuilder/utils/updateFocussedState.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/visualBuilder/utils/updateFocussedState.ts"],"sourcesContent":["import { VisualBuilder } from \"..\";\nimport { extractDetailsFromCslp } from \"../../cslp\";\nimport { getAddInstanceButtons } from \"../generators/generateAddInstanceButtons\";\nimport { addFocusOverlay } from \"../generators/generateOverlay\";\nimport { hideHoverOutline } from \"../listeners/mouseHover\";\nimport { LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX, RIGHT_EDGE_BUFFER, TOOLBAR_EDGE_BUFFER, TOP_EDGE_BUFFER } from \"./constants\";\nimport getChildrenDirection from \"./getChildrenDirection\";\nimport getStyleOfAnElement from \"./getStyleOfAnElement\";\n\ninterface ToolbarPositionParams {\n focusedToolbar: HTMLElement \| null;\n selectedElementDimension: DOMRect;\n}\n/*\n Adjust the position of the field toolbar instead of clearing the innerhtml fo the focused toolbar.\n * By doing this, can avoid the re-rendering of the focus field toolbar.\n/\nfunction positionToolbar({\n focusedToolbar,\n selectedElementDimension,\n}: ToolbarPositionParams): void {\n if (focusedToolbar) {\n const targetElementRightEdgeOffset = window.scrollX + window.innerWidth - selectedElementDimension.left;\n const distanceFromTop = selectedElementDimension.top + window.scrollY - TOOLBAR_EDGE_BUFFER;\n\n // Adjust top position based on the available space\n const adjustedDistanceFromTop = \n selectedElementDimension.top + window.scrollY < TOP_EDGE_BUFFER\n ? distanceFromTop + selectedElementDimension.height + TOP_EDGE_BUFFER\n : distanceFromTop;\n\n const distanceFromLeft = selectedElementDimension.left - LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX;\n const adjustedDistanceFromLeft = Math.max(distanceFromLeft, TOOLBAR_EDGE_BUFFER);\n\n // Handle right-edge overflow\n if (\n targetElementRightEdgeOffset < RIGHT_EDGE_BUFFER &&\n (focusedToolbar.style.justifyContent !== \"flex-end\" \|\|\n focusedToolbar.style.left !== `${selectedElementDimension.right + LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX}px`)\n ) {\n focusedToolbar.style.justifyContent = \"flex-end\";\n focusedToolbar.style.left = `${selectedElementDimension.right + LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX}px`;\n } else if (\n focusedToolbar.style.justifyContent !== \"flex-start\" \|\|\n focusedToolbar.style.left !== `${adjustedDistanceFromLeft}px`\n ) {\n focusedToolbar.style.justifyContent = \"flex-start\"; // Default\n focusedToolbar.style.left = `${adjustedDistanceFromLeft}px`;\n }\n\n // Adjust top position if necessary\n if (focusedToolbar.style.top !== `${adjustedDistanceFromTop}px`) {\n focusedToolbar.style.top = `${adjustedDistanceFromTop}px`;\n }\n }\n}\n\n/\n This function can be used to re-draw/update the focussed state of an element.\n * The focussed state includes the overlay, psuedo-editable, toolbar, and multiple\n * instance add buttons. It is similar to handleBuilderInteraction but it does not\n * create new elements, it just updates the existing ones whenever possible.\n * NOTE: breakdown this function into multiple functions when the need arises\n /\nexport function updateFocussedState({\n editableElement,\n visualBuilderContainer,\n overlayWrapper,\n focusedToolbar,\n resizeObserver,\n}: {\n editableElement: HTMLElement \| null;\n visualBuilderContainer: HTMLDivElement \| null;\n overlayWrapper: HTMLDivElement \| null;\n focusedToolbar: HTMLDivElement \| null;\n resizeObserver: ResizeObserver;\n}): void {\n const previousSelectedEditableDOM =\n VisualBuilder.VisualBuilderGlobalState.value\n .previousSelectedEditableDOM;\n if (\n !visualBuilderContainer \|\|\n !editableElement \|\|\n !previousSelectedEditableDOM \|\|\n !overlayWrapper\n ) {\n return;\n }\n hideHoverOutline(visualBuilderContainer);\n addFocusOverlay(previousSelectedEditableDOM, overlayWrapper);\n\n // update psuedo editable element if present\n const psuedoEditableElement = visualBuilderContainer.querySelector(\n \".visual-builder__pseudo-editable-element\"\n ) as HTMLElement;\n if (psuedoEditableElement) {\n const styles = getStyleOfAnElement(editableElement);\n const styleString = Object.entries(styles).reduce(\n (acc, [key, value]) => {\n return `${acc}${key}:${value};`;\n },\n \"\"\n );\n psuedoEditableElement.style.cssText = styleString;\n psuedoEditableElement.style.visibility = \"visible\";\n psuedoEditableElement.style.position = \"absolute\";\n psuedoEditableElement.style.top = `${editableElement.offsetTop}px`;\n psuedoEditableElement.style.left = `${editableElement.offsetLeft}px`;\n }\n\n const cslp = editableElement?.getAttribute(\"data-cslp\") \|\| \"\";\n const fieldMetadata = extractDetailsFromCslp(cslp);\n\n const targetElementDimension = editableElement.getBoundingClientRect();\n if (targetElementDimension.width && targetElementDimension.height) {\n const selectedElement = VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM;\n\n if(!selectedElement)\n return;\n // position the focused tool bar\n positionToolbar({\n focusedToolbar: focusedToolbar,\n selectedElementDimension: selectedElement.getBoundingClientRect(),\n });\n }\n\n // re-add multiple instance add buttons\n const buttons = getAddInstanceButtons(visualBuilderContainer);\n const parentCslpValue =\n fieldMetadata.multipleFieldMetadata?.parentDetails?.parentCslpValue;\n if (\n buttons &&\n parentCslpValue &&\n buttons.length > 1 &&\n buttons[0] &&\n buttons[1]\n ) {\n const [previousButton, nextButton] = buttons;\n const direction = getChildrenDirection(\n editableElement,\n parentCslpValue\n );\n const targetDOMDimension = editableElement.getBoundingClientRect();\n\n if (direction === \"horizontal\") {\n const middleHeight =\n targetDOMDimension.top +\n (targetDOMDimension.bottom - targetDOMDimension.top) / 2 +\n window.scrollY;\n previousButton.style.left = `${targetDOMDimension.left}px`;\n previousButton.style.top = `${middleHeight}px`;\n\n nextButton.style.left = `${targetDOMDimension.right}px`;\n nextButton.style.top = `${middleHeight}px`;\n } else if (direction === \"vertical\") {\n const middleWidth =\n targetDOMDimension.left +\n (targetDOMDimension.right - targetDOMDimension.left) / 2;\n previousButton.style.left = `${middleWidth}px`;\n previousButton.style.top = `${\n targetDOMDimension.top + window.scrollY\n }px`;\n\n nextButton.style.left = `${middleWidth}px`;\n nextButton.style.top = `${\n targetDOMDimension.bottom + window.scrollY\n }px`;\n }\n }\n}\n\n/\n This function is used to resize/reposition focus overlay and toolbar due to a\n * mutation in the DOM or due to changes in a different field (other than the focussed field).\n /\nexport function updateFocussedStateOnMutation(\n focusOverlayWrapper: HTMLDivElement \| null,\n focusedToolbar: HTMLDivElement \| null,\n visualBuilderContainer: HTMLDivElement \| null,\n) {\n \n if (!focusOverlayWrapper) return;\n\n const selectedElement = VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM;\n\n if(!selectedElement)\n return;\n\n const selectedElementDimension = selectedElement.getBoundingClientRect();\n\n /\n Update the focus outline if it exists.\n /\n const focusOutline = focusOverlayWrapper.querySelector<HTMLDivElement>(\n \".visual-builder__overlay--outline\"\n );\n\n if (focusOutline) {\n const focusOutlineDimension = focusOutline.getBoundingClientRect();\n if(!isSameRect(selectedElementDimension, focusOutlineDimension)){\n focusOutline.style.top = `${selectedElementDimension.top + window.scrollY}px`;\n focusOutline.style.left = `${selectedElementDimension.left}px`;\n focusOutline.style.width = `${selectedElementDimension.width}px`;\n focusOutline.style.height = `${selectedElementDimension.height}px`;\n }\n }\n\n /\n Update the focus overlays if they exists.\n /\n\n const focusedOverlayTop = focusOverlayWrapper.querySelector<HTMLDivElement>(\n \".visual-builder__overlay--top\"\n );\n const focusedOverlayBottom = focusOverlayWrapper.querySelector<HTMLDivElement>(\n \".visual-builder__overlay--bottom\"\n );\n const focusedOverlayLeft = focusOverlayWrapper.querySelector<HTMLDivElement>(\n \".visual-builder__overlay--left\"\n );\n const focusedOverlayRight = focusOverlayWrapper.querySelector<HTMLDivElement>(\n \".visual-builder__overlay--right\"\n );\n\n const distanceFromTop = selectedElementDimension.top + window.scrollY;\n\n if (focusedOverlayTop) {\n const dimension = focusedOverlayTop.getBoundingClientRect();\n if(dimension.height !== distanceFromTop) {\n focusedOverlayTop.style.height = `calc(${distanceFromTop}px)`;\n }\n }\n\n if (focusedOverlayBottom) {\n const dimension = focusedOverlayBottom.getBoundingClientRect();\n if(dimension.top !== selectedElementDimension.bottom \|\|\n dimension.height !== window.document.body.scrollHeight - selectedElementDimension.bottom - window.scrollY) {\n focusedOverlayBottom.style.top = `${\n selectedElementDimension.bottom + window.scrollY\n }px`;\n focusedOverlayBottom.style.height = `${\n window.document.body.scrollHeight -\n selectedElementDimension.bottom -\n window.scrollY\n }px`;\n }\n }\n\n if (focusedOverlayLeft) {\n const dimension = focusedOverlayLeft.getBoundingClientRect();\n if(dimension.top + window.scrollY !== distanceFromTop \|\|\n dimension.height !== selectedElementDimension.height \|\|\n dimension.width !== selectedElementDimension.left) {\n focusedOverlayLeft.style.top = `${distanceFromTop}px`;\n focusedOverlayLeft.style.height = `${selectedElementDimension.height}px`;\n focusedOverlayLeft.style.width = `${selectedElementDimension.left}px`;\n }\n }\n\n if (focusedOverlayRight) {\n const dimension = focusedOverlayRight.getBoundingClientRect();\n if(dimension.left !== selectedElementDimension.right \|\|\n dimension.top + window.scrollY !== distanceFromTop \|\|\n dimension.height !== selectedElementDimension.height \|\|\n dimension.width !== document.documentElement.clientWidth - selectedElementDimension.right) {\n focusedOverlayRight.style.left = `${selectedElementDimension.right}px`;\n focusedOverlayRight.style.top = `${distanceFromTop}px`;\n focusedOverlayRight.style.height = `${selectedElementDimension.height}px`;\n focusedOverlayRight.style.width = `${\n document.documentElement.clientWidth - selectedElementDimension.right\n }px`;\n }\n }\n\n /\n Update the focus toolbar if it exists.\n /\n\n if (focusedToolbar) {\n const targetElementRightEdgeOffset = window.scrollX + window.innerWidth - selectedElementDimension.left;\n const distanceFromTop =\n selectedElementDimension.top + window.scrollY - TOOLBAR_EDGE_BUFFER;\n // Position the toolbar at the top unless there's insufficient space or scrolling up is not possible (topmost element targetted).\n const adjustedDistanceFromTop =\n selectedElementDimension.top + window.scrollY < TOP_EDGE_BUFFER\n ? distanceFromTop + selectedElementDimension.height + TOP_EDGE_BUFFER\n : distanceFromTop;\n\n const distanceFromLeft =\n selectedElementDimension.left - LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX;\n const adjustedDistanceFromLeft = Math.max(\n distanceFromLeft,\n TOOLBAR_EDGE_BUFFER\n );\n\n if (targetElementRightEdgeOffset < RIGHT_EDGE_BUFFER &&\n ( focusedToolbar.style.justifyContent !== \"flex-end\" \|\|\n focusedToolbar.style.left !== `${\n selectedElementDimension.right + LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX\n }px` )\n ) {\n // Overflow / Cutoff on right edge\n focusedToolbar.style.justifyContent = \"flex-end\";\n focusedToolbar.style.left = `${\n selectedElementDimension.right + LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX\n }px`;\n } else if (focusedToolbar.style.justifyContent !== \"flex-start\" \|\|\n focusedToolbar.style.left !== `${adjustedDistanceFromLeft}px`\n ) {\n focusedToolbar.style.justifyContent = \"flex-start\"; // default\n focusedToolbar.style.left = `${adjustedDistanceFromLeft}px`;\n }\n\n if(focusedToolbar.style.top !== `${adjustedDistanceFromTop}px`){\n focusedToolbar.style.top = `${adjustedDistanceFromTop}px`;\n }\n }\n\n /\n Update the pseudo-editable if it exists.\n */\n\n if (visualBuilderContainer) {\n const psuedoEditableElement = visualBuilderContainer.querySelector(\n \".visual-builder__pseudo-editable-element\"\n ) as HTMLElement;\n const editableElement = selectedElement as HTMLElement;\n const styles = getStyleOfAnElement(editableElement);\n const styleString = Object.entries(styles).reduce(\n (acc, [key, value]) => {\n return `${acc}${key}:${value};`;\n },\n \"\"\n );\n if (psuedoEditableElement &&\n (\n psuedoEditableElement.style.cssText !== styleString \|\|\n psuedoEditableElement.style.visibility !== \"visible\" \|\|\n psuedoEditableElement.style.position !== \"absolute\" \|\|\n psuedoEditableElement.style.top !== `${editableElement.offsetTop}px` \|\|\n psuedoEditableElement.style.left !== `${editableElement.offsetLeft}px`\n )\n ) {\n psuedoEditableElement.style.cssText = styleString;\n psuedoEditableElement.style.visibility = \"visible\";\n psuedoEditableElement.style.position = \"absolute\";\n psuedoEditableElement.style.top = `${editableElement.offsetTop}px`;\n psuedoEditableElement.style.left = `${editableElement.offsetLeft}px`;\n }\n }\n}\n\nfunction isSameRect(rect1: DOMRect, rect2: DOMRect) {\n return (\n rect1.top === rect2.top &&\n rect1.left === rect2.left &&\n rect1.width === rect2.width &&\n rect1.height === rect2.height\n );\n}"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAA8B;AAC9B,kBAAuC;AACvC,wCAAsC;AACtC,6BAAgC;AAChC,wBAAiC;AACjC,uBAA0G;AAC1G,kCAAiC;AACjC,iCAAgC;AAUhC,SAAS,gBAAgB;AAAA,EACrB;AAAA,EACA;AACJ,GAAgC;AAC5B,MAAI,gBAAgB;AAChB,UAAM,+BAA+B,OAAO,UAAU,OAAO,aAAa,yBAAyB;AACnG,UAAM,kBAAkB,yBAAyB,MAAM,OAAO,UAAU;AAGxE,UAAM,0BACF,yBAAyB,MAAM,OAAO,UAAU,mCAC1C,kBAAkB,yBAAyB,SAAS,mCACpD;AAEV,UAAM,mBAAmB,yBAAyB,OAAO;AACzD,UAAM,2BAA2B,KAAK,IAAI,kBAAkB,oCAAmB;AAG/E,QACI,+BAA+B,uCAC9B,eAAe,MAAM,mBAAmB,cACrC,eAAe,MAAM,SAAS,GAAG,yBAAyB,QAAQ,iDAAgC,OACxG;AACE,qBAAe,MAAM,iBAAiB;AACtC,qBAAe,MAAM,OAAO,GAAG,yBAAyB,QAAQ,iDAAgC;AAAA,IACpG,WACI,eAAe,MAAM,mBAAmB,gBACxC,eAAe,MAAM,SAAS,GAAG,wBAAwB,MAC3D;AACE,qBAAe,MAAM,iBAAiB;AACtC,qBAAe,MAAM,OAAO,GAAG,wBAAwB;AAAA,IAC3D;AAGA,QAAI,eAAe,MAAM,QAAQ,GAAG,uBAAuB,MAAM;AAC7D,qBAAe,MAAM,MAAM,GAAG,uBAAuB;AAAA,IACzD;AAAA,EACJ;AACJ;AASO,SAAS,oBAAoB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,GAMS;AA5ET;AA6EI,QAAM,8BACF,uBAAc,yBAAyB,MAClC;AACT,MACI,CAAC,0BACD,CAAC,mBACD,CAAC,+BACD,CAAC,gBACH;AACE;AAAA,EACJ;AACA,0CAAiB,sBAAsB;AACvC,8CAAgB,6BAA6B,cAAc;AAG3D,QAAM,wBAAwB,uBAAuB;AAAA,IACjD;AAAA,EACJ;AACA,MAAI,uBAAuB;AACvB,UAAM,aAAS,2BAAAA,SAAoB,eAAe;AAClD,UAAM,cAAc,OAAO,QAAQ,MAAM,EAAE;AAAA,MACvC,CAAC,KAAK,CAAC,KAAK,KAAK,MAAM;AACnB,eAAO,GAAG,GAAG,GAAG,GAAG,IAAI,KAAK;AAAA,MAChC;AAAA,MACA;AAAA,IACJ;AACA,0BAAsB,MAAM,UAAU;AACtC,0BAAsB,MAAM,aAAa;AACzC,0BAAsB,MAAM,WAAW;AACvC,0BAAsB,MAAM,MAAM,GAAG,gBAAgB,SAAS;AAC9D,0BAAsB,MAAM,OAAO,GAAG,gBAAgB,UAAU;AAAA,EACpE;AAEA,QAAM,QAAO,mDAAiB,aAAa,iBAAgB;AAC3D,QAAM,oBAAgB,oCAAuB,IAAI;AAEjD,QAAM,yBAAyB,gBAAgB,sBAAsB;AACrE,MAAI,uBAAuB,SAAS,uBAAuB,QAAQ;AAC/D,UAAM,kBAAkB,uBAAc,yBAAyB,MAAM;AAErE,QAAG,CAAC;AACA;AAEJ,oBAAgB;AAAA,MACZ;AAAA,MACA,0BAA0B,gBAAgB,sBAAsB;AAAA,IACpE,CAAC;AAAA,EACL;AAGA,QAAM,cAAU,yDAAsB,sBAAsB;AAC5D,QAAM,mBACF,yBAAc,0BAAd,mBAAqC,kBAArC,mBAAoD;AACxD,MACI,WACA,mBACA,QAAQ,SAAS,KACjB,QAAQ,CAAC,KACT,QAAQ,CAAC,GACX;AACE,UAAM,CAAC,gBAAgB,UAAU,IAAI;AACrC,UAAM,gBAAY,4BAAAC;AAAA,MACd;AAAA,MACA;AAAA,IACJ;AACA,UAAM,qBAAqB,gBAAgB,sBAAsB;AAEjE,QAAI,cAAc,cAAc;AAC5B,YAAM,eACF,mBAAmB,OAClB,mBAAmB,SAAS,mBAAmB,OAAO,IACvD,OAAO;AACX,qBAAe,MAAM,OAAO,GAAG,mBAAmB,IAAI;AACtD,qBAAe,MAAM,MAAM,GAAG,YAAY;AAE1C,iBAAW,MAAM,OAAO,GAAG,mBAAmB,KAAK;AACnD,iBAAW,MAAM,MAAM,GAAG,YAAY;AAAA,IAC1C,WAAW,cAAc,YAAY;AACjC,YAAM,cACF,mBAAmB,QAClB,mBAAmB,QAAQ,mBAAmB,QAAQ;AAC3D,qBAAe,MAAM,OAAO,GAAG,WAAW;AAC1C,qBAAe,MAAM,MAAM,GACvB,mBAAmB,MAAM,OAAO,OACpC;AAEA,iBAAW,MAAM,OAAO,GAAG,WAAW;AACtC,iBAAW,MAAM,MAAM,GACnB,mBAAmB,SAAS,OAAO,OACvC;AAAA,IACJ;AAAA,EACJ;AACJ;AAMO,SAAS,8BACZ,qBACA,gBACA,wBACF;AAEE,MAAI,CAAC,oBAAqB;AAE1B,QAAM,kBAAkB,uBAAc,yBAAyB,MAAM;AAErE,MAAG,CAAC;AACA;AAEJ,QAAM,2BAA2B,gBAAgB,sBAAsB;AAKvE,QAAM,eAAe,oBAAoB;AAAA,IACrC;AAAA,EACJ;AAEA,MAAI,cAAc;AACd,UAAM,wBAAwB,aAAa,sBAAsB;AACjE,QAAG,CAAC,WAAW,0BAA0B,qBAAqB,GAAE;AAC5D,mBAAa,MAAM,MAAM,GAAG,yBAAyB,MAAM,OAAO,OAAO;AACzE,mBAAa,MAAM,OAAO,GAAG,yBAAyB,IAAI;AAC1D,mBAAa,MAAM,QAAQ,GAAG,yBAAyB,KAAK;AAC5D,mBAAa,MAAM,SAAS,GAAG,yBAAyB,MAAM;AAAA,IAClE;AAAA,EACJ;AAMA,QAAM,oBAAoB,oBAAoB;AAAA,IAC1C;AAAA,EACJ;AACA,QAAM,uBAAuB,oBAAoB;AAAA,IAC7C;AAAA,EACJ;AACA,QAAM,qBAAqB,oBAAoB;AAAA,IAC3C;AAAA,EACJ;AACA,QAAM,sBAAsB,oBAAoB;AAAA,IAC5C;AAAA,EACJ;AAEA,QAAM,kBAAkB,yBAAyB,MAAM,OAAO;AAE9D,MAAI,mBAAmB;AACnB,UAAM,YAAY,kBAAkB,sBAAsB;AAC1D,QAAG,UAAU,WAAW,iBAAiB;AACrC,wBAAkB,MAAM,SAAS,QAAQ,eAAe;AAAA,IAC5D;AAAA,EACJ;AAEA,MAAI,sBAAsB;AACtB,UAAM,YAAY,qBAAqB,sBAAsB;AAC7D,QAAG,UAAU,QAAQ,yBAAyB,UAC1C,UAAU,WAAW,OAAO,SAAS,KAAK,eAAe,yBAAyB,SAAS,OAAO,SAAS;AAC3G,2BAAqB,MAAM,MAAM,GAC7B,yBAAyB,SAAS,OAAO,OAC7C;AACA,2BAAqB,MAAM,SAAS,GAChC,OAAO,SAAS,KAAK,eACrB,yBAAyB,SACzB,OAAO,OACX;AAAA,IACJ;AAAA,EACJ;AAEA,MAAI,oBAAoB;AACpB,UAAM,YAAY,mBAAmB,sBAAsB;AAC3D,QAAG,UAAU,MAAM,OAAO,YAAY,mBAClC,UAAU,WAAW,yBAAyB,UAC9C,UAAU,UAAU,yBAAyB,MAAM;AACnD,yBAAmB,MAAM,MAAM,GAAG,eAAe;AACjD,yBAAmB,MAAM,SAAS,GAAG,yBAAyB,MAAM;AACpE,yBAAmB,MAAM,QAAQ,GAAG,yBAAyB,IAAI;AAAA,IACrE;AAAA,EACJ;AAEA,MAAI,qBAAqB;AACrB,UAAM,YAAY,oBAAoB,sBAAsB;AAC5D,QAAG,UAAU,SAAS,yBAAyB,SAC3C,UAAU,MAAM,OAAO,YAAY,mBACnC,UAAU,WAAW,yBAAyB,UAC9C,UAAU,UAAU,SAAS,gBAAgB,cAAc,yBAAyB,OAAO;AACvF,0BAAoB,MAAM,OAAO,GAAG,yBAAyB,KAAK;AAClE,0BAAoB,MAAM,MAAM,GAAG,eAAe;AAClD,0BAAoB,MAAM,SAAS,GAAG,yBAAyB,MAAM;AACrE,0BAAoB,MAAM,QAAQ,GAC9B,SAAS,gBAAgB,cAAc,yBAAyB,KACpE;AAAA,IACR;AAAA,EACJ;AAMA,MAAI,gBAAgB;AAChB,UAAM,+BAA+B,OAAO,UAAU,OAAO,aAAa,yBAAyB;AACnG,UAAMC,mBACF,yBAAyB,MAAM,OAAO,UAAU;AAEpD,UAAM,0BACF,yBAAyB,MAAM,OAAO,UAAU,mCAC1CA,mBAAkB,yBAAyB,SAAS,mCACpDA;AAEV,UAAM,mBACF,yBAAyB,OAAO;AACpC,UAAM,2BAA2B,KAAK;AAAA,MAClC;AAAA,MACA;AAAA,IACJ;AAEA,QAAI,+BAA+B,uCAC7B,eAAe,MAAM,mBAAmB,cAC1C,eAAe,MAAM,SAAS,GAC1B,yBAAyB,QAAQ,iDACrC,OACF;AAEE,qBAAe,MAAM,iBAAiB;AACtC,qBAAe,MAAM,OAAO,GACxB,yBAAyB,QAAQ,iDACrC;AAAA,IACJ,WAAW,eAAe,MAAM,mBAAmB,gBAC/C,eAAe,MAAM,SAAS,GAAG,wBAAwB,MAC3D;AACE,qBAAe,MAAM,iBAAiB;AACtC,qBAAe,MAAM,OAAO,GAAG,wBAAwB;AAAA,IAC3D;AAEA,QAAG,eAAe,MAAM,QAAQ,GAAG,uBAAuB,MAAK;AAC3D,qBAAe,MAAM,MAAM,GAAG,uBAAuB;AAAA,IACzD;AAAA,EACJ;AAMA,MAAI,wBAAwB;AACxB,UAAM,wBAAwB,uBAAuB;AAAA,MACjD;AAAA,IACJ;AACA,UAAM,kBAAkB;AACxB,UAAM,aAAS,2BAAAF,SAAoB,eAAe;AAClD,UAAM,cAAc,OAAO,QAAQ,MAAM,EAAE;AAAA,MACvC,CAAC,KAAK,CAAC,KAAK,KAAK,MAAM;AACnB,eAAO,GAAG,GAAG,GAAG,GAAG,IAAI,KAAK;AAAA,MAChC;AAAA,MACA;AAAA,IACJ;AACA,QAAI,0BAEI,sBAAsB,MAAM,YAAY,eACxC,sBAAsB,MAAM,eAAe,aAC3C,sBAAsB,MAAM,aAAa,cACzC,sBAAsB,MAAM,QAAQ,GAAG,gBAAgB,SAAS,QAChE,sBAAsB,MAAM,SAAS,GAAG,gBAAgB,UAAU,OAExE;AACE,4BAAsB,MAAM,UAAU;AACtC,4BAAsB,MAAM,aAAa;AACzC,4BAAsB,MAAM,WAAW;AACvC,4BAAsB,MAAM,MAAM,GAAG,gBAAgB,SAAS;AAC9D,4BAAsB,MAAM,OAAO,GAAG,gBAAgB,UAAU;AAAA,IACpE;AAAA,EACJ;AACJ;AAEA,SAAS,WAAW,OAAgB,OAAgB;AAChD,SACI,MAAM,QAAQ,MAAM,OACpB,MAAM,SAAS,MAAM,QACrB,MAAM,UAAU,MAAM,SACtB,MAAM,WAAW,MAAM;AAE/B;","names":["getStyleOfAnElement","getChildrenDirection","distanceFromTop"]}
1	+ {"version":3,"sources":["../../../../src/visualBuilder/utils/updateFocussedState.ts"],"sourcesContent":["import { VisualBuilder } from \"..\";\nimport { extractDetailsFromCslp } from \"../../cslp\";\nimport { getAddInstanceButtons } from \"../generators/generateAddInstanceButtons\";\nimport {\n addFocusOverlay,\n hideFocusOverlay,\n} from \"../generators/generateOverlay\";\nimport { hideHoverOutline } from \"../listeners/mouseHover\";\nimport {\n LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX,\n RIGHT_EDGE_BUFFER,\n TOOLBAR_EDGE_BUFFER,\n TOP_EDGE_BUFFER,\n} from \"./constants\";\nimport getChildrenDirection from \"./getChildrenDirection\";\nimport { getPsuedoEditableElementStyles } from \"./getPsuedoEditableStylesElement\";\nimport getStyleOfAnElement from \"./getStyleOfAnElement\";\n\ninterface ToolbarPositionParams {\n focusedToolbar: HTMLElement \| null;\n selectedElementDimension: DOMRect;\n}\n/*\n Adjust the position of the field toolbar instead of clearing the innerhtml fo the focused toolbar.\n * By doing this, can avoid the re-rendering of the focus field toolbar.\n /\nfunction positionToolbar({\n focusedToolbar,\n selectedElementDimension,\n}: ToolbarPositionParams): void {\n if (focusedToolbar) {\n const targetElementRightEdgeOffset =\n window.scrollX + window.innerWidth - selectedElementDimension.left;\n const distanceFromTop =\n selectedElementDimension.top + window.scrollY - TOOLBAR_EDGE_BUFFER;\n\n // Adjust top position based on the available space\n const adjustedDistanceFromTop =\n selectedElementDimension.top + window.scrollY < TOP_EDGE_BUFFER\n ? distanceFromTop +\n selectedElementDimension.height +\n TOP_EDGE_BUFFER\n : distanceFromTop;\n\n const distanceFromLeft =\n selectedElementDimension.left - LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX;\n const adjustedDistanceFromLeft = Math.max(\n distanceFromLeft,\n TOOLBAR_EDGE_BUFFER\n );\n\n // Handle right-edge overflow\n if (\n targetElementRightEdgeOffset < RIGHT_EDGE_BUFFER &&\n (focusedToolbar.style.justifyContent !== \"flex-end\" \|\|\n focusedToolbar.style.left !==\n `${selectedElementDimension.right + LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX}px`)\n ) {\n focusedToolbar.style.justifyContent = \"flex-end\";\n focusedToolbar.style.left = `${selectedElementDimension.right + LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX}px`;\n } else if (\n focusedToolbar.style.justifyContent !== \"flex-start\" \|\|\n focusedToolbar.style.left !== `${adjustedDistanceFromLeft}px`\n ) {\n focusedToolbar.style.justifyContent = \"flex-start\"; // Default\n focusedToolbar.style.left = `${adjustedDistanceFromLeft}px`;\n }\n\n // Adjust top position if necessary\n if (focusedToolbar.style.top !== `${adjustedDistanceFromTop}px`) {\n focusedToolbar.style.top = `${adjustedDistanceFromTop}px`;\n }\n }\n}\n\n/\n This function can be used to re-draw/update the focussed state of an element.\n * The focussed state includes the overlay, psuedo-editable, toolbar, and multiple\n * instance add buttons. It is similar to handleBuilderInteraction but it does not\n * create new elements, it just updates the existing ones whenever possible.\n * NOTE: breakdown this function into multiple functions when the need arises\n /\nexport function updateFocussedState({\n editableElement,\n visualBuilderContainer,\n overlayWrapper,\n focusedToolbar,\n resizeObserver,\n}: {\n editableElement: HTMLElement \| null;\n visualBuilderContainer: HTMLDivElement \| null;\n overlayWrapper: HTMLDivElement \| null;\n focusedToolbar: HTMLDivElement \| null;\n resizeObserver: ResizeObserver \| null;\n}): void {\n let previousSelectedEditableDOM =\n VisualBuilder.VisualBuilderGlobalState.value\n .previousSelectedEditableDOM;\n if (\n !visualBuilderContainer \|\|\n !editableElement \|\|\n !previousSelectedEditableDOM \|\|\n !overlayWrapper\n ) {\n return;\n }\n\n const previousSelectedElementCslp =\n previousSelectedEditableDOM?.getAttribute(\"data-cslp\");\n const newPreviousSelectedElement = document.querySelector(\n `[data-cslp=\"${previousSelectedElementCslp}\"]`\n );\n if (!newPreviousSelectedElement && resizeObserver) {\n hideFocusOverlay({\n visualBuilderOverlayWrapper: overlayWrapper,\n focusedToolbar,\n visualBuilderContainer,\n resizeObserver,\n noTrigger: true,\n });\n return;\n }\n if (newPreviousSelectedElement !== previousSelectedEditableDOM) {\n previousSelectedEditableDOM = newPreviousSelectedElement as HTMLElement;\n VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM =\n previousSelectedEditableDOM;\n }\n\n hideHoverOutline(visualBuilderContainer);\n addFocusOverlay(previousSelectedEditableDOM, overlayWrapper);\n\n // update psuedo editable element if present\n const psuedoEditableElement = visualBuilderContainer.querySelector(\n \".visual-builder__pseudo-editable-element\"\n ) as HTMLElement;\n if (psuedoEditableElement) {\n const styles = getPsuedoEditableElementStyles(editableElement);\n const styleString = Object.entries(styles).reduce(\n (acc, [key, value]) => {\n return `${acc}${key}:${value};`;\n },\n \"\"\n );\n psuedoEditableElement.style.cssText = styleString;\n // since we are copying styles from the editableEl\n // it will now have a visibility of hidden, which we added\n // when creating the pseudo editable element, so make the psuedo visible\n psuedoEditableElement.style.visibility = \"visible\";\n }\n\n const cslp = editableElement?.getAttribute(\"data-cslp\") \|\| \"\";\n const fieldMetadata = extractDetailsFromCslp(cslp);\n\n const targetElementDimension = editableElement.getBoundingClientRect();\n if (targetElementDimension.width && targetElementDimension.height) {\n const selectedElement =\n VisualBuilder.VisualBuilderGlobalState.value\n .previousSelectedEditableDOM;\n\n if (!selectedElement) return;\n // position the focused tool bar\n positionToolbar({\n focusedToolbar: focusedToolbar,\n selectedElementDimension: selectedElement.getBoundingClientRect(),\n });\n }\n\n // re-add multiple instance add buttons\n const buttons = getAddInstanceButtons(visualBuilderContainer);\n const parentCslpValue =\n fieldMetadata.multipleFieldMetadata?.parentDetails?.parentCslpValue;\n if (\n buttons &&\n parentCslpValue &&\n buttons.length > 1 &&\n buttons[0] &&\n buttons[1]\n ) {\n const [previousButton, nextButton] = buttons;\n const direction = getChildrenDirection(\n editableElement,\n parentCslpValue\n );\n const targetDOMDimension = editableElement.getBoundingClientRect();\n\n if (direction === \"horizontal\") {\n const middleHeight =\n targetDOMDimension.top +\n (targetDOMDimension.bottom - targetDOMDimension.top) / 2 +\n window.scrollY;\n previousButton.style.left = `${targetDOMDimension.left}px`;\n previousButton.style.top = `${middleHeight}px`;\n\n nextButton.style.left = `${targetDOMDimension.right}px`;\n nextButton.style.top = `${middleHeight}px`;\n } else if (direction === \"vertical\") {\n const middleWidth =\n targetDOMDimension.left +\n (targetDOMDimension.right - targetDOMDimension.left) / 2;\n previousButton.style.left = `${middleWidth}px`;\n previousButton.style.top = `${\n targetDOMDimension.top + window.scrollY\n }px`;\n\n nextButton.style.left = `${middleWidth}px`;\n nextButton.style.top = `${\n targetDOMDimension.bottom + window.scrollY\n }px`;\n }\n }\n}\n\n/\n This function is used to resize/reposition focus overlay and toolbar due to a\n * mutation in the DOM or due to changes in a different field (other than the focussed field).\n /\nexport function updateFocussedStateOnMutation(\n focusOverlayWrapper: HTMLDivElement \| null,\n focusedToolbar: HTMLDivElement \| null,\n visualBuilderContainer: HTMLDivElement \| null,\n resizeObserver: ResizeObserver \| null\n) {\n if (!focusOverlayWrapper) return;\n\n let selectedElement =\n VisualBuilder.VisualBuilderGlobalState.value\n .previousSelectedEditableDOM;\n if (!selectedElement) return;\n\n const selectedElementCslp = selectedElement?.getAttribute(\"data-cslp\");\n const newSelectedElement = document.querySelector(\n `[data-cslp=\"${selectedElementCslp}\"]`\n );\n if (!newSelectedElement && resizeObserver) {\n hideFocusOverlay({\n visualBuilderOverlayWrapper: focusOverlayWrapper,\n focusedToolbar,\n visualBuilderContainer,\n resizeObserver,\n noTrigger: true,\n });\n return;\n }\n\n if (newSelectedElement !== selectedElement) {\n selectedElement = newSelectedElement as HTMLElement;\n VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM =\n selectedElement;\n }\n\n const selectedElementDimension = selectedElement.getBoundingClientRect();\n\n /\n Update the focus outline if it exists.\n /\n const focusOutline = focusOverlayWrapper.querySelector<HTMLDivElement>(\n \".visual-builder__overlay--outline\"\n );\n\n if (focusOutline) {\n const focusOutlineDimension = focusOutline.getBoundingClientRect();\n if (!isSameRect(selectedElementDimension, focusOutlineDimension)) {\n focusOutline.style.top = `${selectedElementDimension.top + window.scrollY}px`;\n focusOutline.style.left = `${selectedElementDimension.left}px`;\n focusOutline.style.width = `${selectedElementDimension.width}px`;\n focusOutline.style.height = `${selectedElementDimension.height}px`;\n }\n }\n\n /\n Update the focus overlays if they exists.\n /\n\n const focusedOverlayTop = focusOverlayWrapper.querySelector<HTMLDivElement>(\n \".visual-builder__overlay--top\"\n );\n const focusedOverlayBottom =\n focusOverlayWrapper.querySelector<HTMLDivElement>(\n \".visual-builder__overlay--bottom\"\n );\n const focusedOverlayLeft =\n focusOverlayWrapper.querySelector<HTMLDivElement>(\n \".visual-builder__overlay--left\"\n );\n const focusedOverlayRight =\n focusOverlayWrapper.querySelector<HTMLDivElement>(\n \".visual-builder__overlay--right\"\n );\n\n const distanceFromTop = selectedElementDimension.top + window.scrollY;\n\n if (focusedOverlayTop) {\n const dimension = focusedOverlayTop.getBoundingClientRect();\n if (dimension.height !== distanceFromTop) {\n focusedOverlayTop.style.height = `calc(${distanceFromTop}px)`;\n }\n }\n\n if (focusedOverlayBottom) {\n const dimension = focusedOverlayBottom.getBoundingClientRect();\n if (\n dimension.top !== selectedElementDimension.bottom \|\|\n dimension.height !==\n window.document.body.scrollHeight -\n selectedElementDimension.bottom -\n window.scrollY\n ) {\n focusedOverlayBottom.style.top = `${\n selectedElementDimension.bottom + window.scrollY\n }px`;\n focusedOverlayBottom.style.height = `${\n window.document.body.scrollHeight -\n selectedElementDimension.bottom -\n window.scrollY\n }px`;\n }\n }\n\n if (focusedOverlayLeft) {\n const dimension = focusedOverlayLeft.getBoundingClientRect();\n if (\n dimension.top + window.scrollY !== distanceFromTop \|\|\n dimension.height !== selectedElementDimension.height \|\|\n dimension.width !== selectedElementDimension.left\n ) {\n focusedOverlayLeft.style.top = `${distanceFromTop}px`;\n focusedOverlayLeft.style.height = `${selectedElementDimension.height}px`;\n focusedOverlayLeft.style.width = `${selectedElementDimension.left}px`;\n }\n }\n\n if (focusedOverlayRight) {\n const dimension = focusedOverlayRight.getBoundingClientRect();\n if (\n dimension.left !== selectedElementDimension.right \|\|\n dimension.top + window.scrollY !== distanceFromTop \|\|\n dimension.height !== selectedElementDimension.height \|\|\n dimension.width !==\n document.documentElement.clientWidth -\n selectedElementDimension.right\n ) {\n focusedOverlayRight.style.left = `${selectedElementDimension.right}px`;\n focusedOverlayRight.style.top = `${distanceFromTop}px`;\n focusedOverlayRight.style.height = `${selectedElementDimension.height}px`;\n focusedOverlayRight.style.width = `${\n document.documentElement.clientWidth -\n selectedElementDimension.right\n }px`;\n }\n }\n\n /\n Update the focus toolbar if it exists.\n /\n\n if (focusedToolbar) {\n const targetElementRightEdgeOffset =\n window.scrollX + window.innerWidth - selectedElementDimension.left;\n const distanceFromTop =\n selectedElementDimension.top + window.scrollY - TOOLBAR_EDGE_BUFFER;\n // Position the toolbar at the top unless there's insufficient space or scrolling up is not possible (topmost element targetted).\n const adjustedDistanceFromTop =\n selectedElementDimension.top + window.scrollY < TOP_EDGE_BUFFER\n ? distanceFromTop +\n selectedElementDimension.height +\n TOP_EDGE_BUFFER\n : distanceFromTop;\n\n const distanceFromLeft =\n selectedElementDimension.left - LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX;\n const adjustedDistanceFromLeft = Math.max(\n distanceFromLeft,\n TOOLBAR_EDGE_BUFFER\n );\n\n if (\n targetElementRightEdgeOffset < RIGHT_EDGE_BUFFER &&\n (focusedToolbar.style.justifyContent !== \"flex-end\" \|\|\n focusedToolbar.style.left !==\n `${\n selectedElementDimension.right +\n LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX\n }px`)\n ) {\n // Overflow / Cutoff on right edge\n focusedToolbar.style.justifyContent = \"flex-end\";\n focusedToolbar.style.left = `${\n selectedElementDimension.right +\n LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX\n }px`;\n } else if (\n focusedToolbar.style.justifyContent !== \"flex-start\" \|\|\n focusedToolbar.style.left !== `${adjustedDistanceFromLeft}px`\n ) {\n focusedToolbar.style.justifyContent = \"flex-start\"; // default\n focusedToolbar.style.left = `${adjustedDistanceFromLeft}px`;\n }\n\n if (focusedToolbar.style.top !== `${adjustedDistanceFromTop}px`) {\n focusedToolbar.style.top = `${adjustedDistanceFromTop}px`;\n }\n }\n\n /\n Update the pseudo-editable if it exists.\n */\n\n if (visualBuilderContainer) {\n const psuedoEditableElement = visualBuilderContainer.querySelector(\n \".visual-builder__pseudo-editable-element\"\n ) as HTMLElement;\n const editableElement = selectedElement as HTMLElement;\n const styles = getPsuedoEditableElementStyles(editableElement);\n const styleString = Object.entries(styles).reduce(\n (acc, [key, value]) => {\n return `${acc}${key}:${value};`;\n },\n \"\"\n );\n if (\n psuedoEditableElement &&\n (psuedoEditableElement.style.cssText !== styleString \|\|\n psuedoEditableElement.style.visibility !== \"visible\")\n ) {\n psuedoEditableElement.style.cssText = styleString;\n // since we are copying styles from the editableEl\n // it will now have a visibility of hidden, which we added\n // when creating the pseudo editable element, so make the psuedo visible\n psuedoEditableElement.style.visibility = \"visible\";\n }\n }\n}\n\nfunction isSameRect(rect1: DOMRect, rect2: DOMRect) {\n return (\n rect1.top === rect2.top &&\n rect1.left === rect2.left &&\n rect1.width === rect2.width &&\n rect1.height === rect2.height\n );\n}\n"],"mappings":"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","names":["getChildrenDirection","distanceFromTop"]}

package/dist/legacy/visualBuilder/utils/updateFocussedState.d.cts CHANGED Viewed

@@ -10,12 +10,12 @@ declare function updateFocussedState({ editableElement, visualBuilderContainer,
     visualBuilderContainer: HTMLDivElement | null;
     overlayWrapper: HTMLDivElement | null;
     focusedToolbar: HTMLDivElement | null;
-    resizeObserver: ResizeObserver;
+    resizeObserver: ResizeObserver | null;
 }): void;
 /**
  * This function is used to resize/reposition focus overlay and toolbar due to a
  * mutation in the DOM or due to changes in a different field (other than the focussed field).
  */
-declare function updateFocussedStateOnMutation(focusOverlayWrapper: HTMLDivElement | null, focusedToolbar: HTMLDivElement | null, visualBuilderContainer: HTMLDivElement | null): void;
+declare function updateFocussedStateOnMutation(focusOverlayWrapper: HTMLDivElement | null, focusedToolbar: HTMLDivElement | null, visualBuilderContainer: HTMLDivElement | null, resizeObserver: ResizeObserver | null): void;
 export { updateFocussedState, updateFocussedStateOnMutation };

package/dist/legacy/visualBuilder/utils/updateFocussedState.d.ts CHANGED Viewed

@@ -10,12 +10,12 @@ declare function updateFocussedState({ editableElement, visualBuilderContainer,
     visualBuilderContainer: HTMLDivElement | null;
     overlayWrapper: HTMLDivElement | null;
     focusedToolbar: HTMLDivElement | null;
-    resizeObserver: ResizeObserver;
+    resizeObserver: ResizeObserver | null;
 }): void;
 /**
  * This function is used to resize/reposition focus overlay and toolbar due to a
  * mutation in the DOM or due to changes in a different field (other than the focussed field).
  */
-declare function updateFocussedStateOnMutation(focusOverlayWrapper: HTMLDivElement | null, focusedToolbar: HTMLDivElement | null, visualBuilderContainer: HTMLDivElement | null): void;
+declare function updateFocussedStateOnMutation(focusOverlayWrapper: HTMLDivElement | null, focusedToolbar: HTMLDivElement | null, visualBuilderContainer: HTMLDivElement | null, resizeObserver: ResizeObserver | null): void;
 export { updateFocussedState, updateFocussedStateOnMutation };

package/dist/legacy/visualBuilder/utils/updateFocussedState.js CHANGED Viewed

@@ -4,11 +4,19 @@ import "../../chunk-5WRI5ZAA.js";
 import { VisualBuilder } from "../index.js";
 import { extractDetailsFromCslp } from "../../cslp/index.js";
 import { getAddInstanceButtons } from "../generators/generateAddInstanceButtons.js";
-import { addFocusOverlay } from "../generators/generateOverlay.js";
+import {
+  addFocusOverlay,
+  hideFocusOverlay
+} from "../generators/generateOverlay.js";
 import { hideHoverOutline } from "../listeners/mouseHover.js";
-import { LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX, RIGHT_EDGE_BUFFER, TOOLBAR_EDGE_BUFFER, TOP_EDGE_BUFFER } from "./constants.js";
+import {
+  LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX,
+  RIGHT_EDGE_BUFFER,
+  TOOLBAR_EDGE_BUFFER,
+  TOP_EDGE_BUFFER
+} from "./constants.js";
 import getChildrenDirection from "./getChildrenDirection.js";
-import getStyleOfAnElement from "./getStyleOfAnElement.js";
+import { getPsuedoEditableElementStyles } from "./getPsuedoEditableStylesElement.js";
 function positionToolbar({
   focusedToolbar,
   selectedElementDimension
@@ -18,7 +26,10 @@ function positionToolbar({
     const distanceFromTop = selectedElementDimension.top + window.scrollY - TOOLBAR_EDGE_BUFFER;
     const adjustedDistanceFromTop = selectedElementDimension.top + window.scrollY < 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 adjustedDistanceFromLeft = Math.max(
+      distanceFromLeft,
+      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`)) {
       focusedToolbar.style.justifyContent = "flex-end";
       focusedToolbar.style.left = `${selectedElementDimension.right + LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX}px`;
@@ -39,17 +50,35 @@ function updateFocussedState({
   resizeObserver
 }) {
   var _a, _b;
-  const previousSelectedEditableDOM = VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM;
+  let previousSelectedEditableDOM = VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM;
   if (!visualBuilderContainer || !editableElement || !previousSelectedEditableDOM || !overlayWrapper) {
     return;
   }
+  const previousSelectedElementCslp = previousSelectedEditableDOM == null ? void 0 : previousSelectedEditableDOM.getAttribute("data-cslp");
+  const newPreviousSelectedElement = document.querySelector(
+    `[data-cslp="${previousSelectedElementCslp}"]`
+  );
+  if (!newPreviousSelectedElement && resizeObserver) {
+    hideFocusOverlay({
+      visualBuilderOverlayWrapper: overlayWrapper,
+      focusedToolbar,
+      visualBuilderContainer,
+      resizeObserver,
+      noTrigger: true
+    });
+    return;
+  }
+  if (newPreviousSelectedElement !== previousSelectedEditableDOM) {
+    previousSelectedEditableDOM = newPreviousSelectedElement;
+    VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = previousSelectedEditableDOM;
+  }
   hideHoverOutline(visualBuilderContainer);
   addFocusOverlay(previousSelectedEditableDOM, overlayWrapper);
   const psuedoEditableElement = visualBuilderContainer.querySelector(
     ".visual-builder__pseudo-editable-element"
   );
   if (psuedoEditableElement) {
-    const styles = getStyleOfAnElement(editableElement);
+    const styles = getPsuedoEditableElementStyles(editableElement);
     const styleString = Object.entries(styles).reduce(
       (acc, [key, value]) => {
         return `${acc}${key}:${value};`;
@@ -58,17 +87,13 @@ function updateFocussedState({
     );
     psuedoEditableElement.style.cssText = styleString;
     psuedoEditableElement.style.visibility = "visible";
-    psuedoEditableElement.style.position = "absolute";
-    psuedoEditableElement.style.top = `${editableElement.offsetTop}px`;
-    psuedoEditableElement.style.left = `${editableElement.offsetLeft}px`;
   }
   const cslp = (editableElement == null ? void 0 : editableElement.getAttribute("data-cslp")) || "";
   const fieldMetadata = extractDetailsFromCslp(cslp);
   const targetElementDimension = editableElement.getBoundingClientRect();
   if (targetElementDimension.width && targetElementDimension.height) {
     const selectedElement = VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM;
-    if (!selectedElement)
-      return;
+    if (!selectedElement) return;
     positionToolbar({
       focusedToolbar,
       selectedElementDimension: selectedElement.getBoundingClientRect()
@@ -98,11 +123,28 @@ function updateFocussedState({
     }
   }
 }
-function updateFocussedStateOnMutation(focusOverlayWrapper, focusedToolbar, visualBuilderContainer) {
+function updateFocussedStateOnMutation(focusOverlayWrapper, focusedToolbar, visualBuilderContainer, resizeObserver) {
   if (!focusOverlayWrapper) return;
-  const selectedElement = VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM;
-  if (!selectedElement)
+  let selectedElement = VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM;
+  if (!selectedElement) return;
+  const selectedElementCslp = selectedElement == null ? void 0 : selectedElement.getAttribute("data-cslp");
+  const newSelectedElement = document.querySelector(
+    `[data-cslp="${selectedElementCslp}"]`
+  );
+  if (!newSelectedElement && resizeObserver) {
+    hideFocusOverlay({
+      visualBuilderOverlayWrapper: focusOverlayWrapper,
+      focusedToolbar,
+      visualBuilderContainer,
+      resizeObserver,
+      noTrigger: true
+    });
     return;
+  }
+  if (newSelectedElement !== selectedElement) {
+    selectedElement = newSelectedElement;
+    VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = selectedElement;
+  }
   const selectedElementDimension = selectedElement.getBoundingClientRect();
   const focusOutline = focusOverlayWrapper.querySelector(
     ".visual-builder__overlay--outline"
@@ -184,19 +226,16 @@ function updateFocussedStateOnMutation(focusOverlayWrapper, focusedToolbar, visu
       ".visual-builder__pseudo-editable-element"
     );
     const editableElement = selectedElement;
-    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;
       psuedoEditableElement.style.visibility = "visible";
-      psuedoEditableElement.style.position = "absolute";
-      psuedoEditableElement.style.top = `${editableElement.offsetTop}px`;
-      psuedoEditableElement.style.left = `${editableElement.offsetLeft}px`;
     }
   }
 }

package/dist/legacy/visualBuilder/utils/updateFocussedState.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/visualBuilder/utils/updateFocussedState.ts"],"sourcesContent":["import { VisualBuilder } from \"..\";\nimport { extractDetailsFromCslp } from \"../../cslp\";\nimport { getAddInstanceButtons } from \"../generators/generateAddInstanceButtons\";\nimport { addFocusOverlay } from \"../generators/generateOverlay\";\nimport { hideHoverOutline } from \"../listeners/mouseHover\";\nimport { LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX, RIGHT_EDGE_BUFFER, TOOLBAR_EDGE_BUFFER, TOP_EDGE_BUFFER } from \"./constants\";\nimport getChildrenDirection from \"./getChildrenDirection\";\nimport getStyleOfAnElement from \"./getStyleOfAnElement\";\n\ninterface ToolbarPositionParams {\n focusedToolbar: HTMLElement \| null;\n selectedElementDimension: DOMRect;\n}\n/*\n Adjust the position of the field toolbar instead of clearing the innerhtml fo the focused toolbar.\n * By doing this, can avoid the re-rendering of the focus field toolbar.\n/\nfunction positionToolbar({\n focusedToolbar,\n selectedElementDimension,\n}: ToolbarPositionParams): void {\n if (focusedToolbar) {\n const targetElementRightEdgeOffset = window.scrollX + window.innerWidth - selectedElementDimension.left;\n const distanceFromTop = selectedElementDimension.top + window.scrollY - TOOLBAR_EDGE_BUFFER;\n\n // Adjust top position based on the available space\n const adjustedDistanceFromTop = \n selectedElementDimension.top + window.scrollY < TOP_EDGE_BUFFER\n ? distanceFromTop + selectedElementDimension.height + TOP_EDGE_BUFFER\n : distanceFromTop;\n\n const distanceFromLeft = selectedElementDimension.left - LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX;\n const adjustedDistanceFromLeft = Math.max(distanceFromLeft, TOOLBAR_EDGE_BUFFER);\n\n // Handle right-edge overflow\n if (\n targetElementRightEdgeOffset < RIGHT_EDGE_BUFFER &&\n (focusedToolbar.style.justifyContent !== \"flex-end\" \|\|\n focusedToolbar.style.left !== `${selectedElementDimension.right + LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX}px`)\n ) {\n focusedToolbar.style.justifyContent = \"flex-end\";\n focusedToolbar.style.left = `${selectedElementDimension.right + LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX}px`;\n } else if (\n focusedToolbar.style.justifyContent !== \"flex-start\" \|\|\n focusedToolbar.style.left !== `${adjustedDistanceFromLeft}px`\n ) {\n focusedToolbar.style.justifyContent = \"flex-start\"; // Default\n focusedToolbar.style.left = `${adjustedDistanceFromLeft}px`;\n }\n\n // Adjust top position if necessary\n if (focusedToolbar.style.top !== `${adjustedDistanceFromTop}px`) {\n focusedToolbar.style.top = `${adjustedDistanceFromTop}px`;\n }\n }\n}\n\n/\n This function can be used to re-draw/update the focussed state of an element.\n * The focussed state includes the overlay, psuedo-editable, toolbar, and multiple\n * instance add buttons. It is similar to handleBuilderInteraction but it does not\n * create new elements, it just updates the existing ones whenever possible.\n * NOTE: breakdown this function into multiple functions when the need arises\n /\nexport function updateFocussedState({\n editableElement,\n visualBuilderContainer,\n overlayWrapper,\n focusedToolbar,\n resizeObserver,\n}: {\n editableElement: HTMLElement \| null;\n visualBuilderContainer: HTMLDivElement \| null;\n overlayWrapper: HTMLDivElement \| null;\n focusedToolbar: HTMLDivElement \| null;\n resizeObserver: ResizeObserver;\n}): void {\n const previousSelectedEditableDOM =\n VisualBuilder.VisualBuilderGlobalState.value\n .previousSelectedEditableDOM;\n if (\n !visualBuilderContainer \|\|\n !editableElement \|\|\n !previousSelectedEditableDOM \|\|\n !overlayWrapper\n ) {\n return;\n }\n hideHoverOutline(visualBuilderContainer);\n addFocusOverlay(previousSelectedEditableDOM, overlayWrapper);\n\n // update psuedo editable element if present\n const psuedoEditableElement = visualBuilderContainer.querySelector(\n \".visual-builder__pseudo-editable-element\"\n ) as HTMLElement;\n if (psuedoEditableElement) {\n const styles = getStyleOfAnElement(editableElement);\n const styleString = Object.entries(styles).reduce(\n (acc, [key, value]) => {\n return `${acc}${key}:${value};`;\n },\n \"\"\n );\n psuedoEditableElement.style.cssText = styleString;\n psuedoEditableElement.style.visibility = \"visible\";\n psuedoEditableElement.style.position = \"absolute\";\n psuedoEditableElement.style.top = `${editableElement.offsetTop}px`;\n psuedoEditableElement.style.left = `${editableElement.offsetLeft}px`;\n }\n\n const cslp = editableElement?.getAttribute(\"data-cslp\") \|\| \"\";\n const fieldMetadata = extractDetailsFromCslp(cslp);\n\n const targetElementDimension = editableElement.getBoundingClientRect();\n if (targetElementDimension.width && targetElementDimension.height) {\n const selectedElement = VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM;\n\n if(!selectedElement)\n return;\n // position the focused tool bar\n positionToolbar({\n focusedToolbar: focusedToolbar,\n selectedElementDimension: selectedElement.getBoundingClientRect(),\n });\n }\n\n // re-add multiple instance add buttons\n const buttons = getAddInstanceButtons(visualBuilderContainer);\n const parentCslpValue =\n fieldMetadata.multipleFieldMetadata?.parentDetails?.parentCslpValue;\n if (\n buttons &&\n parentCslpValue &&\n buttons.length > 1 &&\n buttons[0] &&\n buttons[1]\n ) {\n const [previousButton, nextButton] = buttons;\n const direction = getChildrenDirection(\n editableElement,\n parentCslpValue\n );\n const targetDOMDimension = editableElement.getBoundingClientRect();\n\n if (direction === \"horizontal\") {\n const middleHeight =\n targetDOMDimension.top +\n (targetDOMDimension.bottom - targetDOMDimension.top) / 2 +\n window.scrollY;\n previousButton.style.left = `${targetDOMDimension.left}px`;\n previousButton.style.top = `${middleHeight}px`;\n\n nextButton.style.left = `${targetDOMDimension.right}px`;\n nextButton.style.top = `${middleHeight}px`;\n } else if (direction === \"vertical\") {\n const middleWidth =\n targetDOMDimension.left +\n (targetDOMDimension.right - targetDOMDimension.left) / 2;\n previousButton.style.left = `${middleWidth}px`;\n previousButton.style.top = `${\n targetDOMDimension.top + window.scrollY\n }px`;\n\n nextButton.style.left = `${middleWidth}px`;\n nextButton.style.top = `${\n targetDOMDimension.bottom + window.scrollY\n }px`;\n }\n }\n}\n\n/\n This function is used to resize/reposition focus overlay and toolbar due to a\n * mutation in the DOM or due to changes in a different field (other than the focussed field).\n /\nexport function updateFocussedStateOnMutation(\n focusOverlayWrapper: HTMLDivElement \| null,\n focusedToolbar: HTMLDivElement \| null,\n visualBuilderContainer: HTMLDivElement \| null,\n) {\n \n if (!focusOverlayWrapper) return;\n\n const selectedElement = VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM;\n\n if(!selectedElement)\n return;\n\n const selectedElementDimension = selectedElement.getBoundingClientRect();\n\n /\n Update the focus outline if it exists.\n /\n const focusOutline = focusOverlayWrapper.querySelector<HTMLDivElement>(\n \".visual-builder__overlay--outline\"\n );\n\n if (focusOutline) {\n const focusOutlineDimension = focusOutline.getBoundingClientRect();\n if(!isSameRect(selectedElementDimension, focusOutlineDimension)){\n focusOutline.style.top = `${selectedElementDimension.top + window.scrollY}px`;\n focusOutline.style.left = `${selectedElementDimension.left}px`;\n focusOutline.style.width = `${selectedElementDimension.width}px`;\n focusOutline.style.height = `${selectedElementDimension.height}px`;\n }\n }\n\n /\n Update the focus overlays if they exists.\n /\n\n const focusedOverlayTop = focusOverlayWrapper.querySelector<HTMLDivElement>(\n \".visual-builder__overlay--top\"\n );\n const focusedOverlayBottom = focusOverlayWrapper.querySelector<HTMLDivElement>(\n \".visual-builder__overlay--bottom\"\n );\n const focusedOverlayLeft = focusOverlayWrapper.querySelector<HTMLDivElement>(\n \".visual-builder__overlay--left\"\n );\n const focusedOverlayRight = focusOverlayWrapper.querySelector<HTMLDivElement>(\n \".visual-builder__overlay--right\"\n );\n\n const distanceFromTop = selectedElementDimension.top + window.scrollY;\n\n if (focusedOverlayTop) {\n const dimension = focusedOverlayTop.getBoundingClientRect();\n if(dimension.height !== distanceFromTop) {\n focusedOverlayTop.style.height = `calc(${distanceFromTop}px)`;\n }\n }\n\n if (focusedOverlayBottom) {\n const dimension = focusedOverlayBottom.getBoundingClientRect();\n if(dimension.top !== selectedElementDimension.bottom \|\|\n dimension.height !== window.document.body.scrollHeight - selectedElementDimension.bottom - window.scrollY) {\n focusedOverlayBottom.style.top = `${\n selectedElementDimension.bottom + window.scrollY\n }px`;\n focusedOverlayBottom.style.height = `${\n window.document.body.scrollHeight -\n selectedElementDimension.bottom -\n window.scrollY\n }px`;\n }\n }\n\n if (focusedOverlayLeft) {\n const dimension = focusedOverlayLeft.getBoundingClientRect();\n if(dimension.top + window.scrollY !== distanceFromTop \|\|\n dimension.height !== selectedElementDimension.height \|\|\n dimension.width !== selectedElementDimension.left) {\n focusedOverlayLeft.style.top = `${distanceFromTop}px`;\n focusedOverlayLeft.style.height = `${selectedElementDimension.height}px`;\n focusedOverlayLeft.style.width = `${selectedElementDimension.left}px`;\n }\n }\n\n if (focusedOverlayRight) {\n const dimension = focusedOverlayRight.getBoundingClientRect();\n if(dimension.left !== selectedElementDimension.right \|\|\n dimension.top + window.scrollY !== distanceFromTop \|\|\n dimension.height !== selectedElementDimension.height \|\|\n dimension.width !== document.documentElement.clientWidth - selectedElementDimension.right) {\n focusedOverlayRight.style.left = `${selectedElementDimension.right}px`;\n focusedOverlayRight.style.top = `${distanceFromTop}px`;\n focusedOverlayRight.style.height = `${selectedElementDimension.height}px`;\n focusedOverlayRight.style.width = `${\n document.documentElement.clientWidth - selectedElementDimension.right\n }px`;\n }\n }\n\n /\n Update the focus toolbar if it exists.\n /\n\n if (focusedToolbar) {\n const targetElementRightEdgeOffset = window.scrollX + window.innerWidth - selectedElementDimension.left;\n const distanceFromTop =\n selectedElementDimension.top + window.scrollY - TOOLBAR_EDGE_BUFFER;\n // Position the toolbar at the top unless there's insufficient space or scrolling up is not possible (topmost element targetted).\n const adjustedDistanceFromTop =\n selectedElementDimension.top + window.scrollY < TOP_EDGE_BUFFER\n ? distanceFromTop + selectedElementDimension.height + TOP_EDGE_BUFFER\n : distanceFromTop;\n\n const distanceFromLeft =\n selectedElementDimension.left - LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX;\n const adjustedDistanceFromLeft = Math.max(\n distanceFromLeft,\n TOOLBAR_EDGE_BUFFER\n );\n\n if (targetElementRightEdgeOffset < RIGHT_EDGE_BUFFER &&\n ( focusedToolbar.style.justifyContent !== \"flex-end\" \|\|\n focusedToolbar.style.left !== `${\n selectedElementDimension.right + LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX\n }px` )\n ) {\n // Overflow / Cutoff on right edge\n focusedToolbar.style.justifyContent = \"flex-end\";\n focusedToolbar.style.left = `${\n selectedElementDimension.right + LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX\n }px`;\n } else if (focusedToolbar.style.justifyContent !== \"flex-start\" \|\|\n focusedToolbar.style.left !== `${adjustedDistanceFromLeft}px`\n ) {\n focusedToolbar.style.justifyContent = \"flex-start\"; // default\n focusedToolbar.style.left = `${adjustedDistanceFromLeft}px`;\n }\n\n if(focusedToolbar.style.top !== `${adjustedDistanceFromTop}px`){\n focusedToolbar.style.top = `${adjustedDistanceFromTop}px`;\n }\n }\n\n /\n Update the pseudo-editable if it exists.\n */\n\n if (visualBuilderContainer) {\n const psuedoEditableElement = visualBuilderContainer.querySelector(\n \".visual-builder__pseudo-editable-element\"\n ) as HTMLElement;\n const editableElement = selectedElement as HTMLElement;\n const styles = getStyleOfAnElement(editableElement);\n const styleString = Object.entries(styles).reduce(\n (acc, [key, value]) => {\n return `${acc}${key}:${value};`;\n },\n \"\"\n );\n if (psuedoEditableElement &&\n (\n psuedoEditableElement.style.cssText !== styleString \|\|\n psuedoEditableElement.style.visibility !== \"visible\" \|\|\n psuedoEditableElement.style.position !== \"absolute\" \|\|\n psuedoEditableElement.style.top !== `${editableElement.offsetTop}px` \|\|\n psuedoEditableElement.style.left !== `${editableElement.offsetLeft}px`\n )\n ) {\n psuedoEditableElement.style.cssText = styleString;\n psuedoEditableElement.style.visibility = \"visible\";\n psuedoEditableElement.style.position = \"absolute\";\n psuedoEditableElement.style.top = `${editableElement.offsetTop}px`;\n psuedoEditableElement.style.left = `${editableElement.offsetLeft}px`;\n }\n }\n}\n\nfunction isSameRect(rect1: DOMRect, rect2: DOMRect) {\n return (\n rect1.top === rect2.top &&\n rect1.left === rect2.left &&\n rect1.width === rect2.width &&\n rect1.height === rect2.height\n );\n}"],"mappings":"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","names":["distanceFromTop"]}
1	+ {"version":3,"sources":["../../../../src/visualBuilder/utils/updateFocussedState.ts"],"sourcesContent":["import { VisualBuilder } from \"..\";\nimport { extractDetailsFromCslp } from \"../../cslp\";\nimport { getAddInstanceButtons } from \"../generators/generateAddInstanceButtons\";\nimport {\n addFocusOverlay,\n hideFocusOverlay,\n} from \"../generators/generateOverlay\";\nimport { hideHoverOutline } from \"../listeners/mouseHover\";\nimport {\n LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX,\n RIGHT_EDGE_BUFFER,\n TOOLBAR_EDGE_BUFFER,\n TOP_EDGE_BUFFER,\n} from \"./constants\";\nimport getChildrenDirection from \"./getChildrenDirection\";\nimport { getPsuedoEditableElementStyles } from \"./getPsuedoEditableStylesElement\";\nimport getStyleOfAnElement from \"./getStyleOfAnElement\";\n\ninterface ToolbarPositionParams {\n focusedToolbar: HTMLElement \| null;\n selectedElementDimension: DOMRect;\n}\n/*\n Adjust the position of the field toolbar instead of clearing the innerhtml fo the focused toolbar.\n * By doing this, can avoid the re-rendering of the focus field toolbar.\n /\nfunction positionToolbar({\n focusedToolbar,\n selectedElementDimension,\n}: ToolbarPositionParams): void {\n if (focusedToolbar) {\n const targetElementRightEdgeOffset =\n window.scrollX + window.innerWidth - selectedElementDimension.left;\n const distanceFromTop =\n selectedElementDimension.top + window.scrollY - TOOLBAR_EDGE_BUFFER;\n\n // Adjust top position based on the available space\n const adjustedDistanceFromTop =\n selectedElementDimension.top + window.scrollY < TOP_EDGE_BUFFER\n ? distanceFromTop +\n selectedElementDimension.height +\n TOP_EDGE_BUFFER\n : distanceFromTop;\n\n const distanceFromLeft =\n selectedElementDimension.left - LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX;\n const adjustedDistanceFromLeft = Math.max(\n distanceFromLeft,\n TOOLBAR_EDGE_BUFFER\n );\n\n // Handle right-edge overflow\n if (\n targetElementRightEdgeOffset < RIGHT_EDGE_BUFFER &&\n (focusedToolbar.style.justifyContent !== \"flex-end\" \|\|\n focusedToolbar.style.left !==\n `${selectedElementDimension.right + LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX}px`)\n ) {\n focusedToolbar.style.justifyContent = \"flex-end\";\n focusedToolbar.style.left = `${selectedElementDimension.right + LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX}px`;\n } else if (\n focusedToolbar.style.justifyContent !== \"flex-start\" \|\|\n focusedToolbar.style.left !== `${adjustedDistanceFromLeft}px`\n ) {\n focusedToolbar.style.justifyContent = \"flex-start\"; // Default\n focusedToolbar.style.left = `${adjustedDistanceFromLeft}px`;\n }\n\n // Adjust top position if necessary\n if (focusedToolbar.style.top !== `${adjustedDistanceFromTop}px`) {\n focusedToolbar.style.top = `${adjustedDistanceFromTop}px`;\n }\n }\n}\n\n/\n This function can be used to re-draw/update the focussed state of an element.\n * The focussed state includes the overlay, psuedo-editable, toolbar, and multiple\n * instance add buttons. It is similar to handleBuilderInteraction but it does not\n * create new elements, it just updates the existing ones whenever possible.\n * NOTE: breakdown this function into multiple functions when the need arises\n /\nexport function updateFocussedState({\n editableElement,\n visualBuilderContainer,\n overlayWrapper,\n focusedToolbar,\n resizeObserver,\n}: {\n editableElement: HTMLElement \| null;\n visualBuilderContainer: HTMLDivElement \| null;\n overlayWrapper: HTMLDivElement \| null;\n focusedToolbar: HTMLDivElement \| null;\n resizeObserver: ResizeObserver \| null;\n}): void {\n let previousSelectedEditableDOM =\n VisualBuilder.VisualBuilderGlobalState.value\n .previousSelectedEditableDOM;\n if (\n !visualBuilderContainer \|\|\n !editableElement \|\|\n !previousSelectedEditableDOM \|\|\n !overlayWrapper\n ) {\n return;\n }\n\n const previousSelectedElementCslp =\n previousSelectedEditableDOM?.getAttribute(\"data-cslp\");\n const newPreviousSelectedElement = document.querySelector(\n `[data-cslp=\"${previousSelectedElementCslp}\"]`\n );\n if (!newPreviousSelectedElement && resizeObserver) {\n hideFocusOverlay({\n visualBuilderOverlayWrapper: overlayWrapper,\n focusedToolbar,\n visualBuilderContainer,\n resizeObserver,\n noTrigger: true,\n });\n return;\n }\n if (newPreviousSelectedElement !== previousSelectedEditableDOM) {\n previousSelectedEditableDOM = newPreviousSelectedElement as HTMLElement;\n VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM =\n previousSelectedEditableDOM;\n }\n\n hideHoverOutline(visualBuilderContainer);\n addFocusOverlay(previousSelectedEditableDOM, overlayWrapper);\n\n // update psuedo editable element if present\n const psuedoEditableElement = visualBuilderContainer.querySelector(\n \".visual-builder__pseudo-editable-element\"\n ) as HTMLElement;\n if (psuedoEditableElement) {\n const styles = getPsuedoEditableElementStyles(editableElement);\n const styleString = Object.entries(styles).reduce(\n (acc, [key, value]) => {\n return `${acc}${key}:${value};`;\n },\n \"\"\n );\n psuedoEditableElement.style.cssText = styleString;\n // since we are copying styles from the editableEl\n // it will now have a visibility of hidden, which we added\n // when creating the pseudo editable element, so make the psuedo visible\n psuedoEditableElement.style.visibility = \"visible\";\n }\n\n const cslp = editableElement?.getAttribute(\"data-cslp\") \|\| \"\";\n const fieldMetadata = extractDetailsFromCslp(cslp);\n\n const targetElementDimension = editableElement.getBoundingClientRect();\n if (targetElementDimension.width && targetElementDimension.height) {\n const selectedElement =\n VisualBuilder.VisualBuilderGlobalState.value\n .previousSelectedEditableDOM;\n\n if (!selectedElement) return;\n // position the focused tool bar\n positionToolbar({\n focusedToolbar: focusedToolbar,\n selectedElementDimension: selectedElement.getBoundingClientRect(),\n });\n }\n\n // re-add multiple instance add buttons\n const buttons = getAddInstanceButtons(visualBuilderContainer);\n const parentCslpValue =\n fieldMetadata.multipleFieldMetadata?.parentDetails?.parentCslpValue;\n if (\n buttons &&\n parentCslpValue &&\n buttons.length > 1 &&\n buttons[0] &&\n buttons[1]\n ) {\n const [previousButton, nextButton] = buttons;\n const direction = getChildrenDirection(\n editableElement,\n parentCslpValue\n );\n const targetDOMDimension = editableElement.getBoundingClientRect();\n\n if (direction === \"horizontal\") {\n const middleHeight =\n targetDOMDimension.top +\n (targetDOMDimension.bottom - targetDOMDimension.top) / 2 +\n window.scrollY;\n previousButton.style.left = `${targetDOMDimension.left}px`;\n previousButton.style.top = `${middleHeight}px`;\n\n nextButton.style.left = `${targetDOMDimension.right}px`;\n nextButton.style.top = `${middleHeight}px`;\n } else if (direction === \"vertical\") {\n const middleWidth =\n targetDOMDimension.left +\n (targetDOMDimension.right - targetDOMDimension.left) / 2;\n previousButton.style.left = `${middleWidth}px`;\n previousButton.style.top = `${\n targetDOMDimension.top + window.scrollY\n }px`;\n\n nextButton.style.left = `${middleWidth}px`;\n nextButton.style.top = `${\n targetDOMDimension.bottom + window.scrollY\n }px`;\n }\n }\n}\n\n/\n This function is used to resize/reposition focus overlay and toolbar due to a\n * mutation in the DOM or due to changes in a different field (other than the focussed field).\n /\nexport function updateFocussedStateOnMutation(\n focusOverlayWrapper: HTMLDivElement \| null,\n focusedToolbar: HTMLDivElement \| null,\n visualBuilderContainer: HTMLDivElement \| null,\n resizeObserver: ResizeObserver \| null\n) {\n if (!focusOverlayWrapper) return;\n\n let selectedElement =\n VisualBuilder.VisualBuilderGlobalState.value\n .previousSelectedEditableDOM;\n if (!selectedElement) return;\n\n const selectedElementCslp = selectedElement?.getAttribute(\"data-cslp\");\n const newSelectedElement = document.querySelector(\n `[data-cslp=\"${selectedElementCslp}\"]`\n );\n if (!newSelectedElement && resizeObserver) {\n hideFocusOverlay({\n visualBuilderOverlayWrapper: focusOverlayWrapper,\n focusedToolbar,\n visualBuilderContainer,\n resizeObserver,\n noTrigger: true,\n });\n return;\n }\n\n if (newSelectedElement !== selectedElement) {\n selectedElement = newSelectedElement as HTMLElement;\n VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM =\n selectedElement;\n }\n\n const selectedElementDimension = selectedElement.getBoundingClientRect();\n\n /\n Update the focus outline if it exists.\n /\n const focusOutline = focusOverlayWrapper.querySelector<HTMLDivElement>(\n \".visual-builder__overlay--outline\"\n );\n\n if (focusOutline) {\n const focusOutlineDimension = focusOutline.getBoundingClientRect();\n if (!isSameRect(selectedElementDimension, focusOutlineDimension)) {\n focusOutline.style.top = `${selectedElementDimension.top + window.scrollY}px`;\n focusOutline.style.left = `${selectedElementDimension.left}px`;\n focusOutline.style.width = `${selectedElementDimension.width}px`;\n focusOutline.style.height = `${selectedElementDimension.height}px`;\n }\n }\n\n /\n Update the focus overlays if they exists.\n /\n\n const focusedOverlayTop = focusOverlayWrapper.querySelector<HTMLDivElement>(\n \".visual-builder__overlay--top\"\n );\n const focusedOverlayBottom =\n focusOverlayWrapper.querySelector<HTMLDivElement>(\n \".visual-builder__overlay--bottom\"\n );\n const focusedOverlayLeft =\n focusOverlayWrapper.querySelector<HTMLDivElement>(\n \".visual-builder__overlay--left\"\n );\n const focusedOverlayRight =\n focusOverlayWrapper.querySelector<HTMLDivElement>(\n \".visual-builder__overlay--right\"\n );\n\n const distanceFromTop = selectedElementDimension.top + window.scrollY;\n\n if (focusedOverlayTop) {\n const dimension = focusedOverlayTop.getBoundingClientRect();\n if (dimension.height !== distanceFromTop) {\n focusedOverlayTop.style.height = `calc(${distanceFromTop}px)`;\n }\n }\n\n if (focusedOverlayBottom) {\n const dimension = focusedOverlayBottom.getBoundingClientRect();\n if (\n dimension.top !== selectedElementDimension.bottom \|\|\n dimension.height !==\n window.document.body.scrollHeight -\n selectedElementDimension.bottom -\n window.scrollY\n ) {\n focusedOverlayBottom.style.top = `${\n selectedElementDimension.bottom + window.scrollY\n }px`;\n focusedOverlayBottom.style.height = `${\n window.document.body.scrollHeight -\n selectedElementDimension.bottom -\n window.scrollY\n }px`;\n }\n }\n\n if (focusedOverlayLeft) {\n const dimension = focusedOverlayLeft.getBoundingClientRect();\n if (\n dimension.top + window.scrollY !== distanceFromTop \|\|\n dimension.height !== selectedElementDimension.height \|\|\n dimension.width !== selectedElementDimension.left\n ) {\n focusedOverlayLeft.style.top = `${distanceFromTop}px`;\n focusedOverlayLeft.style.height = `${selectedElementDimension.height}px`;\n focusedOverlayLeft.style.width = `${selectedElementDimension.left}px`;\n }\n }\n\n if (focusedOverlayRight) {\n const dimension = focusedOverlayRight.getBoundingClientRect();\n if (\n dimension.left !== selectedElementDimension.right \|\|\n dimension.top + window.scrollY !== distanceFromTop \|\|\n dimension.height !== selectedElementDimension.height \|\|\n dimension.width !==\n document.documentElement.clientWidth -\n selectedElementDimension.right\n ) {\n focusedOverlayRight.style.left = `${selectedElementDimension.right}px`;\n focusedOverlayRight.style.top = `${distanceFromTop}px`;\n focusedOverlayRight.style.height = `${selectedElementDimension.height}px`;\n focusedOverlayRight.style.width = `${\n document.documentElement.clientWidth -\n selectedElementDimension.right\n }px`;\n }\n }\n\n /\n Update the focus toolbar if it exists.\n /\n\n if (focusedToolbar) {\n const targetElementRightEdgeOffset =\n window.scrollX + window.innerWidth - selectedElementDimension.left;\n const distanceFromTop =\n selectedElementDimension.top + window.scrollY - TOOLBAR_EDGE_BUFFER;\n // Position the toolbar at the top unless there's insufficient space or scrolling up is not possible (topmost element targetted).\n const adjustedDistanceFromTop =\n selectedElementDimension.top + window.scrollY < TOP_EDGE_BUFFER\n ? distanceFromTop +\n selectedElementDimension.height +\n TOP_EDGE_BUFFER\n : distanceFromTop;\n\n const distanceFromLeft =\n selectedElementDimension.left - LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX;\n const adjustedDistanceFromLeft = Math.max(\n distanceFromLeft,\n TOOLBAR_EDGE_BUFFER\n );\n\n if (\n targetElementRightEdgeOffset < RIGHT_EDGE_BUFFER &&\n (focusedToolbar.style.justifyContent !== \"flex-end\" \|\|\n focusedToolbar.style.left !==\n `${\n selectedElementDimension.right +\n LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX\n }px`)\n ) {\n // Overflow / Cutoff on right edge\n focusedToolbar.style.justifyContent = \"flex-end\";\n focusedToolbar.style.left = `${\n selectedElementDimension.right +\n LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX\n }px`;\n } else if (\n focusedToolbar.style.justifyContent !== \"flex-start\" \|\|\n focusedToolbar.style.left !== `${adjustedDistanceFromLeft}px`\n ) {\n focusedToolbar.style.justifyContent = \"flex-start\"; // default\n focusedToolbar.style.left = `${adjustedDistanceFromLeft}px`;\n }\n\n if (focusedToolbar.style.top !== `${adjustedDistanceFromTop}px`) {\n focusedToolbar.style.top = `${adjustedDistanceFromTop}px`;\n }\n }\n\n /\n Update the pseudo-editable if it exists.\n */\n\n if (visualBuilderContainer) {\n const psuedoEditableElement = visualBuilderContainer.querySelector(\n \".visual-builder__pseudo-editable-element\"\n ) as HTMLElement;\n const editableElement = selectedElement as HTMLElement;\n const styles = getPsuedoEditableElementStyles(editableElement);\n const styleString = Object.entries(styles).reduce(\n (acc, [key, value]) => {\n return `${acc}${key}:${value};`;\n },\n \"\"\n );\n if (\n psuedoEditableElement &&\n (psuedoEditableElement.style.cssText !== styleString \|\|\n psuedoEditableElement.style.visibility !== \"visible\")\n ) {\n psuedoEditableElement.style.cssText = styleString;\n // since we are copying styles from the editableEl\n // it will now have a visibility of hidden, which we added\n // when creating the pseudo editable element, so make the psuedo visible\n psuedoEditableElement.style.visibility = \"visible\";\n }\n }\n}\n\nfunction isSameRect(rect1: DOMRect, rect2: DOMRect) {\n return (\n rect1.top === rect2.top &&\n rect1.left === rect2.left &&\n rect1.width === rect2.width &&\n rect1.height === rect2.height\n );\n}\n"],"mappings":"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","names":["distanceFromTop"]}

package/dist/modern/livePreview/editButton/editButton.style.cjs CHANGED Viewed

@@ -28,7 +28,6 @@ function cslpTagStyles() {
   return {
     "cslp-edit-mode": import_goober.css`
             outline: 1px dashed #6c5ce7 !important;
-            position: relative !important;
         `,
     "cslp-tooltip": import_goober.css`
             padding: 0;

package/dist/modern/livePreview/editButton/editButton.style.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/livePreview/editButton/editButton.style.ts"],"sourcesContent":["import { css } from \"goober\";\n\nexport function cslpTagStyles() {\n return {\n \"cslp-edit-mode\": css`\n outline: 1px dashed #6c5ce7 !important;\n ~~position: relative !important;\n~~ `,\n \"cslp-tooltip\": css`\n padding: 0;\n display: flex;\n outline: none;\n border: none;\n z-index: 200 !important;\n position: fixed;\n margin: 0;\n height: 35px;\n width: 72px;\n background: white;\n font-weight: 400 !important;\n color: #718096 !important;\n transition: background 0.2s;\n text-align: center !important;\n border-radius: 8px !important;\n font-size: 14px !important;\n justify-content: space-around;\n align-items: center;\n box-shadow: 0px 8px 20px 0px #2222221a;\n box-sizing: border-box;\n top: -100%;\n & div {\n display: flex;\n justify-content: space-around;\n border-radius: 6px !important;\n cursor: pointer;\n }\n\n & div.cslp-tooltip-child:hover {\n background: #edf2f7;\n }\n\n & div.cslp-tooltip-child:active:hover {\n background: #c7d0e1;\n }\n\n & > div {\n display: flex;\n justify-content: space-evenly;\n white-space: nowrap;\n width: 70px;\n }\n\n & .cslp-tooltip-child.singular {\n padding: 9px 1px;\n }\n `,\n multiple: css`\n & div.cslp-tooltip-child {\n padding: 9px;\n }\n\n & div.cslp-tooltip-child:before {\n opacity: 0;\n font-size: 12px;\n font-weight: 400;\n pointer-events: none;\n content: attr(data-title);\n color: white;\n padding: 5px 10px;\n border-radius: 4px;\n position: absolute;\n background: #4a5568;\n top: -30px;\n transition: 0.2s all ease-in-out;\n }\n\n & div.cslp-tooltip-child:hover:before {\n opacity: 1;\n }\n `,\n } as const;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAoB;AAEb,SAAS,gBAAgB;AAC5B,SAAO;AAAA,IACH,kBAAkB;AAAA;AAAA;AAAA~~;AAAA~~,~~IAIlB~~,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAgDhB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAwBd;AACJ;","names":[]}
1	+ {"version":3,"sources":["../../../../src/livePreview/editButton/editButton.style.ts"],"sourcesContent":["import { css } from \"goober\";\n\nexport function cslpTagStyles() {\n return {\n \"cslp-edit-mode\": css`\n outline: 1px dashed #6c5ce7 !important;\n `,\n \"cslp-tooltip\": css`\n padding: 0;\n display: flex;\n outline: none;\n border: none;\n z-index: 200 !important;\n position: fixed;\n margin: 0;\n height: 35px;\n width: 72px;\n background: white;\n font-weight: 400 !important;\n color: #718096 !important;\n transition: background 0.2s;\n text-align: center !important;\n border-radius: 8px !important;\n font-size: 14px !important;\n justify-content: space-around;\n align-items: center;\n box-shadow: 0px 8px 20px 0px #2222221a;\n box-sizing: border-box;\n top: -100%;\n & div {\n display: flex;\n justify-content: space-around;\n border-radius: 6px !important;\n cursor: pointer;\n }\n\n & div.cslp-tooltip-child:hover {\n background: #edf2f7;\n }\n\n & div.cslp-tooltip-child:active:hover {\n background: #c7d0e1;\n }\n\n & > div {\n display: flex;\n justify-content: space-evenly;\n white-space: nowrap;\n width: 70px;\n }\n\n & .cslp-tooltip-child.singular {\n padding: 9px 1px;\n }\n `,\n multiple: css`\n & div.cslp-tooltip-child {\n padding: 9px;\n }\n\n & div.cslp-tooltip-child:before {\n opacity: 0;\n font-size: 12px;\n font-weight: 400;\n pointer-events: none;\n content: attr(data-title);\n color: white;\n padding: 5px 10px;\n border-radius: 4px;\n position: absolute;\n background: #4a5568;\n top: -30px;\n transition: 0.2s all ease-in-out;\n }\n\n & div.cslp-tooltip-child:hover:before {\n opacity: 1;\n }\n `,\n } as const;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAoB;AAEb,SAAS,gBAAgB;AAC5B,SAAO;AAAA,IACH,kBAAkB;AAAA;AAAA;AAAA,IAGlB,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAgDhB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAwBd;AACJ;","names":[]}

package/dist/modern/livePreview/editButton/editButton.style.js CHANGED Viewed

@@ -6,7 +6,6 @@ function cslpTagStyles() {
   return {
     "cslp-edit-mode": css`
             outline: 1px dashed #6c5ce7 !important;
-            position: relative !important;
         `,
     "cslp-tooltip": css`
             padding: 0;

package/dist/modern/livePreview/editButton/editButton.style.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/livePreview/editButton/editButton.style.ts"],"sourcesContent":["import { css } from \"goober\";\n\nexport function cslpTagStyles() {\n return {\n \"cslp-edit-mode\": css`\n outline: 1px dashed #6c5ce7 !important;\n ~~position: relative !important;\n~~ `,\n \"cslp-tooltip\": css`\n padding: 0;\n display: flex;\n outline: none;\n border: none;\n z-index: 200 !important;\n position: fixed;\n margin: 0;\n height: 35px;\n width: 72px;\n background: white;\n font-weight: 400 !important;\n color: #718096 !important;\n transition: background 0.2s;\n text-align: center !important;\n border-radius: 8px !important;\n font-size: 14px !important;\n justify-content: space-around;\n align-items: center;\n box-shadow: 0px 8px 20px 0px #2222221a;\n box-sizing: border-box;\n top: -100%;\n & div {\n display: flex;\n justify-content: space-around;\n border-radius: 6px !important;\n cursor: pointer;\n }\n\n & div.cslp-tooltip-child:hover {\n background: #edf2f7;\n }\n\n & div.cslp-tooltip-child:active:hover {\n background: #c7d0e1;\n }\n\n & > div {\n display: flex;\n justify-content: space-evenly;\n white-space: nowrap;\n width: 70px;\n }\n\n & .cslp-tooltip-child.singular {\n padding: 9px 1px;\n }\n `,\n multiple: css`\n & div.cslp-tooltip-child {\n padding: 9px;\n }\n\n & div.cslp-tooltip-child:before {\n opacity: 0;\n font-size: 12px;\n font-weight: 400;\n pointer-events: none;\n content: attr(data-title);\n color: white;\n padding: 5px 10px;\n border-radius: 4px;\n position: absolute;\n background: #4a5568;\n top: -30px;\n transition: 0.2s all ease-in-out;\n }\n\n & div.cslp-tooltip-child:hover:before {\n opacity: 1;\n }\n `,\n } as const;\n}\n"],"mappings":";;;AAAA,SAAS,WAAW;AAEb,SAAS,gBAAgB;AAC5B,SAAO;AAAA,IACH,kBAAkB;AAAA;AAAA;AAAA~~;AAAA~~,~~IAIlB~~,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAgDhB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAwBd;AACJ;","names":[]}
1	+ {"version":3,"sources":["../../../../src/livePreview/editButton/editButton.style.ts"],"sourcesContent":["import { css } from \"goober\";\n\nexport function cslpTagStyles() {\n return {\n \"cslp-edit-mode\": css`\n outline: 1px dashed #6c5ce7 !important;\n `,\n \"cslp-tooltip\": css`\n padding: 0;\n display: flex;\n outline: none;\n border: none;\n z-index: 200 !important;\n position: fixed;\n margin: 0;\n height: 35px;\n width: 72px;\n background: white;\n font-weight: 400 !important;\n color: #718096 !important;\n transition: background 0.2s;\n text-align: center !important;\n border-radius: 8px !important;\n font-size: 14px !important;\n justify-content: space-around;\n align-items: center;\n box-shadow: 0px 8px 20px 0px #2222221a;\n box-sizing: border-box;\n top: -100%;\n & div {\n display: flex;\n justify-content: space-around;\n border-radius: 6px !important;\n cursor: pointer;\n }\n\n & div.cslp-tooltip-child:hover {\n background: #edf2f7;\n }\n\n & div.cslp-tooltip-child:active:hover {\n background: #c7d0e1;\n }\n\n & > div {\n display: flex;\n justify-content: space-evenly;\n white-space: nowrap;\n width: 70px;\n }\n\n & .cslp-tooltip-child.singular {\n padding: 9px 1px;\n }\n `,\n multiple: css`\n & div.cslp-tooltip-child {\n padding: 9px;\n }\n\n & div.cslp-tooltip-child:before {\n opacity: 0;\n font-size: 12px;\n font-weight: 400;\n pointer-events: none;\n content: attr(data-title);\n color: white;\n padding: 5px 10px;\n border-radius: 4px;\n position: absolute;\n background: #4a5568;\n top: -30px;\n transition: 0.2s all ease-in-out;\n }\n\n & div.cslp-tooltip-child:hover:before {\n opacity: 1;\n }\n `,\n } as const;\n}\n"],"mappings":";;;AAAA,SAAS,WAAW;AAEb,SAAS,gBAAgB;AAC5B,SAAO;AAAA,IACH,kBAAkB;AAAA;AAAA;AAAA,IAGlB,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAgDhB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAwBd;AACJ;","names":[]}

package/dist/modern/livePreview/eventManager/postMessageEvent.hooks.cjs CHANGED Viewed

@@ -86,7 +86,7 @@ function sendInitializeLivePreviewPostMessageEvent() {
       config: {
         shouldReload: import_configManager.default.get().ssr,
         href: window.location.href,
-        sdkVersion: "3.0.0",
+        sdkVersion: "3.0.1",
         mode: import_configManager.default.get().mode
       }
     }

package/dist/modern/livePreview/eventManager/postMessageEvent.hooks.js CHANGED Viewed

@@ -52,7 +52,7 @@ function sendInitializeLivePreviewPostMessageEvent() {
       config: {
         shouldReload: Config.get().ssr,
         href: window.location.href,
-        sdkVersion: "3.0.0",
+        sdkVersion: "3.0.1",
         mode: Config.get().mode
       }
     }

package/dist/modern/preview/contentstack-live-preview-HOC.cjs CHANGED Viewed

@@ -204,7 +204,7 @@ var _ContentstackLivePreview = class _ContentstackLivePreview {
    * @returns The version of the SDK as a string.
    */
   static getSdkVersion() {
-    return "3.0.0";
+    return "3.0.1";
   }
 };
 _ContentstackLivePreview.previewConstructors = {};

package/dist/modern/preview/contentstack-live-preview-HOC.js CHANGED Viewed

@@ -172,7 +172,7 @@ var _ContentstackLivePreview = class _ContentstackLivePreview {
    * @returns The version of the SDK as a string.
    */
   static getSdkVersion() {
-    return "3.0.0";
+    return "3.0.1";
   }
 };
 _ContentstackLivePreview.previewConstructors = {};

package/dist/modern/visualBuilder/components/FieldToolbar.cjs CHANGED Viewed

@@ -263,6 +263,13 @@ function FieldToolbarComponent(props) {
     }
     fetchFieldSchema();
   }, [fieldMetadata]);
+  (0, import_compat.useEffect)(() => {
+    import_visualBuilderPostMessage.default?.on(import_postMessage.VisualBuilderPostMessageEvents.DELETE_INSTANCE, (args) => {
+      if (args.data?.path === fieldMetadata.instance.fieldPathWithIndex) {
+        props.hideOverlay();
+      }
+    });
+  }, []);
   const multipleFieldToolbarButtonClasses = (0, import_classnames.default)(
     "visual-builder__button visual-builder__button--secondary",
     (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__button"],