@myissue/vue-website-page-builder 3.1.24 → 3.1.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myissue/vue-website-page-builder",
-  "version": "v3.1.24",
+  "version": "v3.1.26",
   "description": "🚧 DEVELOPMENT VERSION - Vue.js page builder component with drag & drop functionality. Not ready for production use.",
   "type": "module",
   "main": "./dist/vue-website-page-builder.umd.cjs",

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

@@ -344,10 +344,20 @@ const handleDownloadHTML = function () {
                             : 'bg-blue-100 text-blue-800'
                         "
                       >
-                        <span v-if="getConfigPageBuilder.updateOrCreate.formType === 'create'">
+                        <span
+                          v-if="
+                            getConfigPageBuilder &&
+                            getConfigPageBuilder.updateOrCreate.formType === 'create'
+                          "
+                        >
                           {{ getConfigPageBuilder.updateOrCreate.formType }}
                         </span>
-                        <span v-if="getConfigPageBuilder.updateOrCreate.formType === 'update'">
+                        <span
+                          v-if="
+                            getConfigPageBuilder &&
+                            getConfigPageBuilder.updateOrCreate.formType === 'update'
+                          "
+                        >
                           {{ getConfigPageBuilder.updateOrCreate.formType }}
                         </span>
                       </span>

package/src/PageBuilder/PageBuilder.vue

@@ -26,45 +26,12 @@ const props = defineProps({
     type: Object,
     default: null,
   },
-  configPageBuilder: {
-    type: Object,
-    default: () => ({ updateOrCreate: 'create' }),
-    required: false,
-  },
 })
 
 // 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 with proper deep merge
-  const defaultUpdateOrCreate = {
-    formType: 'create',
-    createNewResourceFormName: 'post',
-  }
-
-  const defaultUserSettings = {
-    theme: 'light',
-    language: 'en',
-    autoSave: true,
-  }
-
-  const configWithDefaults = {
-    ...props.configPageBuilder,
-    updateOrCreate: {
-      ...defaultUpdateOrCreate,
-      ...props.configPageBuilder.updateOrCreate,
-    },
-    userSettings: {
-      ...defaultUserSettings,
-      ...props.configPageBuilder.userSettings,
-    },
-  }
-  pageBuilderStateStore.setConfigPageBuilder(configWithDefaults)
-}
-
 // Initialize PageBuilder with store
 const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
 
@@ -178,10 +145,13 @@ const draggableZone = ref(null)
 
 onMounted(async () => {
   pageBuilderClass.updateLocalStorageItemName()
-  // Set up event listeners
   await pageBuilderClass.setEventListenersForElements()
 
-  if (getConfigPageBuilder.value.updateOrCreate.formType === 'create') {
+  if (
+    getConfigPageBuilder.value &&
+    getConfigPageBuilder.value.updateOrCreate &&
+    getConfigPageBuilder.value.updateOrCreate.formType === 'create'
+  ) {
     pageBuilderClass.loadExistingContent()
   }
 

package/src/composables/PageBuilderClass.ts

@@ -11,6 +11,7 @@ import type {
   TailwindPaddingAndMargin,
   TailwindBorderRadius,
   TailwindBorderStyleWidthColor,
+  PageBuilderConfig,
 } from '../types'
 import type { usePageBuilderStateStore } from '../stores/page-builder-state'
 
@@ -126,6 +127,34 @@ class PageBuilderClass {
     this.delay = delay()
   }
 
+  // Load existing content from HTML when in update mode
+  setConfigPageBuilder(data: PageBuilderConfig): void {
+    const defaultUpdateOrCreate = {
+      formType: 'create',
+      createNewResourceFormName: 'post',
+    }
+
+    const defaultUserSettings = {
+      theme: 'light',
+      language: 'en',
+      autoSave: true,
+    }
+
+    const configWithDefaults = {
+      ...data,
+      updateOrCreate: {
+        ...defaultUpdateOrCreate,
+        ...data.updateOrCreate,
+      },
+      userSettings: {
+        ...defaultUserSettings,
+        ...data.userSettings,
+      },
+    }
+
+    this.pageBuilderStateStore.setConfigPageBuilder(configWithDefaults)
+  }
+
   #applyElementClassChanges(
     selectedCSS: string | undefined,
     CSSArray: string[],
@@ -1121,7 +1150,10 @@ class PageBuilderClass {
     }
 
     // Logic for update
-    if (updateOrCreate === 'update') {
+    if (
+      (updateOrCreate === 'update' && typeof resourceFormName !== 'string') ||
+      (typeof resourceFormName === 'string' && resourceFormName?.length < 1)
+    ) {
       // if resource data is null
       if (resourceData === null) {
         this.pageBuilderStateStore.setLocalStorageItemName(`page-builder-update-resource`)
@@ -1159,6 +1191,49 @@ class PageBuilderClass {
         return
       }
     }
+    // Logic for update and with resource form name
+    if (
+      updateOrCreate === 'update' &&
+      typeof resourceFormName === 'string' &&
+      resourceFormName.length > 0
+    ) {
+      // if resource data is null
+      if (resourceData === null) {
+        this.pageBuilderStateStore.setLocalStorageItemName(`page-builder-update-resource`)
+        return
+      }
+
+      // If resource is present
+
+      // Runs when resourceData has id but no title
+      if (typeof resourceData === 'object' && 'id' in resourceData && !('title' in resourceData)) {
+        const sanitizedId = this.sanitizeForLocalStorage(String(resourceData['id']))
+        this.pageBuilderStateStore.setLocalStorageItemName(
+          `page-builder-update-resource-${sanitizedId}-${this.sanitizeForLocalStorage(resourceFormName)}`,
+        )
+        return
+      }
+
+      // Runs when resourceData has title but no id
+      if (typeof resourceData === 'object' && 'title' in resourceData && !('id' in resourceData)) {
+        const sanitizedTitle = this.sanitizeForLocalStorage(String(resourceData['title']))
+        this.pageBuilderStateStore.setLocalStorageItemName(
+          `page-builder-update-resource-${sanitizedTitle}-${this.sanitizeForLocalStorage(resourceFormName)}`,
+        )
+        return
+      }
+
+      // Runs when resourceData has both title and id
+      if (typeof resourceData === 'object' && 'title' in resourceData && 'id' in resourceData) {
+        const sanitizedId = this.sanitizeForLocalStorage(String(resourceData['id']))
+        const sanitizedTitle = this.sanitizeForLocalStorage(String(resourceData['title']))
+
+        this.pageBuilderStateStore.setLocalStorageItemName(
+          `page-builder-update-resource-${sanitizedTitle}-${this.sanitizeForLocalStorage(resourceFormName)}-${sanitizedId}`,
+        )
+        return
+      }
+    }
   }
 
   async saveComponentsLocalStorage() {
@@ -1500,12 +1575,15 @@ class PageBuilderClass {
     const trimmedData = data.trim()
 
     if (trimmedData.startsWith('[') || trimmedData.startsWith('{')) {
+      console.log('Using JSON method..............1:', trimmedData)
       // Looks like JSON - parse as JSON
       this.#parseJSONComponents(trimmedData)
     } else if (trimmedData.startsWith('<')) {
+      console.log('Using HTML method..............2:', trimmedData)
       // Looks like HTML - parse as HTML
       this.#parseHTMLComponents(trimmedData)
     } else {
+      console.log('Using JSON method..............3:', trimmedData)
       this.#parseJSONComponents(trimmedData)
     }
   }
@@ -1569,7 +1647,7 @@ class PageBuilderClass {
     if (!this.pageBuilderStateStore.getConfigPageBuilder) return
 
     if (this.pageBuilderStateStore.getConfigPageBuilder?.updateOrCreate?.formType === 'create') {
-      // Create mode: Load from localStorage (drafts)
+      console.log('hvad med nuuuuuuu')
       const storedData = this.areComponentsStoredInLocalStorage()
       if (storedData) {
         this.setComponentsFromData(storedData)