@myissue/vue-website-page-builder 3.3.83 → 3.3.85

package/src/PageBuilder/PageBuilder.vue

@@ -434,7 +434,7 @@ onMounted(async () => {
 
 <template>
   <div
-    class="pbx-font-sans pbx-text-black pbx-max-w-full pbx-border-solid pbx-border pbx-border-gray-400 pbx-inset-x-0 pbx-z-10 pbx-bg-white pbx-overflow-x-auto pbx-h-full"
+    class="pbx-flex pbx-flex-col pbx-font-sans pbx-text-black pbx-max-w-full pbx-border-solid pbx-border pbx-border-gray-400 pbx-inset-x-0 pbx-z-10 pbx-bg-white pbx-overflow-x-auto pbx-h-full"
   >
     <GlobalLoader
       v-if="(getIsLoadingGlobal && !openAppNotStartedModal) || isLoadingLang"
@@ -515,8 +515,8 @@ onMounted(async () => {
     </DynamicModalBuilder>
 
     <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"
+      id="pagebuilder-navbar"
+      class="pbx-w-full 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"
     >
       <template
         v-if="
@@ -532,20 +532,9 @@ onMounted(async () => {
               await pageBuilderService.clearHtmlSelection()
             }
           "
-          class="pbx-flex-1 pbx-flex pbx-justify-start pbx-py-2 pbx-min-h-20 pbx-max-h-20 pbx-w-full"
+          class="xl:pbx-flex pbx-hidden pbx-justify-start pbx-py-2"
         >
-          <div
-            @click="
-              async () => {
-                await pageBuilderService.clearHtmlSelection()
-              }
-            "
-            class="pbx-flex pbx-items-center pbx-justify-center"
-          >
-            <div id="pagebuilder-logo-main" class="pbx-flex pbx-items-center pbx-justify-center">
-              <img class="pbx-h-6" :src="getPageBuilderConfig.pageBuilderLogo.src" alt="Logo" />
-            </div>
-          </div>
+          <img class="pbx-h-6" :src="getPageBuilderConfig.pageBuilderLogo.src" alt="Logo" />
         </div>
       </template>
       <!-- Logo # end -->
@@ -556,7 +545,7 @@ onMounted(async () => {
             await pageBuilderService.clearHtmlSelection()
           }
         "
-        class="pbx-flex-1 pbx-flex pbx-justify-center pbx-items-center pbx-py-2 pbx-min-h-20 pbx-max-h-20 pbx-w-full"
+        class="pbx-flex-1 pbx-flex pbx-justify-center pbx-items-center pbx-py-2 pbx-w-full"
       >
         <div class="pbx-flex pbx-items-center pbx-justify-center">
           <!-- Save Start -->
@@ -603,7 +592,7 @@ onMounted(async () => {
             "
           >
             <button
-              class="pbx-mySecondaryButton pbx-h-6 pbx-flex pbx-gap-2 lg:mr-2"
+              class="pbx-mySecondaryButton pbx-h-6 pbx-flex pbx-gap-2 lg:pbx-mr-2 pbx-mr-2"
               @click.stop="
                 async () => {
                   await pageBuilderService.clearHtmlSelection()
@@ -635,6 +624,9 @@ onMounted(async () => {
               <div class="lg:pbx-block pbx-hidden">
                 <span> {{ translate('Reset Page') }} </span>
               </div>
+              <div class="lg:pbx-hidden pbx-block">
+                <span> {{ translate('Reset') }} </span>
+              </div>
             </button>
           </template>
           <!-- Restore End -->
@@ -647,7 +639,7 @@ onMounted(async () => {
             await pageBuilderService.clearHtmlSelection()
           }
         "
-        class="pbx-flex-1 pbx-flex pbx-justify-center pbx-items-center pbx-py-2 pbx-min-h-20 pbx-max-h-20 pbx-w-full"
+        class="pbx-flex-1 pbx-flex pbx-justify-center pbx-items-center pbx-py-2 pbx-w-full"
       >
         <div
           @click.self="
@@ -730,7 +722,7 @@ onMounted(async () => {
               await pageBuilderService.clearHtmlSelection()
             }
           "
-          class="pbx-flex pbx-items-center pbx-py-2 pbx-min-h-20 pbx-max-h-20 pbx-w-full"
+          class="pbx-flex pbx-items-center pbx-py-2 pbx-w-full"
           :class="[showCloseButton ? 'pbx-justify-between' : 'pbx-justify-end']"
         >
           <ToolbarOption></ToolbarOption>
@@ -761,21 +753,6 @@ onMounted(async () => {
           "
         >
         </template>
-        <template v-if="showCloseButton">
-          <div class="pbx-flex-1 pbx-ml-2">
-            <button
-              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-50 pbx-aspect-square hover:pbx-bg-myPrimaryLinkColor hover:pbx-text-white hover:pbx-fill-white focus-visible:pbx-ring-0"
-              @click="
-                async () => {
-                  closePageBuilder()
-                  await pageBuilderService.clearHtmlSelection()
-                }
-              "
-            >
-              <span class="material-symbols-outlined"> close </span>
-            </button>
-          </div>
-        </template>
 
         <!-- Publish buttons end -->
 
@@ -806,14 +783,14 @@ onMounted(async () => {
                     getPageBuilderConfig.userSettings.language.enable.length >= 1
                   "
                 >
-                  <template
+                  <div
                     v-for="lang in pageBuilderService
                       .availableLanguage()
                       .filter((l) => getPageBuilderConfig.userSettings.language.enable.includes(l))"
                     :key="lang"
                   >
                     <option :value="lang">{{ lang }}</option>
-                  </template>
+                  </div>
                 </template>
                 <template
                   v-if="
@@ -822,27 +799,43 @@ onMounted(async () => {
                       getPageBuilderConfig.userSettings.language.enable.length === 0)
                   "
                 >
-                  <template v-for="lang in pageBuilderService.availableLanguage()" :key="lang">
+                  <div v-for="lang in pageBuilderService.availableLanguage()" :key="lang">
                     <option :value="lang">{{ lang }}</option>
-                  </template>
+                  </div>
                 </template>
               </select>
             </div>
           </template>
         </template>
+        <template v-if="showCloseButton">
+          <div class="pbx-flex-1 pbx-ml-2">
+            <button
+              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-50 pbx-aspect-square hover:pbx-bg-myPrimaryLinkColor hover:pbx-text-white hover:pbx-fill-white focus-visible:pbx-ring-0"
+              @click="
+                async () => {
+                  closePageBuilder()
+                  await pageBuilderService.clearHtmlSelection()
+                }
+              "
+            >
+              <span class="material-symbols-outlined"> close </span>
+            </button>
+          </div>
+        </template>
       </div>
     </div>
 
     <!-- Top Layout Save And Reset Area - End -->
-    <div class="pbx-relative pbx-h-full pbx-flex pbx-pb-2 pbx-gap-2">
+    <div id="pagebuilder-main" class="pbx-relative pbx-h-full pbx-flex pbx-pb-2 pbx-gap-2">
+      <!-- Left menu -->
       <div
         @click.self="
           async () => {
             await pageBuilderService.clearHtmlSelection()
           }
         "
-        id="pagebuilder-left-area"
-        class="pbx-min-w-[3.5rem] pbx-pt-7 pbx-pb-2 pbx-ml-2 pbx-bg-myPrimaryLightGrayColor pbx-rounded-full pbx-shadow-sm"
+        id="pagebuilder-left-menu"
+        class="pbx-w-14 pbx-pt-7 pbx-pb-2 pbx-bg-myPrimaryLightGrayColor pbx-rounded-r-2xl pbx-shadow-sm"
       >
         <div class="pbx-mx-2 pbx-flex pbx-flex-col pbx-myPrimaryGap pbx-items-stretch">
           <div class="pbx-flex pbx-gap-2 pbx-items-center pbx-justify-center">
@@ -873,8 +866,8 @@ onMounted(async () => {
 
       <main
         ref="pbxToolBar"
-        class="pbx-font-sans pbx-p-1 pbx-flex pbx-flex-col pbx-grow pbx-rounded-tr-2xl pbx-rounded-tl-2xl pbx-border-solid pbx-border pbx-border-gray-200 pbx-items-stretch pbx-h-[100vh] pbx-text-black"
-        :class="{ 'pbx-mr-2': !getMenuRight, '': getMenuRight }"
+        class="pbx-w-full pbx-transition-all pbx-duration-300 pbx-font-sans pbx-p-1 pbx-flex pbx-flex-col pbx-grow pbx-rounded-tr-2xl pbx-rounded-tl-2xl pbx-border-solid pbx-border pbx-border-gray-200 pbx-items-stretch pbx-text-black pbx-h-[100vh]"
+        :class="{ '': !getMenuRight, '': getMenuRight }"
       >
         <div
           id="pbxEditToolbar"
@@ -910,50 +903,52 @@ onMounted(async () => {
         </div>
       </main>
 
-      <div
-        v-if="!getMenuRight"
-        @click.self="
-          async () => {
-            await pageBuilderService.clearHtmlSelection()
-          }
-        "
-        class="pbx-min-w-[3rem] pbx-pt-6 pbx-pb-2"
-      >
+      <transition name="slide-right" appear mode="out-in">
+        <aside
+          v-if="getMenuRight"
+          aria-label="menu"
+          id="pagebuilder-right-menu"
+          :class="{
+            'pbx-w-0 pbx-mr-0': !getMenuRight,
+            'pbx-w-80 pbx-bg-myPrimaryLightGrayColor pbx-items-stretch': getMenuRight,
+          }"
+          class="pbx-z-20 pbx-flex-shrink-0 pbx-overflow-hidden pbx-border-0 pbx-border-solid pbx-border-l-0 pbx-border-l-gray-600 pbx-rounded-l-2xl pbx-h-[100vh] pbx-pl-2"
+        >
+          <RightSidebarEditor @closeEditor="pageBuilderStateStore.setMenuRight(false)">
+          </RightSidebarEditor>
+        </aside>
         <div
+          v-else
           @click.self="
             async () => {
               await pageBuilderService.clearHtmlSelection()
             }
           "
-          class="pbx-flex pbx-flex-col pbx-items-center pbx-justify-center pbx-gap-2"
+          class="pbx-w-[10vh] pbx-bg-myPrimaryLightGrayColor pbx-pt-5 pbx-z-20 pbx-flex-shrink-0 pbx-overflow-hidden pbx-border-0 pbx-border-solid pbx-border-l-0 pbx-border-l-gray-600 pbx-rounded-l-2xl pbx-h-[100vh] pbx-pl-2 pbx-pr-2"
         >
-          <button
-            v-if="!getMenuRight"
-            @click="pageBuilderStateStore.setMenuRight(true)"
-            type="button"
-            class="pbx-mySecondaryButton pbx-px-2 pbx-text-xs"
+          <div
+            @click.self="
+              async () => {
+                await pageBuilderService.clearHtmlSelection()
+              }
+            "
+            class="pbx-flex pbx-flex-col pbx-items-center pbx-justify-center pbx-gap-2"
           >
-            <span> {{ translate('Styles') }} </span>
-          </button>
+            <button
+              v-if="!getMenuRight"
+              @click="pageBuilderStateStore.setMenuRight(true)"
+              type="button"
+              class="pbx-mySecondaryButton pbx-px-2 pbx-text-xs"
+            >
+              <span> {{ translate('Styles') }} </span>
+            </button>
+          </div>
         </div>
-      </div>
-
-      <aside
-        aria-label="Menu"
-        id="pagebuilder-right-area"
-        :class="{
-          'pbx-w-0 pbx-mr-0': !getMenuRight,
-          'pbx-w-80 pbx-mr-2 pbx-bg-myPrimaryLightGrayColor pbx-items-stretch': getMenuRight,
-        }"
-        class="pbx-duration-100 pbx-z-20 pbx-flex-shrink-0 pbx-overflow-hidden pbx-shadow-sm pbx-rounded-l-2xl pbx-h-[100vh]"
-      >
-        <RightSidebarEditor @closeEditor="pageBuilderStateStore.setMenuRight(false)">
-        </RightSidebarEditor>
-      </aside>
+      </transition>
     </div>
-
     <div
-      class="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 lg:pbx-mx-10"
+      id="pagebuilder-footer"
+      class="pbx-w-full 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"
     >
       <div
         @click="
@@ -983,18 +978,18 @@ onMounted(async () => {
 <style>
 #pagebuilder [element] {
   outline: rgba(255, 255, 255, 0) dashed 4px !important;
-  outline-offset: -2px !important;
+  outline-offset: -4px !important;
 }
 #pagebuilder [hovered] {
   outline: rgb(0, 140, 14, 1) dashed 4px !important;
-  outline-offset: -2px !important;
+  outline-offset: -4px !important;
 }
 
 #pagebuilder [selected] {
   position: relative;
 
   outline: rgb(185, 16, 16) dashed 4px !important;
-  outline-offset: -2px !important;
+  outline-offset: -4px !important;
 }
 
 #pagebuilder a {
@@ -1011,4 +1006,30 @@ onMounted(async () => {
 .sortable-ghost > * {
   width: 100%;
 }
+
+/* CSS for content inside page builder # start */
+#page-builder-editor .tiptap {
+  outline: none !important;
+  box-shadow: none !important;
+  background: #fff;
+  min-height: 25rem;
+  border-bottom: 1px solid #aaa;
+  padding: 0px 0px 10px 16px;
+  margin-bottom: 20px;
+  padding-bottom: 100px;
+}
+.slide-right-enter-from,
+.slide-right-leave-to {
+  transform: translateX(100%);
+}
+
+.slide-right-enter-to,
+.slide-right-leave-from {
+  transform: translateX(0%);
+}
+
+.slide-right-enter-active,
+.slide-right-leave-active {
+  transition: transform 0.1s ease;
+}
 </style>

package/src/composables/extractCleanHTMLFromPageBuilder.ts

@@ -1,4 +1,4 @@
-import type { PageBuilderConfig } from '@/types'
+import type { PageBuilderConfig } from '../types'
 
 export function extractCleanHTMLFromPageBuilder(
   pagebuilder: HTMLElement | null,

package/src/css/dev-global.css

@@ -2,15 +2,6 @@
 These styles affect all HTML elements (like input, button, h1, etc.) in the consuming app. */
 @tailwind base;
 
-.tailwind-pagination-package {
-  box-shadow: none !important;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  gap: 6px 0px;
-  justify-content: center;
-}
-
 .mobile-preview-frame {
   container-type: inline-size;
 }

package/src/css/style.css

@@ -318,7 +318,7 @@
     @apply focus:pbx-ring-2 focus:pbx-ring-myPrimaryLinkColor focus:pbx-ring-offset-2 focus:pbx-border focus:pbx-border-gray-200;
   }
   .pbx-myPrimaryInput {
-    @apply pbx-block pbx-pr-8 pbx-text-left pbx-bg-white pbx-w-full 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;
+    @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;
@@ -328,7 +328,7 @@
   }
 
   .pbx-myPrimaryInputError {
-    @apply pbx-mt-1 pbx-myPrimaryParagraph pbx-block pbx-font-normal pbx-text-myPrimaryErrorColor pbx-text-left;
+    @apply pbx-mt-1 pbx-myPrimaryParagraph pbx-block pbx-font-normal pbx-text-myPrimaryErrorColor pbx-text-left pbx-text-sm;
   }
 
   .pbx-myPrimaryHiddenInputField {
@@ -358,18 +358,6 @@
   }
 }
 
-/* CSS for content inside page builder # start */
-#page-builder-editor .tiptap {
-  outline: none !important;
-  box-shadow: none !important;
-  background: #fff;
-  min-height: 25rem;
-  border-bottom: 1px solid #aaa;
-  padding: 0px 0px 10px 16px;
-  margin-bottom: 20px;
-  padding-bottom: 100px;
-}
-
 #page-builder-editor ol,
 #page-builder-editor-editable-area ol,
 #page-builder-editor ul,
@@ -409,13 +397,10 @@
   height: 2.2rem;
 }
 
-/* Manage P, Link, H1, H2 # end */
-
 /* CSS for content inside page builder # start */
 #pagebuilder {
   position: relative;
   overflow-y: auto;
-  padding: 4px;
 }
 #pagebuilder a {
   pointer-events: none;
@@ -491,23 +476,3 @@
   list-style: disc !important;
   padding: 0rem;
 }
-
-#pagebuilder[data-global-selected] {
-  outline: 4px dashed #b91010 !important;
-  outline-offset: -2px !important;
-}
-
-.pbx-myPrimarySelec select {
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  background-color: #fff;
-  border: 1px solid #c4c4c4;
-  border-radius: 6px;
-  padding: 10px 40px 10px 15px;
-  cursor: pointer;
-  outline: none;
-  transition: border-color 0.3s ease;
-  background-repeat: no-repeat;
-  background-position: right 12px center;
-}

package/src/locales/ar.json

@@ -136,5 +136,30 @@
   "Header H3": "رأس H3",
   "YouTube Video": "فيديو يوتيوب",
   "Break Divider": "فاصل",
-  "Link": "رابط"
+  "Link": "رابط",
+  "Selected HTML": "HTML المحدد",
+  "Overview of Selected Element, Component, and Components. This section provides real-time updates based on your HTML selection.": "نظرة عامة على العنصر المحدد والمكون والمكونات. يوفر هذا القسم تحديثات في الوقت الفعلي بناءً على اختيار HTML الخاص بك.",
+  "Types": "أنواع",
+  "Element type:": "نوع العنصر:",
+  "Component type:": "نوع المكون:",
+  "Components:": "المكونات:",
+  "array": "مصفوفة",
+  "Content": "المحتوى",
+  "Element": "عنصر",
+  "Component": "مكون",
+  "Components added": "تمت إضافة المكونات",
+  "No Element selected": "لم يتم تحديد عنصر",
+  "Selected HTML:": "HTML المحدد:",
+  "Element src:": "مصدر العنصر:",
+  "Element classes:": "فئات العنصر:",
+  "No Component selected": "لم يتم تحديد مكون",
+  "ID:": "المعرف:",
+  "Title:": "العنوان:",
+  "HTML Code:": "كود HTML:",
+  "No Components added yet": "لم تتم إضافة مكونات بعد",
+  "All": "الكل",
+  "Image": "صورة",
+  "Image & Text": "صورة ونص",
+  "Four Square Images With Text": "أربع صور مربعة مع نص",
+  "Four Square Images": "أربع صور مربعة"
 }

package/src/locales/de.json

@@ -138,5 +138,30 @@
   "Header H3": "Überschrift H3",
   "YouTube Video": "YouTube-Video",
   "Break Divider": "Trennlinie",
-  "Link": "Link"
+  "Link": "Link",
+  "Selected HTML": "Ausgewähltes HTML",
+  "Overview of Selected Element, Component, and Components. This section provides real-time updates based on your HTML selection.": "Übersicht über ausgewähltes Element, Komponente und Komponenten. Dieser Abschnitt bietet Echtzeit-Updates basierend auf Ihrer HTML-Auswahl.",
+  "Types": "Typen",
+  "Element type:": "Elementtyp:",
+  "Component type:": "Komponententyp:",
+  "Components:": "Komponenten:",
+  "array": "Array",
+  "Content": "Inhalt",
+  "Element": "Element",
+  "Component": "Komponente",
+  "Components added": "Komponenten hinzugefügt",
+  "No Element selected": "Kein Element ausgewählt",
+  "Selected HTML:": "Ausgewähltes HTML:",
+  "Element src:": "Elementquelle:",
+  "Element classes:": "Elementklassen:",
+  "No Component selected": "Keine Komponente ausgewählt",
+  "ID:": "ID:",
+  "Title:": "Titel:",
+  "HTML Code:": "HTML-Code:",
+  "No Components added yet": "Noch keine Komponenten hinzugefügt",
+  "All": "Alle",
+  "Image": "Bild",
+  "Image & Text": "Bild & Text",
+  "Four Square Images With Text": "Vier quadratische Bilder mit Text",
+  "Four Square Images": "Vier quadratische Bilder"
 }

package/src/locales/en.json

@@ -129,7 +129,6 @@
   "Two Square Images With Text": "Two Square Images With Text",
   "Three Square Images": "Three Square Images",
   "Six Square Images Grid": "Six Square Images Grid",
-  "Three Vertical Images": "Three Vertical Images",
   "Four Square Images With Text": "Four Square Images With Text",
   "Three Square Images With Text": "Three Square Images With Text",
   "Three Vertical Images": "Three Vertical Images",
@@ -138,5 +137,28 @@
   "Header H3": "Header H3",
   "YouTube Video": "YouTube Video",
   "Break Divider": "Break Divider",
-  "Link": "Link"
+  "Selected HTML": "Selected HTML",
+  "Overview of Selected Element, Component, and Components. This section provides real-time updates based on your HTML selection.": "Overview of Selected Element, Component, and Components. This section provides real-time updates based on your HTML selection.",
+  "Types": "Types",
+  "Element type:": "Element type:",
+  "Component type:": "Component type:",
+  "Components:": "Components:",
+  "array": "array",
+  "Content": "Content",
+  "Element": "Element",
+  "Component": "Component",
+  "Components added": "Components added",
+  "No Element selected": "No Element selected",
+  "Selected HTML:": "Selected HTML:",
+  "Element src:": "Element src:",
+  "Element classes:": "Element classes:",
+  "No Component selected": "No Component selected",
+  "ID:": "ID:",
+  "Title:": "Title:",
+  "HTML Code:": "HTML Code:",
+  "No Components added yet": "No Components added yet",
+  "All": "All",
+  "Image": "Image",
+  "Image & Text": "Image & Text",
+  "Four Square Images": "Four Square Images"
 }

package/src/locales/es.json

@@ -138,5 +138,30 @@
   "Header H3": "Encabezado H3",
   "YouTube Video": "Video de YouTube",
   "Break Divider": "Divisor",
-  "Link": "Enlace"
+  "Link": "Enlace",
+  "Selected HTML": "HTML seleccionado",
+  "Overview of Selected Element, Component, and Components. This section provides real-time updates based on your HTML selection.": "Descripción general del elemento seleccionado, componente y componentes. Esta sección proporciona actualizaciones en tiempo real basadas en su selección de HTML.",
+  "Types": "Tipos",
+  "Element type:": "Tipo de elemento:",
+  "Component type:": "Tipo de componente:",
+  "Components:": "Componentes:",
+  "array": "matriz",
+  "Content": "Contenido",
+  "Element": "Elemento",
+  "Component": "Componente",
+  "Components added": "Componentes añadidos",
+  "No Element selected": "Ningún elemento seleccionado",
+  "Selected HTML:": "HTML seleccionado:",
+  "Element src:": "Fuente del elemento:",
+  "Element classes:": "Clases de elemento:",
+  "No Component selected": "Ningún componente seleccionado",
+  "ID:": "ID:",
+  "Title:": "Título:",
+  "HTML Code:": "Código HTML:",
+  "No Components added yet": "Aún no se han añadido componentes",
+  "All": "Todos",
+  "Image": "Imagen",
+  "Image & Text": "Imagen y texto",
+  "Four Square Images With Text": "Cuatro imágenes cuadradas con texto",
+  "Four Square Images": "Cuatro imágenes cuadradas"
 }

package/src/locales/fr.json

@@ -138,5 +138,30 @@
   "Header H3": "En-tête H3",
   "YouTube Video": "Vidéo YouTube",
   "Break Divider": "Séparateur",
-  "Link": "Lien"
+  "Link": "Lien",
+  "Selected HTML": "HTML sélectionné",
+  "Overview of Selected Element, Component, and Components. This section provides real-time updates based on your HTML selection.": "Aperçu de l'élément sélectionné, du composant et des composants. Cette section fournit des mises à jour en temps réel en fonction de votre sélection HTML.",
+  "Types": "Types",
+  "Element type:": "Type d'élément:",
+  "Component type:": "Type de composant:",
+  "Components:": "Composants:",
+  "array": "tableau",
+  "Content": "Contenu",
+  "Element": "Élément",
+  "Component": "Composant",
+  "Components added": "Composants ajoutés",
+  "No Element selected": "Aucun élément sélectionné",
+  "Selected HTML:": "HTML sélectionné:",
+  "Element src:": "Source de l'élément:",
+  "Element classes:": "Classes d'élément:",
+  "No Component selected": "Aucun composant sélectionné",
+  "ID:": "ID:",
+  "Title:": "Titre:",
+  "HTML Code:": "Code HTML:",
+  "No Components added yet": "Aucun composant ajouté pour le moment",
+  "All": "Tous",
+  "Image": "Image",
+  "Image & Text": "Image et texte",
+  "Four Square Images With Text": "Quatre images carrées avec texte",
+  "Four Square Images": "Quatre images carrées"
 }

package/src/locales/hi.json

@@ -138,5 +138,30 @@
   "YouTube Video": "यूट्यूब वीडियो",
   "Break Divider": "विभाजक",
   "Link": "लिंक",
-  "Two Square Images With Text": "दो वर्ग छवियां और पाठ"
+  "Two Square Images With Text": "दो वर्ग छवियां और पाठ",
+  "Selected HTML": "चयनित HTML",
+  "Overview of Selected Element, Component, and Components. This section provides real-time updates based on your HTML selection.": "चयनित तत्व, घटक और घटकों का अवलोकन। यह अनुभाग आपके HTML चयन के आधार पर वास्तविक समय अपडेट प्रदान करता है।",
+  "Types": "प्रकार",
+  "Element type:": "तत्व प्रकार:",
+  "Component type:": "घटक प्रकार:",
+  "Components:": "घटक:",
+  "array": "सरणी",
+  "Content": "सामग्री",
+  "Element": "तत्व",
+  "Component": "घटक",
+  "Components added": "घटक जोड़े गए",
+  "No Element selected": "कोई तत्व चयनित नहीं",
+  "Selected HTML:": "चयनित HTML:",
+  "Element src:": "तत्व स्रोत:",
+  "Element classes:": "तत्व वर्ग:",
+  "No Component selected": "कोई घटक चयनित नहीं",
+  "ID:": "आईडी:",
+  "Title:": "शीर्षक:",
+  "HTML Code:": "HTML कोड:",
+  "No Components added yet": "अभी तक कोई घटक नहीं जोड़ा गया",
+  "All": "सभी",
+  "Image": "छवि",
+  "Image & Text": "छवि और पाठ",
+  "Four Square Images With Text": "चार वर्गाकार चित्र पाठ के साथ",
+  "Four Square Images": "चार वर्गाकार छवियाँ"
 }

package/src/locales/ja.json

@@ -137,5 +137,30 @@
   "Header H3": "ヘッダー H3",
   "YouTube Video": "YouTube ビデオ",
   "Break Divider": "区切り",
-  "Two Square Images With Text": "テキスト付き正方形の画像2枚"
+  "Two Square Images With Text": "テキスト付き正方形の画像2枚",
+  "Selected HTML": "選択されたHTML",
+  "Overview of Selected Element, Component, and Components. This section provides real-time updates based on your HTML selection.": "選択された要素、コンポーネント、およびコンポーネントの概要。このセクションは、HTML選択に基づいてリアルタイムの更新を提供します。",
+  "Types": "タイプ",
+  "Element type:": "要素タイプ:",
+  "Component type:": "コンポーネントタイプ:",
+  "Components:": "コンポーネント:",
+  "array": "配列",
+  "Content": "コンテンツ",
+  "Element": "要素",
+  "Component": "コンポーネント",
+  "Components added": "追加されたコンポーネント",
+  "No Element selected": "選択された要素はありません",
+  "Selected HTML:": "選択されたHTML:",
+  "Element src:": "要素ソース:",
+  "Element classes:": "要素クラス:",
+  "No Component selected": "選択されたコンポーネントはありません",
+  "ID:": "ID:",
+  "Title:": "タイトル:",
+  "HTML Code:": "HTMLコード:",
+  "No Components added yet": "まだコンポーネントが追加されていません",
+  "All": "すべて",
+  "Image": "画像",
+  "Image & Text": "画像とテキスト",
+  "Four Square Images With Text": "テキスト付きの4つの正方形の画像",
+  "Four Square Images": "4つの正方形の画像"
 }