@myissue/vue-website-page-builder 3.2.85 → 3.2.90

package/README.md

@@ -60,7 +60,8 @@ The Page Builder is packed with features:
 - **Click & Drop**: Easily rearrange elements on your page.
 - **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.
+- **Media Library**: Easily inject your own custom media library component.
+-
 - **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.
@@ -69,9 +70,9 @@ The Page Builder is packed with features:
 - **Undo & Redo**: Experiment confidently with the ability to revert changes.
 - **Global Styles**: Global Styles for fonts, designs, & colors.
 - **YouTube Videos**: Integrate video content smoothly.
+- **Styles Prefixed**: No risk of style conflicts between the builder and your app.
 
-Powerful Page Builder for any growing merchants, brands, &
-agencies. Empower users to create the perfect content with the Page Builder.
+Powerful Page Builder for any growing merchants, brands, & agencies. Empower users to create the perfect content with the Page Builder.
 
 <img style="max-width: 100%;" src="./public/home/text_editor.jpg" alt="Vue Website Page Builder - the media library" />
 
@@ -108,6 +109,23 @@ yarn install
 bun install
 ```
 
+### Quick Start
+
+Get up and running quickly and initializing the builder in your Vue project. The following example demonstrates the minimal setup required to start building pages.
+
+- The Page Builder requires its CSS file to be imported for proper styling and automatic icon loading:
+
+```vue
+<script setup>
+import { PageBuilder } from '@myissue/vue-website-page-builder'
+import '@myissue/vue-website-page-builder/style.css'
+</script>
+
+<template>
+  <PageBuilder />
+</template>
+```
+
 ### Important: CSS Import Required
 
 The Page Builder requires its CSS file to be imported for proper styling and automatic icon loading:
@@ -123,23 +141,78 @@ This import automatically includes:
 - ✅ Google Material Icons (no additional setup needed)
 - ✅ Responsive design utilities
 
-### Quick Start
+### Important: CSS Prefix (`pbx-`) for All Builder Styles
 
-Get up and running quickly and initializing the builder in your Vue project. The following example demonstrates the minimal setup required to start building pages.
+The Page Builder automatically adds a `pbx-` prefix to **all CSS classes** it generates or processes, including Tailwind utility classes and any custom classes you add through the builder interface. This namespacing ensures that the builder’s styles will **not conflict** with your application's existing CSS or Tailwind classes.
 
-- The Page Builder requires its CSS file to be imported for proper styling and automatic icon loading:
+**What does this mean for you?**
 
-```vue
-<script setup>
-import { PageBuilder } from '@myissue/vue-website-page-builder'
+- If you create your own custom components to use with the Page Builder (instead of the default ones), **remember that the builder will automatically add the `pbx-` prefix to every CSS class** in your component’s markup. This applies to both Tailwind utility classes and any custom classes you define.
+- For example, if you use a custom class called `myCustomCSSClass` in your component, it will be rendered as `pbx-myCustomCSSClass` in the final HTML output.
+- All Tailwind classes are also prefixed, e.g. `bg-red-100` becomes `pbx-bg-red-100`, `md:grid-cols-2` becomes `md:pbx-grid-cols-2`, etc.
+
+**Why is this important?**
+
+- The prefixing is done automatically by the builder to avoid style conflicts between the builder’s output and your own app’s CSS or Tailwind setup.
+
+**Example:**
+
+```html
+<!-- Builder output -->
+<div class="pbx-myCustomCSSClass pbx-bg-blue-100 md:pbx-grid-cols-2"></div>
+```
+
+```css
+/* To style this element, use the pbx- prefix */
+.pbx-myCustomCSSClass {
+  margin-bottom: 2rem;
+}
+```
+
+**When** you import the builder’s CSS file:
+
+```js
 import '@myissue/vue-website-page-builder/style.css'
-</script>
+```
 
-<template>
-  <PageBuilder />
-</template>
+- ✅ **All styles included in this file are already prefixed with `pbx-`**.
+- ✅ **All Tailwind and custom classes generated by the builder are automatically prefixed with `pbx-`**.
+- ✅ **Any custom components you create for the builder will also have their classes prefixed automatically**.
+
+**What does this mean for you?**
+
+- There is no risk of style conflicts between the builder and your app, since all builder-related styles are namespaced.
+
+### Rendering Only the HTML Output from the Page Builder in Other Frameworks (React, Nuxt, etc.)
+
+If you use the Page Builder to generate HTML pages and want to render them in another application (such as React, Nuxt, or any server-side app), simply install the Page Builder package in your target project and import its CSS file. This ensures that all Tailwind and builder-specific styles are applied to the rendered HTML.
+
+```js
+import '@myissue/vue-website-page-builder/style.css'
+```
+
+This will apply all the necessary styles to any HTML output from the builder, even if you render it with `dangerouslySetInnerHTML`, `v-html`, or similar methods.
+
+**Example (React):**
+
+```jsx
+import '@myissue/vue-website-page-builder/style.css'
+
+function MyPage({ html }) {
+  return <div dangerouslySetInnerHTML={{ __html: html }} />
+}
+```
+
+**Example (Nuxt/Vue):**
+
+```js
+import '@myissue/vue-website-page-builder/style.css'
 ```
 
+Then use `v-html` to render the HTML.
+
+> **Note:** You do not need to import any Vue components if you only want to render the HTML. Just import the CSS file.
+
 ### Optional: Provide Config to PageBuilder
 
 Get up and running quickly by importing the PageBuilder component, setting up your configuration, and initializing the builder in your Vue project. The following example demonstrates the minimal setup required to start building pages with your own config and logo.
@@ -563,11 +636,38 @@ Example `existingResourceFromBackend`:
 When you set `formType: 'update'` in your config, the Page Builder will automatically check for any unsaved draft in local storage for that resource.  
 If a draft is found, the user will be prompted to either continue where they left off or use the version currently loaded from your backend.
 
-No extra setup is required—just set `formType: 'update'` and the feature is enabled by default.
+- `formName` (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.
+  - Pass a `userForPageBuilder` object in your config to display or use the logged-in user's information within the builder (e.g., name and user image).
+  - No extra setup is required—just set `formType: 'update'` and the feature is enabled by default.
+
+```js
+<script setup>
+import {
+  PageBuilder,
+  PageBuilderClass,
+  sharedPageBuilderStore,
+} from '@myissue/vue-website-page-builder'
+import '@myissue/vue-website-page-builder/style.css'
+
+const pageBuilderStateStore = sharedPageBuilderStore
+
+const configPageBuilder = {
+  updateOrCreate: {
+    formType: 'update',
+    formName: 'article',
+  },
+}
+
+const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
 
-### Customization
+// Initializing with essential configuration
+pageBuilderClass.applyPageBuilderConfig(configPageBuilder)
+</script>
 
-Customizing the page builder is made simple since all the logic resides in the PageBuilder Class.
+<template>
+  <PageBuilder />
+</template>
+```
 
 ### Custom Components