From 730e2a7b48b6800b3677bc7a7407a29dbef15d4d Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Sun, 14 Jun 2026 00:45:21 -0400
Subject: [PATCH] feat: support Markdown rendering in product details

---
 apps/spa/package.json                    |  3 +++
 apps/spa/src/pages/ProductDetailPage.tsx | 10 ++++++++--
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/apps/spa/package.json b/apps/spa/package.json
index baed041..b74e3d9 100644
--- a/apps/spa/package.json
+++ b/apps/spa/package.json
@@ -12,8 +12,10 @@
   "dependencies": {
     "@homaroma/types": "workspace:*",
     "@line/liff": "^2.28.0",
+    "dompurify": "^3.4.10",
     "i18next": "^26.0.4",
     "lucide-react": "^1.17.0",
+    "marked": "^18.0.5",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "react-i18next": "^17.0.2",
@@ -24,6 +26,7 @@
   "devDependencies": {
     "@eslint/js": "^9.39.4",
     "@tailwindcss/postcss": "^4.2.2",
+    "@types/dompurify": "^3.2.0",
     "@types/node": "^24.12.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
diff --git a/apps/spa/src/pages/ProductDetailPage.tsx b/apps/spa/src/pages/ProductDetailPage.tsx
index 52a1a41..e779d9d 100644
--- a/apps/spa/src/pages/ProductDetailPage.tsx
+++ b/apps/spa/src/pages/ProductDetailPage.tsx
@@ -9,6 +9,8 @@ import ProductImageGallery from '../components/ProductImageGallery'
 import DynamicPageRenderer from '../components/DynamicPageRenderer'
 import { API_BASE, getCategoryImage, formatPrice, type Category, type Product, type PageSection, type TranslatableString } from '../types'
 import { useCartStore } from '../store/cartStore'
+import { marked } from 'marked'
+import DOMPurify from 'dompurify'
 
 /** แปลง TranslatableString (string | Record<string,string>) เป็น string ตาม locale */
 function resolveTranslatable(value: TranslatableString | null | undefined, lang: string): string {
@@ -270,8 +272,12 @@ export default function ProductDetailPage() {
           <div className="pt-16 border-t border-spa-stone/10 space-y-6">
             <h2 className="text-3xl font-bold text-pop-black">{t('product.details')}</h2>
             <div 
-              className="prose prose-spa prose-lg max-w-4xl product-editorial text-spa-stone"
-              dangerouslySetInnerHTML={{ __html: resolveTranslatable(product.details, i18n.language) }}
+              className="prose prose-spa prose-lg max-w-4xl product-editorial text-spa-stone whitespace-pre-wrap"
+              dangerouslySetInnerHTML={{ 
+                __html: DOMPurify.sanitize(
+                  marked.parse(resolveTranslatable(product.details, i18n.language).replace(/\\n/g, '\n'), { async: false }) as string
+                )
+              }}
             />
           </div>
         )}