@myissue/vue-website-page-builder 3.1.21 → 3.1.23

package/src/Components/PageBuilder/EditorMenu/RightSidebarEditor.vue

@@ -1,5 +1,6 @@
 <script setup>
-import { computed, inject } from 'vue'
+import { computed } from 'vue'
+import { sharedPageBuilderStore } from '../../../stores/shared-store'
 import ClassEditor from './Editables/ClassEditor.vue'
 import ImageEditor from './Editables/ImageEditor.vue'
 import OpacityEditor from './Editables/OpacityEditor.vue'
@@ -14,8 +15,8 @@ import TipTap from '../../TipTap/TipTap.vue'
 import EditGetElement from './Editables/EditGetElement.vue'
 import ElementEditor from './Editables/ElementEditor.vue'
 
-// Get stores from parent PageBuilder component
-const pageBuilderStateStore = inject('pageBuilderStateStore')
+// Use shared store instance
+const pageBuilderStateStore = sharedPageBuilderStore
 
 // emit
 const emit = defineEmits(['closeEditor'])

package/src/Components/PageBuilder/Settings/AdvancedPageBuilderSettings.vue

@@ -1,8 +1,9 @@
 <script setup>
-import { ref, computed, inject } from 'vue'
+import { ref, computed } from 'vue'
+import { sharedPageBuilderStore } from '../../../stores/shared-store'
 
-// Get stores from parent PageBuilder component
-const pageBuilderStateStore = inject('pageBuilderStateStore')
+// Use shared store instance
+const pageBuilderStateStore = sharedPageBuilderStore
 
 const getElement = computed(() => {
   return pageBuilderStateStore.getElement

package/src/Components/PageBuilder/Settings/PageBuilderSettings.vue

@@ -1,12 +1,13 @@
 <script setup>
 import SlideOverRightParent from '../Slidebars/SlideOverRightParent.vue'
 import AdvancedPageBuilderSettings from './AdvancedPageBuilderSettings.vue'
-import { ref, computed, inject } from 'vue'
+import { ref, computed } from 'vue'
+import { sharedPageBuilderStore } from '../../../stores/shared-store'
 import fullHTMLContent from '../../../utils/builder/html-doc-declaration-with-components'
 const version = __APP_VERSION__
 
-// Get stores from parent PageBuilder component
-const pageBuilderStateStore = inject('pageBuilderStateStore')
+// Use shared store instance
+const pageBuilderStateStore = sharedPageBuilderStore
 
 const showAdvancedSettingsSlideOverRight = ref(false)
 const titleSettingsSlideOverRight = ref('')
@@ -343,26 +344,27 @@ const handleDownloadHTML = function () {
                             : 'bg-blue-100 text-blue-800'
                         "
                       >
-                        {{
-                          getConfigPageBuilder.updateOrCreate.formType === 'create'
-                            ? 'Creating new Resource'
-                            : 'Updating existing Resource'
-                        }}
+                        <span v-if="getConfigPageBuilder.updateOrCreate.formType === 'create'">
+                          {{ getConfigPageBuilder.updateOrCreate.formType }}
+                        </span>
+                        <span v-if="getConfigPageBuilder.updateOrCreate.formType === 'update'">
+                          {{ getConfigPageBuilder.updateOrCreate.formType }}
+                        </span>
                       </span>
                     </td>
                   </tr>
-                  <tr>
+                  <tr
+                    v-if="
+                      getConfigPageBuilder.updateOrCreate.createNewResourceFormName &&
+                      getConfigPageBuilder.updateOrCreate.createNewResourceFormName.length > 0
+                    "
+                  >
                     <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                       Form Name
                     </td>
                     <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                       <span
                         class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium"
-                        :class="
-                          getConfigPageBuilder.updateOrCreate === 'create'
-                            ? 'bg-green-100 text-green-800'
-                            : 'bg-blue-100 text-blue-800'
-                        "
                       >
                         {{ getConfigPageBuilder.updateOrCreate.createNewResourceFormName }}
                       </span>

package/src/Components/TipTap/TipTap.vue

@@ -1,9 +1,9 @@
 <script setup>
-import { inject } from 'vue'
 import PageBuilderClass from '../../composables/PageBuilderClass.ts'
+import { sharedPageBuilderStore } from '../../stores/shared-store'
 
-// Get stores from parent PageBuilder component
-const pageBuilderStateStore = inject('pageBuilderStateStore')
+// Use shared store instance
+const pageBuilderStateStore = sharedPageBuilderStore
 
 const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
 </script>

package/src/Components/TipTap/TipTapInput.vue

@@ -1,13 +1,14 @@
 <script setup>
 import { useEditor, EditorContent } from '@tiptap/vue-3'
 import StarterKit from '@tiptap/starter-kit'
-import { computed, onBeforeMount, onMounted, ref, watch, inject } from 'vue'
+import { computed, onBeforeMount, onMounted, ref, watch } from 'vue'
 import PageBuilderClass from '../../composables/PageBuilderClass.ts'
 import Link from '@tiptap/extension-link'
 import DynamicModalBuilder from '../Modals/DynamicModalBuilder.vue'
+import { sharedPageBuilderStore } from '../../stores/shared-store'
 
-// Get stores from parent PageBuilder component
-const pageBuilderStateStore = inject('pageBuilderStateStore')
+// Use shared store instance
+const pageBuilderStateStore = sharedPageBuilderStore
 
 const showModalUrl = ref(false)
 

package/src/PageBuilder/PageBuilder.vue

@@ -1,6 +1,5 @@
 <script setup>
 import { onMounted, computed, ref, watch, provide } from 'vue'
-import { createPinia } from 'pinia'
 import PageBuilderClass from '../composables/PageBuilderClass.ts'
 import PageBuilderPreviewModal from '../Components/Modals/PageBuilderPreviewModal.vue'
 import Preview from './Preview.vue'
@@ -9,7 +8,7 @@ import EditGetElement from '../Components/PageBuilder/EditorMenu/Editables/EditG
 import SearchComponents from '../Components/Search/SearchComponents.vue'
 import OptionsDropdown from '../Components/PageBuilder/DropdownsPlusToggles/OptionsDropdown.vue'
 import RightSidebarEditor from '../Components/PageBuilder/EditorMenu/RightSidebarEditor.vue'
-import { usePageBuilderStateStore } from '../stores/page-builder-state'
+import { sharedPageBuilderPinia, sharedPageBuilderStore } from '../stores/shared-store'
 
 /**
  * Props for PageBuilder component
@@ -34,24 +33,33 @@ const props = defineProps({
   },
 })
 
-// Create internal Pinia instance for PageBuilder package
-const internalPinia = createPinia()
-const pageBuilderStateStore = usePageBuilderStateStore(internalPinia)
+// Use shared Pinia instance for PageBuilder package (THIS IS THE KEY CHANGE!)
+const internalPinia = sharedPageBuilderPinia
+const pageBuilderStateStore = sharedPageBuilderStore
 
 // Set configPageBuilder in store (this will be the single source of truth)
 if (props.configPageBuilder) {
-  // Ensure updateOrCreate defaults to 'create' if not provided
+  // Ensure updateOrCreate defaults with proper deep merge
+  const defaultUpdateOrCreate = {
+    formType: 'create',
+    createNewResourceFormName: 'post',
+  }
+
+  const defaultUserSettings = {
+    theme: 'light',
+    language: 'en',
+    autoSave: true,
+  }
+
   const configWithDefaults = {
     ...props.configPageBuilder,
-    updateOrCreate: props.configPageBuilder.updateOrCreate || {
-      formType: 'create',
-      createNewResourceFormName: 'post',
+    updateOrCreate: {
+      ...defaultUpdateOrCreate,
+      ...props.configPageBuilder.updateOrCreate,
     },
-
-    userSettings: props.configPageBuilder.userSettings || {
-      theme: 'light',
-      language: 'en',
-      autoSave: true,
+    userSettings: {
+      ...defaultUserSettings,
+      ...props.configPageBuilder.userSettings,
     },
   }
   pageBuilderStateStore.setConfigPageBuilder(configWithDefaults)
@@ -122,7 +130,8 @@ const handleAddComponent = function () {
 }
 
 const getComponents = computed(() => {
-  return pageBuilderStateStore.getComponents
+  const components = pageBuilderStateStore.getComponents
+  return components
 })
 
 const getElement = computed(() => {
@@ -146,7 +155,7 @@ const getElementAttributes = computed(() => {
   return attributesToWatch
 })
 
-watch(getElementAttributes, (newAttributes, oldAttributes) => {
+watch(getElementAttributes, async (newAttributes, oldAttributes) => {
   // Check if any of the specified attributes have changed
   if (
     newAttributes?.src !== oldAttributes?.src ||
@@ -156,8 +165,8 @@ watch(getElementAttributes, (newAttributes, oldAttributes) => {
     newAttributes?.dataImage !== oldAttributes?.dataImage
   ) {
     // Trigger your method when any of the specified attributes change
-    pageBuilderClass.handlePageBuilderMethods()
-    pageBuilderClass.setEventListenersForElements()
+    await pageBuilderClass.handlePageBuilderMethods()
+    await pageBuilderClass.setEventListenersForElements()
   }
 })
 
@@ -170,14 +179,12 @@ const draggableZone = ref(null)
 onMounted(async () => {
   pageBuilderClass.updateLocalStorageItemName()
   // Set up event listeners
-  pageBuilderClass.setEventListenersForElements()
+  await pageBuilderClass.setEventListenersForElements()
 
-  //
-  //
-  //
-  //
+  if (getConfigPageBuilder.value.updateOrCreate.formType === 'create') {
+    pageBuilderClass.loadExistingContent()
+  }
 
-  pageBuilderClass.loadExistingContent()
   pageBuilderClass.removeHoveredAndSelected()
 })
 </script>
@@ -371,8 +378,8 @@ onMounted(async () => {
               <div ref="draggableZone">
                 <!-- Added Components to DOM # start -->
                 <div
-                  v-for="component in Array.isArray(getComponents) && getComponents"
-                  :key="component"
+                  v-for="component in getComponents"
+                  :key="component.id"
                   id="page-builder-editor-editable-area"
                   class="bg-white grow"
                 >

package/src/composables/PageBuilderClass.ts

@@ -21,7 +21,7 @@ import tailwindFontStyles from '../utils/builder/tailwind-font-styles'
 import tailwindPaddingAndMargin from '../utils/builder/tailwind-padding-margin'
 import tailwindBorderRadius from '../utils/builder/tailwind-border-radius'
 import tailwindBorderStyleWidthPlusColor from '../utils/builder/tailwind-border-style-width-color'
-import { computed, ref, nextTick, inject } from 'vue'
+import { computed, ref, nextTick } from 'vue'
 import type { ComputedRef } from 'vue'
 import { v4 as uuidv4 } from 'uuid'
 import { delay } from './delay'
@@ -72,7 +72,6 @@ class PageBuilderClass {
 
     this.timer = null
 
-    // Store is now required parameter - no fallback to inject
     this.pageBuilderStateStore = pageBuilderStateStore
 
     this.getTextAreaVueModel = computed(() => this.pageBuilderStateStore.getTextAreaVueModel)
@@ -541,7 +540,7 @@ class PageBuilderClass {
     this.pageBuilderStateStore.setElement(null)
   }
 
-  handleRestoreElement() {
+  async handleRestoreElement() {
     if (this.showRunningMethodLogs) {
       console.log('handleRestoreElement')
     }
@@ -568,7 +567,7 @@ class PageBuilderClass {
     this.pageBuilderStateStore.setComponent(null)
     this.pageBuilderStateStore.setElement(null)
 
-    this.setEventListenersForElements()
+    await this.setEventListenersForElements()
   }
 
   handleFontWeight(userSelectedFontWeight?: string): void {
@@ -1475,35 +1474,47 @@ class PageBuilderClass {
 
       // Wait for the DOM to update before setting event listeners
       await nextTick()
-      this.setEventListenersForElements()
+      await this.setEventListenersForElements()
     } catch (error) {
       console.error('Error adding component:', error)
     }
   }
 
-  // Public method to parse and set components from JSON or HTML
+  /**
+   * Parse and set components from JSON or HTML data
+   *
+   * Supports:
+   * - JSON: Array of ComponentObject with html_code, id, title
+   * - HTML: String containing <section data-componentid="..."> elements
+   *
+   * Auto-detects format and parses accordingly
+   *
+   * @param data - JSON string (e.g., '[{"html_code":"...","id":"123","title":"..."}]')
+   *               OR HTML string (e.g., '<section data-componentid="123">...</section>')
+   */
   setComponentsFromData(data: string): void {
     if (this.showRunningMethodLogs) {
       console.log('setComponentsFromData')
     }
-
     // Auto-detect if input is JSON or HTML
     const trimmedData = data.trim()
 
     if (trimmedData.startsWith('[') || trimmedData.startsWith('{')) {
+      console.log('Using JSON method..............1')
       // Looks like JSON - parse as JSON
       this.#parseJSONComponents(trimmedData)
     } else if (trimmedData.startsWith('<')) {
+      console.log('Using HTML method..............2')
       // Looks like HTML - parse as HTML
       this.#parseHTMLComponents(trimmedData)
     } else {
+      console.log('Using JSON method..............3')
       this.#parseJSONComponents(trimmedData)
     }
   }
 
   // Private method to parse JSON components
   #parseJSONComponents(jsonData: string): void {
-    console.log('using HTML method...')
     try {
       const parsedData = JSON.parse(jsonData)
       let savedCurrentDesign: ComponentObject[] = []
@@ -1524,7 +1535,6 @@ class PageBuilderClass {
 
   // Private method to parse HTML components
   #parseHTMLComponents(htmlData: string): void {
-    console.log('using JSON method...')
     try {
       // Parse the HTML content using DOMParser
       const parser = new DOMParser()
@@ -1554,7 +1564,7 @@ class PageBuilderClass {
   }
 
   // Load existing content from HTML when in update mode
-  loadExistingContent(JSONComponents?: string): void {
+  loadExistingContent(data?: string): void {
     if (this.showRunningMethodLogs) {
       console.log('loadExistingContent')
     }
@@ -1570,10 +1580,8 @@ class PageBuilderClass {
     }
 
     if (this.pageBuilderStateStore.getConfigPageBuilder?.updateOrCreate?.formType === 'update') {
-      console.log('should come here, since update...... passed JSONComponents are:', JSONComponents)
-      // Update mode: Use passed JSONComponents
-      if (JSONComponents) {
-        this.setComponentsFromData(JSONComponents)
+      if (data) {
+        this.setComponentsFromData(data)
       }
     }
   }

package/src/index.ts

@@ -5,16 +5,19 @@ export { default as Preview } from './PageBuilder/Preview.vue'
 // Export stores (consolidated into single store)
 export { usePageBuilderStateStore } from './stores/page-builder-state'
 
-export { default as PageBuilderClass } from './composables/PageBuilderClass'
+export { default as PageBuilderClass } from './composables/PageBuilderClass.ts'
 
 // Export composables
 export { usePageBuilderModal } from './composables/usePageBuilderModal'
 
 // Export types
-export type { PageBuilderUser, ComponentObject, ImageObject } from './types'
+export type { PageBuilderUser, ComponentObject, ImageObject, PageBuilderConfig } from './types'
 
 // Export Pinia for convenience (same version as package uses)
 export { createPinia } from 'pinia'
 
 // Export CSS (users will need to import this separately)
 import './css/app.css'
+
+// Export shared store instances for external access
+export { sharedPageBuilderPinia, sharedPageBuilderStore } from './stores/shared-store'

package/src/stores/shared-store.ts

@@ -0,0 +1,13 @@
+import { createPinia } from 'pinia'
+import { usePageBuilderStateStore } from './page-builder-state'
+import type { PageBuilderStateStore } from '../types'
+
+// Create a shared Pinia instance that will be used across the entire package
+export const sharedPageBuilderPinia = createPinia()
+
+// Create and export a shared store instance with proper typing
+export const sharedPageBuilderStore: ReturnType<typeof usePageBuilderStateStore> =
+  usePageBuilderStateStore(sharedPageBuilderPinia)
+
+// Export the store and Pinia instance for external use
+export { usePageBuilderStateStore } from './page-builder-state'