@blaze-cms/react-page-builder 0.146.0-node18-core-styles-tooltips.5 → 0.146.0-node18-core-styles-tooltips.12

package/lib-es/hooks/use-app-sync-event-hook.js

@@ -1,22 +1,34 @@
-import { useContext } from 'react';
+import { useContext, useCallback } from 'react';
 import { AppContext } from '@blaze-cms/nextjs-components';
 const EVENET_PREFIX = 'plugin:page-builder:';
 const EVENET_SUFIX = ':sync';
 const useAppSyncEventHook = ({
   eventName,
   data,
-  props
+  props,
+  returnFunction
 }) => {
   const {
     blazeApp
   } = useContext(AppContext);
+  const runHook = useCallback(newData => {
+    const eventData = newData || data;
+    blazeApp.events.emit(`${EVENET_PREFIX}${eventName}${EVENET_SUFIX}`, {
+      data: eventData,
+      props
+    });
+    return eventData;
+  }, [blazeApp, eventName, data, props]);
   if (!blazeApp) return {
     data
   };
-  blazeApp.events.emit(`${EVENET_PREFIX}${eventName}${EVENET_SUFIX}`, {
-    data,
-    props
-  });
+  if (returnFunction) {
+    return {
+      data,
+      runHook
+    };
+  }
+  runHook();
   return {
     data
   };

package/lib-es/hooks/use-app-sync-event-hook.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-app-sync-event-hook.js","names":["useContext","AppContext","EVENET_PREFIX","EVENET_SUFIX","useAppSyncEventHook","eventName","data","props","blazeApp","events","emit"],"sources":["../../src/hooks/use-app-sync-event-hook.js"],"sourcesContent":["import { useContext } from 'react';\nimport { AppContext } from '@blaze-cms/nextjs-components';\n\nconst EVENET_PREFIX = 'plugin:page-builder:';\nconst EVENET_SUFIX = ':sync';\n\nconst useAppSyncEventHook = ({ eventName, data, props }) => {\n  const { blazeApp } = useContext(AppContext);\n  if (!blazeApp) return { data };\n\n  blazeApp.events.emit(`${EVENET_PREFIX}${eventName}${EVENET_SUFIX}`, {\n    data,\n    props\n  });\n\n  return { data };\n};\n\nexport default useAppSyncEventHook;\n"],"mappings":"AAAA,SAASA,UAAU,QAAQ,OAAO;AAClC,SAASC,UAAU,QAAQ,8BAA8B;AAEzD,MAAMC,aAAa,GAAG,sBAAsB;AAC5C,MAAMC,YAAY,GAAG,OAAO;AAE5B,MAAMC,mBAAmB,GAAGA,CAAC;EAAEC,SAAS;EAAEC,IAAI;EAAEC;AAAM,CAAC,KAAK;EAC1D,MAAM;IAAEC;EAAS,CAAC,GAAGR,UAAU,CAACC,UAAU,CAAC;EAC3C,IAAI,CAACO,QAAQ,EAAE,OAAO;IAAEF;EAAK,CAAC;EAE9BE,QAAQ,CAACC,MAAM,CAACC,IAAI,CAAC,GAAGR,aAAa,GAAGG,SAAS,GAAGF,YAAY,EAAE,EAAE;IAClEG,IAAI;IACJC;EACF,CAAC,CAAC;EAEF,OAAO;IAAED;EAAK,CAAC;AACjB,CAAC;AAED,eAAeF,mBAAmB","ignoreList":[]}
+{"version":3,"file":"use-app-sync-event-hook.js","names":["useContext","useCallback","AppContext","EVENET_PREFIX","EVENET_SUFIX","useAppSyncEventHook","eventName","data","props","returnFunction","blazeApp","runHook","newData","eventData","events","emit"],"sources":["../../src/hooks/use-app-sync-event-hook.js"],"sourcesContent":["import { useContext, useCallback } from 'react';\nimport { AppContext } from '@blaze-cms/nextjs-components';\n\nconst EVENET_PREFIX = 'plugin:page-builder:';\nconst EVENET_SUFIX = ':sync';\n\nconst useAppSyncEventHook = ({ eventName, data, props, returnFunction }) => {\n  const { blazeApp } = useContext(AppContext);\n\n  const runHook = useCallback(\n    newData => {\n      const eventData = newData || data;\n      blazeApp.events.emit(`${EVENET_PREFIX}${eventName}${EVENET_SUFIX}`, {\n        data: eventData,\n        props\n      });\n\n      return eventData;\n    },\n    [blazeApp, eventName, data, props]\n  );\n\n  if (!blazeApp) return { data };\n\n  if (returnFunction) {\n    return { data, runHook };\n  }\n\n  runHook();\n  return { data };\n};\n\nexport default useAppSyncEventHook;\n"],"mappings":"AAAA,SAASA,UAAU,EAAEC,WAAW,QAAQ,OAAO;AAC/C,SAASC,UAAU,QAAQ,8BAA8B;AAEzD,MAAMC,aAAa,GAAG,sBAAsB;AAC5C,MAAMC,YAAY,GAAG,OAAO;AAE5B,MAAMC,mBAAmB,GAAGA,CAAC;EAAEC,SAAS;EAAEC,IAAI;EAAEC,KAAK;EAAEC;AAAe,CAAC,KAAK;EAC1E,MAAM;IAAEC;EAAS,CAAC,GAAGV,UAAU,CAACE,UAAU,CAAC;EAE3C,MAAMS,OAAO,GAAGV,WAAW,CACzBW,OAAO,IAAI;IACT,MAAMC,SAAS,GAAGD,OAAO,IAAIL,IAAI;IACjCG,QAAQ,CAACI,MAAM,CAACC,IAAI,CAAC,GAAGZ,aAAa,GAAGG,SAAS,GAAGF,YAAY,EAAE,EAAE;MAClEG,IAAI,EAAEM,SAAS;MACfL;IACF,CAAC,CAAC;IAEF,OAAOK,SAAS;EAClB,CAAC,EACD,CAACH,QAAQ,EAAEJ,SAAS,EAAEC,IAAI,EAAEC,KAAK,CACnC,CAAC;EAED,IAAI,CAACE,QAAQ,EAAE,OAAO;IAAEH;EAAK,CAAC;EAE9B,IAAIE,cAAc,EAAE;IAClB,OAAO;MAAEF,IAAI;MAAEI;IAAQ,CAAC;EAC1B;EAEAA,OAAO,CAAC,CAAC;EACT,OAAO;IAAEJ;EAAK,CAAC;AACjB,CAAC;AAED,eAAeF,mBAAmB","ignoreList":[]}

package/lib-es/system-components/EditorMode/BlazeLogo.js

@@ -0,0 +1,64 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+const _excluded = ["childNode"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React, { useState, useEffect } from 'react';
+import { EDITOR_MODE_ICON_CLASS, EDITOR_MODE_HIGHLIGHT_CLASS } from './constants';
+const BlazeLogo = _ref => {
+  let {
+      childNode
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const {
+    id
+  } = props;
+  const [style, setStyle] = useState({});
+  useEffect(() => {
+    if (!childNode) return;
+    const rect = childNode.getBoundingClientRect();
+    const left = rect.width / 2 + rect.left + window.scrollX;
+    const top = rect.top - 20 + window.scrollY;
+    const display = childNode.classList.contains(EDITOR_MODE_HIGHLIGHT_CLASS) ? null : 'none';
+    const newStyle = {
+      display,
+      top,
+      left
+    };
+    setStyle(newStyle);
+    const observer = new MutationObserver(mutations => {
+      mutations.forEach(mutation => {
+        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+          const isHighlighted = childNode.classList.contains(EDITOR_MODE_HIGHLIGHT_CLASS);
+          setStyle(_objectSpread(_objectSpread({}, newStyle), {}, {
+            display: isHighlighted ? null : 'none'
+          }));
+        }
+      });
+    });
+    observer.observe(childNode, {
+      attributes: true
+    });
+    return () => observer.disconnect();
+  }, [childNode, id]);
+
+  // todo: fix icon hover/click activation while using position absolute
+  return /*#__PURE__*/React.createElement("button", _extends({
+    type: "button",
+    className: EDITOR_MODE_ICON_CLASS
+  }, props, {
+    style: style
+  }), /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "22",
+    height: "33"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    transform: "translate(1.0415 1.85962)",
+    d: "M7.0214715 6.2017469C7.0214715 6.2017469 4.6948299 13.380771 5.2965479 15.065234C5.6174636 15.947572 6.3796396 16.18821 7.3022733 15.386085C9.1074257 13.781834 13.078762 6.3621721 9.949831 0.42644304C8.7463951 -1.8596147 18.293648 5.1589837 16.328037 18.755013C16.087351 20.559793 16.809412 19.998306 17.250671 19.236286C19.176168 15.947572 17.972733 11.616095 17.972733 10.894181C17.972733 10.172268 19.657541 12.939602 19.777885 18.353949C19.89823 23.768295 17.050098 29.022219 11.393953 29.98477C10.03006 30.225407 13.199106 27.578392 13.640366 24.610529C13.68048 24.329784 10.39109 28.300306 9.5888004 27.738817C9.2277699 27.49818 15.36529 19.877987 13.199106 13.300558C13.158992 13.140133 11.754984 24.409996 6.3796396 27.097116C3.3309369 28.621155 0.60315031 25.051697 0.12177619 21.963514C-1.0415446 13.862046 6.4999828 8.7284422 7.0214715 6.2017469Z",
+    fillRule: "evenodd"
+  })));
+};
+export default BlazeLogo;
+//# sourceMappingURL=BlazeLogo.js.map

package/lib-es/system-components/EditorMode/BlazeLogo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlazeLogo.js","names":["React","useState","useEffect","EDITOR_MODE_ICON_CLASS","EDITOR_MODE_HIGHLIGHT_CLASS","BlazeLogo","_ref","childNode","props","_objectWithoutProperties","_excluded","id","style","setStyle","rect","getBoundingClientRect","left","width","window","scrollX","top","scrollY","display","classList","contains","newStyle","observer","MutationObserver","mutations","forEach","mutation","type","attributeName","isHighlighted","_objectSpread","observe","attributes","disconnect","createElement","_extends","className","xmlns","height","fill","transform","d","fillRule"],"sources":["../../../src/system-components/EditorMode/BlazeLogo.js"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport { EDITOR_MODE_ICON_CLASS, EDITOR_MODE_HIGHLIGHT_CLASS } from './constants';\n\nconst BlazeLogo = ({ childNode, ...props }) => {\n  const { id } = props;\n  const [style, setStyle] = useState({});\n\n  useEffect(() => {\n    if (!childNode) return;\n\n    const rect = childNode.getBoundingClientRect();\n    const left = rect.width / 2 + rect.left + window.scrollX;\n    const top = rect.top - 20 + window.scrollY;\n    const display = childNode.classList.contains(EDITOR_MODE_HIGHLIGHT_CLASS) ? null : 'none';\n    const newStyle = { display, top, left };\n    setStyle(newStyle);\n\n    const observer = new MutationObserver(mutations => {\n      mutations.forEach(mutation => {\n        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {\n          const isHighlighted = childNode.classList.contains(EDITOR_MODE_HIGHLIGHT_CLASS);\n          setStyle({ ...newStyle, display: isHighlighted ? null : 'none' });\n        }\n      });\n    });\n    observer.observe(childNode, { attributes: true });\n    return () => observer.disconnect();\n  }, [childNode, id]);\n\n  // todo: fix icon hover/click activation while using position absolute\n  return (\n    <button type=\"button\" className={EDITOR_MODE_ICON_CLASS} {...props} style={style}>\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"33\">\n        <path\n          fill=\"currentColor\"\n          transform=\"translate(1.0415 1.85962)\"\n          d=\"M7.0214715 6.2017469C7.0214715 6.2017469 4.6948299 13.380771 5.2965479 15.065234C5.6174636 15.947572 6.3796396 16.18821 7.3022733 15.386085C9.1074257 13.781834 13.078762 6.3621721 9.949831 0.42644304C8.7463951 -1.8596147 18.293648 5.1589837 16.328037 18.755013C16.087351 20.559793 16.809412 19.998306 17.250671 19.236286C19.176168 15.947572 17.972733 11.616095 17.972733 10.894181C17.972733 10.172268 19.657541 12.939602 19.777885 18.353949C19.89823 23.768295 17.050098 29.022219 11.393953 29.98477C10.03006 30.225407 13.199106 27.578392 13.640366 24.610529C13.68048 24.329784 10.39109 28.300306 9.5888004 27.738817C9.2277699 27.49818 15.36529 19.877987 13.199106 13.300558C13.158992 13.140133 11.754984 24.409996 6.3796396 27.097116C3.3309369 28.621155 0.60315031 25.051697 0.12177619 21.963514C-1.0415446 13.862046 6.4999828 8.7284422 7.0214715 6.2017469Z\"\n          fillRule=\"evenodd\"\n        />\n      </svg>\n    </button>\n  );\n};\n\nexport default BlazeLogo;\n"],"mappings":";;;;;;AAAA,OAAOA,KAAK,IAAIC,QAAQ,EAAEC,SAAS,QAAQ,OAAO;AAClD,SAASC,sBAAsB,EAAEC,2BAA2B,QAAQ,aAAa;AAEjF,MAAMC,SAAS,GAAGC,IAAA,IAA6B;EAAA,IAA5B;MAAEC;IAAoB,CAAC,GAAAD,IAAA;IAAPE,KAAK,GAAAC,wBAAA,CAAAH,IAAA,EAAAI,SAAA;EACtC,MAAM;IAAEC;EAAG,CAAC,GAAGH,KAAK;EACpB,MAAM,CAACI,KAAK,EAAEC,QAAQ,CAAC,GAAGZ,QAAQ,CAAC,CAAC,CAAC,CAAC;EAEtCC,SAAS,CAAC,MAAM;IACd,IAAI,CAACK,SAAS,EAAE;IAEhB,MAAMO,IAAI,GAAGP,SAAS,CAACQ,qBAAqB,CAAC,CAAC;IAC9C,MAAMC,IAAI,GAAGF,IAAI,CAACG,KAAK,GAAG,CAAC,GAAGH,IAAI,CAACE,IAAI,GAAGE,MAAM,CAACC,OAAO;IACxD,MAAMC,GAAG,GAAGN,IAAI,CAACM,GAAG,GAAG,EAAE,GAAGF,MAAM,CAACG,OAAO;IAC1C,MAAMC,OAAO,GAAGf,SAAS,CAACgB,SAAS,CAACC,QAAQ,CAACpB,2BAA2B,CAAC,GAAG,IAAI,GAAG,MAAM;IACzF,MAAMqB,QAAQ,GAAG;MAAEH,OAAO;MAAEF,GAAG;MAAEJ;IAAK,CAAC;IACvCH,QAAQ,CAACY,QAAQ,CAAC;IAElB,MAAMC,QAAQ,GAAG,IAAIC,gBAAgB,CAACC,SAAS,IAAI;MACjDA,SAAS,CAACC,OAAO,CAACC,QAAQ,IAAI;QAC5B,IAAIA,QAAQ,CAACC,IAAI,KAAK,YAAY,IAAID,QAAQ,CAACE,aAAa,KAAK,OAAO,EAAE;UACxE,MAAMC,aAAa,GAAG1B,SAAS,CAACgB,SAAS,CAACC,QAAQ,CAACpB,2BAA2B,CAAC;UAC/ES,QAAQ,CAAAqB,aAAA,CAAAA,aAAA,KAAMT,QAAQ;YAAEH,OAAO,EAAEW,aAAa,GAAG,IAAI,GAAG;UAAM,EAAE,CAAC;QACnE;MACF,CAAC,CAAC;IACJ,CAAC,CAAC;IACFP,QAAQ,CAACS,OAAO,CAAC5B,SAAS,EAAE;MAAE6B,UAAU,EAAE;IAAK,CAAC,CAAC;IACjD,OAAO,MAAMV,QAAQ,CAACW,UAAU,CAAC,CAAC;EACpC,CAAC,EAAE,CAAC9B,SAAS,EAAEI,EAAE,CAAC,CAAC;;EAEnB;EACA,oBACEX,KAAA,CAAAsC,aAAA,WAAAC,QAAA;IAAQR,IAAI,EAAC,QAAQ;IAACS,SAAS,EAAErC;EAAuB,GAAKK,KAAK;IAAEI,KAAK,EAAEA;EAAM,iBAC/EZ,KAAA,CAAAsC,aAAA;IAAKG,KAAK,EAAC,4BAA4B;IAACxB,KAAK,EAAC,IAAI;IAACyB,MAAM,EAAC;EAAI,gBAC5D1C,KAAA,CAAAsC,aAAA;IACEK,IAAI,EAAC,cAAc;IACnBC,SAAS,EAAC,2BAA2B;IACrCC,CAAC,EAAC,21BAA21B;IAC71BC,QAAQ,EAAC;EAAS,CACnB,CACE,CACC,CAAC;AAEb,CAAC;AAED,eAAezC,SAAS","ignoreList":[]}

package/lib-es/system-components/EditorMode/PbWrapper.js

@@ -0,0 +1,34 @@
+import React, { useRef, useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { useMainContext } from '@blaze-cms/nextjs-components';
+import addEditorModeEventListeners from './helpers/add-editor-mode-event-listeners';
+import BlazeLogo from './BlazeLogo';
+const PbWrapper = ({
+  name,
+  type = 'start'
+}) => {
+  const ref = useRef(null);
+  const [logoProps, setLogoProps] = useState(null);
+  const {
+    debugOptions: {
+      adminHref
+    } = {}
+  } = useMainContext();
+  useEffect(() => {
+    const unmount = addEditorModeEventListeners({
+      ref,
+      name,
+      adminHref,
+      type,
+      setLogoProps
+    });
+    return unmount;
+  }, [adminHref, name, type]);
+  const TagName = `pb-wrapper-${type}`;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TagName, {
+    ref: ref,
+    "pb-component-name": name
+  }), logoProps && createPortal(/*#__PURE__*/React.createElement(BlazeLogo, logoProps), document.body));
+};
+export default PbWrapper;
+//# sourceMappingURL=PbWrapper.js.map

package/lib-es/system-components/EditorMode/PbWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PbWrapper.js","names":["React","useRef","useEffect","useState","createPortal","useMainContext","addEditorModeEventListeners","BlazeLogo","PbWrapper","name","type","ref","logoProps","setLogoProps","debugOptions","adminHref","unmount","TagName","createElement","Fragment","document","body"],"sources":["../../../src/system-components/EditorMode/PbWrapper.js"],"sourcesContent":["import React, { useRef, useEffect, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useMainContext } from '@blaze-cms/nextjs-components';\nimport addEditorModeEventListeners from './helpers/add-editor-mode-event-listeners';\nimport BlazeLogo from './BlazeLogo';\n\nconst PbWrapper = ({ name, type = 'start' }) => {\n  const ref = useRef(null);\n  const [logoProps, setLogoProps] = useState(null);\n  const { debugOptions: { adminHref } = {} } = useMainContext();\n\n  useEffect(() => {\n    const unmount = addEditorModeEventListeners({ ref, name, adminHref, type, setLogoProps });\n\n    return unmount;\n  }, [adminHref, name, type]);\n\n  const TagName = `pb-wrapper-${type}`;\n  return (\n    <>\n      <TagName ref={ref} pb-component-name={name} />\n      {logoProps && createPortal(<BlazeLogo {...logoProps} />, document.body)}\n    </>\n  );\n};\n\nexport default PbWrapper;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,MAAM,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAC1D,SAASC,YAAY,QAAQ,WAAW;AACxC,SAASC,cAAc,QAAQ,8BAA8B;AAC7D,OAAOC,2BAA2B,MAAM,2CAA2C;AACnF,OAAOC,SAAS,MAAM,aAAa;AAEnC,MAAMC,SAAS,GAAGA,CAAC;EAAEC,IAAI;EAAEC,IAAI,GAAG;AAAQ,CAAC,KAAK;EAC9C,MAAMC,GAAG,GAAGV,MAAM,CAAC,IAAI,CAAC;EACxB,MAAM,CAACW,SAAS,EAAEC,YAAY,CAAC,GAAGV,QAAQ,CAAC,IAAI,CAAC;EAChD,MAAM;IAAEW,YAAY,EAAE;MAAEC;IAAU,CAAC,GAAG,CAAC;EAAE,CAAC,GAAGV,cAAc,CAAC,CAAC;EAE7DH,SAAS,CAAC,MAAM;IACd,MAAMc,OAAO,GAAGV,2BAA2B,CAAC;MAAEK,GAAG;MAAEF,IAAI;MAAEM,SAAS;MAAEL,IAAI;MAAEG;IAAa,CAAC,CAAC;IAEzF,OAAOG,OAAO;EAChB,CAAC,EAAE,CAACD,SAAS,EAAEN,IAAI,EAAEC,IAAI,CAAC,CAAC;EAE3B,MAAMO,OAAO,GAAG,cAAcP,IAAI,EAAE;EACpC,oBACEV,KAAA,CAAAkB,aAAA,CAAAlB,KAAA,CAAAmB,QAAA,qBACEnB,KAAA,CAAAkB,aAAA,CAACD,OAAO;IAACN,GAAG,EAAEA,GAAI;IAAC,qBAAmBF;EAAK,CAAE,CAAC,EAC7CG,SAAS,IAAIR,YAAY,cAACJ,KAAA,CAAAkB,aAAA,CAACX,SAAS,EAAKK,SAAY,CAAC,EAAEQ,QAAQ,CAACC,IAAI,CACtE,CAAC;AAEP,CAAC;AAED,eAAeb,SAAS","ignoreList":[]}

package/lib-es/system-components/EditorMode/constants.js

@@ -0,0 +1,3 @@
+export const EDITOR_MODE_HIGHLIGHT_CLASS = 'blaze-pb-editor-highlight';
+export const EDITOR_MODE_ICON_CLASS = 'blaze-pb-editor-icon';
+//# sourceMappingURL=constants.js.map

package/lib-es/system-components/EditorMode/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","names":["EDITOR_MODE_HIGHLIGHT_CLASS","EDITOR_MODE_ICON_CLASS"],"sources":["../../../src/system-components/EditorMode/constants.js"],"sourcesContent":["export const EDITOR_MODE_HIGHLIGHT_CLASS = 'blaze-pb-editor-highlight';\nexport const EDITOR_MODE_ICON_CLASS = 'blaze-pb-editor-icon';\n"],"mappings":"AAAA,OAAO,MAAMA,2BAA2B,GAAG,2BAA2B;AACtE,OAAO,MAAMC,sBAAsB,GAAG,sBAAsB","ignoreList":[]}

package/lib-es/system-components/EditorMode/helpers/add-editor-mode-event-listeners.js

@@ -0,0 +1,80 @@
+import { getComponentId } from '../../../helpers';
+import { EDITOR_MODE_HIGHLIGHT_CLASS } from '../constants';
+const addEditorModeEventListeners = ({
+  ref,
+  name,
+  adminHref,
+  type,
+  setLogoProps
+}) => {
+  const listeners = [];
+
+  // ignore start tags and if parent not found
+  if (type !== 'end' || !ref.current || !ref.current.parentNode) return listeners;
+  const siblings = ref.current.parentNode.children;
+  const foundChildren = [];
+  let foundStart = false;
+  // eslint-disable-next-line no-restricted-syntax, no-unused-vars
+  for (const child of siblings) {
+    if (!foundStart) {
+      // find start tag
+      if (child.getAttribute('pb-component-name') === name) {
+        foundStart = true;
+      }
+      // eslint-disable-next-line no-continue
+      continue;
+    }
+    if (child === ref.current) {
+      // end tag found
+      break;
+    }
+    foundChildren.push(child); // all nodes between start and end tags - PB component nodes
+  }
+  const cleanUpFunctions = Object.values(siblings).map(childNode => {
+    const componentId = getComponentId(name);
+    const clickItemId = `click-${componentId}`;
+    const click = e => {
+      e.stopPropagation();
+      e.preventDefault();
+      window.open(`${adminHref}#${componentId}`, adminHref);
+    };
+    const mouseenter = e => {
+      document.querySelectorAll(`.${EDITOR_MODE_HIGHLIGHT_CLASS}`).forEach(node => {
+        node.classList.remove(EDITOR_MODE_HIGHLIGHT_CLASS);
+      });
+      childNode.classList.add(EDITOR_MODE_HIGHLIGHT_CLASS);
+      setLogoProps({
+        id: clickItemId,
+        'aria-label': `Edit ${name}`,
+        childNode,
+        onclick: click
+      });
+    };
+    const mouseleave = e => {
+      childNode.classList.remove(EDITOR_MODE_HIGHLIGHT_CLASS);
+      setLogoProps(null);
+    };
+    childNode.addEventListener('click', click); // todo: remove listener and trigger on icon click
+    childNode.addEventListener('mouseenter', mouseenter);
+    childNode.addEventListener('mouseleave', mouseleave);
+    listeners.push([childNode, {
+      click,
+      mouseenter,
+      mouseleave
+    }]);
+    const nodeCleanup = () => {
+      listeners.forEach(([, events]) => {
+        Object.entries(events).forEach(([event, handler]) => {
+          childNode.removeEventListener(event, handler);
+        });
+      });
+    };
+    return nodeCleanup;
+  });
+  const unmount = () => {
+    cleanUpFunctions.forEach(fn => fn());
+  };
+  return unmount;
+};
+export default addEditorModeEventListeners;
+//# sourceMappingURL=add-editor-mode-event-listeners.js.map

package/lib-es/system-components/EditorMode/helpers/add-editor-mode-event-listeners.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"add-editor-mode-event-listeners.js","names":["getComponentId","EDITOR_MODE_HIGHLIGHT_CLASS","addEditorModeEventListeners","ref","name","adminHref","type","setLogoProps","listeners","current","parentNode","siblings","children","foundChildren","foundStart","child","getAttribute","push","cleanUpFunctions","Object","values","map","childNode","componentId","clickItemId","click","e","stopPropagation","preventDefault","window","open","mouseenter","document","querySelectorAll","forEach","node","classList","remove","add","id","onclick","mouseleave","addEventListener","nodeCleanup","events","entries","event","handler","removeEventListener","unmount","fn"],"sources":["../../../../src/system-components/EditorMode/helpers/add-editor-mode-event-listeners.js"],"sourcesContent":["import { getComponentId } from '../../../helpers';\nimport { EDITOR_MODE_HIGHLIGHT_CLASS } from '../constants';\n\nconst addEditorModeEventListeners = ({ ref, name, adminHref, type, setLogoProps }) => {\n  const listeners = [];\n\n  // ignore start tags and if parent not found\n  if (type !== 'end' || !ref.current || !ref.current.parentNode) return listeners;\n\n  const siblings = ref.current.parentNode.children;\n\n  const foundChildren = [];\n  let foundStart = false;\n  // eslint-disable-next-line no-restricted-syntax, no-unused-vars\n  for (const child of siblings) {\n    if (!foundStart) {\n      // find start tag\n      if (child.getAttribute('pb-component-name') === name) {\n        foundStart = true;\n      }\n      // eslint-disable-next-line no-continue\n      continue;\n    }\n\n    if (child === ref.current) {\n      // end tag found\n      break;\n    }\n\n    foundChildren.push(child); // all nodes between start and end tags - PB component nodes\n  }\n\n  const cleanUpFunctions = Object.values(siblings).map(childNode => {\n    const componentId = getComponentId(name);\n    const clickItemId = `click-${componentId}`;\n    const click = e => {\n      e.stopPropagation();\n      e.preventDefault();\n      window.open(`${adminHref}#${componentId}`, adminHref);\n    };\n    const mouseenter = e => {\n      document.querySelectorAll(`.${EDITOR_MODE_HIGHLIGHT_CLASS}`).forEach(node => {\n        node.classList.remove(EDITOR_MODE_HIGHLIGHT_CLASS);\n      });\n      childNode.classList.add(EDITOR_MODE_HIGHLIGHT_CLASS);\n\n      setLogoProps({\n        id: clickItemId,\n        'aria-label': `Edit ${name}`,\n        childNode,\n        onclick: click\n      });\n    };\n    const mouseleave = e => {\n      childNode.classList.remove(EDITOR_MODE_HIGHLIGHT_CLASS);\n      setLogoProps(null);\n    };\n\n    childNode.addEventListener('click', click); // todo: remove listener and trigger on icon click\n    childNode.addEventListener('mouseenter', mouseenter);\n    childNode.addEventListener('mouseleave', mouseleave);\n\n    listeners.push([childNode, { click, mouseenter, mouseleave }]);\n\n    const nodeCleanup = () => {\n      listeners.forEach(([, events]) => {\n        Object.entries(events).forEach(([event, handler]) => {\n          childNode.removeEventListener(event, handler);\n        });\n      });\n    };\n\n    return nodeCleanup;\n  });\n\n  const unmount = () => {\n    cleanUpFunctions.forEach(fn => fn());\n  };\n\n  return unmount;\n};\n\nexport default addEditorModeEventListeners;\n"],"mappings":"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","ignoreList":[]}

package/lib-es/system-components/index.js

@@ -0,0 +1,3 @@
+import dynamic from 'next/dynamic';
+export const PbWrapper = dynamic(() => import('./EditorMode/PbWrapper'));
+//# sourceMappingURL=index.js.map

package/lib-es/system-components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["dynamic","PbWrapper"],"sources":["../../src/system-components/index.js"],"sourcesContent":["import dynamic from 'next/dynamic';\n\nexport const PbWrapper = dynamic(() => import('./EditorMode/PbWrapper'));\n"],"mappings":"AAAA,OAAOA,OAAO,MAAM,cAAc;AAElC,OAAO,MAAMC,SAAS,GAAGD,OAAO,CAAC,MAAM,MAAM,CAAC,wBAAwB,CAAC,CAAC","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blaze-cms/react-page-builder",
-  "version": "0.146.0-node18-core-styles-tooltips.5",
+  "version": "0.146.0-node18-core-styles-tooltips.12",
   "description": "Blaze react page builder",
   "main": "lib/index.js",
   "module": "lib-es/index.js",
@@ -32,7 +32,7 @@
     "@blaze-cms/core-errors-ui": "0.146.0-node18-core-styles-tooltips.3",
     "@blaze-cms/image-cdn-react": "0.3.0-alpha.7",
     "@blaze-cms/nextjs-components": "0.146.0-node18-core-styles-tooltips.3",
-    "@blaze-cms/plugin-search-ui": "0.146.0-node18-core-styles-tooltips.5",
+    "@blaze-cms/plugin-search-ui": "0.146.0-node18-core-styles-tooltips.11",
     "@blaze-cms/setup-ui": "0.146.0-node18-core-styles-tooltips.3",
     "@blaze-cms/utils": "0.146.0-node18-core-styles-tooltips.3",
     "@blaze-cms/utils-handlebars": "0.146.0-node18-core-styles-tooltips.3",
@@ -92,5 +92,5 @@
     "lib/*",
     "lib-es/*"
   ],
-  "gitHead": "d6b0cd14687e7fe634aade939e3b28c67aabda02"
+  "gitHead": "3d94cd5b7bc0a84390240a9dfed23f1408908f06"
 }

package/src/components/SearchContent/SearchContent.js

@@ -4,27 +4,36 @@ import { useRouter } from 'next/router';
 import { useDebounceSearch } from '@blaze-cms/plugin-search-ui';
 import SearchContentResults from './SearchContentResults';
 import SearchContentToggleIcon from './SearchContentToggleIcon';
+import { useAppSyncEventHook } from '../../hooks';
 
-const SearchContent = ({
-  entities,
-  searchInputWrapperMobile,
-  searchInputWrapperDesktop,
-  isMobile,
-  placeholder,
-  modifier,
-  collapsedSearch,
-  searchUrl,
-  navigateToSingleSearchResult
-}) => {
+const SearchContent = props => {
+  const {
+    entities,
+    searchInputWrapperMobile,
+    searchInputWrapperDesktop,
+    isMobile,
+    placeholder,
+    modifier,
+    collapsedSearch,
+    searchUrl,
+    navigateToSingleSearchResult
+  } = props;
   const searchContentRef = useRef(null);
   const [collapsed, setCollapsed] = useState(collapsedSearch);
   const [showResults, setShowResults] = useState(false);
   const router = useRouter();
 
+  const { runHook } = useAppSyncEventHook({
+    eventName: 'searchcontent:query-variables',
+    props,
+    returnFunction: true
+  });
+
   const { results, searchTerm, setSearchTerm, debouncedSearchTerm } = useDebounceSearch({
     entities,
     initialSearchTerm: '',
-    resultKeys: 'id, name, image { url }, url'
+    resultKeys: 'id, name, image { url }, url',
+    queryHook: runHook
   });
 
   useEffect(() => {

package/src/components/SearchFilter/SearchFilter/FiltersList.js

@@ -15,90 +15,93 @@ const FiltersList = ({
 }) => {
   const { itemId } = useContext(MainContext);
 
-  return filters.map(({ type, label, propsToDisplay, elementTitle, ...otherProps }, index) => {
-    if (!propsToDisplay && !propsToDisplay.length) return null;
-    const dynamicKey = [itemId, index].join('-');
-    const isDataAvailable = !!data && Object.keys(data).length;
-    const dataAggregations = isDataAvailable ? data : null;
-    const areAggregationsAvailable = isDataAvailable && !!dataAggregations;
+  return filters.map(
+    ({ type, label, propsToDisplay, elementTitle, unit, ...otherProps }, index) => {
+      if (!propsToDisplay && !propsToDisplay.length) return null;
+      const dynamicKey = [itemId, index].join('-');
+      const isDataAvailable = !!data && Object.keys(data).length;
+      const dataAggregations = isDataAvailable ? data : null;
+      const areAggregationsAvailable = isDataAvailable && !!dataAggregations;
 
-    switch (type) {
-      case TEXT_SEARCH:
-        return (
-          <div
-            key={dynamicKey}
-            className="filter__section filter__section--search-refine filter__section--search">
-            <TextSearch
-              {...otherProps}
-              label={label}
-              elementTitle={elementTitle}
-              searchValue={filterValues[SEARCH_TERM]}
-              updateFilterValues={updateFilterValues}
-              filterValues={filterValues}
-            />
-          </div>
-        );
-
-      case CHECKBOX:
-        return (
-          <div
-            key={dynamicKey}
-            className="filter__section filter__section--search-refine filter__section--checkboxes">
-            <Checkbox
-              {...otherProps}
-              data={data}
-              prop={propsToDisplay[0]}
-              label={label}
-              elementTitle={elementTitle}
-              hasUrl={hasUrl}
-              filterValues={filterValues}
-              updateFilterValues={updateFilterValues}
-              shouldSearch={shouldSearch}
-            />
-          </div>
-        );
+      switch (type) {
+        case TEXT_SEARCH:
+          return (
+            <div
+              key={dynamicKey}
+              className="filter__section filter__section--search-refine filter__section--search">
+              <TextSearch
+                {...otherProps}
+                label={label}
+                elementTitle={elementTitle}
+                searchValue={filterValues[SEARCH_TERM]}
+                updateFilterValues={updateFilterValues}
+                filterValues={filterValues}
+              />
+            </div>
+          );
 
-      case SELECT:
-        return (
-          <div
-            key={dynamicKey}
-            className="filter__section filter__section--search-refine filter__section--selects">
-            <SelectFilter
-              {...otherProps}
-              data={data}
-              prop={propsToDisplay[0]}
-              label={label}
-              elementTitle={elementTitle}
-              hasUrl={hasUrl}
-              filterValues={filterValues}
-              updateFilterValues={updateFilterValues}
-              shouldSearch={shouldSearch}
-            />
-          </div>
-        );
+        case CHECKBOX:
+          return (
+            <div
+              key={dynamicKey}
+              className="filter__section filter__section--search-refine filter__section--checkboxes">
+              <Checkbox
+                {...otherProps}
+                data={data}
+                prop={propsToDisplay[0]}
+                label={label}
+                elementTitle={elementTitle}
+                hasUrl={hasUrl}
+                filterValues={filterValues}
+                updateFilterValues={updateFilterValues}
+                shouldSearch={shouldSearch}
+              />
+            </div>
+          );
 
-      case RANGE:
-        return (
-          !!areAggregationsAvailable && (
-            <div key={dynamicKey} className="range-slider__wrapper">
-              <Range
+        case SELECT:
+          return (
+            <div
+              key={dynamicKey}
+              className="filter__section filter__section--search-refine filter__section--selects">
+              <SelectFilter
                 {...otherProps}
-                dataAggregations={dataAggregations}
-                propsToDisplay={propsToDisplay}
+                data={data}
+                prop={propsToDisplay[0]}
                 label={label}
                 elementTitle={elementTitle}
-                entity={entity}
+                hasUrl={hasUrl}
                 filterValues={filterValues}
                 updateFilterValues={updateFilterValues}
                 shouldSearch={shouldSearch}
               />
             </div>
-          )
-        );
-      default:
-        return null;
+          );
+
+        case RANGE:
+          return (
+            !!areAggregationsAvailable && (
+              <div key={dynamicKey} className="range-slider__wrapper">
+                <Range
+                  {...otherProps}
+                  dataAggregations={dataAggregations}
+                  propsToDisplay={propsToDisplay}
+                  label={label}
+                  elementTitle={elementTitle}
+                  unit={unit}
+                  entity={entity}
+                  filterValues={filterValues}
+                  updateFilterValues={updateFilterValues}
+                  shouldSearch={shouldSearch}
+                />
+              </div>
+            )
+          );
+        default:
+          return null;
+      }
     }
-  });
+  );
 };
 
 FiltersList.propTypes = {

package/src/components/SearchFilter/components/Range.js

@@ -18,7 +18,8 @@ const Range = ({
   updateFilterValues,
   filterValues,
   shouldSearch,
-  elementTitle
+  elementTitle,
+  unit
 }) => {
   const router = useRouter();
   const debounceAmount = shouldSearch ? 1200 : 400;
@@ -48,6 +49,11 @@ const Range = ({
     updateFilterValues({ [option]: { ...value, selectedOption: rangeOption } }, shouldSearch);
   }, debounceAmount);
 
+  let displayLabel = '';
+  if (!hasMultipleOptions) {
+    displayLabel = unit ? `${label} (${unit})` : label;
+  }
+
   return (
     <>
       {elementTitle && <div className="heading heading--section">{elementTitle}</div>}
@@ -75,7 +81,7 @@ const Range = ({
       <RangeFilter
         key={`${rangeOption}-${minValue}-${maxValue}`}
         name={rangeOption}
-        label={hasMultipleOptions ? '' : label}
+        label={displayLabel}
         value={valueToUse}
         id={rangeOption}
         onChange={({ value }) => {
@@ -95,14 +101,16 @@ Range.propTypes = {
   rangeInterval: PropTypes.number,
   label: PropTypes.string,
   elementTitle: PropTypes.string,
-  dataAggregations: PropTypes.object.isRequired
+  dataAggregations: PropTypes.object.isRequired,
+  unit: PropTypes.string
 };
 
 Range.defaultProps = {
   shouldSearch: false,
   rangeInterval: 1,
   label: '',
-  elementTitle: ''
+  elementTitle: '',
+  unit: ''
 };
 
 export default Range;

package/src/hooks/helpers/RenderComponent.js

@@ -7,6 +7,7 @@ import getVariant from './getVariant';
 import appendGtmClassName from './append-gtm-classname';
 import { PB_TYPE_IMAGE, PB_TYPE_BANNER, PB_TYPE_TEXTBLOCK, PB_TYPE_CAROUSEL } from './constants';
 import { BannerContextProvider } from '../../BannerContext';
+import { PbWrapper } from '../../system-components';
 
 const RenderComponent = ({
   component,
@@ -31,7 +32,7 @@ const RenderComponent = ({
 
   return (
     <ErrorBoundary>
-      {editorModeEnabled && <pb-wrapper-start pb-component-name={name} />}
+      {editorModeEnabled && <PbWrapper name={name} />}
       <Component
         key={id}
         type={type}
@@ -50,7 +51,7 @@ const RenderComponent = ({
           childComponents
         )}
       </Component>
-      {editorModeEnabled && <pb-wrapper-end pb-component-name={name} />}
+      {editorModeEnabled && <PbWrapper name={name} type="end" />}
     </ErrorBoundary>
   );
 };

package/src/hooks/use-app-sync-event-hook.js

@@ -1,18 +1,32 @@
-import { useContext } from 'react';
+import { useContext, useCallback } from 'react';
 import { AppContext } from '@blaze-cms/nextjs-components';
 
 const EVENET_PREFIX = 'plugin:page-builder:';
 const EVENET_SUFIX = ':sync';
 
-const useAppSyncEventHook = ({ eventName, data, props }) => {
+const useAppSyncEventHook = ({ eventName, data, props, returnFunction }) => {
   const { blazeApp } = useContext(AppContext);
+
+  const runHook = useCallback(
+    newData => {
+      const eventData = newData || data;
+      blazeApp.events.emit(`${EVENET_PREFIX}${eventName}${EVENET_SUFIX}`, {
+        data: eventData,
+        props
+      });
+
+      return eventData;
+    },
+    [blazeApp, eventName, data, props]
+  );
+
   if (!blazeApp) return { data };
 
-  blazeApp.events.emit(`${EVENET_PREFIX}${eventName}${EVENET_SUFIX}`, {
-    data,
-    props
-  });
+  if (returnFunction) {
+    return { data, runHook };
+  }
 
+  runHook();
   return { data };
 };