@myissue/vue-website-page-builder 3.2.68 → 3.2.70

package/README.md

@@ -303,9 +303,10 @@ let contentFromPageBuilder = "";
 
 try {
     storedComponents = JSON.parse(storedComponents);
-    contentFromPageBuilder = Array.isArray(storedComponents)
-        ? storedComponents.map((component) => component.html_code).join("")
-        : "";
+    contentFromPageBuilder = storedComponents && Array.isArray(storedComponents.components)
+        ? storedComponents.components
+          .map((component) => component.html_code).join("")
+          : "";
 } catch (e) {
     console.error(
         "Unable to parse storedComponents from localStorage:",
@@ -318,7 +319,7 @@ try {
 <script>
 ```
 
-#### Clearing the Draft After Successful Creation
+#### Resetting the Builder After Successful Resource Creation
 
 After you have successfully created a new resource (such as a post, article, or listing) using the Page Builder with formType: 'create', it is important to clear the builder’s draft state and remove the corresponding local storage entry. This ensures that old drafts do not appear the next time the builder is opened for a new resource.
 
@@ -347,8 +348,45 @@ const configPageBuilder = {
 
 pageBuilderClass.setConfigPageBuilder(configPageBuilder);
 
+const createResource = async function(){
 pageBuilderClass.deleteAllComponents();
-await pageBuilderClass.removeItemComponentsLocalStorageCreate();
+await pageBuilderClass.removeItemComponentsLocalStorage();
+};
+<script>
+```
+
+#### Resetting the Builder After Successful Resource Update
+
+After you have successfully updated an existing resource (such as a post, article, or listing) using the Page Builder with formType: 'update', you should clear the builder’s state and remove the corresponding local storage entry. This prevents outdated drafts from being loaded the next time you edit the same resource.
+
+```js
+<script setup>
+import {
+    PageBuilder,
+    PageBuilderClass,
+    sharedPageBuilderStore,
+} from "@myissue/vue-website-page-builder";
+import "@myissue/vue-website-page-builder/style.css";
+
+// Make sure to initialize these before using
+const pageBuilderStateStore = sharedPageBuilderStore;
+const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore);
+
+
+const configPageBuilder = {
+  updateOrCreate: {
+    formType: 'update',
+    formName: 'article',
+  },
+};
+
+pageBuilderClass.setConfigPageBuilder(configPageBuilder);
+
+const updateResource = async function() {
+  pageBuilderClass.deleteAllComponents();
+  await pageBuilderClass.removeItemComponentsLocalStorage();
+};
+
 <script>
 ```
 

package/dist/vue-website-page-builder.js

@@ -1160,13 +1160,28 @@ class Se {
       const t = e.querySelector("[hovered]");
       t && t.removeAttribute("hovered");
       const o = [];
-      e.querySelectorAll("section[data-componentid]").forEach((n) => {
+      if (e.querySelectorAll("section[data-componentid]").forEach((n) => {
         o.push({
           html_code: n.outerHTML,
           id: n.getAttribute("data-componentid"),
           title: n.getAttribute("title") || n.getAttribute("data-componentid") || "Untitled Component"
         });
-      }), this.getLocalStorageItemName.value && localStorage.setItem(this.getLocalStorageItemName.value, JSON.stringify(o)), await new Promise((n) => n());
+      }), this.pageBuilderStateStore.getConfigPageBuilder && this.pageBuilderStateStore.getConfigPageBuilder.updateOrCreate && typeof this.pageBuilderStateStore.getConfigPageBuilder.updateOrCreate.formType == "string" && this.pageBuilderStateStore.getConfigPageBuilder.updateOrCreate.formType === "update") {
+        const n = {
+          components: o,
+          savedAt: (/* @__PURE__ */ new Date()).toISOString()
+        };
+        localStorage.setItem(this.getLocalStorageItemName.value, JSON.stringify(n));
+        return;
+      }
+      if (this.getLocalStorageItemName.value) {
+        const n = {
+          components: o,
+          savedAt: (/* @__PURE__ */ new Date()).toISOString()
+        };
+        localStorage.setItem(this.getLocalStorageItemName.value, JSON.stringify(n));
+      }
+      await new Promise((n) => n());
     });
     this.nextTick = Ve(), this.containsPagebuilder = document.querySelector("#contains-pagebuilder"), this.pageBuilderStateStore = e, this.getTextAreaVueModel = $(() => this.pageBuilderStateStore.getTextAreaVueModel), this.getLocalStorageItemName = $(
       () => this.pageBuilderStateStore.getLocalStorageItemName
@@ -1478,11 +1493,11 @@ class Se {
   async saveComponentsLocalStorage() {
     await this.nextTick, await Go(this, Os).call(this);
   }
-  async removeItemComponentsLocalStorageCreate() {
+  async removeItemComponentsLocalStorage() {
     await this.nextTick, this.getLocalStorageItemName.value && localStorage.removeItem(this.getLocalStorageItemName.value);
   }
-  async removeItemComponentsLocalStorageUpdate() {
-    this.getLocalStorageItemName.value && localStorage.removeItem(this.getLocalStorageItemName.value);
+  getStorageItemNameForResource() {
+    return this.getLocalStorageItemName.value;
   }
   areComponentsStoredInLocalStorage() {
     if (!this.getLocalStorageItemName.value) return !1;
@@ -23000,7 +23015,7 @@ const k3 = ["src"], S3 = {
 }, Xk = { class: "overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg" }, Zk = { class: "overflow-x-auto" }, e6 = { class: "w-max" }, t6 = { class: "bg-white divide-y divide-gray-200" }, r6 = { class: "px-6 py-4 whitespace-nowrap text-sm text-gray-500" }, o6 = { class: "min-w-[30rem] w-max" }, n6 = { key: 0 }, i6 = { key: 1 }, s6 = { key: 0 }, a6 = { class: "px-6 py-4 whitespace-nowrap text-sm text-gray-500" }, l6 = { class: "min-w-[30rem] w-max" }, d6 = { class: "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium" }, c6 = { class: "mt-4 mb-4 py-8 border-b border-myPrimbryLightGrayColor" }, p6 = { class: "mt-4 whitespace-pre-wrap text-white overflow-hidden bg-gray-900" }, u6 = { class: "px-4 pb-8 pt-4 text-white text-xs break-all" }, m6 = { class: "myPrimaryParagraph text-xs text-white" }, h6 = {
   __name: "PageBuilderSettings",
   setup(r) {
-    const e = "v3.2.68", t = be;
+    const e = "v3.2.70", t = be;
     new Se(t);
     const o = O(null), n = $(() => t.getConfigPageBuilder), i = $(() => t.getComponents), s = function(l, d) {
       const c = document.createElement("a");
@@ -23620,7 +23635,7 @@ const k3 = ["src"], S3 = {
       n.value = !0, i.value = "delete", s.value = 2, a.value = "Remove all Components", l.value = "Are you sure you want to remove all Components?", d.value = "Close", c.value = null, p.value = "Delete", m.value = function() {
         n.value = !1;
       }, g.value = async function() {
-        o.deleteAllComponents(), await o.clearHtmlSelection(), t.value.updateOrCreate && typeof t.value.updateOrCreate.formType == "string" && (t.value.updateOrCreate.formType === "create" && await o.removeItemComponentsLocalStorageCreate(), t.value.updateOrCreate.formType === "update" && await o.removeItemComponentsLocalStorageUpdate()), n.value = !1;
+        o.deleteAllComponents(), await o.clearHtmlSelection(), t.value.updateOrCreate && typeof t.value.updateOrCreate.formType == "string" && (t.value.updateOrCreate.formType === "create" && await o.removeItemComponentsLocalStorage(), t.value.updateOrCreate.formType === "update" && await o.removeItemComponentsLocalStorage()), n.value = !1;
       };
     }, b = O(!1), w = function() {
       b.value = !1;