@mindfiredigital/page-builder-react/dist/index.mjs.map

React UI Page builder

{"version":3,"sources":["../src/components/PageBuilder.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport ReactDOM from 'react-dom/client';\nimport {\n  PageBuilderReactProps,\n  DynamicComponents,\n  PageBuilderDesign,\n  PageBuilderElement,\n} from '../types/types';\n\nexport const PageBuilderReact: React.FC<PageBuilderReactProps> = ({\n  config,\n  customComponents,\n  initialDesign,\n  onChange,\n  editable = true,\n  brandTitle,\n  showAttributeTab,\n  layoutMode = 'absolute'\n}) => {\n  const builderRef = useRef<PageBuilderElement>(null);\n  const [processedConfig, setProcessedConfig] =\n    useState<DynamicComponents>(config);\n\n  useEffect(() => {\n    import('@mindfiredigital/page-builder-web-component').catch(error => {\n      console.error('Failed to load web component:', error);\n    });\n  }, []);\n\n  useEffect(() => {\n    const modifiedConfig: DynamicComponents | any = config;\n    if (customComponents) {\n      modifiedConfig.Custom = modifiedConfig.Custom || {};\n\n      Object.entries(customComponents).forEach(([key, componentConfig]) => {\n        if (!componentConfig.component) {\n          console.warn(`Skipping invalid component: ${key}`);\n          return;\n        }\n        const tagName = `react-component-${key.toLowerCase()}`;\n\n        if (!customElements.get(tagName)) {\n          class ReactComponentElement extends HTMLElement {\n            connectedCallback() {\n              const mountPoint = document.createElement('div');\n              this.appendChild(mountPoint);\n              const componentId = this.id;\n\n              try {\n                ReactDOM.createRoot(mountPoint).render(\n                  React.createElement(componentConfig.component, {\n                    componentId: componentId,\n                  })\n                );\n              } catch (error) {\n                console.error(`Error rendering ${key} component:`, error);\n              }\n            }\n          }\n\n          customElements.define(tagName, ReactComponentElement);\n        }\n\n        const settingsTagName = `react-settings-component-${key.toLowerCase()}`;\n        if (\n          componentConfig.settingsComponent &&\n          !customElements.get(settingsTagName)\n        ) {\n          class ReactSettingsElement extends HTMLElement {\n            connectedCallback() {\n              this.innerHTML = '';\n              const mountPoint = document.createElement('div');\n              this.appendChild(mountPoint);\n              const settingsData = this.getAttribute('data-settings');\n              const parsedSettings = settingsData\n                ? JSON.parse(settingsData)\n                : {};\n              try {\n                ReactDOM.createRoot(mountPoint).render(\n                  React.createElement(\n                    componentConfig.settingsComponent!,\n                    parsedSettings\n                  )\n                );\n              } catch (error) {\n                console.error(`Error rendering settings component:`, error);\n              }\n            }\n            static get observedAttributes() {\n              return ['data-settings'];\n            }\n            attributeChangedCallback(\n              name: string,\n              oldValue: string,\n              newValue: string\n            ) {\n              if (name === 'data-settings' && newValue !== oldValue) {\n                this.innerHTML = '';\n                const mountPoint = document.createElement('div');\n                this.appendChild(mountPoint);\n                const settingsData = this.getAttribute('data-settings');\n                const parsedSettings = settingsData\n                  ? JSON.parse(settingsData)\n                  : {};\n                ReactDOM.createRoot(mountPoint).render(\n                  React.createElement(\n                    componentConfig.settingsComponent!,\n                    parsedSettings\n                  )\n                );\n              }\n            }\n          }\n\n          customElements.define(settingsTagName, ReactSettingsElement);\n        }\n        modifiedConfig.Custom[key] = {\n          component: tagName,\n          svg: componentConfig.svg,\n          title: componentConfig.title,\n          settingsComponent: settingsTagName,\n          settingsComponentTagName: settingsTagName,\n        };\n      });\n    }\n\n    setProcessedConfig(modifiedConfig);\n  }, [config, customComponents]);\n\n  useEffect(() => {\n    if (builderRef.current) {\n      customElements.whenDefined('page-builder').then(() => {\n        try {\n          if (builderRef.current) {\n            // Now it's safe to set properties, they will hit the setters\n            builderRef.current.configData = processedConfig;\n            builderRef.current.initialDesign = initialDesign;\n            builderRef.current.editable = editable;\n            builderRef.current.brandTitle = brandTitle;\n            builderRef.current.showAttributeTab = showAttributeTab;\n            builderRef.current.layoutMode = layoutMode;\n\n            const configString = JSON.stringify(processedConfig);\n            builderRef.current.setAttribute('config-data', configString);\n          }\n        } catch (error) {\n          console.error('Error setting config-data and initialDesign:', error);\n        }\n      });\n    }\n  }, [processedConfig, initialDesign, editable, brandTitle, showAttributeTab]);\n  useEffect(() => {\n    const webComponent = builderRef.current;\n\n    const handleDesignChange = (event: Event) => {\n      const customEvent = event as CustomEvent<PageBuilderDesign>;\n      if (onChange) {\n        onChange(customEvent.detail);\n      }\n    };\n\n    if (webComponent) {\n      webComponent.addEventListener('design-change', handleDesignChange);\n    }\n\n    return () => {\n      if (webComponent) {\n        webComponent.removeEventListener('design-change', handleDesignChange);\n      }\n    };\n  }, [onChange]);\n\n  return <page-builder ref={builderRef} />;\n};\n"],"mappings":"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","names":[]}