From 338ae8e78f4b9a10f001ada9e83b036d14961e73 Mon Sep 17 00:00:00 2001
From: marzban-dev <marzban.dev@gmail.com>
Date: Wed, 19 Mar 2025 22:02:43 +0330
Subject: [PATCH] Fix sanitize problem

---
 frontend/components/product/ProductDetails.vue    |  2 +-
 frontend/components/product/ProductHero.vue       |  9 +--------
 frontend/composables/api/blog/useGetArticle.ts    | 11 ++++++++++-
 frontend/composables/api/product/useGetProduct.ts |  3 +++
 frontend/pages/article/[id].vue                   | 15 ++-------------
 5 files changed, 17 insertions(+), 23 deletions(-)

diff --git a/frontend/components/product/ProductDetails.vue b/frontend/components/product/ProductDetails.vue
index e0388e5..151eb3a 100644
--- a/frontend/components/product/ProductDetails.vue
+++ b/frontend/components/product/ProductDetails.vue
@@ -2,7 +2,7 @@
 
 // provide / inject
 
-import type { ProductVariantProvideType } from "~/pages/product/types";
+import type { ProductVariantProvideType } from "~/pages/product";
 
 const { selectedVariant } = inject("productVariant") as ProductVariantProvideType;
 
diff --git a/frontend/components/product/ProductHero.vue b/frontend/components/product/ProductHero.vue
index b853fff..e6e28f7 100644
--- a/frontend/components/product/ProductHero.vue
+++ b/frontend/components/product/ProductHero.vue
@@ -3,7 +3,6 @@
 // import
 
 import useGetProduct from "~/composables/api/product/useGetProduct";
-import { sanitize } from "isomorphic-dompurify";
 import type { ProductVariantProvideType } from "~/pages/product/[id].vue";
 import useAddCartItem from "~/composables/api/orders/useAddCartItem";
 import { useAuth } from "~/composables/api/auth/useAuth";
@@ -37,12 +36,6 @@ const addItemToCart = async () => {
     await refetchProduct();
 };
 
-// computed
-
-const sanitizedProductDescription = computed(() => {
-    return sanitize(product.value!.description);
-});
-
 // watch
 
 watch(() => selectedVariantId.value, (newId) => {
@@ -147,7 +140,7 @@ watch(() => selectedVariant.value!, (newValue) => {
 
             <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="sanitizedProductDescription"
+                v-html="product!.description"
             />
 
             <div class="flex items-center gap-4">
diff --git a/frontend/composables/api/blog/useGetArticle.ts b/frontend/composables/api/blog/useGetArticle.ts
index a797974..7984ac0 100644
--- a/frontend/composables/api/blog/useGetArticle.ts
+++ b/frontend/composables/api/blog/useGetArticle.ts
@@ -2,6 +2,7 @@
 
 import { useQuery } from "@tanstack/vue-query";
 import { API_ENDPOINTS, QUERY_KEYS } from "~/constants";
+import { sanitize } from "isomorphic-dompurify";
 
 // types
 
@@ -22,7 +23,15 @@ const useGetArticle = (id: number | string | undefined) => {
 
     return useQuery({
         queryKey: [QUERY_KEYS.article, id],
-        queryFn: () => handleGetArticle()
+        queryFn: () => handleGetArticle(),
+        select: (article) => {
+            const copyOfArticle = { ...article };
+
+            copyOfArticle.summery = sanitize(copyOfArticle.summery);
+            copyOfArticle.content = sanitize(copyOfArticle.content);
+
+            return copyOfArticle;
+        }
     });
 };
 
diff --git a/frontend/composables/api/product/useGetProduct.ts b/frontend/composables/api/product/useGetProduct.ts
index 92914e6..df3f470 100644
--- a/frontend/composables/api/product/useGetProduct.ts
+++ b/frontend/composables/api/product/useGetProduct.ts
@@ -2,6 +2,7 @@
 
 import { useQuery } from "@tanstack/vue-query";
 import { API_ENDPOINTS, QUERY_KEYS } from "~/constants";
+import { sanitize } from "isomorphic-dompurify";
 
 // types
 
@@ -26,6 +27,8 @@ const useGetProduct = (id: string | number | undefined) => {
         select: (product) => {
             const copyOfProduct = { ...product };
 
+            copyOfProduct.description = sanitize(copyOfProduct.description);
+
             copyOfProduct.variants = copyOfProduct.variants.sort((a, b) => b.in_stock - a.in_stock);
 
             return copyOfProduct;
diff --git a/frontend/pages/article/[id].vue b/frontend/pages/article/[id].vue
index 8a012ff..b3e18e6 100644
--- a/frontend/pages/article/[id].vue
+++ b/frontend/pages/article/[id].vue
@@ -2,7 +2,6 @@
 
 // import
 
-import { sanitize } from "isomorphic-dompurify";
 import useGetArticle from "~/composables/api/blog/useGetArticle";
 
 // state
@@ -24,16 +23,6 @@ if (response.isError) {
     });
 }
 
-// computed
-
-const sanitizedArticleContent = computed(() => {
-    return sanitize(article.value!.content);
-});
-
-const sanitizedArticleSummery = computed(() => {
-    return sanitize(article.value!.summery);
-});
-
 </script>
 
 <template>
@@ -48,7 +37,7 @@ const sanitizedArticleSummery = computed(() => {
 
                 <div
                     class="typo-p-lg text-slate-200 mb-6 text-justify w-[70%]"
-                    v-html="sanitizedArticleSummery"
+                    v-html="article!.summery"
                 />
 
                 <div class="flex items-center justify-between">
@@ -103,7 +92,7 @@ const sanitizedArticleSummery = computed(() => {
 
             <div
                 class="p-8 flex-1 text-zinc-800 flex flex-col gap-6 [&_p,ul]:text-zinc-500 [&_h1]:typo-h-4 [&_h2]:typo-h-5 [&_h3]:typo-h-6 [&_p]:typo-p-md [&_ul]:list-disc [&_ul]:typo-p-md [&_ul]:space-y-2"
-                v-html="sanitizedArticleContent"
+                v-html="article!.content"
             />
 
             <aside class="mt-8 p-8 h-fit bg-slate-100 w-[400px] sticky top-4 rounded-3xl">