@myissue/vue-website-page-builder 3.4.15 → 3.4.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myissue/vue-website-page-builder",
-  "version": "3.4.15",
+  "version": "3.4.17",
   "description": "Vue 3 page builder component with drag & drop functionality.",
   "type": "module",
   "main": "./dist/vue-website-page-builder.umd.cjs",

package/src/css/style.css

@@ -383,7 +383,7 @@
 }
 
 /* Use #page-builder-wrapper ID in order for the "select video" button not to apear in production*/
-#page-builder-wrapper #pagebuilder #youtube-video::before {
+#page-builder-wrapper #youtube-video::before {
   content: 'Select Video Element';
   font-family: 'Jost';
   background: #16a34a !important;

package/src/services/PageBuilderService.ts

@@ -1579,10 +1579,13 @@ export class PageBuilderService {
 
     // If the element to be deleted is the section itself
     if (element.tagName === 'SECTION') {
-      this.deleteComponentFromDOM()
+      await this.deleteComponentFromDOM()
     } else {
       // If the element is inside a section
       element.remove()
+      // --- Sync DOM to store after DOM mutation ---
+      this.syncDomToStoreOnly()
+
       if (parentSection && this.isSectionEmpty(parentSection)) {
         const componentId = parentSection.getAttribute('data-componentid')
         if (componentId) {
@@ -1596,6 +1599,10 @@ export class PageBuilderService {
               ]
               this.pageBuilderStateStore.setComponents(newComponents)
               parentSection.remove() // Directly remove from DOM
+              // --- Sync DOM to store again after removing section ---
+              this.syncDomToStoreOnly()
+              // Save after removing the section
+              this.saveDomComponentsToLocalStorage()
             }
           }
         }
@@ -1619,14 +1626,20 @@ export class PageBuilderService {
                 ...components.slice(componentIndex + 1),
               ]
               this.pageBuilderStateStore.setComponents(newComponents)
+              // --- Sync DOM to store after updating section ---
+              this.syncDomToStoreOnly()
+              // Save after updating the section
+              this.saveDomComponentsToLocalStorage()
             }
           }
         }
+      } else {
+        // If no parentSection, still sync and save
+        this.syncDomToStoreOnly()
+        this.saveDomComponentsToLocalStorage()
       }
     }
 
-    this.handleAutoSave()
-
     // Clear the selection state.
     this.pageBuilderStateStore.setComponent(null)
     this.pageBuilderStateStore.setElement(null)
@@ -2007,15 +2020,17 @@ export class PageBuilderService {
         const currentComponents = currentData.components || []
         const newComponents = dataToSave.components || []
 
-        const hasChanges = newComponents.some((newComponent, index) => {
-          const currentComponent = currentComponents[index]
-          return (
-            // New component added
-            !currentComponent ||
-            // Component HTML changed
-            currentComponent.html_code !== newComponent.html_code
-          )
-        })
+        const hasChanges =
+          newComponents.length !== currentComponents.length ||
+          newComponents.some((newComponent, index) => {
+            const currentComponent = currentComponents[index]
+            return (
+              // New component added
+              !currentComponent ||
+              // Component HTML changed
+              currentComponent.html_code !== newComponent.html_code
+            )
+          })
 
         // Compare pageSettings
         const hasPageSettingsChanges =