@myissue/vue-website-page-builder 3.3.59 → 3.3.61

package/README.md

@@ -4,18 +4,69 @@
 
 # Free Click & Drop Page Builder
 
-## Overview
+- [Free Click \& Drop Page Builder](#free-click--drop-page-builder)
+  - [Demo](#demo)
+  - [Overview](#overview)
+  - [Get Started in Minutes](#get-started-in-minutes)
+  - [Installation](#installation)
+  - [About](#about)
+  - [Features](#features)
+  - [Technical details](#technical-details)
+  - [Documentation](#documentation)
+  - [Requirements](#requirements)
+  - [Getting started \& installation](#getting-started--installation)
+  - [Quick Start](#quick-start)
+    - [Initializing the Page Builder](#initializing-the-page-builder)
+    - [Why Use the Shared Instance?](#why-use-the-shared-instance)
+    - [Using the Page Builder Component](#using-the-page-builder-component)
+  - [Important: CSS Prefixing (`pbx-`)](#important-css-prefixing-pbx-)
+  - [Rendering HTML Output in Other Frameworks (React, Nuxt, etc.)](#rendering-html-output-in-other-frameworks-react-nuxt-etc)
+  - [Providing Configuration to the Page Builder](#providing-configuration-to-the-page-builder)
+  - [Local Storage \& Auto-Save](#local-storage--auto-save)
+  - [Retrieving the Latest HTML Content for Form Submission](#retrieving-the-latest-html-content-for-form-submission)
+    - [Resetting the Builder After Successful Resource Creation or Update](#resetting-the-builder-after-successful-resource-creation-or-update)
+  - [Loading existing Content or Components into the Page Builder](#loading-existing-content-or-components-into-the-page-builder)
+  - [Automatic Draft Recovery](#automatic-draft-recovery)
+  - [Embedding Page Builder in a Modal or Dialog](#embedding-page-builder-in-a-modal-or-dialog)
+  - [Styling the Main Page Builder Container](#styling-the-main-page-builder-container)
+  - [Download HTML file](#download-html-file)
+  - [Custom Components](#custom-components)
+    - [Custom Media Library Component](#custom-media-library-component)
+    - [Integrate Unsplash Library](#integrate-unsplash-library)
+    - [Custom Layout Builder Component](#custom-layout-builder-component)
+  - [Troubleshooting](#troubleshooting)
+    - [Fonts or Icons Not Displaying](#fonts-or-icons-not-displaying)
+  - [Page Builder Architecture](#page-builder-architecture)
+    - [How the Page Builder Works](#how-the-page-builder-works)
+  - [Contributing](#contributing)
+  - [Security Vulnerabilities](#security-vulnerabilities)
+  - [Get in touch for customization or any questions](#get-in-touch-for-customization-or-any-questions)
+  - [Feedback](#feedback)
+  - [Support the Project](#support-the-project)
+  - [License](#license)
+
+## Demo
 
 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.
+Create and enhance digital experiences with Vue on any backend.
+
+Experience the power and simplicity of the Vue Website Page Builder in action.
+Try the live demo to explore real-time visual updates, and smooth content management
+
+[Play around with the Page Builder](https://www.builder-demo.myissue.dk)
+
+## Overview
+
+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, company logo and autosave preferences, making it a personalized experience for every user.
+
+Lightweight & Minimalist Page Builder with an elegant and intuitive design, focused on simplicity and speed.
 
-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.
+Build responsive pages like listings, jobs or blog posts and manage content easily.
 
-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.
+<img style="max-width: 100%;" src="./public/home/editor.jpg" alt="Vue Website Page Builder - the editor" />
 
-## 🚀 Get Started in Minutes
+## Get Started in Minutes
 
 Easy setup and instant productivity.  
 Follow the [Quick Start](#quick-start) guide to begin building with just a few simple steps.
@@ -30,22 +81,7 @@ The web builder for stunning pages. Enable users to design and publish modern pa
 npm install @myissue/vue-website-page-builder
 ```
 
-## Click & Drop Page Builder
-
-[Play around with the Page Builder](https://www.builder-demo.myissue.dk)
-
-Lightweight & Minimalist Page Builder with an elegant and intuitive design, focused on simplicity and speed.
-
-Build responsive pages like listings, jobs or blog posts and manage content easily using the free Click & Drop Page Builder.
-
-<img style="max-width: 100%;" src="./public/home/editor.jpg" alt="Vue Website Page Builder - the editor" />
-
-## Demo
-
-Introducing **The Lightweight Free 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)
+---
 
 ## About
 
@@ -69,12 +105,13 @@ The Page Builder is packed with features:
 - **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.
+- **Text Editing**: Edit text content live and in real-time.
 - **Font Customization**: Choose the perfect fonts to match your style.
 - **Undo & Redo**: Experiment confidently with the ability to revert changes.
 - **Global Styles**: Global Styles for fonts, designs, & colors.
 - **YouTube Videos**: Integrate video content smoothly.
 - **Download HTML**: Export the entire page as a standalone HTML file.
+- **Global Page Styling**: Instantly define, update, or clear global styles for the main page wrapper at initialization or dynamically at runtime. Gain full control over fonts, colors, backgrounds, and more for a dynamic user experience.
 - **Tailwind Support**: Fully compatible with Tailwind CSS (with automatic class prefixing to avoid conflicts).
 - **Styles Prefixed**: To ensure clean and predictable styling, the builder uses Scoped Style Isolation. No risk of style conflicts between the builder and your app.
 
@@ -89,6 +126,9 @@ Powerful Page Builder for any growing merchants, brands, & agencies. Empower use
 
 ## Documentation
 
+Find everything you need to get started, configure, and master the Vue Website Page Builder.
+This section covers installation, requirements, quick start, advanced usage, and integration tips—so you can build and launch pages with confidence.
+
 ## Requirements
 
 Please note that these instructions assume you have Node.js installed.
@@ -117,6 +157,9 @@ bun install
 
 ## Quick Start
 
+Get up and running with the Vue Website Page Builder in just a few minutes.
+This section walks you through the essential steps—from installation to rendering your first page—so you can start building beautiful, dynamic content right away.
+
 ### Initializing the Page Builder
 
 To get started with the Page Builder, follow these steps:
@@ -142,18 +185,14 @@ app.mount('#app')
 > **Note:**  
 > You only need to import the CSS file once. If you have already imported it in your app entry, you do not need to import it again in individual components.
 
-### Accessing the Shared Page Builder Service
-
-After initializing the Page Builder service in your application (by calling `initPageBuilder()` once in your app entry point), you may access the shared instance from anywhere in your application using the `getPageBuilder()` composable.
-
 > **Note**  
 > The Page Builder is implemented as a singleton service. This ensures that all page-building logic and state are managed by a single, shared instance throughout your application.
 
-#### Why Use the Shared Instance?
+### Why Use the Shared Instance?
 
 By always accessing the shared instance, you avoid creating multiple, isolated copies of the builder. This prevents data inconsistencies, synchronization issues, and unpredictable behavior. All components and modules interact with the same centralized service, ensuring that updates and state changes are reflected everywhere in your application.
 
-#### Usage
+### Using the Page Builder Component
 
 Ensure the following configuration options are set:
 
@@ -161,7 +200,7 @@ Ensure the following configuration options are set:
   Indicates whether you are creating or updating a resource. This is used to retrieve the correct content from local storage.
 
 - **`formName` (required):**  
-  Specifies the resource type (for example, `article`, `jobPost`, `store`, etc.). This is essential for platforms supporting multiple resource types, as it enables the builder to manage layouts and local storage for each resource uniquely.
+  Specifies the resource type (for example, `article`, `jobPost`, `store`, etc.).
 
 ```vue
 <script setup>
@@ -483,7 +522,9 @@ function closePageBuilder() {
 > You can name your handler function anything you like.  
 > This pattern makes it easy to embed the builder in modals, dialogs, or overlays in any Vue app.
 
-### Page Wrapper Styles
+## Styling the Main Page Builder Container
+
+The Page Builder allows you to define and update global styles for the main wrapper (#pagebuilder) at any time. These settings control the overall appearance, including font family, text color, background color, and more. Whether you set them initially in your config or update them dynamically at runtime, your changes are instantly reflected across all sections.
 
 Use the `pageSettings` config to apply custom CSS classes and inline styles to the Page Builder’s main wrapper.
 The Page Builder renders all components wrapped inside a single parent container `<div id="pagebuilder">`.  
@@ -503,7 +544,9 @@ const configPageBuilder = {
 } as const
 ```
 
-### Download HTML file
+You have full control over the page’s appearance at any time — instantly override or clear global styles for the entire page, ensuring a seamless and dynamic user experience.
+
+## Download HTML file
 
 Export the entire page as a standalone HTML file. This includes all sections, content, and applied styles, making the file ready for use or integration elsewhere.
 
@@ -520,10 +563,33 @@ const configPageBuilder = {
 } as const
 ```
 
-### Custom Media Library Component or Custom Layout Builder Component
+## Custom Components
+
+If you want to use your own components—whether custom-designed or tailored to your application's needs—you can inject them directly into the builder.
+
+### Custom Media Library Component
+
+By default, the Page Builder does not include a built-in media library.
+
+This is intentional—without a custom media library, layout components that rely on images (such as Image Blocks, Hero Sections, and similar) are disabled by default. Only helper components like containers, headings, text, and buttons are available in this state.
+
+You may extend the Page Builder by adding your own media library.
+Inject your media library component easily to tailor the builder to your application's needs.
+
+📚 **[Custom Components Setup Guide](./CUSTOM_COMPONENTS_SETUP.md)**
+Learn how to create and integrate your own components step by step.
+
+### Integrate Unsplash Library
+
+Easily add Unsplash image search to your media library modal—just like in the demo!
+Code example — You can copy-paste the provided example to get started.
+
+See the full step-by-step guide and working demo code here:
+📚 **[Unsplash Integration Guide](./UNSPLASH_INTEGRATION.md)**
+
+### Custom Layout Builder Component
 
-You may extend the Page Builder by adding your own media library or custom layout builder Component.
-Inject your components easily to tailor the builder to your application's needs.
+The Page Builder comes with a growing collection of built-in components, including both layout and helper components. These defaults are continuously improved and expanded.
 
 📚 **[Custom Components Setup Guide](./CUSTOM_COMPONENTS_SETUP.md)**
 Learn how to create and integrate your own components step by step.
@@ -544,7 +610,7 @@ import '@myissue/vue-website-page-builder/style.css'
 
 The Page Builder is designed as a modular, state-driven editor for dynamic page content. Its architecture separates configuration, state management, and DOM interaction, ensuring flexibility and maintainability.
 
-#### How the Page Builder Works
+### How the Page Builder Works
 
 The Page Builder is designed to be easy to use and flexible for any web project. Here’s how it works behind the scenes: