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

package/README.md

@@ -8,6 +8,13 @@
 
 A Vue 3 page builder component with drag & drop functionality for creating dynamic web pages.
 
+Tailored for Vue Developers
+If you're a Vue 3 developer, this builder feels right at home. It installs quickly via npm and supports full customization through props and configuration objects. You can even set specific user settings like image, name, theme, language, and autosave preferences, making it a personalized experience for every user.
+
+Integration is easy, and content is safely auto stored in the browser's local storage. You can retrieve HTML content when you're ready to publish, giving you total control over content output.
+
+Want to include your company logo in the editor toolbar or reflect your brand's color scheme throughout the builder interface? Done. With robust configuration options, branding the builder to match your product or client identity is quick and effortless.
+
 ## Installation
 
 The web builder for stunning pages. Enable users to design and publish modern pages at any scale.
@@ -54,6 +61,7 @@ The Page Builder is packed with features:
 - **Reordering**: Change the order of your content without hassle.
 - **True Visual Editing**: See your changes in real-time as you make them.
 - **Media Library**: Access and manage your media files.
+- **Local Storage & Auto-Save**: Never lose your work - changes are saved as you go.
 - **Unsplash**: Unsplash Integration.
 - **Responsive Editing**: Ensure your site looks great on all devices.
 - **Text Editing:** Edit text content live and in real-time.
@@ -245,6 +253,105 @@ The Page Builder automatically manages all changes using the browser's local sto
 - **Auto-Save:** The builder periodically auto-saves your changes to local storage, so you don't have to worry about losing your work.
 - **Manual Save:** When the user clicks the Save button, the current state is also saved to local storage.
 
+### Getting HTML Content from Local Storage for Form Submission
+
+To use the builder’s saved data in your form submission, you may want both the combined HTML content and the titles of each component. The PageBuilderClass provides a method to access the latest saved state from local storage. The example below demonstrates how to retrieve and parse this data, combining all component HTML into a single string and collecting all titles into an array. This is useful if you want to display or store both the rendered content and the structure or headings of your page.
+
+You should call this logic when you want to submit or save the builder’s output, for example, when the user clicks a “Save” or “Publish” button. The code safely parses the local storage data, handles errors, and assigns the results to your form fields.
+
+**Important:**
+To retrieve the correct content from local storage, you must pass the same resourceData (such as formType and formName) to the Page Builder that was used when the content was originally saved. If the resource data does not match, the Page Builder will look for a different local storage key and may not find the expected content.
+Example:
+
+```js
+const configPageBuilder = {
+  updateOrCreate: {
+    formType: 'create',
+    formName: 'article',
+  },
+}
+```
+
+Example Getting HTML Content from Local Storage for Form Submission
+
+```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: 'create',
+    formName: 'article',
+  },
+};
+
+pageBuilderClass.setConfigPageBuilder(configPageBuilder);
+
+
+let storedComponents = pageBuilderClass.areComponentsStoredInLocalStorage();
+let contentFromPageBuilder = "";
+
+try {
+    storedComponents = JSON.parse(storedComponents);
+    contentFromPageBuilder = Array.isArray(storedComponents)
+        ? storedComponents.map((component) => component.html_code).join("")
+        : "";
+} catch (e) {
+    console.error(
+        "Unable to parse storedComponents from localStorage:",
+        e
+    );
+    contentFromPageBuilder = "";
+} finally {
+    yourForm.content = contentFromPageBuilder;
+}
+<script>
+```
+
+#### Clearing the Draft After Successful 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.
+
+Always call these methods after a successful post or resource creation to ensure users start with a fresh builder the next time they create a new 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: 'create',
+    formName: 'article',
+  },
+};
+
+pageBuilderClass.setConfigPageBuilder(configPageBuilder);
+
+pageBuilderClass.deleteAllComponents();
+await pageBuilderClass.removeItemComponentsLocalStorageCreate();
+<script>
+```
+
 #### Resource-Specific Storage Keys
 
 Each save is stored in local storage using a unique key. The key is determined by whether you are creating a new resource or updating an existing one:

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

@@ -1145,7 +1145,6 @@ class Se {
       const e = this.getElement.value, t = e.tagName;
       ["DIV"].includes(t) && e.tagName.toLowerCase() !== "img" && e.textContent && Number(e.textContent.length) === 0 ? (e.classList.add("h-6"), e.classList.add("bg-red-50")) : (e.classList.remove("h-6"), e.classList.remove("bg-red-50"));
     });
-    //
     he(this, "handleTextInput", async (e) => {
       var t;
       typeof ((t = this.getElement.value) == null ? void 0 : t.innerHTML) == "string" && (typeof this.getElement.value.innerHTML == "string" && (await this.nextTick, this.getElement.value.textContent = e, this.pageBuilderStateStore.setTextAreaVueModel(this.getElement.value.innerHTML), this.getElement.value.innerHTML = e), this.ensureTextAreaHasContent());
@@ -23001,7 +23000,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.66", t = be;
+    const e = "v3.2.68", t = be;
     new Se(t);
     const o = O(null), n = $(() => t.getConfigPageBuilder), i = $(() => t.getComponents), s = function(l, d) {
       const c = document.createElement("a");