@bigbinary/neeto-site-blocks 1.10.12 → 1.10.13

package/dist/index.cjs.js

@@ -11,8 +11,8 @@ var _defineProperty$1 = require('@babel/runtime/helpers/defineProperty');
 var neetoCist = require('@bigbinary/neeto-cist');
 var ramda = require('ramda');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
 var reactFrameComponent = require('react-frame-component');
+var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
 var _regeneratorRuntime = require('@babel/runtime/regenerator');
@@ -13952,6 +13952,8 @@ var useElementClick = function useElementClick(_ref) {
     index = _ref$index === void 0 ? undefined : _ref$index,
     _ref$isTitle = _ref.isTitle,
     isTitle = _ref$isTitle === void 0 ? false : _ref$isTitle;
+  var _useFrame = reactFrameComponent.useFrame(),
+    iframeDocument = _useFrame.document;
   var getScrollableParent = function getScrollableParent(element) {
     if (!element) return null;
     var isScrollable = function isScrollable(el) {
@@ -13981,11 +13983,24 @@ var useElementClick = function useElementClick(_ref) {
     };
     scrollableParent.scrollTo(scrollOptions);
   };
+  var addHighlightClass = function addHighlightClass(id) {
+    var previousHighlightedElement = iframeDocument === null || iframeDocument === void 0 ? void 0 : iframeDocument.querySelector(".persist-highlight");
+    if (previousHighlightedElement) {
+      previousHighlightedElement.classList.remove("persist-highlight");
+    }
+
+    // Add the 'persist-highlight' class to the target element
+    var targetElement = iframeDocument === null || iframeDocument === void 0 ? void 0 : iframeDocument.getElementById(id);
+    if (targetElement) {
+      targetElement.classList.add("persist-highlight");
+    }
+  };
 
   // This function is used as the click handler for "Link" and "Button" elements in the to highlight the element
   var handleClick = function handleClick(event) {
     event.preventDefault();
     if (!id) return;
+    addHighlightClass(id);
     setTimeout(function () {
       var accordion = document.querySelector("[data-accordion-id=".concat(id === null || id === void 0 ? void 0 : id.replace(/-[^-]+$/, ""), "]"));
       var element = document.querySelector("[data-element-id=".concat(id, "]"));
@@ -14026,6 +14041,8 @@ var useElementClick = function useElementClick(_ref) {
 
   // This function is used as the click handler for "Typography" to highlight the element
   var handleTitleClick = function handleTitleClick() {
+    if (!id) return;
+    addHighlightClass(id);
     setTimeout(function () {
       if (!document) return;
       var accordion = document.querySelector("[data-accordion-id=".concat(id === null || id === void 0 ? void 0 : id.replace(/-[^-]+$/, ""), "]"));
@@ -14075,7 +14092,9 @@ var useElementClick = function useElementClick(_ref) {
 
   // This function is used as the click handler for "Image" elements to highlight the element`
   var handleImageClick = function handleImageClick(event) {
+    if (!id) return;
     event.preventDefault();
+    addHighlightClass(id);
     setTimeout(function () {
       if (neetoCist.isPresent(index)) {
         var accordion = document.querySelector("[data-accordion-id=".concat(id === null || id === void 0 ? void 0 : id.replace(/-[^-]+$/, ""), "]"));
@@ -14161,6 +14180,7 @@ var StyledImageWithWrapper = function StyledImageWithWrapper(_ref2) {
     }),
     handleImageClick = _useElementClick.handleImageClick;
   return /*#__PURE__*/React__default["default"].createElement(StyledWrapper, {
+    id: id,
     className: classnames__default["default"]("flex justify-center", _defineProperty__default["default"]({
       "neeto-site-highlight__element": disableButtonAndLinks && !isAddNewPane
     }, wrapperClassName, wrapperClassName)),
@@ -15394,7 +15414,8 @@ var Button = function Button(_ref) {
     href: to !== null && to !== void 0 ? to : "",
     rel: "noreferrer",
     isButton: true,
-    onClick: disableButtonAndLinks && handleClick
+    onClick: disableButtonAndLinks && handleClick,
+    id: id
   };
   if (action === "external") {
     return /*#__PURE__*/React__default["default"].createElement(StyledAnchor, _extends__default["default"]({}, commonProps, {
@@ -15510,7 +15531,8 @@ var LinkElement = function LinkElement(_ref) {
     percentage: 0.1,
     isHighlighted: isHighlighted,
     disableHovering: disableHovering,
-    onClick: handleLinkClick
+    onClick: handleLinkClick,
+    id: id
   }, otherProps);
   if (action === "external") {
     return /*#__PURE__*/React__default["default"].createElement(StyledAnchor, _extends__default["default"]({}, commonProps, {