@myissue/vue-website-page-builder 3.3.90 → 3.3.92

package/dist/{zh-Hans-CZQ2JK7v.js → zh-Hans-BEWY32Aq.js}

@@ -1,4 +1,4 @@
-const e = "保存", t = "选项", o = "头像", n = "发布", a = "组件", s = "样式", i = "排版", r = "选择", l = "内边距", d = "边距", c = "全局", p = "具体", u = "边框", g = "透明", m = "添加", y = "属性", h = "值", T = "关闭", S = "编辑", C = "删除", w = "预览", b = "移动", f = "加粗", v = "链接", L = "列表", H = "搜索", M = "横向", D = "纵向", B = "方形", P = "图片", k = "上一页", A = "下一页", x = "信息", I = "文本", E = "类型", F = "数组", R = "内容", V = "元素", z = "组件", q = "全部", U = "图片", W = {
+const e = "保存", t = "选项", o = "头像", n = "发布", a = "组件", s = "样式", i = "排版", r = "选择", l = "内边距", d = "边距", c = "全局", u = "具体", p = "边框", g = "透明", m = "添加", h = "属性", y = "值", T = "关闭", S = "编辑", C = "删除", w = "预览", f = "移动", v = "加粗", b = "列表", L = "搜索", H = "横向", M = "纵向", D = "方形", B = "图片", k = "上一页", P = "下一页", A = "信息", I = "文本", x = "链接", E = "类型", F = "数组", R = "内容", V = "元素", W = "组件", z = "全部", q = "图片", U = {
   "Reset Page": "重置页面",
   "Global Page Styles": "全局页面样式",
   "Try the powerful Click & Drop Page Builder—designed for developers and creators who want full control without the hassle. Customize layouts, fonts, and colors. Edit content visually in real time. Add media, embed YouTube videos, or export everything as clean HTML. With responsive editing, local auto-save, Tailwind support, and even Unsplash integration, it's everything you need—wrapped in one seamless builder. Build Stunning Pages in Minutes.": "试试强大的Click & Drop Page Builder——专为希望完全控制而无需麻烦的开发者和创作者设计。自定义布局、字体和颜色。实时可视化编辑内容。添加媒体、嵌入YouTube视频或将所有内容导出为干净的HTML。凭借响应式编辑、本地自动保存、Tailwind支持，甚至Unsplash集成，它是您所需的一切——集成在一个无缝的构建器中。几分钟内构建令人惊叹的页面。",
@@ -48,13 +48,13 @@ const e = "保存", t = "选项", o = "头像", n = "发布", a = "组件", s =
   "Horizontal Margin": "水平边距",
   "Border Radius": "边框半径",
   Global: c,
-  Specific: p,
+  Specific: u,
   "Border Radius top left": "边框半径 左上",
   "Border Radius top right": "边框半径 右上",
   "Border Radius bottom left": "边框半径 左下",
   "Border Radius bottom right": "边框半径 右下",
   "Border Style, Width & Color": "边框样式、宽度和颜色",
-  Border: u,
+  Border: p,
   "Border Style": "边框样式",
   "Border Width": "边框宽度",
   "Border Color": "边框颜色",
@@ -68,8 +68,8 @@ const e = "保存", t = "选项", o = "头像", n = "发布", a = "组件", s =
   "Inline Styles": "内联样式",
   "These are the inline styles applied by the builder. Add your own styles and press Enter to apply them to the selected element.": "这些是构建器应用的内联样式。添加您自己的样式，然后按 Enter 将其应用于选定的元素。",
   "Add your own style.": "添加您自己的样式。",
-  property: y,
-  value: h,
+  property: h,
+  value: y,
   Close: T,
   Editing: S,
   "Loading...": "加载中...",
@@ -81,7 +81,7 @@ const e = "保存", t = "选项", o = "头像", n = "发布", a = "组件", s =
   Delete: C,
   "Add to the bottom": "添加到底部",
   Preview: w,
-  Mobile: b,
+  Mobile: f,
   "Demo Content": "演示内容",
   "Demo Description": "介绍轻量级和免费的Vue Click & Drop页面构建器。使用Vue轻松创建和增强数字体验。并非所有强大的东西都需要复杂。这款简约轻便的页面构建器提供了一个优雅直观的界面，专注于简单性和速度。创建完全响应式的页面，例如列表、职位板或博客文章，并使用免费的Click & Drop页面构建器轻松管理您的内容。",
   "Demo Title": "令人惊叹的页面的网页构建器",
@@ -93,11 +93,10 @@ const e = "保存", t = "选项", o = "头像", n = "发布", a = "组件", s =
   "Edit text and links": "编辑文本和链接",
   "Enter URL": "输入URL",
   "Line break": "换行",
-  Bold: f,
-  Link: v,
+  Bold: v,
   "Header 2": "标题2",
   "Header 3": "标题3",
-  List: L,
+  List: b,
   "Add a valid URL to transform the selected text into a clickable hyperlink that directs users to the specified web address.": "添加一个有效的URL，将选定的文本转换为可点击的超链接，指向指定的网页地址。",
   "Select image": "选择图片",
   "Manage Content": "管理内容",
@@ -105,20 +104,20 @@ const e = "保存", t = "选项", o = "头像", n = "发布", a = "组件", s =
   "Reset changes": "重置更改",
   "Do you want to reset this page?": "您想重置此页面吗？",
   "Are you sure you want to reset this page? This will overwrite your current changes.": "您确定要重置此页面吗？这将覆盖您当前的更改。",
-  Search: H,
+  Search: L,
   "Search...": "搜索...",
-  Landscape: M,
-  Portrait: D,
-  Squarish: B,
+  Landscape: H,
+  Portrait: M,
+  Squarish: D,
   "Total pages": "总页数",
-  Images: P,
+  Images: B,
   "First page": "第一页",
   Prev: k,
-  Next: A,
+  Next: P,
   "By:": "作者：",
   "We did not find any images. Make a new search.": "我们没有找到任何图片。请重新搜索。",
   "No results on current page. Navigate to First Page.": "当前页面没有结果。导航到第一页。",
-  Information: x,
+  Information: A,
   "From:": "来自：",
   " Select image": " 选择图片",
   "Layouts and visual.": "布局和视觉。",
@@ -129,7 +128,6 @@ const e = "保存", t = "选项", o = "头像", n = "发布", a = "组件", s =
   "Three Square Images": "三张方形图片",
   "Six Square Images Grid": "六张方形图片网格",
   "Three Vertical Images": "三张竖直图片",
-  "Four Square Images With Text": "四张带文字的方形图片",
   "Three Square Images With Text": "三张方形图片和文字",
   "Two Square Images With Text": "两张方形图片和文字",
   Text: I,
@@ -137,6 +135,7 @@ const e = "保存", t = "选项", o = "头像", n = "发布", a = "组件", s =
   "Header H3": "标题 H3",
   "YouTube Video": "YouTube 视频",
   "Break Divider": "分隔线",
+  Link: x,
   "Selected HTML": "选定的HTML",
   "Overview of Selected Element, Component, and Components. This section provides real-time updates based on your HTML selection.": "所选元素、组件和组件的概述。本节根据您的HTML选择提供实时更新。",
   Types: E,
@@ -146,7 +145,7 @@ const e = "保存", t = "选项", o = "头像", n = "发布", a = "组件", s =
   array: F,
   Content: R,
   Element: V,
-  Component: z,
+  Component: W,
   "Components added": "添加的组件",
   "No Element selected": "未选择元素",
   "Selected HTML:": "选定的HTML:",
@@ -157,43 +156,48 @@ const e = "保存", t = "选项", o = "头像", n = "发布", a = "组件", s =
   "Title:": "标题:",
   "HTML Code:": "HTML代码:",
   "No Components added yet": "尚未添加组件",
-  All: q,
-  Image: U,
+  All: z,
+  Image: q,
   "Image & Text": "图片和文字",
-  "Four Square Images": "四张方形图片"
+  "Four Square Images With Text": "四张带文字的方形图片",
+  "Four Square Images": "四张方形图片",
+  "Continue Your Work?": "继续您的工作？",
+  "We noticed you have some changes that weren’t saved last time. Would you like to pick up where you left off, or use the version that’s currently loaded from the database?": "我们注意到您上次有一些更改没有保存。您是想从上次离开的地方继续，还是使用当前从数据库加载的版本？",
+  "Use Saved Version": "使用保存的版本",
+  "Continue Where I Left Off": "从我离开的地方继续"
 };
 export {
   m as Add,
-  q as All,
-  f as Bold,
-  u as Border,
+  z as All,
+  v as Bold,
+  p as Border,
   T as Close,
-  z as Component,
+  W as Component,
   R as Content,
   C as Delete,
   S as Editing,
   V as Element,
   c as Global,
-  U as Image,
-  P as Images,
-  x as Information,
-  M as Landscape,
-  v as Link,
-  L as List,
+  q as Image,
+  B as Images,
+  A as Information,
+  H as Landscape,
+  x as Link,
+  b as List,
   d as Margin,
-  b as Mobile,
-  A as Next,
+  f as Mobile,
+  P as Next,
   t as Options,
   l as Padding,
-  D as Portrait,
+  M as Portrait,
   k as Prev,
   w as Preview,
   n as Publish,
   e as Save,
-  H as Search,
+  L as Search,
   r as Select,
-  p as Specific,
-  B as Squarish,
+  u as Specific,
+  D as Squarish,
   s as Styles,
   I as Text,
   g as Transparent,
@@ -202,7 +206,7 @@ export {
   F as array,
   o as avatar,
   a as component,
-  W as default,
-  y as property,
-  h as value
+  U as default,
+  h as property,
+  y as value
 };

package/package.json

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

package/src/Components/PageBuilder/EditorMenu/Editables/ClassEditor.vue

@@ -55,13 +55,13 @@ const handleAddClasses = async () => {
   <EditorAccordion>
     <template #title>{{ translate('Generated CSS') }}</template>
     <template #content>
-      <label class="pbx-myPrimaryInputLabel pbx-my-4">
+      <p class="pbx-myPrimaryInputLabel pbx-my-4">
         {{
           translate(
             'This is the CSS applied by the builder. Add your own CSS and press Enter to apply it to the selected element.',
           )
         }}
-      </label>
+      </p>
 
       <div class="pbx-flex pbx-flex-row pbx-flex-wrap pbx-gap-2 pbx-mt-2 pbx-mb-4">
         <div

package/src/Components/PageBuilder/EditorMenu/Editables/HTMLEditor.vue

@@ -0,0 +1,88 @@
+<script setup>
+import { ref, computed } from 'vue'
+import { sharedPageBuilderStore } from '../../../../stores/shared-store'
+import ModalBuilder from '../../../../Components/Modals/ModalBuilder.vue'
+import EditorAccordion from '../EditorAccordion.vue'
+import { getPageBuilder } from '../../../../composables/builderInstance'
+import { useTranslations } from '../../../../composables/useTranslations'
+
+const pageBuilderService = getPageBuilder()
+const pageBuilderStateStore = sharedPageBuilderStore
+const { translate } = useTranslations()
+
+const getElement = computed(() => pageBuilderStateStore.getElement)
+
+const elementHTML = computed(() => {
+  if (!getElement.value || !(getElement.value instanceof HTMLElement)) {
+    return ''
+  }
+  return getElement.value.outerHTML
+})
+
+const showModalHTMLEditor = ref(false)
+
+const editableHtml = ref('')
+
+const handleShowHTMLEditor = () => {
+  editableHtml.value = elementHTML.value
+  showModalHTMLEditor.value = true
+}
+
+const handleCloseHTMLEditor = () => {
+  showModalHTMLEditor.value = false
+}
+
+const handleSaveChanges = () => {
+  pageBuilderService.applyModifiedHTML(editableHtml.value)
+
+  showModalHTMLEditor.value = true
+}
+</script>
+<template>
+  <EditorAccordion>
+    <template #title>{{ translate('HTML Editor') }}</template>
+    <template #content>
+      <div class="pbx-my-2 pbx-py-2">
+        <label for="vertical-margin" class="pbx-myPrimaryInputLabel">{{
+          translate(
+            'Gain full control over individual components by editing the raw HTML of any selected element. This feature empowers advanced users to fine-tune the HTML structure,',
+          )
+        }}</label>
+        <hr />
+      </div>
+      <button @click="handleShowHTMLEditor" type="button" class="pbx-myPrimaryButton">
+        {{ translate('HTML Editor') }}
+      </button>
+    </template>
+  </EditorAccordion>
+  <ModalBuilder
+    maxWidth="7xl"
+    minHeight="pbx-min-h-[65vh] pbx-max-h-[65vh]"
+    :showModalBuilder="showModalHTMLEditor"
+    :title="translate('HTML Editor')"
+    @closeMainModalBuilder="handleCloseHTMLEditor"
+  >
+    <textarea
+      id="html-editor"
+      v-model="editableHtml"
+      class="pbx-h-full pbx-font-sans pbx-bg-gray-900 pbx-text-white pbx-w-full"
+      style="overflow: auto; min-height: 400px"
+    ></textarea>
+    <div
+      class="pbx-border-0 pbx-border-solid pbx-border-t pbx-border-gray-200 pbx-mt-4 pbx-flex pbx-items-center pbx-justify-end"
+    >
+      <div class="pbx-py-4 pbx-flex sm:pbx-justify-end pbx-justify-center">
+        <div
+          class="sm:pbx-grid-cols-2 sm:pbx-items-end sm:pbx-justify-end pbx-flex sm:pbx-flex-row pbx-flex-col pbx-myPrimaryGap sm:pbx-w-5/6 pbx-w-full"
+        >
+          <button @click="handleCloseHTMLEditor" type="button" class="pbx-mySecondaryButton">
+            {{ translate('Close') }}
+          </button>
+          <button @click="handleSaveChanges" type="button" class="pbx-myPrimaryButton">
+            {{ translate('Save') }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </ModalBuilder>
+</template>

package/src/Components/PageBuilder/EditorMenu/Editables/StyleEditor.vue

@@ -60,13 +60,13 @@ const handleAddStyle = async () => {
   <EditorAccordion>
     <template #title>{{ translate('Inline Styles') }}</template>
     <template #content>
-      <label class="pbx-myPrimaryInputLabel pbx-my-4">
+      <p class="pbx-myPrimaryInputLabel pbx-my-4">
         {{
           translate(
             'These are the inline styles applied by the builder. Add your own styles and press Enter to apply them to the selected element.',
           )
         }}
-      </label>
+      </p>
 
       <div class="pbx-flex pbx-flex-row pbx-flex-wrap pbx-gap-2 pbx-mt-2 pbx-mb-4">
         <div

package/src/Components/PageBuilder/EditorMenu/EditorAccordion.vue

@@ -4,7 +4,7 @@
     :class="{ '': expanded }"
   >
     <div
-      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 pbx-bg-white hover:pbx-bg-myPrimaryLightGrayColor"
       @click="expanded = !expanded"
     >
       <p class="pbx-myPrimaryParagraph pbx-font-medium pbx-my-0 pbx-py-0">
@@ -19,7 +19,7 @@
       </template>
     </div>
     <div
-      :class="[expanded ? 'pbx-block' : 'pbx-hidden']"
+      :class="[expanded ? 'pbx-block pbx-bg-sky-50' : 'pbx-hidden']"
       class="pbx-px-4 pbx-ease-linear pbx-duration-75 pbx-pb-8"
     >
       <slot name="content" />

package/src/Components/PageBuilder/EditorMenu/RightSidebarEditor.vue

@@ -16,6 +16,7 @@ import LinkEditor from './Editables/LinkEditor.vue'
 import TipTap from '../../TipTap/TipTap.vue'
 import EditGetElement from './Editables/EditGetElement.vue'
 import ElementEditor from './Editables/ElementEditor.vue'
+import HTMLEditor from './Editables/HTMLEditor.vue'
 import { getPageBuilder } from '../../../composables/builderInstance'
 import EditorAccordion from '../EditorMenu/EditorAccordion.vue'
 import fullHTMLContent from '../../../utils/builder/html-doc-declaration-with-components'
@@ -154,45 +155,48 @@ const handleCloseGlobalPageStyles = async function () {
         <article class="pbx-mb-1">
           <TipTap></TipTap>
         </article>
-        <article class="pbx-my-1 pbx-bg-white">
+        <article class="pbx-my-1">
           <Typography></Typography>
         </article>
 
-        <article class="pbx-my-1 pbx-bg-white">
+        <article class="pbx-my-1">
           <OpacityEditor> </OpacityEditor>
         </article>
-        <article class="pbx-my-1 pbx-bg-white">
+        <article class="pbx-my-1">
           <Padding> </Padding>
         </article>
-        <article class="pbx-my-1 pbx-bg-white">
+        <article class="pbx-my-1">
           <Margin> </Margin>
         </article>
-        <article class="pbx-my-1 pbx-bg-white">
+        <article class="pbx-my-1">
           <BorderRadius></BorderRadius>
         </article>
-        <article class="pbx-my-1 pbx-bg-white">
+        <article class="pbx-my-1">
           <Borders></Borders>
         </article>
-        <article class="pbx-my-1 pbx-bg-white">
+        <article class="pbx-my-1">
           <ClassEditor></ClassEditor>
         </article>
-        <article class="pbx-my-1 pbx-bg-white">
+        <article class="pbx-my-1">
           <StyleEditor></StyleEditor>
         </article>
+        <article class="pbx-my-1">
+          <HTMLEditor></HTMLEditor>
+        </article>
       </div>
 
       <!-- Global Page Styles -->
-      <article class="pbx-my-1 pbx-bg-white">
+      <article class="pbx-my-1">
         <EditorAccordion>
           <template #title>{{ translate('Global Page Styles') }}</template>
           <template #content>
-            <label class="pbx-myPrimaryInputLabel pbx-my-4">
+            <p class="pbx-myPrimaryInputLabel pbx-my-4">
               {{
                 translate(
                   'Apply styles that affect the entire page. These settings include global font family, text color, background color, and other universal styles that apply to all sections.',
                 )
               }}
-            </label>
+            </p>
 
             <hr />
             <div class="pbx-my-2 pbx-py-2">
@@ -206,20 +210,17 @@ const handleCloseGlobalPageStyles = async function () {
       <!-- Global Page Styles -->
 
       <!-- Download Layout HTML -->
-      <article
-        v-if="Array.isArray(getComponents) && getComponents.length >= 1"
-        class="pbx-my-1 pbx-bg-white"
-      >
+      <article v-if="Array.isArray(getComponents) && getComponents.length >= 1" class="pbx-my-1">
         <EditorAccordion>
           <template #title>{{ translate('Download HTML') }}</template>
           <template #content>
-            <label class="pbx-myPrimaryInputLabel pbx-my-4">
+            <p class="pbx-myPrimaryInputLabel pbx-my-4">
               {{
                 translate(
                   'Export the entire page as a standalone HTML file. This includes all sections, content, and applied styles, making it ready for use or integration elsewhere.',
                 )
               }}
-            </label>
+            </p>
             <hr />
             <div class="pbx-my-2 pbx-py-2">
               <button @click="handleDownloadHTML" type="button" class="pbx-myPrimaryButton">
@@ -261,33 +262,36 @@ const handleCloseGlobalPageStyles = async function () {
                 )
               }}
             </p>
-            <article class="pbx-my-1 pbx-bg-gray-100">
+            <article class="pbx-my-1">
               <Typography></Typography>
             </article>
-            <article class="pbx-my-1 pbx-bg-gray-100">
+            <article class="pbx-my-1">
               <TextColorEditor :globalPageLayout="true"></TextColorEditor>
             </article>
-            <article class="pbx-my-1 pbx-bg-gray-100">
+            <article class="pbx-my-1">
               <BackgroundColorEditor :globalPageLayout="true"></BackgroundColorEditor>
             </article>
-            <article class="pbx-my-1 pbx-bg-gray-100">
+            <article class="pbx-my-1">
               <Padding> </Padding>
             </article>
-            <article class="pbx-my-1 pbx-bg-gray-100">
+            <article class="pbx-my-1">
               <Margin> </Margin>
             </article>
-            <article class="pbx-my-1 pbx-bg-gray-100">
+            <article class="pbx-my-1">
               <BorderRadius></BorderRadius>
             </article>
-            <article class="pbx-my-1 pbx-bg-gray-100">
+            <article class="pbx-my-1">
               <Borders></Borders>
             </article>
-            <article class="pbx-my-1 pbx-bg-gray-100">
+            <article class="pbx-my-1">
               <ClassEditor></ClassEditor>
             </article>
-            <article class="pbx-my-1 pbx-bg-gray-100">
+            <article class="pbx-my-1">
               <StyleEditor></StyleEditor>
             </article>
+            <article class="pbx-my-1">
+              <HTMLEditor></HTMLEditor>
+            </article>
           </div>
         </div>
       </div>

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

@@ -253,12 +253,13 @@ const handlerRumeEditingForUpdate = async function () {
   typeModal.value = 'warning'
   showModalResumeEditing.value = true
 
-  titleModalResumeEditing.value = 'Continue Your Work?'
-  descriptionModalResumeEditing.value =
-    'We noticed you have some changes that weren’t saved last time. Would you like to pick up where you left off, or use the version that’s currently loaded from the database?'
-  firstButtonResumeEditing.value = 'Use Saved Version'
+  titleModalResumeEditing.value = translate('Continue Your Work?')
+  descriptionModalResumeEditing.value = translate(
+    'We noticed you have some changes that weren’t saved last time. Would you like to pick up where you left off, or use the version that’s currently loaded from the database?',
+  )
+  firstButtonResumeEditing.value = translate('Use Saved Version')
   secondButtonResumeEditing.value = null
-  thirdButtonResumeEditing.value = 'Continue Where I Left Off'
+  thirdButtonResumeEditing.value = translate('Continue Where I Left Off')
 
   firstModalButtonResumeEditingFunction.value = async function () {
     pageBuilderStateStore.setHasLocalDraftForUpdate(false)
@@ -514,7 +515,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="
@@ -530,7 +531,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>
@@ -742,15 +743,6 @@ onMounted(async () => {
             </button>
           </div>
         </template>
-        <template
-          v-if="
-            getPageBuilderConfig &&
-            getPageBuilderConfig.userSettings &&
-            getPageBuilderConfig.userSettings.language
-          "
-        >
-        </template>
-
         <!-- Publish buttons end -->
 
         <template
@@ -768,7 +760,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"
@@ -831,7 +825,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
@@ -959,7 +953,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
-}
+}

package/src/css/style.css

@@ -321,7 +321,7 @@
     @apply pbx-block pbx-pr-8 pbx-text-left pbx-bg-white pbx-w-auto sm:pbx-text-sm pbx-font-normal pbx-text-myPrimaryDarkGrayColor placeholder:pbx-font-normal placeholder:pbx-accent-gray-300 focus:pbx-bg-white pbx-rounded-md pbx-py-3 pbx-px-3 pbx-border pbx-border-gray-300 pbx-shadow-sm focus:pbx-outline-none pbx-myPrimaryFormFocus pbx-h-full pbx-border-solid;
   }
   .pbx-myPrimaryInputNoBorder {
-    @apply pbx-myPrimaryInput pbx-placeholder:accent-gray-300 focus:pbx-bg-none pbx-rounded-md pbx-py-3 pbx-px-3 pbx-border-none focus:pbx-outline-none focus:pbx-ring-0 focus:pbx-ring-offset-0 focus:pbx-border-none pbx-shadow-none;
+    @apply pbx-myPrimaryInput placeholder:pbx-accent-gray-300 focus:pbx-bg-none pbx-rounded-md pbx-py-3 pbx-px-3 pbx-border-none focus:pbx-outline-none focus:pbx-ring-0 focus:pbx-ring-offset-0 focus:pbx-border-none pbx-shadow-none;
   }
   .pbx-myPrimaryInputReadonly {
     @apply pbx-myPrimaryInput pbx-bg-gray-50 focus:pbx-ring-0 focus:pbx-bg-myPrimaryLightGrayColor focus:pbx-border-myPrimaryMediumGrayColor;
@@ -336,7 +336,7 @@
   }
 
   .pbx-myPrimaryTextArea {
-    @apply pbx-block pbx-w-full sm:pbx-text-sm pbx-font-normal pbx-text-myPrimaryDarkGrayColor pbx-placeholder:font-normal pbx-placeholder:accent-gray-400 pbx-bg-gray-50 focus:pbx-bg-white pbx-rounded-md pbx-py-3 pbx-px-3 pbx-border pbx-border-gray-300 pbx-shadow-sm focus:pbx-outline-none focus:pbx-ring-2 focus:pbx-ring-myPrimaryLinkColor focus:pbx-border-transparent;
+    @apply pbx-block pbx-w-full sm:pbx-text-sm pbx-font-normal pbx-text-myPrimaryDarkGrayColor placeholder:pbx-font-normal placeholder:pbx-accent-gray-400 pbx-bg-gray-50 focus:pbx-bg-white pbx-rounded-md pbx-py-3 pbx-px-3 pbx-border pbx-border-gray-300 pbx-shadow-sm focus:pbx-outline-none focus:pbx-ring-2 focus:pbx-ring-myPrimaryLinkColor focus:pbx-border-transparent;
   }
 
   .pbx-myPrimaryCheckbox {