@nitrogenbuilder/core/src/App.js

CMS Agnostic Page Builder for React projects

import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";import React,{useEffect,useRef,useState}from"react";import{Item,Menu,Separator,useContextMenu}from"react-contexify";import"react-contexify/ReactContexify.css";import Fuse from"fuse.js";import clone from"just-clone";import{Resizable}from"re-resizable";import SimpleBar from"simplebar-react";import"simplebar-react/dist/simplebar.min.css";import{v4 as uuidv4}from"uuid";import{faArrowDown,faArrowUp,faCopy,faPaste,faTrashAlt}from"@fortawesome/pro-regular-svg-icons";import{faCaretDown,faCaretUp,faClone,faEdit,faGrid,faPlus,faSpinnerThird,faTimes}from"@fortawesome/pro-solid-svg-icons";import{FontAwesomeIcon}from"@fortawesome/react-fontawesome";import"./App.scss";import"./Bob.scss";import Gallery from"./__components/Gallery/Gallery.js";import IFrame from"./__components/IFrame.js";import Navigator from"./__components/Navigator/Navigator.js";import ResponsiveWidget from"./__components/ResponsiveWidget/ResponsiveWidget.js";import SplashScreen from"./__components/SplashScreen/SplashScreen.js";import{buildTree,flattenTree}from"./__components/Tree/utilities.js";import CtrlBoolean from"./controls/CtrlBoolean/CtrlBoolean.js";import CtrlColor from"./controls/CtrlColor/CtrlColor.js";import CtrlEnum from"./controls/CtrlEnum/CtrlEnum.js";import CtrlEnumInline from"./controls/CtrlEnumInline/CtrlEnumInline.js";import CtrlFile from"./controls/CtrlFile/CtrlFile.js";import CtrlNumber from"./controls/CtrlNumber/CtrlNumber.js";import CtrlUrl from"./controls/CtrlSearch/CtrlUrl.js";import CtrlText from"./controls/CtrlText/CtrlText.js";import CtrlWysiwyg from"./controls/CtrlWysiwyg/CtrlWysiwyg.js";import"./tw.scss";import clearEmpties from"./utils/clearEmpties.js";import diffSlots from"./utils/diffSlots.js";import getConfig from"./utils/getConfig.js";import getFnName from"./utils/getFnName.js";import getProvider from"./utils/getProvider.js";import resolve from"./utils/resolve.js";import{responsiveModes}from"./utils/responsiveModes.js";import set from"./utils/set.js";import unset from"./utils/unset.js";import useKeyPress from"./utils/useKeyPress.js";const config=getConfig(),PROVIDER=getProvider(),CONTEXT_MENU_ID="nitrogen-context-menu";function getCoords(e){let r=e.getBoundingClientRect(),t=document.body,n=document.documentElement,o=window.scrollY||n.scrollTop||t.scrollTop,i=window.scrollX||n.scrollLeft||t.scrollLeft,s=n.clientTop||t.clientTop||0,l=n.clientLeft||t.clientLeft||0,c=r.top+o-s,a=r.left+i-l;return{top:Math.round(c),left:Math.round(a)}}const customControls=config.controls??[],modules=config.modules();function recursiveGetPropValue(e,r,t){if(t?.id===e)return resolve(r,t.props);if(t?.props?.children){if(Array.isArray(t.props.children)){for(let n of t.props.children){const t=recursiveGetPropValue(e,r,n);if(void 0!==t)return t}return}if("object"!=typeof t.props.children)return;for(let n in t.props.children)for(let o of t.props.children[n]){const t=recursiveGetPropValue(e,r,o);if(void 0!==t)return t}}}function getPropValue(e,r,t){let n;return t.some((t=>(n=recursiveGetPropValue(e,r,t),void 0!==n))),n}function recursiveGetLastPropValue(e,r,t){let n=e.pop(),o=responsiveModes.indexOf(n),i=!1;o<responsiveModes.length-1&&(i=!0,n=responsiveModes[o+1],e.push(n));let s=i?getPropValue(r.id,e.join("."),t):null;return null==s&&"mobile"!==n?recursiveGetLastPropValue(e,r,t):s}function CardsContainer({closedCategories:e,cat:r,fuseResults:t,addModule:n}){const[o,i]=useState([]),s=useRef(null);return _jsx("div",{ref:s,className:"cards-container "+(e.includes(r.categoryLabel)?"":"is-open"),style:{height:e.includes(r.categoryLabel)?0:108*Math.ceil(r.modules.length/2)},onMouseMove:function(e){if(!s.current)return;const r=s.current.querySelectorAll(".card-container");let t=Array(r.length).fill({});for(let n=0;n<r.length;++n){const o=r[n].getBoundingClientRect(),i=e.clientX-o.left,s=e.clientY-o.top;t[n]={"--mouse-x":`${i}px`,"--mouse-y":`${s}px`}}i(t)},children:r.modules.map(((e,r)=>{const i=t.length>0?e.item:e;return _jsx(Card,{style:o[r],mod:i,addModule:n},i.name)}))})}function Card({mod:e,addModule:r,style:t}){return _jsxs("div",{className:"card-container",style:t,onClick:()=>r(e.name),children:[_jsx("div",{className:"card-border"}),_jsxs("div",{className:"card-content",children:[e?.options?.icon&&_jsx("i",{className:e.options.icon}),e.name]})]})}const defaultInspectorWidthItem="nitrogen-inspector-width",defaultNavigatorWidthItem="nitrogen-navigator-width",defaultNavigatorOpenItem="nitrogen-navigator-open",defaultClosedCategoriesItem="nitrogen-closed-categories",defaultInspectorWidth=parseFloat(localStorage.getItem(defaultInspectorWidthItem)||"380"),defaultNavigatorWidth=parseFloat(localStorage.getItem(defaultNavigatorWidthItem)||"250"),defaultNavigatorOpen="false"!==localStorage.getItem(defaultNavigatorOpenItem),defaultClosedCategories=JSON.parse(localStorage.getItem(defaultClosedCategoriesItem)||"[]")||[];function App(){const[e,r]=useState([]),[t,n]=useState(""),[o,i]=useState(null),[s,l]=useState([]),[c,a]=useState({});function p(e,r,t){const n={...c};Object.keys(c).includes(e)&&n[e]===r&&"open"!==t?delete n[e]:"close"!==t&&(n[e]=r),a(n)}function d(e,r){return!!Object.keys(c).includes(e)&&c[e]===r}const u=useRef(null);function _(e){if(!o)return void console.error("Fuse not ready");const r=e.target.value;n(r);const t=o.search(r);l(t)}function f(){n(""),l([])}useEffect((()=>{!async function(){const e=await Promise.all(Object.keys(modules).map((async e=>{const r=await modules[e](),t=getFnName(r.default).replace(/([A-Z])/g," $1").trim(),n=React.forwardRef(r.default);return r.settings.options?r.settings.options.category||(r.settings.options.category="General"):r.settings.options={category:"General"},{name:t,Component:n,...r.settings}})));r(e)}()}),[]),useEffect((()=>{if(e.length){const r=new Fuse(e,{keys:["name"]});i(r)}}),[e]);const[h,m]=useState(""),[g,y]=useState(""),[b,j]=useState([]),[x,v]=useState(!1),[C,N]=useState(!1),w=!!g&&(h!==g||x),A=window.location.search,P=new URLSearchParams(A),[S,I]=useState(P.get("pageId")??""),[E,k]=useState(!0),[M,O]=useState("mobile");function W(r){const t=r.module,n=e.find((e=>e.name===t));if(r.props?.children)if(Array.isArray(r.props.children))r.props.children=r.props.children.map((e=>W(e)));else if("object"==typeof r.props.children)for(let e in r.props.children)r.props.children[e]=r.props.children[e].map((e=>W(e)));return{...r,module:{...n,ref:React.createRef()}}}useEffect((()=>{null!=S&&""!==S.trim()&&e.length>0&&E&&async function(){const e=await PROVIDER.loadPage(S);try{let r=JSON.parse(e.data);r=r.map((e=>W(e))),m(e.title),y(e.title),j(r)}catch(e){console.error(e)}k(!1)}()}),[S,e]),useEffect((()=>{const e=e=>{e.preventDefault(),e.returnValue=""};return x?(window.addEventListener("beforeunload",e),()=>{window.removeEventListener("beforeunload",e)}):()=>{}}),[x]);const[R,F]=useState(null),[$,T]=useState(null),[L,V]=useState(0),[G,D]=useState(!1),[U,z]=useState(!1),[B,X]=useState(!1);useKeyPress(["s"],"ctrl",oe,[document,u.current?.contentWindow?.document]),useKeyPress(["Escape"],!1,(()=>{B&&Te()}),[document,u.current?.contentWindow?.document]),useKeyPress(["c"],"ctrl",(()=>{$&&ue($.id)}),[document,u.current?.contentWindow?.document]),useKeyPress(["v"],"ctrl",(()=>{$&&_e($.id)}),[document,u.current?.contentWindow?.document]);const{show:J,hideAll:K}=useContextMenu({id:CONTEXT_MENU_ID});function H(e,r=0,t=null,n){n&&n.stopPropagation(),F(t),T(e),V(r),D(!0),z(!1)}function q(r){const t=e.find((e=>e.name===r));if(!t)return;const n="f"+uuidv4();v(!0);const o=!1!==$?.module?.options?.children&&!0!==$?.module?.options?.children?"function"==typeof $?.module?.options?.children?.slots?$?.module.options.children.slots($?.props):$?.module?.options?.children?.slots:void 0;if(!$?.module?.options?.children||0===o?.length){const d={id:`${n}`,module:{...t,ref:React.createRef()},props:{}};let u;function i(e){if(R&&e&&R.id===e.id){if(Array.isArray(e.props.children))e.props.children.splice(L+1,0,d);else if("object"==typeof e.props.children)for(let r in e.props.children){e.props.children[r].splice(L+1,0,d);break}return u=e,e}if(e.id!==$?.id||R||j((e=>(e.splice(L+1,0,d),[...e]))),e.props?.children)if(Array.isArray(e.props.children))e.props.children=e.props.children.map((e=>i(e)));else if("object"==typeof e.props.children)for(let r in e.props.children){e.props.children[r]=e.props.children[r].map((e=>i(e)));break}return e}let _=[...b];return $?R?_=_.map((e=>i(e))):_.splice(L+1,0,d):_.push(d),j(_),void H(d,L+1,u)}const s={id:`${n}`,module:{...t,ref:React.createRef()},props:{}};let l,c=0;function a(e){if(!$)return e;if(e.id===$.id){if(!e.props.children)if("object"==typeof e.module.options?.children&&e.module.options?.children?.slots){e.props.children={};const r="function"==typeof e.module.options.children.slots?e.module.options.children.slots(e.props):e.module.options.children.slots;for(let t of r)e.props.children[t.id]=[]}else e.props.children=[];if(l=e,Array.isArray(e.props.children))c=e.props.children.length,e.props.children.push(s);else if("object"==typeof e.props.children)for(let r in e.props.children){c=e.props.children[r].length,e.props.children[r].push(s);break}return e}if(e.props?.children)if(Array.isArray(e.props.children))e.props.children=e.props.children.map((e=>a(e)));else if("object"==typeof e.props.children)for(let r in e.props.children)e.props.children[r]=e.props.children[r].map((e=>a(e)));return e}const p=b.map((e=>a(e)));j(p),H(s,c,l)}function Y(e,r,t,n){if(n.id===e)return set(r,t,n.props),diffSlots(n);if(n.props?.children){let o;if(Array.isArray(n.props.children))o=n.props.children.map((n=>Y(e,r,t,n)));else if("object"==typeof n.props.children){o={...n.props.children};for(let n in o)o[n]=o[n].map((n=>Y(e,r,t,n)))}return{...n,props:{...n.props,children:o}}}return n}function Z(e,r,t){const n=b.map((n=>Y(e,r,t,n)));v(!0),j(n)}function Q(e,r,t){if(t.id===e)return unset(r,t.props),diffSlots(t);let n;if(Array.isArray(t.props.children))n=t.props.children.map((t=>Q(e,r,t)));else if("object"==typeof t.props.children){n={...t.props.children};for(let t in n)n[t]=n[t].map((t=>Q(e,r,t)))}return t.props?.children?{...t,props:{...t.props,children:n}}:t}function ee(e){if(!$)return void console.warn("No current module selected");const r=b.map((r=>Q($.id,e,r)));v(!0),j(r)}function re(e,r){return e.default?e.default[r]?e.default[r]:r===responsiveModes[responsiveModes.length-1]?"":re(e,responsiveModes[responsiveModes.indexOf(r)+1]):""}function te(e,r,t){const n=t?`${t}.${r}${e?.responsive?`.${M}`:""}`:`${r}${e?.responsive?`.${M}`:""}`;if(!$)return;let o=getPropValue($.id,n,b),i=!1;if("object"==typeof e&&e.responsive){let e=n.split(".");e.length>1&&null==o&&(i=!0,o=recursiveGetLastPropValue(e,$,b))}null==o&&(i=!0);const s=o??("object"==typeof e?e?.responsive?re(e,M):e.default??"":"");if("object"==typeof e&&!Array.isArray(e)&&null!==e){let r=null;if(customControls.some((t=>{if(e.type===t.type)return r=t.component({currMod:$,prop:e,value:s,updatePath:n,inheritVal:i,updateProps:Z,deleteProp:ee}),!0})),null!==r)return r;if("enum"===e.type)return _jsx(CtrlEnum,{prop:e,updateProps:Z,deleteProp:ee,value:s,inheritVal:i,currMod:$,updatePath:n},$.id+n);if("enum-inline"===e.type)return _jsx(CtrlEnumInline,{prop:e,updateProps:Z,deleteProp:ee,value:s,inheritVal:i,currMod:$,updatePath:n},$.id+n);if("array"===e.type){const r=e.props;return r?_jsxs("div",{className:"ctrl-array",children:[(s||[]).map(((e,t)=>_jsxs("div",{className:"ctrl-array__container "+(d(n,t)?"ctrl-array__container--open":""),children:[_jsxs("div",{className:"ctrl-array__container__title",onClick:()=>p(n,t),children:[_jsxs("div",{className:"ctrl-array__container__title-text",children:["Item ",t+1]}),_jsx("div",{className:"ctrl-array__container__btn",onClick:e=>{e.stopPropagation(),p(n,t,"close"),ee(`${n}.${t}`)},children:_jsx("i",{className:"ctrl-array__container__btn__icon fa-solid fa-sharp fa-times"})})]}),_jsx("div",{className:"ctrl-array__container__item-container",children:Object.keys(r).map((e=>{let o=r[e]?.label??e.replace(/([A-Z])/g," $1");if(o=o.charAt(0).toUpperCase()+o.slice(1),!r[e].isVisible||!1!==r[e].isVisible($.props))return _jsxs("div",{className:"ctrl-array__container__item",children:[_jsx("div",{className:"",children:o}),te(r[e],e,`${n}.${t}`)]},e)}))})]},t))),_jsxs("div",{className:"ctrl-array__section-btn",onClick:()=>{const e=getPropValue($.id,n,b)??[];e.push({id:uuidv4()}),Z($.id,n,e)},children:["Add Item"," ",_jsx(FontAwesomeIcon,{className:"ctrl-array__section-btn__icon",icon:faPlus})]})]}):_jsx("div",{children:"Missing props for array"})}}return"boolean"===e.type?_jsx(CtrlBoolean,{prop:e,updateProps:Z,deleteProp:ee,value:s,inheritVal:i,currMod:$,updatePath:n},$.id+n):"number"===e.type?_jsx(CtrlNumber,{prop:e,updateProps:Z,deleteProp:ee,value:s,inheritVal:i,currMod:$,updatePath:n},$.id+n):"file"===e.type?_jsx(CtrlFile,{prop:e,updateProps:Z,deleteProp:ee,value:s,inheritVal:i,currMod:$,updatePath:n,setGalleryOpen:je,setCurrentFile:ve,setOnGalleryChange:Ne},$.id+n):"color"===e.type?_jsx(CtrlColor,{prop:e,updateProps:Z,deleteProp:ee,value:s,inheritVal:i,currMod:$,updatePath:n},$.id+n):"wysiwyg"===e.type?_jsx(CtrlWysiwyg,{prop:e,updateProps:Z,deleteProp:ee,value:s,inheritVal:i,currMod:$,updatePath:n,saveShortcut:oe},$.id+n):"url"===e.type?_jsx(CtrlUrl,{prop:e,updateProps:Z,deleteProp:ee,value:s,inheritVal:i,currMod:$,updatePath:n},$.id+n):_jsx(CtrlText,{prop:e,updateProps:Z,deleteProp:ee,value:s,inheritVal:i,currMod:$,updatePath:n},$.id+n)}function ne(e){let r=null,t=0;if(e.props?.children)if(Array.isArray(e.props.children))r=[],e.props.children.forEach((e=>{r.push(ne(e)),t++}));else if("object"==typeof e.props.children){r={};for(let n in e.props.children){r[n]=[];for(let o=0;o<e.props.children[n].length;++o)r[n].push(ne(e.props.children[n][o])),t++}}return e.module?{id:e.id,module:e.module.name,props:{...e.props,children:t>0?r:void 0}}:e}async function oe(){if(!w)return void console.warn("Cannot save page");N(!0);let e=b.map((e=>ne(e)));clearEmpties(e);try{await PROVIDER.savePage(g,e,I,S),m(g),v(!1)}catch(e){console.error(e)}N(!1)}function ie(e){const r=[...b];function t(e,n,o){if(n.id===e){if(o){if(Array.isArray(o.props.children)){const e=o.props.children.indexOf(n);e>0&&(o.props.children.splice(e,1),o.props.children.splice(e-1,0,n))}else if("object"==typeof o.props.children)for(let e in o.props.children){const r=o.props.children[e].indexOf(n);r>0&&(o.props.children[e].splice(r,1),o.props.children[e].splice(r-1,0,n))}}else{const e=r.indexOf(n);e>0&&(r.splice(e,1),r.splice(e-1,0,n))}return!0}if(n.props?.children){if(Array.isArray(n.props.children))return n.props.children.some((r=>t(e,r,n)));if("object"==typeof n.props.children)return Object.keys(n.props.children).some((r=>n.props.children[r].some((r=>t(e,r,n)))))}return!1}r.some((r=>t(e,r))),v(!0),V(L-1),j(r)}function se(e){const r=[...b];function t(e,n,o){if(n.id===e){if(o){if(Array.isArray(o.props.children)){const e=o.props.children.indexOf(n);e>-1&&(o.props.children.splice(e,1),o.props.children.splice(e+1,0,n))}else if("object"==typeof o.props.children)for(let e in o.props.children){const r=o.props.children[e].indexOf(n);r>-1&&(o.props.children[e].splice(r,1),o.props.children[e].splice(r+1,0,n))}}else{const e=r.indexOf(n);e>-1&&(r.splice(e,1),r.splice(e+1,0,n))}return!0}if(n.props?.children){if(Array.isArray(n.props.children))return n.props.children.some((r=>t(e,r,n)));if("object"==typeof n.props.children)return Object.keys(n.props.children).some((r=>n.props.children[r].some((r=>t(e,r,n)))))}return!1}r.some((r=>t(e,r))),v(!0),V(L+1),j(r)}function le(){F(null),T(null),V(0),D(!1)}function ce(e){if(!(e&&e.module.ref&&e.module.ref.current&&u.current))return void ge(null);const r=getCoords(e.module.ref.current),t=u.current.contentWindow.document.querySelector(".simplebar-content-wrapper").scrollTop;ge({x:r.left,y:r.top+t,width:e.module.ref.current.offsetWidth,height:e.module.ref.current.offsetHeight})}function ae(e,r){r&&r.stopPropagation();let t=[...b];function n(e,r,o){if(o.id!==e)o.props?.children&&(Array.isArray(o.props.children)?o.props.children.forEach((r=>n(e,o,r))):"object"==typeof o.props.children&&Object.keys(o.props.children).forEach((r=>o.props.children[r].forEach((r=>n(e,o,r))))));else{if(r){if(Array.isArray(r.props.children)){const e=r.props.children.indexOf(o);r.props.children.splice(e,1)}else if("object"==typeof r.props.children)for(let e in r.props.children){const t=r.props.children[e].indexOf(o);t>-1&&r.props.children[e].splice(t,1)}return}const e=t.indexOf(o);t.splice(e,1)}}t.forEach((r=>n(e,null,r))),le(),v(!0),j(t)}function pe(e,r=b){return flattenTree(r).find((r=>r.id===e))}function de(e,r){r&&r.stopPropagation();let t=[...b];function n(e){e.id="f"+uuidv4(),e.props?.children&&(Array.isArray(e.props.children)?e.props.children.forEach((e=>n(e))):"object"==typeof e.props.children&&Object.keys(e.props.children).forEach((r=>e.props.children[r].forEach((e=>n(e))))))}function o(e,r,i){if(i.id!==e)i.props?.children&&(Array.isArray(i.props.children)?i.props.children.forEach((r=>o(e,i,r))):"object"==typeof i.props.children&&Object.keys(i.props.children).forEach((r=>i.props.children[r].forEach((r=>o(e,i,r))))));else{const e=clone(i);if(e.id="f"+uuidv4(),e.props?.children&&(Array.isArray(e.props.children)?e.props.children=e.props.children.map((e=>(n(e),e))):"object"==typeof e.props.children&&Object.keys(e.props.children).forEach((r=>{e.props.children[r]=e.props.children[r].map((e=>(n(e),e)))}))),r){if(Array.isArray(r.props.children)){const t=r.props.children.indexOf(i);r.props.children.splice(t+1,0,e)}else if("object"==typeof r.props.children)for(let t in r.props.children){const n=r.props.children[t].indexOf(i);n>-1&&r.props.children[t].splice(n+1,0,e)}return}const o=t.indexOf(i);t.splice(o+1,0,e)}}t.forEach((r=>o(e,null,r))),v(!0),j(t)}function ue(e,r){r&&r.stopPropagation();const t=pe(e);if(t){const e=clearEmpties(ne(t));navigator.clipboard.writeText(JSON.stringify(e))}}function _e(e,r){r&&r.stopPropagation(),navigator.clipboard.readText().then((r=>{if(!r||!r.includes("module")||!r.includes("id"))return;let t;try{t=JSON.parse(r)}catch(e){return}let n=[...b],o=W(t);o=function e(r){return r.id="f"+uuidv4(),r.props?.children&&(Array.isArray(r.props.children)?r.props.children.forEach((r=>e(r))):"object"==typeof r.props.children&&Object.keys(r.props.children).forEach((t=>r.props.children[t].forEach((r=>e(r)))))),r}(o);let i,s=null;function l(e,r,t){if(t.id!==e)t.props?.children&&(Array.isArray(t.props.children)?t.props.children.forEach((r=>l(e,t,r))):"object"==typeof t.props.children&&Object.keys(t.props.children).forEach((r=>t.props.children[r].forEach((r=>l(e,t,r))))));else{if(t.module.options.children){if(!t.props.children)if(t.module.options.children.slots){t.props.children={};const e="function"==typeof t.module.options.children.slots?t.module.options.children.slots(t.props):t.module.options.children.slots;for(let r of e)t.props.children[r.id]=[]}else t.props.children=[];if(s=t,Array.isArray(t.props.children))i=t.props.children.length,t.props.children.push(o);else if("object"==typeof t.props.children)for(let e in t.props.children){i=t.props.children[e].length,t.props.children[e].push(o);break}return}if(r){if(!r.props.children)if(r.module.options.children.slots){r.props.children={};const e="function"==typeof r.module.options.children.slots?r.module.options.children.slots(r.props):r.module.options.children.slots;for(let t of e)r.props.children[t.id]=[]}else!0===r.module.options.children&&(r.props.children=[]);if(s=r,!0===r.module?.options?.children&&Array.isArray(r.props.children)){const e=r.props.children.indexOf(t);r.props.children.splice(e+1,0,o),i=e+1}else if("object"==typeof r.props.children)for(let e in r.props.children){const n=r.props.children[e].indexOf(t);if(-1!==n){r.props.children[e].splice(n+1,0,o),i=n+1;break}}return}const e=n.indexOf(t);n.splice(e+1,0,o)}}n.forEach((r=>l(e,null,r))),v(!0),j(n),H(o,i,s)}))}useEffect((()=>(u.current&&u.current.contentWindow&&(u.current.contentWindow.onresize=()=>{ce($)}),()=>{u.current&&u.current.contentWindow&&(u.current.contentWindow.onresize=null)})),[$,u.current]),useEffect((()=>(window.onresize=()=>{ce($)},()=>{window.onresize=null})),[$]),useEffect((()=>{ce($)}),[$,b]);const[fe,he]=useState({x:0,y:0,width:0,height:0}),[me,ge]=useState({x:0,y:0,width:0,height:0});function ye(e,r,t){let n;return e.props?.children&&(Array.isArray(e.props.children)?n=e.props.children.map(((r,t)=>ye(r,t,e))):"object"==typeof e.props.children&&(n=Object.keys(e.props.children).reduce(((r,t)=>({...r,[t]:e.props.children[t].map(((r,t)=>ye(r,t,e)))})),{}))),_jsx(e.module.Component,{inEditor:!0,id:e.id,ref:e.module.ref,wrapperProps:{onClick:n=>{n.stopPropagation(),B||(K(),H(e,r,t))},onContextMenu:n=>{n.stopPropagation(),B||(H(e,r,t),J({event:n,position:{y:n.clientY+56,x:n.clientX+(ke??0)}}))},onMouseOver:e=>{if(e.stopPropagation(),B)return;if(!u.current)return;const r=e.currentTarget,t=getCoords(r),n=u.current.contentWindow.document.querySelector(".simplebar-content-wrapper").scrollTop;fe&&fe.x===t.left&&fe.y===t.top||he({x:t.left,y:t.top+n,width:r.offsetWidth,height:r.offsetHeight})}},...e.props??{},renderedChildren:n},e.id)}const[be,je]=useState([]),[xe,ve]=useState(null),[Ce,Ne]=useState((()=>null)),[we,Ae]=useState(defaultClosedCategories),[Pe,Se]=useState(defaultNavigatorOpen),[Ie,Ee]=useState(defaultNavigatorWidth),[ke,Me]=useState(defaultInspectorWidth),[Oe,We]=useState(0),[Re,Fe]=useState(0),$e=useRef(null);function Te(){$e.current?.classList.toggle("nitrogen-previewing"),X(!B)}function Le(e,r,t,n){localStorage.setItem(defaultInspectorWidthItem,`${t.clientWidth}`),Me(t.clientWidth??0),ce($)}function Ve(){localStorage.setItem(defaultNavigatorOpenItem,`${!Pe}`),Se(!Pe)}return _jsxs(_Fragment,{children:[_jsx(SplashScreen,{loading:E}),_jsxs("div",{className:"nitrogen-screen",style:{paddingLeft:ke,paddingRight:Pe?Ie:0},onMouseOver:e=>{he(null)},children:[B&&_jsxs("div",{className:"nitrogen-screen__preview-popup",children:["Press ",_jsx("kbd",{children:"ESC"})," to exit preview mode"]}),_jsx(Resizable,{defaultSize:{width:defaultInspectorWidth,height:"100vh"},size:{width:ke,height:"100vh"},style:{position:"fixed",top:0,left:0,zIndex:1001},onResize:Le,minWidth:150,maxWidth:1e3,enable:{top:!1,right:!0,bottom:!1,left:!1,topRight:!1,bottomRight:!1,bottomLeft:!1,topLeft:!1},children:_jsxs("div",{className:"nitrogen-panel",id:"nitrogen-inspector",children:[_jsxs("div",{className:"nitrogen-panel__header",children:[_jsx("div",null!==$||U?{className:"nitrogen-panel__header__button",onClick:()=>U?z(!1):D(!G),children:_jsx(FontAwesomeIcon,{icon:U?G?faEdit:faGrid:G?faGrid:faEdit})}:{className:"nitrogen-panel__header__empty-and-lonely-bob"}),_jsx("div",{className:"nitrogen-panel__header__title",children:$&&G?`Edit ${$.module.name}`:"Nitrogen"}),_jsx("div",{className:"nitrogen-panel__header__empty-and-lonely-bob"})]}),_jsx(SimpleBar,{style:{maxHeight:"calc(100vh - 88px)"},className:"nitrogen-panel__content",children:U?_jsx("div",{className:"nitrogen-panel__settings",children:config.editorUrl&&_jsxs("a",{className:"nitrogen-panel__settings__btn",href:config.editorUrl(S),children:[_jsx("i",{className:"far fa-person-to-portal"}),"Back to Dashboard"]})}):_jsxs("div",null!==$&&G?{className:"nitrogen-panel__inspector",children:[_jsx("div",{className:"nitrogen-panel__inspector__menu",children:$.module.props.map(((e,r)=>_jsxs("div",{className:"nitrogen-panel__inspector__menu__button "+(Re===r?"nitrogen-panel__inspector__menu__button--active ":""),onClick:()=>function(e){We(0),Fe(e)}(r),children:[_jsx("div",{className:"nitrogen-panel__inspector__menu__button__content "+(Re===r?"nitrogen-panel__inspector__menu__button__content--active":"")}),_jsxs("div",{className:"nitrogen-panel__inspector__menu__button__content__text",children:[e?.icon&&_jsx("i",{className:`nitrogen-panel__inspector__menu__button__content__text__icon ${e.icon} fa-fw`}),e.label]})]},(e.label??"cat-")+r)))}),$.module.props[Re]?$.module.props[Re].groups.map(((e,r)=>_jsxs("div",{className:"nitrogen-panel__inspector__section",children:[_jsxs("div",{className:"nitrogen-panel__inspector__section__header",onClick:()=>function(e){We(Oe!==e?e:-1)}(r),children:[_jsx("i",{className:"nitrogen-panel__inspector__section__header__icon fa-solid fa-sharp fa-caret-right "+(Oe===r?"nitrogen-panel__inspector__section__header__icon--active":"")}),e.label]}),_jsx("div",{className:"nitrogen-panel__inspector__section__content "+(Oe===r?"":"nitrogen-panel__inspector__section__content--hidden"),children:Object.keys(e.props).map((r=>{if("slot"===e.props[r].type)return;const t=e.props[r];let n=t?.label??r.replace(/([A-Z])/g," $1");return n=n.charAt(0).toUpperCase()+n.slice(1),t.isVisible&&!1===t.isVisible($.props)?void 0:_jsxs("div",{className:"nitrogen-panel__inspector__section__content__ctrl-option "+(t?.divider?"nitrogen-panel__inspector__section__content__ctrl-option--divider":""),children:[_jsxs("div",{className:"nitrogen-panel__inspector__section__content__ctrl-option__label",children:[n," ",t?.responsive&&_jsx(ResponsiveWidget,{responsiveMode:M,setResponsiveMode:O})]}),te(t,r)]},r)}))})]},(e.label??"group-")+r))):"This module has no properties.",_jsxs("div",{className:"nitrogen-panel__inspector__mod-id",children:["Module ID: ",_jsx("span",{children:$.id})]})]}:{className:"nitrogen-panel__content__default",children:[_jsxs("div",{className:"nitrogen-panel__content__default__input-group",children:[_jsx("input",{type:"text",name:"component-search",placeholder:"Search modules...",className:"nitrogen-panel__content__default__search-modules",value:t,onChange:_}),t.length>0&&_jsx("button",{type:"button",name:"component-search-clear",className:"nitrogen-panel__content__default__clear-search",onClick:f,children:"X"})]}),(t.length>0||s.length>0?s:e).reduce(((e,r)=>{const t=(s.length>0?r.item:r).options.category;let n=e.find((e=>e.categoryLabel===t));return n?(n.modules.push(r),e):(n={categoryLabel:t,modules:[r]},e.push(n),e)}),[]).sort(((e,r)=>e.categoryLabel<r.categoryLabel?-1:e.categoryLabel>r.categoryLabel?1:0)).map((e=>_jsxs(React.Fragment,{children:[_jsxs("div",{className:"nitrogen-panel__content__default__section-header",onClick:()=>function(e){Ae((r=>{if(r.includes(e.categoryLabel)){const t=r.filter((r=>r!==e.categoryLabel));return localStorage.setItem(defaultClosedCategoriesItem,JSON.stringify(t)),t}const t=[...r,e.categoryLabel];return localStorage.setItem(defaultClosedCategoriesItem,JSON.stringify(t)),t}))}(e),children:[e.categoryLabel,_jsx("div",{children:_jsx("i",{className:"nitrogen-panel__content__default__section-header__icon fa-solid fa-sharp fa-caret-right "+(we.includes(e.categoryLabel)?"":"nitrogen-panel__content__default__section-header__icon--active")})})]}),_jsx(CardsContainer,{closedCategories:we,cat:e,fuseResults:s,addModule:q})]},e.categoryLabel))),t.length>0&&0===s.length&&_jsx("div",{className:"nitrogen-panel__content__default__search-no-results",children:"No results found."})]})}),_jsxs("div",{className:"nitrogen-panel__footer",children:[_jsx("div",{className:"nitrogen-panel__footer__btn nitrogen-panel__footer__btn--settings",onClick:()=>z(!U),title:"Page Settings",children:_jsx("i",{className:"fa-solid fa-cog"})}),_jsx(ResponsiveWidget,{responsiveMode:M,setResponsiveMode:O,expandDirection:"up"}),_jsx("div",{className:"nitrogen-panel__footer__btn nitrogen-panel__footer__btn--preview",onClick:()=>Te(),title:"Page Preview",children:_jsx("i",{className:"fa-solid fa-eye"})}),_jsx("div",{className:"nitrogen-panel__footer__btn",onClick:Ve,title:"Navigator",children:_jsx("i",{className:"fa-solid fa-layer-group"})}),_jsxs("button",{className:"nitrogen-panel__footer__save-btn "+(w?"":"nitrogen-panel__footer__save-btn--disabled"),onClick:w&&!C?oe:()=>{},disabled:!w,children:[_jsx(FontAwesomeIcon,{icon:faSpinnerThird,spin:!0,className:"nitrogen-panel__footer__save-btn__spinner "+(C?"nitrogen-panel__footer__save-btn__spinner--saving":"")}),"SAVE"]})]})]})}),_jsxs("div",{className:"nitrogen-screen__page-container",onClick:le,children:[_jsxs("div",{className:"nitrogen-screen__page-container__top-bar",style:{left:ke,maxWidth:`calc(100% - ${ke+(Pe?Ie:0)}px)`},onClick:e=>e.stopPropagation(),children:[_jsx(ResponsiveWidget,{responsiveMode:M,setResponsiveMode:O,expanded:!0,backgroundClass:"responsive-widget-background"}),_jsxs("div",{className:"page-title-wrapper",children:[_jsx("span",{children:"Editing Page:"}),_jsx("input",{value:g,onChange:e=>y(e.target.value),type:"text",name:"page-title",className:"nitrogen-screen__page-container__top-bar__page-title",placeholder:"Page Title"})]})]}),_jsx(SimpleBar,{style:B?{}:{maxHeight:"calc(100vh - 36px)"},className:`nitrogen-screen__page-container__simple-bar ${"desktop"===M?"nitrogen-screen__page-container__simple-bar--desktop":""} ${"laptop"===M?"nitrogen-screen__page-container__simple-bar--laptop":""} ${"tablet"===M?"nitrogen-screen__page-container__simple-bar--tablet":""} ${"mobileLandscape"===M?"nitrogen-screen__page-container__simple-bar--mobile-landscape":""} ${"mobile"===M?"nitrogen-screen__page-container__simple-bar--mobile-portrait":""} ${B?"nitrogen-screen__page-container__simple-bar--is-previewing":""}`,children:_jsx("div",{className:`i-frame-container ${"desktop"===M?"i-frame-container--desktop":""} ${"laptop"===M?"i-frame-container--laptop":""} ${"tablet"===M?"i-frame-container--tablet":""} ${"mobileLandscape"===M?"i-frame-container--mobile-landscape":""} ${"mobile"===M?"i-frame-container--mobile-portrait":""}`,children:_jsx(IFrame,{ref:u,inspectorWidth:ke,onClick:K,children:_jsx("section",{className:"nitrogen-page-wrapper",ref:$e,children:_jsxs(SimpleBar,{className:"bob-container "+(B?"is-previewing":""),children:[fe&&!B&&_jsx("div",{className:"simplebar-content__bob-container",style:{top:fe.y,left:fe.x,width:fe.width,height:fe.height},children:_jsx("div",{className:"simplebar-content__bob-container__bob"})}),me&&!B&&_jsx("div",{className:"simplebar-content__bob-container",style:{top:me.y,left:me.x,width:me.width,height:me.height},children:_jsx("div",{className:"simplebar-content__bob-container__curr-bob"})}),$&&me&&!B&&_jsx("div",{className:"simplebar-content__bob-container__buttons",onClick:e=>e.stopPropagation(),style:{top:me.y,left:me.x,height:me.height},children:_jsxs("div",{className:"simplebar-content__bob-container__buttons__container",children:[L>0&&_jsxs("div",{className:"simplebar-content__bob-container__buttons__container__button",onClick:()=>ie($.id),children:[_jsx("div",{className:"simplebar-content__bob-container__buttons__container__button__inside"}),_jsx(FontAwesomeIcon,{className:"relative",icon:faCaretUp})]}),(R?R&&R.props.children&&L<R.props.children.length-1:L<b.length-1)&&_jsxs("div",{className:"simplebar-content__bob-container__buttons__container__button ",onClick:()=>se($.id),children:[_jsx("div",{className:"simplebar-content__bob-container__buttons__container__button__inside"}),_jsx(FontAwesomeIcon,{className:"relative",icon:faCaretDown})]}),_jsxs("div",{className:"simplebar-content__bob-container__buttons__container__button",onClick:e=>de($.id,e),children:[_jsx("div",{className:"simplebar-content__bob-container__buttons__container__button__inside"}),_jsx(FontAwesomeIcon,{className:"relative",icon:faClone})]}),_jsxs("div",{className:"simplebar-content__bob-container__buttons__container__button",onClick:e=>ae($.id,e),children:[_jsx("div",{className:"simplebar-content__bob-container__buttons__container__button__inside"}),_jsx(FontAwesomeIcon,{className:"relative",icon:faTimes})]})]})}),b.map(((e,r)=>ye(e,r)))]})})})})})]}),be.length>0&&_jsx(Gallery,{currentFile:xe,setCurrentFile:Ce,close:()=>je([]),fileTypes:be}),Pe&&_jsx(Navigator,{modules:b,defaultWidth:defaultNavigatorWidth,width:Ie,onResize:function(e,r,t,n){localStorage.setItem(defaultNavigatorWidthItem,`${t.clientWidth}`),Ee(t.clientWidth??0),ce($)},currModId:$?.id??"",selectModule:(e,r)=>{if(e&&e.length>4){const r=pe(e.substring(4));r&&H(r)}},deleteModule:ae,reorderModules:function(e){const r=flattenTree(b);let t=null,n=null;const o=e.map((e=>{const n=r.find((r=>r.id===e.id));return n?(t=e.parentId,{...n,parentId:e.parentId}):e})),i=buildTree(o);t&&(n=pe(t,i)),v(!0),j(i),$&&(F(n),V(function(e,r,t){if(!t)return r.findIndex((r=>r.id===e.id));if(Array.isArray(t.props.children))return t.props.children.findIndex((r=>r.id===e.id));if("object"!=typeof t.props.children)return-1;for(let r in t.props.children){const n=t.props.children[r].findIndex((r=>r.id===e.id));if(-1!==n)return n}return-1}($,i,n)))},toggleNavigator:Ve}),_jsx(Menu,{id:CONTEXT_MENU_ID,children:$?_jsxs(_Fragment,{children:[_jsxs(Item,{onClick:({event:e,props:r,triggerEvent:t,data:n})=>{$&&(K(),ie($.id))},children:[_jsx("span",{className:"contexify-item-span",children:"Move Up"})," ",_jsx(FontAwesomeIcon,{icon:faArrowUp})]}),_jsxs(Item,{onClick:({event:e,props:r,triggerEvent:t,data:n})=>{$&&(K(),se($.id))},children:[_jsx("span",{className:"contexify-item-span",children:"Move Down"})," ",_jsx(FontAwesomeIcon,{icon:faArrowDown})]}),_jsx(Separator,{}),_jsxs(Item,{onClick:({event:e,props:r,triggerEvent:t,data:n})=>{$&&(K(),ue($.id))},children:[_jsx("span",{className:"contexify-item-span",children:"Copy"})," ",_jsx(FontAwesomeIcon,{icon:faCopy})]}),_jsxs(Item,{onClick:({event:e,props:r,triggerEvent:t,data:n})=>{$&&(K(),_e($.id))},children:[_jsx("span",{className:"contexify-item-span",children:"Paste"})," ",_jsx(FontAwesomeIcon,{icon:faPaste})]}),_jsx(Separator,{}),_jsxs(Item,{onClick:({event:e,props:r,triggerEvent:t,data:n})=>{$&&(K(),de($.id))},children:[_jsx("span",{className:"contexify-item-span",children:"Duplicate"})," ",_jsx(FontAwesomeIcon,{icon:faClone})]}),_jsx(Separator,{}),_jsxs(Item,{onClick:({event:e,props:r,triggerEvent:t,data:n})=>{$&&(K(),ae($.id))},children:[_jsx("span",{className:"contexify-item-span",children:"Delete"})," ",_jsx(FontAwesomeIcon,{icon:faTrashAlt})]})]}):_jsx(_Fragment,{})})]})]})}export default App;