Fix sanitize problem

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;
 

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">

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;
+        }
     });
 };
 

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;

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">