fix: editor

bo/bun.lock

@@ -1,25 +1,25 @@
 {
   "lockfileVersion": 1,
-  "configVersion": 0,
   "workspaces": {
     "": {
       "name": "bo",
       "dependencies": {
-        "@nuxt/ui": "^4.5.0",
+        "@nuxt/ui": "^4.6.0",
-        "@tailwindcss/vite": "^4.2.0",
+        "@tailwindcss/vite": "^4.2.2",
         "chart.js": "^4.5.1",
         "pinia": "^3.0.4",
-        "tailwindcss": "^4.2.0",
+        "reka-ui": "^2.9.3",
+        "tailwindcss": "^4.2.2",
         "vue": "beta",
         "vue-chartjs": "^5.3.3",
-        "vue-i18n": "11",
+        "vue-i18n": "^11.3.0",
-        "vue-router": "^5.0.2",
+        "vue-router": "^5.0.4",
       },
       "devDependencies": {
         "@tsconfig/node24": "^24.0.4",
-        "@types/node": "^24.10.13",
+        "@types/node": "^24.12.0",
-        "@vitejs/plugin-vue": "^6.0.4",
+        "@vitejs/plugin-vue": "^6.0.5",
-        "@vue/eslint-config-typescript": "^14.6.0",
+        "@vue/eslint-config-typescript": "^14.7.0",
         "@vue/tsconfig": "^0.8.1",
         "jiti": "^2.6.1",
         "npm-run-all2": "^8.0.4",
@@ -27,8 +27,8 @@
         "prettier": "3.8.1",
         "typescript": "~5.9.3",
         "vite": "beta",
-        "vite-plugin-vue-devtools": "^8.0.6",
+        "vite-plugin-vue-devtools": "^8.1.1",
-        "vue-tsc": "^3.2.4",
+        "vue-tsc": "^3.2.6",
       },
     },
   },
@@ -1012,7 +1012,7 @@
 
     "regexp-tree": ["regexp-tree@0.1.27", "", { "bin": { "regexp-tree": "bin/regexp-tree" } }, "sha512-iETxpjK6YoRWJG5o6hXLwvjYAoW+FEZn9os0PD/b6AP6xQwsa/Y7lCVgIixBbUPMfhu+i2LtdeAqVTgGlQarfA=="],
 
-    "reka-ui": ["reka-ui@2.9.2", "", { "dependencies": { "@floating-ui/dom": "^1.6.13", "@floating-ui/vue": "^1.1.6", "@internationalized/date": "^3.5.0", "@internationalized/number": "^3.5.0", "@tanstack/vue-virtual": "^3.12.0", "@vueuse/core": "^14.1.0", "@vueuse/shared": "^14.1.0", "aria-hidden": "^1.2.4", "defu": "^6.1.4", "ohash": "^2.0.11" }, "peerDependencies": { "vue": ">= 3.4.0" } }, "sha512-/t4e6y1hcG+uDuRfpg6tbMz3uUEvRzNco6NeYTufoJeUghy5Iosxos5YL/p+ieAsid84sdMX9OrgDqpEuCJhBw=="],
+    "reka-ui": ["reka-ui@2.9.3", "", { "dependencies": { "@floating-ui/dom": "^1.6.13", "@floating-ui/vue": "^1.1.6", "@internationalized/date": "^3.5.0", "@internationalized/number": "^3.5.0", "@tanstack/vue-virtual": "^3.12.0", "@vueuse/core": "^14.1.0", "@vueuse/shared": "^14.1.0", "aria-hidden": "^1.2.4", "defu": "^6.1.4", "ohash": "^2.0.11" }, "peerDependencies": { "vue": ">= 3.4.0" } }, "sha512-C9lCVxsSC7uYD0Nbgik1+14FNndHNprZmf0zGQt0ZDYIt5KxXV3zD0hEqNcfRUsEEJvVmoRsUkJnASBVBeaaUw=="],
 
     "reusify": ["reusify@1.1.0", "", {}, "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw=="],
 
@@ -1186,6 +1186,8 @@
 
     "@nuxt/schema/std-env": ["std-env@4.0.0", "", {}, "sha512-zUMPtQ/HBY3/50VbpkupYHbRroTRZJPRLvreamgErJVys0ceuzMkD44J/QjqhHjOzK42GQ3QZIeFG1OYfOtKqQ=="],
 
+    "@nuxt/ui/reka-ui": ["reka-ui@2.9.2", "", { "dependencies": { "@floating-ui/dom": "^1.6.13", "@floating-ui/vue": "^1.1.6", "@internationalized/date": "^3.5.0", "@internationalized/number": "^3.5.0", "@tanstack/vue-virtual": "^3.12.0", "@vueuse/core": "^14.1.0", "@vueuse/shared": "^14.1.0", "aria-hidden": "^1.2.4", "defu": "^6.1.4", "ohash": "^2.0.11" }, "peerDependencies": { "vue": ">= 3.4.0" } }, "sha512-/t4e6y1hcG+uDuRfpg6tbMz3uUEvRzNco6NeYTufoJeUghy5Iosxos5YL/p+ieAsid84sdMX9OrgDqpEuCJhBw=="],
+
     "@nuxtjs/color-mode/@nuxt/kit": ["@nuxt/kit@3.21.2", "", { "dependencies": { "c12": "^3.3.3", "consola": "^3.4.2", "defu": "^6.1.4", "destr": "^2.0.5", "errx": "^0.1.0", "exsolve": "^1.0.8", "ignore": "^7.0.5", "jiti": "^2.6.1", "klona": "^2.0.6", "knitwork": "^1.3.0", "mlly": "^1.8.1", "ohash": "^2.0.11", "pathe": "^2.0.3", "pkg-types": "^2.3.0", "rc9": "^3.0.0", "scule": "^1.3.0", "semver": "^7.7.4", "tinyglobby": "^0.2.15", "ufo": "^1.6.3", "unctx": "^2.5.0", "untyped": "^2.0.0" } }, "sha512-Bd6m6mrDrqpBEbX+g0rc66/ALd1sxlgdx5nfK9MAYO0yKLTOSK7McSYz1KcOYn3LQFCXOWfvXwaqih/b+REI1g=="],
 
     "@nuxtjs/color-mode/pathe": ["pathe@1.1.2", "", {}, "sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ=="],
@@ -1254,6 +1256,8 @@
 
     "vaul-vue/@vueuse/core": ["@vueuse/core@10.11.1", "", { "dependencies": { "@types/web-bluetooth": "^0.0.20", "@vueuse/metadata": "10.11.1", "@vueuse/shared": "10.11.1", "vue-demi": ">=0.14.8" } }, "sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww=="],
 
+    "vaul-vue/reka-ui": ["reka-ui@2.9.2", "", { "dependencies": { "@floating-ui/dom": "^1.6.13", "@floating-ui/vue": "^1.1.6", "@internationalized/date": "^3.5.0", "@internationalized/number": "^3.5.0", "@tanstack/vue-virtual": "^3.12.0", "@vueuse/core": "^14.1.0", "@vueuse/shared": "^14.1.0", "aria-hidden": "^1.2.4", "defu": "^6.1.4", "ohash": "^2.0.11" }, "peerDependencies": { "vue": ">= 3.4.0" } }, "sha512-/t4e6y1hcG+uDuRfpg6tbMz3uUEvRzNco6NeYTufoJeUghy5Iosxos5YL/p+ieAsid84sdMX9OrgDqpEuCJhBw=="],
+
     "vue-i18n/@vue/devtools-api": ["@vue/devtools-api@6.6.4", "", {}, "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g=="],
 
     "vue-router/@vue/devtools-api": ["@vue/devtools-api@8.1.1", "", { "dependencies": { "@vue/devtools-kit": "^8.1.1" } }, "sha512-bsDMJ07b3GN1puVwJb/fyFnj/U2imyswK5UQVLZwVl7O05jDrt6BHxeG5XffmOOdasOj/bOmIjxJvGPxU7pcqw=="],
@@ -1283,5 +1287,7 @@
     "vaul-vue/@vueuse/core/@vueuse/metadata": ["@vueuse/metadata@10.11.1", "", {}, "sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw=="],
 
     "vaul-vue/@vueuse/core/@vueuse/shared": ["@vueuse/shared@10.11.1", "", { "dependencies": { "vue-demi": ">=0.14.8" } }, "sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA=="],
+
+    "vaul-vue/reka-ui/@vueuse/core": ["@vueuse/core@14.2.1", "", { "dependencies": { "@types/web-bluetooth": "^0.0.21", "@vueuse/metadata": "14.2.1", "@vueuse/shared": "14.2.1" }, "peerDependencies": { "vue": "^3.5.0" } }, "sha512-3vwDzV+GDUNpdegRY6kzpLm4Igptq+GA0QkJ3W61Iv27YWwW/ufSlOfgQIpN6FZRMG0mkaz4gglJRtq5SeJyIQ=="],
   }
 }

bo/components.d.ts

@@ -46,6 +46,8 @@ declare module 'vue' {
     UCheckbox: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/Checkbox.vue')['default']
     UDrawer: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/Drawer.vue')['default']
     UDropdownMenu: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/DropdownMenu.vue')['default']
+    UEditor: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/Editor.vue')['default']
+    UEditorToolbar: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/EditorToolbar.vue')['default']
     UForm: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/Form.vue')['default']
     UFormField: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/FormField.vue')['default']
     UIcon: typeof import('./node_modules/@nuxt/ui/dist/runtime/vue/components/Icon.vue')['default']

bo/package.json

@@ -17,6 +17,7 @@
     "@tailwindcss/vite": "^4.2.2",
     "chart.js": "^4.5.1",
     "pinia": "^3.0.4",
+    "reka-ui": "^2.9.3",
     "tailwindcss": "^4.2.2",
     "vue": "beta",
     "vue-chartjs": "^5.3.3",

bo/src/App.vue

@@ -1,10 +1,13 @@
 <script setup lang="ts">
+import { TooltipProvider } from 'reka-ui'
 import { RouterView } from 'vue-router'
 </script>
 
 <template>
   <Suspense>
+    <TooltipProvider>
       <RouterView />
+    </TooltipProvider>
   </Suspense>
 </template>
 

bo/src/assets/main.css

@@ -14,7 +14,6 @@ body {
 }
 
 @theme {
-  --main-light: #FFFEFB;
   --second-light: #F5F6FA;
 
   --main-dark: #212121;

bo/src/components/admin/PageProducts.vue

@@ -1,9 +1,11 @@
 <template>
     <component :is="Default || 'div'">
-        <div class="flex gap-10">
+        <div class="flex flex-col md:flex-row gap-10">
             <CategoryMenu />
             <div class="w-full flex flex-col items-center gap-4">
-                <UTable :data="productsList" :columns="columns" class="flex-1 w-full" />
+                <UTable :data="productsList" :columns="columns" class="flex-1 w-full" :ui="{
+                    root : 'max-w-100wv overflow-auto!'
+                }" />
                 <UPagination v-model:page="page" :total="total" :items-per-page="perPage" />
             </div>
         </div>

bo/src/components/admin/ProductDetailView.vue

@@ -6,49 +6,65 @@
         Back to products</p>
     </div>
     <div class="container mx-auto ">
-      <div
+      <div class=" gap-4 mb-6 p-4 border-b border-(--border-light)">
-        class=" gap-4 mb-6 bg-(--second-light) dark:bg-(--main-dark) border border-(--border-light) dark:border-(--border-dark) p-4 rounded-md">
+        <div class="flex items-center justify-between">
-        <div v-if="!isShowProductView" class="flex items-center justify-between">
           <div class="flex flex-col items-center gap-3" v-if="!isTranslations">
-            <p class="light:text-(--accent-green-light) dark:text-(--accent-green-dark) text-md whitespace-nowrap">
+            <USelectMenu v-model="toLangId" :items="langs" value-key="id"
-              Translate from Polish to :</p>
-            <USelectMenu v-model="toLangId" :items="availableLangs" value-key="id" label-key="name"
               class="w-48 bg-(--main-light) dark:bg-(--black) rounded-md shadow-sm" :searchInput="false">
               <template #default>
-                <div class="flex items-center gap-2">
+                <div class="flex flex-col items-start leading-tight">
-                  <div class="flex flex-col leading-tight items-start">
                   <span class="text-xs text-gray-400">
-                      Select language
+                    Selected language
                   </span>
                   <span class="font-medium dark:text-white text-black">
-                      {{availableLangs.find(l => l.id === toLangId)?.name || 'Select language'}}
+                    {{langs.find(l => l.id === toLangId)?.name || 'Select language'}}
                   </span>
                 </div>
-                </div>
               </template>
 
               <template #item-leading="{ item }">
-                <div class="flex items-center gap-2">
+                <div class="flex items-center gap-2 cursor-pointer">
-                  <span>{{ item.flag }}</span>
+                  <span class="text-lg">{{ item.flag }}</span>
-                  <span class="font-medium dark:text-white text-black">{{ item.name }}</span>
+                  <span class="font-medium dark:text-white text-black">
+                    {{ item.name }}
+                  </span>
                 </div>
               </template>
             </USelectMenu>
           </div>
 
-          <div class="flex gap-7">
+          <div v-if="toLangId !== settingStore.shopDefaultLanguage && !isTranslations" class="flex gap-7">
+            <UButton @click="translateToSelectedLanguage" color="info" :loading="translating">
+              Translate from Polish to {{langs.find(l => l.id === toLangId)?.name}}
+            </UButton>
+          </div>
+          <div v-if="isTranslations" class="flex gap-3 w-full justify-end">
+            <UButton @click="() => {
+              toLangId = settingStore.shopDefaultLanguage
+              isTranslations = false
+            }" color="info" variant="outline">
+              Cancel and back to Polish
+            </UButton>
+            <UButton color="info" @click="productStore.saveProductDescription(productID, toLangId)">
+              Save translations
+            </UButton>
+          </div>
+
+
+          <!-- <div class="flex gap-7">
+            <div v-if="isTranslations === false">
               <UButton @click="() => {
                 fetchForLanguage(toLangId)
                 isShowProductView = true
-            }" v-if="isTranslations === false" class="text-(--accent-blue-light) dark:text-(--accent-blue-dark)"
+              }" class="text-(--accent-blue-light) dark:text-(--accent-blue-dark)"
                 color="neutral" variant="outline">
                 <p class="dark:text-white"> Show product</p>
               </UButton>
               <UButton @click="translateToSelectedLanguage" color="primary" :loading="translating"
-              v-if="isTranslations === false"
                 class="text-white bg-(--accent-blue-light) dark:bg-(--accent-blue-dark) flex items-center! justify-center! px-12">
                 Translate
               </UButton>
+            </div>
             <div v-else class="flex gap-3">
               <UButton @click="() => {
                 toLangId = settingStore.shopDefaultLanguage
@@ -61,23 +77,16 @@
                 Save
               </UButton>
             </div>
-          </div>
+          </div> -->
-        </div>
-        <div v-else>
-          <UButton @click="isShowProductView = false" color="primary"
-            class="text-white bg-(--accent-blue-light) dark:bg-(--accent-blue-dark) gap-2">
-            <UIcon name="line-md:arrow-left" class="" />
-            Back
-          </UButton>
         </div>
       </div>
 
-      <div v-if="translating" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+      <!-- <div v-if="translating" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
         <div class="flex flex-col items-center gap-4 p-8 bg-(--main-light) dark:bg-(--main-dark) rounded-lg shadow-xl">
           <UIcon name="svg-spinners:ring-resize" class="text-4xl text-primary" />
           <p class="text-lg font-medium dark:text-white text-black">Translating...</p>
         </div>
-      </div>
+      </div> -->
 
       <div v-if="productStore.loading" class="flex items-center justify-center py-20">
         <UIcon name="svg-spinners:ring-resize" class="text-4xl text-primary" />
@@ -86,7 +95,8 @@
         <p class="text-red-500">{{ productStore.error }}</p>
       </div>
 
-      <div v-else-if="productStore.productDescription" class="flex items-start gap-30">
+      <div v-else-if="productStore.productDescription" class="">
+        <div class="flex items-start gap-30">
           <div class="w-80 h-80 bg-(--second-light) dark:bg-gray-700 rounded-lg flex items-center justify-center">
             <span class="text-gray-500 dark:text-gray-400">Product Image</span>
           </div>
@@ -115,7 +125,7 @@
           </div>
         </div>
 
-      <div v-if="productStore.productDescription" class="mt-16">
+        <div class="mt-16">
           <div class="flex gap-4 my-6">
             <UButton @click="activeTab = 'description'"
               :class="['cursor-pointer', activeTab === 'description' ? 'bg-blue-500 text-white' : '']" color="neutral"
@@ -130,44 +140,35 @@
             </UButton>
           </div>
 
-        <div v-if="activeTab === 'usage'"
+          <div
             class="px-8 py-4 border border-(--border-light) dark:border-(--border-dark) rounded-md bg-(--second-light) dark:bg-(--main-dark)">
-
+            <div v-if="!isTranslations" class="flex justify-end items-center gap-3 mb-4">
-          <div class="flex justify-end items-center gap-3 mb-4">
+              <UButton v-if="!isEditing" @click="activeTab === 'usage' ? enableEdit() : enableDescriptionEdit()"
-            <UButton v-if="!isEditing" @click="enableEdit"
                 class="flex items-center gap-2 m-2 cursor-pointer bg-(--accent-blue-light)! dark:bg-(--accent-blue-dark)!">
                 <p class="text-white">Change Text</p>
                 <UIcon name="material-symbols-light:stylus-note-sharp" class="text-[30px] text-white!" />
               </UButton>
-            <UButton v-if="isEditing" @click="saveText" color="neutral" variant="outline" class="p-2.5 cursor-pointer">
+              <UButton v-if="isEditing" @click="activeTab === 'usage' ? saveText : saveDescription" color="neutral"
+                variant="outline" class="p-2.5 cursor-pointer">
                 <p class="dark:text-white text-black">Save the edited text</p>
               </UButton>
-            <UButton v-if="isEditing" @click="cancelEdit" color="neutral" variant="outline"
+              <UButton v-if="isEditing" @click="activeTab === 'usage' ? cancelEdit : cancelDescriptionEdit"
-              class="p-2.5 cursor-pointer">
+                color="neutral" variant="outline" class="p-2.5 cursor-pointer">
                 Cancel
               </UButton>
             </div>
-          <p ref="usageRef" v-html="productStore.productDescription.usage"
+            <UEditor v-slot="{ editor }" v-model="productStore.productDescription.description" content-type="html"
+              :ui="{ base: 'p-8 sm:px-16' }" class="w-full min-h-74">
+              <UEditorToolbar :editor="editor" :items="toolbarItems" class="sm:px-8">
+                <template #link>
+                  <EditorLinkPopover :editor="editor" auto-open />
+                </template>
+              </UEditorToolbar>
+            </UEditor>
+            <!-- <p v-if="activeTab === 'usage'" ref="usageRef" v-html="productStore.productDescription.usage"
               class="flex flex-col justify-center w-full text-start dark:text-white! text-black!"></p>
-        </div>
+            <div v-else ref="descriptionRef" v-html="productStore.productDescription.description"
-
+              class="flex flex-col justify-center dark:text-white text-black"></div> -->
-        <div v-if="activeTab === 'description'"
-          class="px-8 py-4 border border-(--border-light) dark:border-(--border-dark) rounded-md bg-(--second-light) dark:bg-(--main-dark)">
-          <div class="flex items-center justify-end gap-3 mb-4">
-            <UButton v-if="!descriptionEdit.isEditing.value" @click="enableDescriptionEdit"
-              class="flex items-center gap-2 m-2 cursor-pointer bg-(--accent-blue-light)! dark:bg-(--accent-blue-dark)!">
-              <p class="text-white">Change Text</p>
-              <UIcon name="material-symbols-light:stylus-note-sharp" class="text-[30px] text-white!" />
-            </UButton>
-            <UButton v-if="descriptionEdit.isEditing.value" @click="saveDescription" color="neutral" variant="outline"
-              class="p-2.5 cursor-pointer">
-              <p class="dark:text-white text-black ">Save the edited text</p>
-            </UButton>
-            <UButton v-if="descriptionEdit.isEditing.value" @click="cancelDescriptionEdit" color="neutral"
-              variant="outline" class="p-2.5 cursor-pointer">Cancel</UButton>
-          </div>
-          <div ref="descriptionRef" v-html="productStore.productDescription.description"
-            class="flex flex-col justify-center dark:text-white text-black">
           </div>
         </div>
       </div>
@@ -181,10 +182,141 @@ import Default from '@/layouts/default.vue';
 import { langs } from '@/router/langs';
 import { useProductStore } from '@/stores/product';
 import { useSettingsStore } from '@/stores/settings';
-import { onMounted, ref } from 'vue';
+import type { EditorToolbarItem } from '@nuxt/ui';
-import { computed } from 'vue';
+import { onMounted, ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
+const toolbarItems: EditorToolbarItem[][] = [
+  // History controls
+  [{
+    kind: 'undo',
+    icon: 'i-lucide-undo',
+    tooltip: { text: 'Undo' }
+  }, {
+    kind: 'redo',
+    icon: 'i-lucide-redo',
+    tooltip: { text: 'Redo' }
+  }],
+  // Block types
+  [{
+    icon: 'i-lucide-heading',
+    tooltip: { text: 'Headings' },
+    content: {
+      align: 'start'
+    },
+    items: [{
+      kind: 'heading',
+      level: 1,
+      icon: 'i-lucide-heading-1',
+      label: 'Heading 1'
+    }, {
+      kind: 'heading',
+      level: 2,
+      icon: 'i-lucide-heading-2',
+      label: 'Heading 2'
+    }, {
+      kind: 'heading',
+      level: 3,
+      icon: 'i-lucide-heading-3',
+      label: 'Heading 3'
+    }, {
+      kind: 'heading',
+      level: 4,
+      icon: 'i-lucide-heading-4',
+      label: 'Heading 4'
+    }]
+  }, {
+    icon: 'i-lucide-list',
+    tooltip: { text: 'Lists' },
+    content: {
+      align: 'start'
+    },
+    items: [{
+      kind: 'bulletList',
+      icon: 'i-lucide-list',
+      label: 'Bullet List'
+    }, {
+      kind: 'orderedList',
+      icon: 'i-lucide-list-ordered',
+      label: 'Ordered List'
+    }]
+  }, {
+    kind: 'blockquote',
+    icon: 'i-lucide-text-quote',
+    tooltip: { text: 'Blockquote' }
+  }, {
+    kind: 'codeBlock',
+    icon: 'i-lucide-square-code',
+    tooltip: { text: 'Code Block' }
+  }, {
+    kind: 'horizontalRule',
+    icon: 'i-lucide-separator-horizontal',
+    tooltip: { text: 'Horizontal Rule' }
+  }],
+  // Text formatting
+  [{
+    kind: 'mark',
+    mark: 'bold',
+    icon: 'i-lucide-bold',
+    tooltip: { text: 'Bold' }
+  }, {
+    kind: 'mark',
+    mark: 'italic',
+    icon: 'i-lucide-italic',
+    tooltip: { text: 'Italic' }
+  }, {
+    kind: 'mark',
+    mark: 'underline',
+    icon: 'i-lucide-underline',
+    tooltip: { text: 'Underline' }
+  }, {
+    kind: 'mark',
+    mark: 'strike',
+    icon: 'i-lucide-strikethrough',
+    tooltip: { text: 'Strikethrough' }
+  }, {
+    kind: 'mark',
+    mark: 'code',
+    icon: 'i-lucide-code',
+    tooltip: { text: 'Code' }
+  }],
+  // Link
+  [{
+    kind: 'link',
+    icon: 'i-lucide-link',
+    tooltip: { text: 'Link' }
+  }],
+  // Text alignment
+  [{
+    icon: 'i-lucide-align-justify',
+    tooltip: { text: 'Text Align' },
+    content: {
+      align: 'end'
+    },
+    items: [{
+      kind: 'textAlign',
+      align: 'left',
+      icon: 'i-lucide-align-left',
+      label: 'Align Left'
+    }, {
+      kind: 'textAlign',
+      align: 'center',
+      icon: 'i-lucide-align-center',
+      label: 'Align Center'
+    }, {
+      kind: 'textAlign',
+      align: 'right',
+      icon: 'i-lucide-align-right',
+      label: 'Align Right'
+    }, {
+      kind: 'textAlign',
+      align: 'justify',
+      icon: 'i-lucide-align-justify',
+      label: 'Align Justify'
+    }]
+  }]
+]
+
 const router = useRouter()
 function backFromProduct() {
   let path = localStorage.getItem('back_from_product')
@@ -210,7 +342,7 @@ const settingStore = useSettingsStore()
 const productStore = useProductStore()
 const isTranslations = ref(false)
 
-const toLangId = ref(null)
+const toLangId = ref<number>(settingStore.shopDefaultLanguage)
 const productID = ref<number>(0)
 const translating = ref(false)
 
@@ -223,10 +355,6 @@ const descriptionRef = ref<HTMLElement | null>(null)
 const descriptionEdit = useEditable(descriptionRef)
 const originalDescription = ref('')
 
-const isShowProductView = ref(false)
-
-const availableLangs = computed(() => langs.filter(item => item.id !== settingStore.shopDefaultLanguage))
-
 const translateToSelectedLanguage = async () => {
   if (toLangId.value && productID.value) {
     translating.value = true
@@ -234,6 +362,8 @@ const translateToSelectedLanguage = async () => {
       await productStore.translateProductDescription(productID.value, toLangId.value)
     } finally {
       translating.value = false
+      enableEdit()
+      enableDescriptionEdit()
     }
   }
   if (productStore.productDescription) {
@@ -248,6 +378,10 @@ const fetchForLanguage = async (langId: number | null) => {
   }
 }
 
+watch(toLangId, () => {
+  fetchForLanguage(toLangId.value)
+})
+
 onMounted(async () => {
   const id = route.params.product_id
   if (id) {
@@ -259,6 +393,8 @@ onMounted(async () => {
 
 // text edit
 const enableEdit = () => {
+  console.log(usageRef.value, 'usageRef');
+
   if (usageRef.value) {
     originalUsage.value = usageRef.value.innerHTML
   }
@@ -266,6 +402,15 @@ const enableEdit = () => {
   usageEdit.enableEdit()
 }
 
+const enableDescriptionEdit = () => {
+  console.log(usageRef.value, 'usageRef');
+
+  if (descriptionRef.value) {
+    originalDescription.value = descriptionRef.value.innerHTML
+  }
+  descriptionEdit.enableEdit()
+}
+
 const saveText = () => {
   if (usageRef.value) {
     productStore.productDescription.usage = usageRef.value.innerHTML
@@ -285,13 +430,6 @@ const cancelEdit = () => {
   isEditing.value = false
 }
 
-const enableDescriptionEdit = () => {
-  if (descriptionRef.value) {
-    originalDescription.value = descriptionRef.value.innerHTML
-  }
-  descriptionEdit.enableEdit()
-}
-
 const saveDescription = async () => {
   if (descriptionRef.value) {
     productStore.productDescription.description = descriptionRef.value.innerHTML
@@ -364,5 +502,4 @@ function removeInlineStylesFromAll(product) {
   product.description_short = removeStyles(product.description_short)
   product.usage = removeStyles(product.usage)
 }
-
 </script>

bo/src/layouts/default.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="flex flex-1">
+  <div class="flex flex-1 overflow-x-hidden h-svh">
     <USidebar v-model:open="open" collapsible="icon" rail :ui="{
-      container: 'h-full',
+      container: 'h-full z-80',
       inner: 'bg-elevated/25 divide-transparent',
       body: 'py-0'
     }">
@@ -32,10 +32,10 @@
     </USidebar>
 
     <div class="flex-1 flex flex-col">
-      <div class="h-(--ui-header-height) shrink-0 flex items-center justify-between px-4 border-b border-default">
+      <div class="flex h-(--ui-header-height) shrink-0 items-center justify-between px-4 border-b border-default">
         <UButton icon="i-lucide-panel-left" color="neutral" variant="ghost" aria-label="Toggle sidebar"
           @click="open = !open" />
-        <div class="flex items-center gap-12">
+        <div class="hidden md:flex items-center gap-12">
           <div class="flex items-center gap-2">
             <CountryCurrencySwitch />
             <LangSwitch />
@@ -50,7 +50,7 @@
         </div>
       </div>
 
-      <div class="flex-1 p-4">
+      <div class="flex-1 p-4 bg-slate-50 h-svh">
         <slot />
       </div>
     </div>
@@ -158,6 +158,7 @@ import { useFetchJson } from '@/composable/useFetchJson'
 import { useAuthStore } from '@/stores/auth'
 import CountryCurrencySwitch from '@/components/inner/CountryCurrencySwitch.vue'
 import LangSwitch from '@/components/inner/LangSwitch.vue'
+import ThemeSwitch from '@/components/inner/ThemeSwitch.vue'
 
 
 const router = useRouter()

bo/src/stores/product.ts

@@ -54,7 +54,6 @@ export const useProductStore = defineStore('product', () => {
     try {
       const response = await useFetchJson<ProductDescription>(`/api/v1/restricted/product-translation/translate-product-description?productID=${productID}&productFromLangID=${settingStore.shopDefaultLanguage}&productToLangID=${toLangId}&model=${model}`)
       productDescription.value = response.items
-      saveProductDescription(productID, toLangId)
       return response.items
     } catch (e: any) {
       error.value = e?.message || 'Failed to translate product description'
@@ -64,42 +63,6 @@ export const useProductStore = defineStore('product', () => {
     }
   }
 
-  function fixHtml(html: string) {
-    return html
-      // 1. fix img
-      .replace(/<img([^>]*?)>/g, '<img$1 />')
-
-      // 2. escape text only
-      .replace(/>([^<]+)</g, (match, text) => {
-        const escaped = text
-          .replace(/&/g, '&amp;')
-          .replace(/"/g, '&quot;')
-          .replace(/'/g, '&#39;')
-
-        return `>${escaped}<`
-      })
-  }
-
-  function fixAll(obj: any): any {
-    if (typeof obj === 'string') {
-      return fixHtml(obj)
-    }
-
-    if (Array.isArray(obj)) {
-      return obj.map(fixAll)
-    }
-
-    if (typeof obj === 'object' && obj !== null) {
-      const result: any = {}
-      for (const [key, value] of Object.entries(obj)) {
-        result[key] = fixAll(value)
-      }
-      return result
-    }
-
-    return obj
-  }
-
   async function saveProductDescription(productID?: number, langId?: number | null) {
     const id = productID || 1
     const lang = langId || 1