@myissue/vue-website-page-builder 3.1.30 → 3.1.33

package/README.md

@@ -38,7 +38,7 @@ This import automatically includes:
 
 [Play around with the page builder](https://www.builder-demo.myissue.dk)
 
-This app was born out of my desire to create a minimalist page builder with an elegant and intuitive design.
+Born out of desire to create a minimalist page builder with an elegant and intuitive design.
 
 The web builder for stunning pages. Enable users to design and publish modern pages at any scale. Build responsive pages like listings, jobs or blog posts and manage content easily using the free Click & Drop Page Builder.
 
@@ -46,7 +46,7 @@ To star the repository, simply click on the **Star** button located at the top-r
 
 ## Demo
 
-Introducing the **Free Vue Click & Drop Page Builder**
+Introducing the **The LightweightFree Vue Click & Drop Page Builder**
 create and enhance digital experiences with Vue on any backend.
 
 [Play around with the page builder](https://www.builder-demo.myissue.dk)
@@ -136,14 +136,22 @@ Get up and running quickly by importing the PageBuilder component, setting up yo
   - `pageBuilderLogo` to display your company logo in the builder toolbar
   - `resourceData` to prefill the builder with initial data
   - `userSettings` to set user preferences such as theme, language, or autoSave
+  - `createNewResourceFormName` (recommended): Specify the resource type (e.g., `"article"`, `"jobPost"`, `"store"`, etc.) in the `updateOrCreate` config. This is especially useful if your platform supports multiple resource types. By providing a unique name, the page builder can correctly manage layouts and local storage for each resource type, allowing users to continue where they left off for different resources.
 
 ```vue
 <script setup>
-import { onMounted } from 'vue'
-import { PageBuilder } from '@myissue/vue-website-page-builder'
+import {
+  PageBuilder,
+  PageBuilderClass,
+  sharedPageBuilderStore,
+} from '@myissue/vue-website-page-builder'
 import '@myissue/vue-website-page-builder/style.css'
 
 const configPageBuilder = {
+  updateOrCreate: {
+    // Set the resource type for better local storage and multi-resource support
+    createNewResourceFormName: 'article',
+  },
   pageBuilderLogo: {
     src: '/logo/logo.svg',
   },
@@ -159,12 +167,12 @@ const configPageBuilder = {
   },
 }
 
+// Use sharedPageBuilderStore for shared state between PageBuilderClass and PageBuilder component
 const pageBuilderStateStore = sharedPageBuilderStore
 const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
 
-onMounted(() => {
-  pageBuilderClass.setConfigPageBuilder(configPageBuilder)
-})
+// Initializing page builder with essential configuration
+pageBuilderClass.setConfigPageBuilder(configPageBuilder)
 </script>
 
 <template>
@@ -172,7 +180,53 @@ onMounted(() => {
 </template>
 ```
 
-> **📝 Note**: Google Fonts (Jost, Cormorant) and Material Icons are automatically loaded when you import the CSS file. No additional setup required for fonts or icons!
+### Company Logo & Logged-in User
+
+You can display your company logo in the page builder interface and set the currently logged-in user by passing both a logo URL and user information in your config object:
+
+- **Company Logo:** Set the logo URL in your config object and pass it to the PageBuilder using `pageBuilderClass.setConfigPageBuilder(configPageBuilder)`. When provided, the logo will appear at the top of the page builder with proper spacing in the toolbar.
+- **Logged-in User:** Pass a `userForPageBuilder` object in your config to display or use the logged-in user's information within the builder (e.g., for audit trails, personalization, or permissions).
+
+**Basic Usage:**
+
+- You can display your company logo in the page builder interface by setting the `src` in your config object and passing it to the PageBuilder using `pageBuilderClass.setConfigPageBuilder(configPageBuilder)`. When provided, the logo will appear in the top of the page builder.
+
+Basic Usage:
+
+```vue
+<script setup>
+import {
+  PageBuilder,
+  PageBuilderClass,
+  sharedPageBuilderStore,
+} from '@myissue/vue-website-page-builder'
+import '@myissue/vue-website-page-builder/style.css'
+
+const configPageBuilder = {
+  pageBuilderLogo: {
+    src: '/logo/logo.svg',
+  },
+  userForPageBuilder: { name: 'John Doe' },
+}
+
+// Use sharedPageBuilderStore for shared state between PageBuilderClass and PageBuilder component
+const pageBuilderStateStore = sharedPageBuilderStore
+const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
+
+// Initializing page builder with essential configuration
+pageBuilderClass.setConfigPageBuilder(configPageBuilder)
+</script>
+
+<template>
+  <PageBuilder />
+</template>
+```
+
+configuration Options
+
+| Prop              | Type     | Default | Description                         |
+| ----------------- | -------- | ------- | ----------------------------------- |
+| `PageBuilderLogo` | `String` | `null`  | URL path to your company logo image |
 
 ### Updating Existing Resources
 
@@ -181,7 +235,7 @@ To load existing content that was created with this PageBuilder:
 - Use `sharedPageBuilderStore` to ensure the external PageBuilderClass and internal PageBuilder component share the same state
 - Import `PageBuilderClass` which contains all methods to manipulate and control the page builder state - in this case we need the `loadExistingContent()` method to load existing content into the page builder
 - The PageBuilderClass uses the shared store to maintain state consistency between external operations and the internal PageBuilder component, ensuring that when you load content externally it appears correctly in the PageBuilder interface
-- Set `formType` to `"update"` in your config object and pass it to the PageBuilder using `pageBuilderClass.setConfigPageBuilder(configPageBuilder)` inside `onMounted`. This tells the PageBuilder that you're editing an existing resource rather than creating a new one, which affects how the component handles data and interactions.
+- Set `formType` to `"update"` in your config object and pass it to the PageBuilder using `pageBuilderClass.setConfigPageBuilder(configPageBuilder)`. This tells the PageBuilder that you're editing an existing resource rather than creating a new one, which affects how the component handles data and interactions.
 
 1. **Set formType to "update"** in template:
 
@@ -189,15 +243,15 @@ To load existing content that was created with this PageBuilder:
 <PageBuilder />
 ```
 
-2. **Load existing content on mount**:
+1. **Load existing content on mount**:
 
 ```javascript
-import { onMounted } from 'vue'
 import {
   PageBuilder,
   PageBuilderClass,
   sharedPageBuilderStore,
 } from '@myissue/vue-website-page-builder'
+import '@myissue/vue-website-page-builder/style.css'
 
 const configPageBuilder = {
   updateOrCreate: {
@@ -205,22 +259,67 @@ const configPageBuilder = {
   },
 }
 
-const pageBuilderStateStore = sharedPageBuilderStore
+// Use sharedPageBuilderStore for shared state between PageBuilderClass and PageBuilder component
 const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
 
-onMounted(() => {
-  pageBuilderClass.setConfigPageBuilder(configPageBuilder)
-  pageBuilderClass.loadExistingContent(existingResourceFromBackend)
-})
+// Initializing page builder with essential configuration
+pageBuilderClass.setConfigPageBuilder(configPageBuilder)
+// Populating page builder with existing resource content
+pageBuilderClass.loadExistingContent(existingResourceFromBackend)
+```
+
+#### How should `existingResourceFromBackend` look?
+
+When loading an existing resource, each component object will have an `id` assigned by the page builder.  
+The example below shows the structure as it would appear when loaded from local storage after components have been added in the builder.
+
+- Example JSON string (from localStorage or backend)
+- For existing resources, id will always be present and set by the page builder.
+
+```typescript
+// TypeScript interface for reference
+export interface ComponentObject {
+  id: string | number | null
+  html_code: string
+  title?: string
+}
+
+// Example JSON string (from localStorage or backend)
+const existingResourceFromBackend = JSON.stringify([
+  {
+    html_code: `<section>
+                  <div>
+                    <h1>Article Title</h1>
+                      <p>Content</p>
+                  </div>
+                </section>`,
+    id: null,
+    title: 'Component Title',
+  },
+  {
+    html_code: `<section>
+                  <div>
+                    <h1>Article Title</h1>
+                      <p>Content</p>
+                  </div>
+                </section>`,
+    id: null,
+    title: 'Component Title',
+  },
+])
 ```
 
+Alternatively, you can provide a raw HTML string containing your `<section>` components:
+
 ### Customization
 
 Customizing the page builder is made simple since all the logic resides in the PageBuilder Class.
 
+    - Google Fonts (Jost, Cormorant) and Material Icons are automatically loaded when you import the CSS file. No additional setup required for fonts or icons!
+
 ### Custom Components
 
-Want to add your own media library or search functionality? Create custom components that can be injected into the page builder:
+Want to add your own media library or Create custom components that can be injected into the page builder:
 
 📚 **[Custom Components Setup Guide](./CUSTOM_COMPONENTS_SETUP.md)** - Learn how to create and integrate your own components
 
@@ -238,53 +337,6 @@ import SearchComponent from './ComponentsPageBuilder/SearchComponent.vue'
 </template>
 ```
 
-### Company Logo
-
-You can display your company logo in the page builder interface by passing a logo URL:
-
-- You can display your company logo in the page builder interface by setting the logo URL in your config object and passing it to the PageBuilder using `pageBuilderClass.setConfigPageBuilder(configPageBuilder)` inside `onMounted`. When provided, the logo will appear in the top toolbar of the page builder.
-
-Basic Usage:
-
-```vue
-<script setup>
-import { PageBuilder } from '@myissue/vue-website-page-builder'
-import '@myissue/vue-website-page-builder/style.css'
-
-const configPageBuilder = {
-  pageBuilderLogo: {
-    src: '/logo/logo.svg',
-  },
-  userForPageBuilder: { name: 'John Doe' },
-  resourceData: {
-    title: 'Demo Article',
-    id: 1,
-  },
-}
-
-const pageBuilderStateStore = sharedPageBuilderStore
-const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
-
-onMounted(() => {
-  pageBuilderClass.setConfigPageBuilder(configPageBuilder)
-})
-</script>
-
-<template>
-  <PageBuilder />
-</template>
-```
-
-configuration Options
-
-| Prop              | Type     | Default | Description                         |
-| ----------------- | -------- | ------- | ----------------------------------- |
-| `PageBuilderLogo` | `String` | `null`  | URL path to your company logo image |
-
-#### Examples
-
-The logo will be displayed with a subtle border separator and proper spacing in the page builder toolbar.
-
 ## Troubleshooting
 
 ### Fonts or Icons Not Displaying