@myissue/vue-website-page-builder 3.3.89 → 3.3.91

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myissue/vue-website-page-builder",
-  "version": "3.3.89",
+  "version": "3.3.91",
   "description": "Vue 3 page builder component with drag & drop functionality.",
   "type": "module",
   "main": "./dist/vue-website-page-builder.umd.cjs",

package/src/Components/TipTap/TipTap.vue

@@ -12,7 +12,7 @@ const pageBuilderService = getPageBuilder()
       <div class="pbx-flex pbx-flex-col pbx-border-solid pbx-border pbx-border-gray-400">
         <div
           @click="pageBuilderService.toggleTipTapModal(true)"
-          class="pbx-flex pbx-flex-row pbx-justify-between pbx-items-center pbx-pl-3 pbx-pr-3 pbx-py-5 pbx-cursor-pointer pbx-duration-200 hover:pbx-bg-myPrimaryLightGrayColor"
+          class="pbx-flex pbx-flex-row pbx-justify-between pbx-items-center pbx-pl-3 pbx-pr-3 pbx-py-5 pbx-cursor-pointer pbx-duration-200 hover:pbx-bg-myPrimaryLightGrayColor pbx-bg-white"
         >
           <p class="pbx-myPrimaryParagraph pbx-font-medium pbx-my-0 pbx-py-0">
             {{ translate('Text') }}

package/src/PageBuilder/PageBuilder.vue

@@ -62,7 +62,9 @@ const closePageBuilder = function () {
   emit('handleClosePageBuilder')
 }
 const closePublish = async function () {
+  pageBuilderStateStore.setIsLoadingGlobal(true)
   await pageBuilderService.handleManualSave()
+  pageBuilderStateStore.setIsLoadingGlobal(false)
   emit('handlePublishPageBuilder')
 }
 
@@ -512,7 +514,7 @@ onMounted(async () => {
 
     <div
       id="pagebuilder-navbar"
-      class="lg:pbx-min-w-full lg:pbx-max-w-full lg:pbx-w-full pbx-min-w-[96rem] pbx-max-w-[96rem] pbx-w-[96rem] pbx-flex-1 pbx-bg-myPrimaryLightGrayColor pbx-flex pbx-items-center pbx-justify-between pbx-border-0 pbx-border-solid pbx-border-b pbx-border-gray-200 pbx-mb-2 lg:pbx-px-6 pbx-px-4 pbx-font-sans pbx-min-h-20"
+      class="lg:pbx-min-w-full lg:pbx-max-w-full lg:pbx-w-full pbx-min-w-[64rem] pbx-max-w-[64rem] pbx-w-[64rem] pbx-flex-1 pbx-bg-myPrimaryLightGrayColor pbx-flex pbx-items-center pbx-justify-between pbx-border-0 pbx-border-solid pbx-border-b pbx-border-gray-200 pbx-mb-2 pbx-font-sans pbx-min-h-20"
     >
       <template
         v-if="
@@ -528,7 +530,7 @@ onMounted(async () => {
               await pageBuilderService.clearHtmlSelection()
             }
           "
-          class="pbx-flex pbx-justify-start pbx-py-2"
+          class="pbx-flex pbx-justify-start pbx-py-2 lg:pbx-ml-4 pbx-ml-2"
         >
           <img class="pbx-h-6" :src="getPageBuilderConfig.pageBuilderLogo.src" alt="Logo" />
         </div>
@@ -733,7 +735,6 @@ onMounted(async () => {
               @click="
                 async () => {
                   closePublish()
-                  await pageBuilderService.clearHtmlSelection()
                 }
               "
             >
@@ -741,15 +742,6 @@ onMounted(async () => {
             </button>
           </div>
         </template>
-        <template
-          v-if="
-            getPageBuilderConfig &&
-            getPageBuilderConfig.userSettings &&
-            getPageBuilderConfig.userSettings.language
-          "
-        >
-        </template>
-
         <!-- Publish buttons end -->
 
         <template
@@ -767,7 +759,9 @@ onMounted(async () => {
               getPageBuilderConfig.userSettings.language
             "
           >
-            <div class="pbx-flex-1 pbx-flex pbx-justify-end pbx-items-center pbx-ml-2">
+            <div
+              class="pbx-flex-1 pbx-flex pbx-justify-end pbx-items-center pbx-ml-2 lg:pbx-mr-4 pbx-mr-2"
+            >
               <select
                 id="pbx-lang"
                 class="pbx-myPrimarySelect pbx-min-w-20 pbx-max-w-2pbx-min-w-20 pbx-w-max"
@@ -830,7 +824,7 @@ onMounted(async () => {
     <!-- Page Builder Main Start -->
     <div
       id="pagebuilder-main"
-      class="lg:pbx-min-w-full lg:pbx-max-w-full lg:pbx-w-full pbx-min-w-[96rem] pbx-max-w-[96rem] pbx-w-[96rem] pbx-flex-1 pbx-relative pbx-h-full pbx-flex pbx-pb-2 pbx-gap-2"
+      class="lg:pbx-min-w-full lg:pbx-max-w-full lg:pbx-w-full pbx-min-w-[64rem] pbx-max-w-[64rem] pbx-w-[64rem] pbx-flex-1 pbx-relative pbx-h-full pbx-flex pbx-pb-2 pbx-gap-2"
     >
       <!-- Left Menu Start -->
       <div
@@ -958,7 +952,7 @@ onMounted(async () => {
     <!-- Footer Start -->
     <div
       id="pagebuilder-footer"
-      class="lg:pbx-min-w-full lg:pbx-max-w-full lg:pbx-w-full pbx-min-w-[96rem] pbx-max-w-[96rem] pbx-w-[96rem] pbx-flex-1 pbx-flex pbx-items-center pbx-justify-center pbx-p-4 pbx-border-0 pbx-border-t pbx-border-t-gray-200 pbx-border-solid pbx-bg-myPrimaryLightGrayColor"
+      class="lg:pbx-min-w-full lg:pbx-max-w-full lg:pbx-w-full pbx-min-w-[64rem] pbx-max-w-[64rem] pbx-w-[64rem] pbx-flex-1 pbx-flex pbx-items-center pbx-justify-center pbx-border-0 pbx-border-t pbx-border-t-gray-200 pbx-border-solid pbx-bg-myPrimaryLightGrayColor pbx-py-4"
     >
       <div
         @click="

package/src/composables/builderInstance.ts

@@ -1,17 +1,42 @@
-// builderInstance.ts
+/**
+ * @file This file manages the singleton instance of the PageBuilderService.
+ * This pattern ensures that there is only one instance of the service throughout the application,
+ * providing a single source of truth for the page builder's state and logic.
+ * @author Qais Wardag
+ */
+
 import { PageBuilderService } from '../services/PageBuilderService'
 
-// Singleton instance
+/**
+ * The singleton instance of the PageBuilderService.
+ * It is initialized to null and will be set by the `setBuilderInstance` function.
+ * @type {PageBuilderService | null}
+ */
 let instance: PageBuilderService | null = null
 
-// Used by the plugin to set the instance
+/**
+ * Sets the singleton instance of the PageBuilderService.
+ * This function is called by the Vue plugin to initialize the service.
+ * It ensures that the instance is only set once.
+ *
+ * @param {PageBuilderService} newInstance - The new instance of the PageBuilderService to set.
+ * @returns {void}
+ */
 export function setBuilderInstance(newInstance: PageBuilderService): void {
   if (!instance) {
     instance = newInstance
   }
 }
 
-// Used to access the existing instance anywhere else
+/**
+ * Retrieves the singleton instance of the PageBuilderService.
+ * This function is used throughout the application to access the service.
+ * It throws an error if the service has not been initialized, ensuring that
+ * the plugin has been correctly installed.
+ *
+ * @throws {Error} If the PageBuilderService has not been initialized.
+ * @returns {PageBuilderService} The singleton instance of the PageBuilderService.
+ */
 export function getPageBuilder(): PageBuilderService {
   if (!instance) {
     throw new Error(
@@ -19,4 +44,4 @@ export function getPageBuilder(): PageBuilderService {
     )
   }
   return instance
-}
+}