@myissue/vue-website-page-builder 3.3.80 → 3.3.81

package/dist/{zh-Hans-B4txt13y.js → zh-Hans-BkEKxp4g.js}

@@ -1,4 +1,4 @@
-const e = "保存", o = "选项", t = "头像", n = "发布", i = "关闭", s = "组件", a = "样式", r = "排版", l = "选择", d = "内边距", p = "边距", c = "全局", u = "具体", g = "边框", y = "透明", h = "添加", m = "属性", T = "值", S = "关闭", C = "编辑", w = "删除", b = "预览", f = "移动", v = "加粗", B = "链接", D = "列表", L = {
+const e = "保存", t = "选项", o = "头像", n = "发布", a = "组件", i = "样式", s = "排版", r = "选择", l = "内边距", d = "边距", c = "全局", p = "具体", u = "边框", g = "透明", y = "添加", h = "属性", m = "值", S = "关闭", T = "编辑", w = "删除", C = "预览", f = "移动", b = "加粗", v = "链接", B = "列表", D = "搜索", L = "横向", P = "纵向", k = "方形", M = "图片", A = "上一页", H = "下一页", R = "信息", x = {
   "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集成，它是您所需的一切——集成在一个无缝的构建器中。几分钟内构建令人惊叹的页面。",
@@ -9,31 +9,30 @@ const e = "保存", o = "选项", t = "头像", n = "发布", i = "关闭", s =
   "Download or install our powerful, flexible, and easy-to-use free Vue 3 Page Builder via": "通过下载或安装我们强大、灵活且易于使用的免费 Vue 3 页面构建器",
   Save: e,
   "Add new Components": "添加新组件",
-  Options: o,
+  Options: t,
   "Config Overview": "配置概览",
   "HTML Overview": "HTML概览",
   "Delete Layout": "删除布局",
-  avatar: t,
+  avatar: o,
   Publish: n,
   "Add Components to Page": "将组件添加到页面",
-  Close: i,
   "Helper Components": "辅助组件",
   "Click to add": "点击添加",
-  component: s,
+  component: a,
   "Layout Components": "布局组件",
   "Click to add component": "点击添加组件",
   "Remove all Components": "删除所有组件",
   "Are you sure you want to remove all Components?": "您确定要删除所有组件吗？",
-  Styles: a,
+  Styles: i,
   "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.": "应用影响整个页面的样式。这些设置包括全局字体系列、文本颜色、背景颜色和适用于所有部分的其他通用样式。",
   "Update Page Styles": "更新页面样式",
   "Download HTML": "下载HTML",
   "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.": "将整个页面导出为独立的HTML文件。这包括所有部分、内容和应用的样式，使其可以随时使用或集成到其他地方。",
   "Download HTML file": "下载HTML文件",
-  Typographies: r,
+  Typographies: s,
   "Font Appearance": "字体外观",
   "Font Size": "字体大小",
-  Select: l,
+  Select: r,
   "Font size": "字体大小",
   "Font tablet size": "平板字体大小",
   "Font small screens": "小屏幕字体大小",
@@ -41,38 +40,38 @@ const e = "保存", o = "选项", t = "头像", n = "发布", i = "关闭", s =
   "Font family": "字体家族",
   "Font Style": "字体样式",
   "Opacity & Transparency": "不透明度和透明度",
-  Padding: d,
+  Padding: l,
   "Vertical Padding": "垂直内边距",
   "Horizontal Padding": "水平内边距",
-  Margin: p,
+  Margin: d,
   "Vertical Margin": "垂直边距",
   "Horizontal Margin": "水平边距",
   "Border Radius": "边框半径",
   Global: c,
-  Specific: u,
+  Specific: p,
   "Border Radius top left": "边框半径 左上",
   "Border Radius top right": "边框半径 右上",
   "Border Radius bottom left": "边框半径 左下",
   "Border Radius bottom right": "边框半径 右下",
   "Border Style, Width & Color": "边框样式、宽度和颜色",
-  Border: g,
+  Border: u,
   "Border Style": "边框样式",
   "Border Width": "边框宽度",
   "Border Color": "边框颜色",
-  Transparent: y,
+  Transparent: g,
   "Generated CSS": "生成的CSS",
   "This is the CSS applied by the builder. Add your own CSS and press Enter to apply it to the selected element.": "这是构建器应用的CSS。添加您自己的CSS并按Enter将其应用于选定的元素。",
   "Add your CSS.": "添加您的CSS。",
   "The pbx- prefix is added automatically.": "pbx-前缀会自动添加。",
   "Type class": "输入类",
-  Add: h,
+  Add: y,
   "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: m,
-  value: T,
-  close: S,
-  Editing: C,
+  property: h,
+  value: m,
+  Close: S,
+  Editing: T,
   "Loading...": "加载中...",
   "Background Color": "背景颜色",
   "Text Color": "文字颜色",
@@ -81,7 +80,7 @@ const e = "保存", o = "选项", t = "头像", n = "发布", i = "关闭", s =
   "Are you sure you want to remove this Component?": "您确定要删除此组件吗？",
   Delete: w,
   "Add to the bottom": "添加到底部",
-  Preview: b,
+  Preview: C,
   Mobile: f,
   "Demo Content": "演示内容",
   "Demo Description": "介绍轻量级和免费的Vue Click & Drop页面构建器。使用Vue轻松创建和增强数字体验。并非所有强大的东西都需要复杂。这款简约轻便的页面构建器提供了一个优雅直观的界面，专注于简单性和速度。创建完全响应式的页面，例如列表、职位板或博客文章，并使用免费的Click & Drop页面构建器轻松管理您的内容。",
@@ -94,39 +93,68 @@ const e = "保存", o = "选项", t = "头像", n = "发布", i = "关闭", s =
   "Edit text and links": "编辑文本和链接",
   "Enter URL": "输入URL",
   "Line break": "换行",
-  Bold: v,
-  Link: B,
+  Bold: b,
+  Link: v,
   "Header 2": "标题2",
   "Header 3": "标题3",
-  List: D,
-  "Add a valid URL to transform the selected text into a clickable hyperlink that directs users to the specified web address.": "添加一个有效的URL，将选定的文本转换为可点击的超链接，指向指定的网页地址。"
+  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": "管理内容",
+  "Media Library": "媒体库",
+  "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: D,
+  "Search...": "搜索...",
+  Landscape: L,
+  Portrait: P,
+  Squarish: k,
+  "Total pages": "总页数",
+  Images: M,
+  "First page": "第一页",
+  Prev: A,
+  Next: H,
+  "By:": "作者：",
+  "We did not find any images. Make a new search.": "我们没有找到任何图片。请重新搜索。",
+  "No results on current page. Navigate to First Page.": "当前页面没有结果。导航到第一页。",
+  Information: R,
+  "From:": "来自：",
+  " Select image": " 选择图片"
 };
 export {
-  h as Add,
-  v as Bold,
-  g as Border,
-  i as Close,
+  y as Add,
+  b as Bold,
+  u as Border,
+  S as Close,
   w as Delete,
-  C as Editing,
+  T as Editing,
   c as Global,
-  B as Link,
-  D as List,
-  p as Margin,
+  M as Images,
+  R as Information,
+  L as Landscape,
+  v as Link,
+  B as List,
+  d as Margin,
   f as Mobile,
-  o as Options,
-  d as Padding,
-  b as Preview,
+  H as Next,
+  t as Options,
+  l as Padding,
+  P as Portrait,
+  A as Prev,
+  C as Preview,
   n as Publish,
   e as Save,
-  l as Select,
-  u as Specific,
-  a as Styles,
-  y as Transparent,
-  r as Typographies,
-  t as avatar,
-  S as close,
-  s as component,
-  L as default,
-  m as property,
-  T as value
+  D as Search,
+  r as Select,
+  p as Specific,
+  k as Squarish,
+  i as Styles,
+  g as Transparent,
+  s as Typographies,
+  o as avatar,
+  a as component,
+  x as default,
+  h as property,
+  m as value
 };

package/package.json

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

package/src/Components/DemoUnsplash.vue

@@ -5,6 +5,9 @@ import { usePageBuilderModal } from '../composables/usePageBuilderModal'
 import { delay } from '../composables/delay'
 import { preloadImage } from '../composables/preloadImage'
 import { getPageBuilder } from '../composables/builderInstance'
+import { useTranslations } from '../composables/useTranslations'
+const { translate } = useTranslations()
+
 const pageBuilderService = getPageBuilder()
 
 const { closeMediaLibraryModal } = usePageBuilderModal()
@@ -126,7 +129,7 @@ onMounted(async () => {
         <label
           for="default-search"
           class="pbx-mb-2 pbx-text-sm pbx-font-normal pbx-text-gray-900 pbx-sr-only dark:pbx-text-gray-300"
-          >Search</label
+          >{{ translate('Search') }}</label
         >
 
         <div class="pbx-mysearchBarWithOptions">
@@ -142,7 +145,7 @@ onMounted(async () => {
               v-model="getSearchTerm"
               class="pbx-myPrimarySearchInput"
               autocomplete="off"
-              placeholder="Search..."
+              :placeholder="translate('Search...')"
             />
           </div>
 
@@ -156,7 +159,7 @@ onMounted(async () => {
             type="submit"
             class="pbx-myPrimaryTag pbx-break-keep pbx-mr-4"
           >
-            Search
+            {{ translate('Search') }}
           </button>
         </div>
       </form>
@@ -175,7 +178,7 @@ onMounted(async () => {
                 '': getOrientationValue !== 'landscape',
               }"
             >
-              Landscape
+              {{ translate('Landscape') }}
             </button>
             <button
               @click="searchByOrientation('portrait')"
@@ -186,7 +189,7 @@ onMounted(async () => {
                 '': getOrientationValue !== 'portrait',
               }"
             >
-              Portrait
+              {{ translate('Portrait') }}
             </button>
             <button
               @click="searchByOrientation('squarish')"
@@ -197,7 +200,7 @@ onMounted(async () => {
                 '': getOrientationValue !== 'squarish',
               }"
             >
-              Squarish
+              {{ translate('Squarish') }}
             </button>
 
             <svg
@@ -218,10 +221,10 @@ onMounted(async () => {
             aria-label="Pagination"
           >
             <p class="pbx-myPrimaryParagraph pbx-text-xs pbx-italic">
-              Total pages {{ getUnsplashImages.total_pages }}
+              {{ translate('Total pages') }} {{ getUnsplashImages.total_pages }}
             </p>
             <p class="pbx-myPrimaryParagraph pbx-text-xs pbx-italic">
-              Images {{ getUnsplashImages.total }}
+              {{ translate('Images') }} {{ getUnsplashImages.total }}
             </p>
             <div
               class="pbx-flex pbx-flex-1 pbx-justify-between sm:pbx-justify-end pbx-items-center pbx-gap-2"
@@ -231,7 +234,7 @@ onMounted(async () => {
                 class="pbx-myPrimaryParagraph pbx-text-xs pbx-italic pbx-pr-2 pbx-pl-1 pbx-cursor-pointer pbx-underline"
                 @click="nextPage(Number((getCurrentPageNumber = 1)))"
               >
-                First page
+                {{ translate('First page') }}
               </span>
             </div>
             <button
@@ -241,7 +244,7 @@ onMounted(async () => {
               @click="previousPage(Number(getCurrentPageNumber--))"
             >
               {{
-                `Prev ${Number(getCurrentPageNumber) > 0 ? Number(getCurrentPageNumber) - 1 : Number(getCurrentPageNumber) - 1}`
+                `${translate('Prev')} ${Number(getCurrentPageNumber) > 0 ? Number(getCurrentPageNumber) - 1 : Number(getCurrentPageNumber) - 1}`
               }}
             </button>
 
@@ -257,7 +260,7 @@ onMounted(async () => {
               @click="nextPage(Number(getCurrentPageNumber++))"
             >
               {{
-                `Next ${Number(getCurrentPageNumber) > 0 ? Number(getCurrentPageNumber) + 1 : Number(getCurrentPageNumber) + 1}`
+                `${translate('Next')} ${Number(getCurrentPageNumber) > 0 ? Number(getCurrentPageNumber) + 1 : Number(getCurrentPageNumber) + 1}`
               }}
             </button>
           </nav>
@@ -272,7 +275,7 @@ onMounted(async () => {
                 >
                   <span
                     class="!pbx-absolute !pbx-m-px !pbx-h-px !pbx-w-px !pbx-overflow-hidden !pbx-whitespace-nowrap !pbx-border-0 !pbx-p-0 !pbx-[clip:rect(0,0,0,0)]"
-                    >Loading...</span
+                    >{{ translate('Loading...') }}</span
                   >
                 </div>
               </div>
@@ -294,7 +297,7 @@ onMounted(async () => {
                     :src="image.urls.thumb"
                   />
                   <p class="pbx-myPrimaryParagraph pbx-text-xs pbx-font-normal pbx-mt-2">
-                    By: {{ image.user.name }}
+                    {{ translate('By:') }} {{ image.user.name }}
                   </p>
                 </div>
               </div>
@@ -309,14 +312,14 @@ onMounted(async () => {
             >
               <p class="pbx-myPrimaryParagraph pbx-py-4 pbx-px-4">
                 <span v-if="getCurrentPageNumber === 1">
-                  We did not find any images. Make a new search.
+                  {{ translate('We did not find any images. Make a new search.') }}
                 </span>
                 <span
                   v-if="getCurrentPageNumber > 1"
                   @click="nextPage(1)"
                   class="pbx-myPrimaryLink"
                 >
-                  No results on current page. Navigate to First Page.
+                  {{ translate('No results on current page. Navigate to First Page.') }}
                 </span>
               </p>
             </div>
@@ -330,7 +333,7 @@ onMounted(async () => {
                 >
                   <span
                     class="!pbx-absolute !pbx-m-px !pbx-h-px !pbx-w-px !pbx-overflow-hidden !pbx-whitespace-nowrap !pbx-border-0 !pbx-p-0 !pbx-[clip:rect(0,0,0,0)]"
-                    >Loading...</span
+                    >{{ translate('Loading...') }}</span
                   >
                 </div>
               </div>
@@ -344,21 +347,21 @@ onMounted(async () => {
               <div class="md:pbx-px-3 pbx-px-2">
                 <div>
                   <p class="pbx-myPrimaryParagraph pbx-font-normal pbx-text-gray-900 pbx-pt-4">
-                    Information
+                    {{ translate('Information') }}
                   </p>
                   <dl
-                    class="pbx-mt-2 pbx-border-solid pbx-border-t pbx-border-solid pbx-border-b pbx-border-gray-200 pbx-divide-y pbx-divide-gray-200"
+                    class="pbx-mt-2 pbx-border-t pbx-border-b pbx-border-gray-200 pbx-divide-y pbx-divide-gray-200"
                   >
                     <div
                       class="pbx-py-3 pbx-flex pbx-justify-between pbx-text-sm pbx-font-normal pbx-items-center"
                     >
-                      <dt class="pbx-text-gray-500">From:</dt>
+                      <dt class="pbx-text-gray-500">{{ translate('From:') }}</dt>
                       <dd class="pbx-text-gray-900">Unsplash</dd>
                     </div>
                     <div
                       class="pbx-py-3 pbx-flex pbx-justify-between pbx-text-sm pbx-font-normal pbx-items-center"
                     >
-                      <dt class="pbx-text-gray-500">By:</dt>
+                      <dt class="pbx-text-gray-500">{{ translate('By:') }}</dt>
                       <dd class="pbx-text-gray-900">{{ getCurrentUser }}</dd>
                     </div>
                   </dl>
@@ -383,7 +386,7 @@ onMounted(async () => {
             class="pbx-mySecondaryButton"
             type="button"
           >
-            Close
+            {{ translate('Close') }}
           </button>
           <button
             v-if="getApplyImageToSelection && typeof getApplyImageToSelection === 'string'"
@@ -391,7 +394,7 @@ onMounted(async () => {
             class="pbx-myPrimaryButton"
             type="button"
           >
-            Select image
+            {{ translate(' Select image') }}
           </button>
         </div>
         <!-- Actions footer # end -->

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

@@ -1,6 +1,6 @@
 <script setup>
 import DynamicModalBuilder from '../../../Modals/DynamicModalBuilder.vue'
-import { computed, ref } from 'vue'
+import { ref } from 'vue'
 import { getPageBuilder } from '../../../../composables/builderInstance'
 import { useTranslations } from '../../../../composables/useTranslations'
 

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

@@ -7,6 +7,9 @@ import TextColorEditor from './TextColorEditor.vue'
 import BackgroundColorEditor from './BackgroundColorEditor.vue'
 import { sharedPageBuilderStore } from '../../../../stores/shared-store'
 import { getPageBuilder } from '../../../../composables/builderInstance'
+import { useTranslations } from '../../../../composables/useTranslations'
+
+const { translate } = useTranslations()
 const pageBuilderService = getPageBuilder()
 
 // Use shared store instance
@@ -53,7 +56,7 @@ const handleModalPreviewTiptap = function () {
 
   typeModal.value = 'success'
   gridColumnModal.value = 2
-  titleModal.value = 'Manage Content'
+  titleModal.value = translate('Manage Content')
   descriptionModal.value = null
   firstButtonModal.value = null
   secondButtonModal.value = null
@@ -76,8 +79,6 @@ const getBasePrimaryImage = computed(() => {
   return pageBuilderStateStore.getBasePrimaryImage
 })
 
-//
-// use media library
 const showMediaLibraryModal = ref(false)
 // modal content
 const titleMedia = ref('')
@@ -92,15 +93,13 @@ const handleAddImage = function () {
   // open modal to true
   showMediaLibraryModal.value = true
 
-  // set media library modal standards
-  titleMedia.value = `Media Library`
+  titleMedia.value = translate('Media Library')
   descriptionMedia.value = null
-  firstButtonMedia.value = 'Close'
-  secondButtonMedia.value = 'Select image'
+  firstButtonMedia.value = translate('Close')
+  secondButtonMedia.value = translate(' Select image')
 
   // handle click
   firstMediaButtonFunction.value = function () {
-    // close media library modal
     showMediaLibraryModal.value = false
   }
 }
@@ -151,7 +150,7 @@ const handleModalIframeSrc = function () {
   gridColumnModal.value = 2
   titleModal.value = 'Add video url'
   descriptionModal.value = null
-  firstButtonModal.value = 'Close'
+  firstButtonModal.value = translate('Close')
   secondButtonModal.value = 'Save'
   thirdButtonModal.value = null
 
@@ -343,7 +342,7 @@ const getRestoredElement = computed(() => {
         class="pbx-h-10 pbx-w-10 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0"
         @click="pageBuilderService.clearHtmlSelection()"
       >
-        <span class="material-symbols-outlined"> close </span>
+        <span class="material-symbols-outlined"> close</span>
       </div>
     </div>
   </div>

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

@@ -4,6 +4,9 @@ import MediaLibraryModal from '../../../Modals/MediaLibraryModal.vue'
 import { sharedPageBuilderStore } from '../../../../stores/shared-store'
 import { preloadImage } from '../../../../composables/preloadImage'
 import { delay } from '../../../../composables/delay'
+import { useTranslations } from '../../../../composables/useTranslations'
+
+const { translate } = useTranslations()
 
 // Use shared store instance
 const pageBuilderStateStore = sharedPageBuilderStore
@@ -11,7 +14,6 @@ const customMediaComponent = inject('CustomMediaComponent')
 
 const getIsLoadingImage = ref(false)
 
-// use media library
 const showMediaLibraryModal = ref(false)
 // modal content
 const titleMedia = ref('')
@@ -34,15 +36,13 @@ const handleAddImage = function () {
   // open modal to true
   showMediaLibraryModal.value = true
 
-  // set media library modal standards
-  titleMedia.value = `Media Library`
+  titleMedia.value = translate('Media Library')
   descriptionMedia.value = null
-  firstButtonMedia.value = 'Close'
-  secondButtonMedia.value = 'Select image'
+  firstButtonMedia.value = translate('Close')
+  secondButtonMedia.value = translate(' Select image')
 
   // handle click
   firstMediaButtonFunction.value = function () {
-    // close media library modal
     showMediaLibraryModal.value = false
   }
   //

package/src/Components/PageBuilder/ToolbarOption/ToolbarOption.vue

@@ -44,9 +44,9 @@ const handleDeleteComponentsFromDOM = function () {
   gridColumnModal.value = 2
   titleModal.value = translate('Remove all Components')
   descriptionModal.value = translate('Are you sure you want to remove all Components?')
-  firstButtonModal.value = 'Close'
+  firstButtonModal.value = translate('Close')
   secondButtonModal.value = null
-  thirdButtonModal.value = 'Delete'
+  thirdButtonModal.value = translate('Delete')
 
   // handle click
   firstModalButtonFunctionDynamicModalBuilder.value = function () {

package/src/Components/TipTap/TipTapInput.vue

@@ -113,7 +113,7 @@ const handleURL = function () {
   descriptionModal.value = translate(
     'Add a valid URL to transform the selected text into a clickable hyperlink that directs users to the specified web address.',
   )
-  firstButtonModal.value = 'Close'
+  firstButtonModal.value = translate('Close')
   secondButtonModal.value = urlEnteret.value ? 'Remove url' : null
   thirdButtonModal.value = translate('Save')
 

package/src/PageBuilder/PageBuilder.vue

@@ -297,12 +297,13 @@ const handleRestoreOriginalContent = async function () {
   typeModalRestore.value = 'success'
   showModalRestore.value = true
 
-  titleModalRestore.value = 'Do you want to reset this page?'
-  descriptionModalRestore.value =
-    'Are you sure you want to reset this page? This will overwrite your current changes.'
-  firstButtonRestore.value = 'Close'
+  titleModalRestore.value = translate('Do you want to reset this page?')
+  descriptionModalRestore.value = translate(
+    'Are you sure you want to reset this page? This will overwrite your current changes.',
+  )
+  firstButtonRestore.value = translate('Close')
   secondButtonRestore.value = null
-  thirdButtonRestore.value = 'Reset changes'
+  thirdButtonRestore.value = translate('Reset changes')
 
   firstModalButtonRestoreFunction.value = function () {
     showModalRestore.value = false
@@ -515,7 +516,7 @@ onMounted(async () => {
 
     <div
       id="pagebuilder-toolbar-area"
-      class="pbx-flex pbx-items-center pbx-justify-between pbx-bg-myPrimaryLightGrayColor 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-w-max pbx-w-full"
+      class="pbx-flex pbx-items-center pbx-justify-between pbx-bg-myPrimaryLightGrayColor 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"
     >
       <template
         v-if="
@@ -736,7 +737,7 @@ onMounted(async () => {
         </div>
         <!-- Options # Start -->
 
-        <!-- Close & Publish buttons start -->
+        <!-- Publish buttons start -->
         <template v-if="showPublishButton">
           <div class="pbx-flex-1 pbx-ml-2">
             <button
@@ -776,7 +777,7 @@ onMounted(async () => {
           </div>
         </template>
 
-        <!-- Close & Publish buttons end -->
+        <!-- Publish buttons end -->
 
         <template
           v-if="

package/src/locales/ar.json

@@ -97,5 +97,27 @@
   "Header 2": "عنوان 2",
   "Header 3": "عنوان 3",
   "List": "قائمة",
-  "Add a valid URL to transform the selected text into a clickable hyperlink that directs users to the specified web address.": "أضف عنوان URL صالحًا لتحويل النص المحدد إلى ارتباط تشعبي قابل للنقر يوجه المستخدمين إلى عنوان الويب المحدد."
+  "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": "إدارة المحتوى",
+  "Media Library": "مكتبة الوسائط",
+  "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": "بحث",
+  "Search...": "ابحث...",
+  "Landscape": "أفقي",
+  "Portrait": "عمودي",
+  "Squarish": "مربع الشكل",
+  "Total pages": "إجمالي الصفحات",
+  "Images": "صور",
+  "First page": "الصفحة الأولى",
+  "Prev": "السابق",
+  "Next": "التالي",
+  "By:": "بواسطة:",
+  "We did not find any images. Make a new search.": "لم نجد أي صور. قم ببحث جديد.",
+  "No results on current page. Navigate to First Page.": "لا توجد نتائج في الصفحة الحالية. انتقل إلى الصفحة الأولى.",
+  "Information": "معلومات",
+  "From:": "من:",
+  " Select image": " اختر صورة"
 }

package/src/locales/de.json

@@ -99,5 +99,27 @@
   "Header 2": "Überschrift 2",
   "Header 3": "Überschrift 3",
   "List": "Liste",
-  "Add a valid URL to transform the selected text into a clickable hyperlink that directs users to the specified web address.": "Fügen Sie eine gültige URL hinzu, um den ausgewählten Text in einen anklickbaren Hyperlink zu verwandeln, der Benutzer zur angegebenen Webadresse führt."
+  "Add a valid URL to transform the selected text into a clickable hyperlink that directs users to the specified web address.": "Fügen Sie eine gültige URL hinzu, um den ausgewählten Text in einen anklickbaren Hyperlink zu verwandeln, der Benutzer zur angegebenen Webadresse führt.",
+  "Select image": "Bild auswählen",
+  "Manage Content": "Inhalte verwalten",
+  "Media Library": "Medienbibliothek",
+  "Reset changes": "Änderungen zurücksetzen",
+  "Do you want to reset this page?": "Möchten Sie diese Seite zurücksetzen?",
+  "Are you sure you want to reset this page? This will overwrite your current changes.": "Sind Sie sicher, dass Sie diese Seite zurücksetzen möchten? Dadurch werden Ihre aktuellen Änderungen überschrieben.",
+  "Search": "Suche",
+  "Search...": "Suchen...",
+  "Landscape": "Querformat",
+  "Portrait": "Hochformat",
+  "Squarish": "Quadratisch",
+  "Total pages": "Gesamtseiten",
+  "Images": "Bilder",
+  "First page": "Erste Seite",
+  "Prev": "Zurück",
+  "Next": "Weiter",
+  "By:": "Von:",
+  "We did not find any images. Make a new search.": "Wir haben keine Bilder gefunden. Machen Sie eine neue Suche.",
+  "No results on current page. Navigate to First Page.": "Keine Ergebnisse auf der aktuellen Seite. Zur ersten Seite navigieren.",
+  "Information": "Informationen",
+  "From:": "Von:",
+  " Select image": " Bild auswählen"
 }