Sanitize product description content before render

frontend/components/product/ProductHero.vue

@@ -3,6 +3,7 @@
 // import
 
 import useGetProduct from "~/composables/api/product/useGetProduct";
+import { sanitize } from "isomorphic-dompurify";
 
 // state
 
@@ -14,6 +15,9 @@ const { data: product } = useGetProduct(id);
 const quantity = ref(1);
 
 const selectedSlide = ref(0);
+
+// computed
+
 const slides = computed(() => {
     return [
         {
@@ -30,6 +34,11 @@ const slides = computed(() => {
         }
     ];
 });
+
+const sanitizedProductDescription = computed(() => {
+    return sanitize(product.value!.description);
+});
+
 </script>
 
 <template>
@@ -47,16 +56,18 @@ const slides = computed(() => {
                 <Rating />
             </div>
 
-            <p
+            <div
                 class="py-8 typo-p-md text-slate-500 text-justify [&_a]:text-blue-400 [&_strong]:font-bold [&_u]:text-red-400"
-                v-html="product!.description"
+                v-html="sanitizedProductDescription"
             />
 
             <div class="w-full flex flex-col gap-6 mt-4">
+
                 <RemainQuantity
                     :maxQuantity="product!.in_stock"
                     :quantity="quantity"
                 />
+
                 <div class="w-full flex gap-3 flex-col">
                     <div class="w-full flex gap-3">
                         <Button class="w-full rounded-full" end-icon="ci:plus">
@@ -71,6 +82,7 @@ const slides = computed(() => {
                         همین الان بخر
                     </Button>
                 </div>
+
                 <InfoCard />
                 <Share />
             </div>