fix(web): 修复自定义 HTML 样式被过滤及排版间距异常的问题 (#5795)

* fix(web): 修复自定义 HTML 样式被过滤及排版间距异常的问题

* fix(web): isolate custom HTML rendering

---------

Co-authored-by: CaIon <i@caion.me>

web/default/src/features/about/index.tsx

@@ -122,6 +122,7 @@ export function About() {
   const rawContent = data?.data?.trim() ?? ''
   const hasContent = rawContent.length > 0
   const isUrl = hasContent && isHttpUrl(rawContent)
+  const contentIsHtml = hasContent && isLikelyHtml(rawContent)
 
   if (isLoading) {
     return (
@@ -157,11 +158,24 @@ export function About() {
     )
   }
 
+  if (contentIsHtml) {
+    return (
+      <PublicLayout showMainContainer={false}>
+        <RichContent
+          mode='html'
+          htmlVariant='isolated'
+          content={rawContent}
+          className='prose-neutral dark:prose-invert max-w-none'
+        />
+      </PublicLayout>
+    )
+  }
+
   return (
     <PublicLayout>
       <div className='mx-auto max-w-6xl px-4 py-8'>
         <RichContent
-          mode={isLikelyHtml(rawContent) ? 'html' : 'markdown'}
+          mode='markdown'
           content={rawContent}
           className='prose-neutral dark:prose-invert max-w-none'
         />

web/default/src/features/home/index.tsx

@@ -57,11 +57,26 @@ export function Home() {
       )
     }
 
+    const contentIsHtml = isLikelyHtml(content)
+
+    if (contentIsHtml) {
+      return (
+        <PublicLayout showMainContainer={false}>
+          <RichContent
+            mode='html'
+            htmlVariant='isolated'
+            content={content}
+            className='custom-home-content'
+          />
+        </PublicLayout>
+      )
+    }
+
     return (
       <PublicLayout>
         <div className='mx-auto max-w-6xl px-4 py-8'>
           <RichContent
-            mode={isLikelyHtml(content) ? 'html' : 'markdown'}
+            mode='markdown'
             content={content}
             className='custom-home-content'
           />

web/default/src/features/legal/legal-document.tsx

@@ -52,6 +52,7 @@ export function LegalDocument({
   const rawContent = data?.data?.trim() ?? ''
   const hasContent = rawContent.length > 0
   const isUrl = hasContent && isHttpUrl(rawContent)
+  const contentIsHtml = hasContent && isLikelyHtml(rawContent)
   const success = data?.success ?? false
 
   if (isLoading) {
@@ -122,18 +123,26 @@ export function LegalDocument({
   }
 
   return (
-    <PublicLayout>
-      <div className='mx-auto max-w-4xl space-y-6 py-12'>
-        <div className='space-y-2'>
-          <h1 className='text-3xl font-semibold tracking-tight'>{title}</h1>
-        </div>
-
+    <PublicLayout showMainContainer={!contentIsHtml}>
+      {contentIsHtml ? (
         <RichContent
-          mode={isLikelyHtml(rawContent) ? 'html' : 'markdown'}
+          mode='html'
+          htmlVariant='isolated'
           content={rawContent}
-          className='prose-neutral dark:prose-invert max-w-none'
         />
-      </div>
+      ) : (
+        <div className='mx-auto max-w-4xl space-y-6 py-12'>
+          <div className='space-y-2'>
+            <h1 className='text-3xl font-semibold tracking-tight'>{title}</h1>
+          </div>
+
+          <RichContent
+            mode='markdown'
+            content={rawContent}
+            className='prose-neutral dark:prose-invert max-w-none'
+          />
+        </div>
+      )}
     </PublicLayout>
   )
 }