Wire admin studio SSR and search infrastructure

resources/js/components/artwork/ArtworkDescription.jsx

@@ -2,11 +2,33 @@ import React, { useState } from 'react'
 
 const COLLAPSE_AT = 560
 
+function stripTags(value) {
+  return String(value || '')
+    .replace(/<\/?(?:html|head|body|title|meta|link|script|style)[^>]*>/gi, '')
+    .replace(/<[^>]*>/g, '')
+    .trim()
+}
+
+function sanitizeDescriptionHtml(value) {
+  const html = String(value || '').trim()
+
+  if (!html) {
+    return ''
+  }
+
+  if (/<\/?(?:html|head|body|title|meta|link|script|style)\b/i.test(html)) {
+    return ''
+  }
+
+  return html
+}
+
 export default function ArtworkDescription({ artwork }) {
   const [expanded, setExpanded] = useState(false)
   const content = (artwork?.description || '').trim()
-  const contentHtml = (artwork?.description_html || '').trim()
+  const contentHtml = sanitizeDescriptionHtml(artwork?.description_html || '')
   const collapsed = content.length > COLLAPSE_AT && !expanded
+  const fallbackText = contentHtml ? stripTags(contentHtml) : content
 
   if (content.length === 0) return null
 
@@ -20,7 +42,8 @@ export default function ArtworkDescription({ artwork }) {
       >
         <div
           className="prose prose-invert max-w-none text-sm leading-7 prose-p:my-3 prose-p:text-white/50 prose-a:text-accent prose-a:no-underline hover:prose-a:underline prose-strong:text-white/80 prose-em:text-white/70 prose-code:text-white/80"
-          dangerouslySetInnerHTML={{ __html: contentHtml }}
+          suppressHydrationWarning
+          dangerouslySetInnerHTML={{ __html: contentHtml || escapeHtml(fallbackText) }}
         />
       </div>
 
@@ -36,3 +59,12 @@ export default function ArtworkDescription({ artwork }) {
     </div>
   )
 }
+
+function escapeHtml(value) {
+  return String(value || '')
+    .replaceAll('&', '&amp;')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;')
+    .replaceAll("'", '&#39;')
+}