fix(web): render custom HTML and Markdown content consistently (#5760)

* fix(markdown): render announcement markdown consistently

- support soft line breaks for announcement markdown without changing the default parser behavior.
- add explicit markdown element styles so lists, tables, code blocks, and quotes render correctly when typography styles are unavailable.
- apply the announcement markdown mode in both the popover and detail dialog for consistent display.

* refactor(markdown): simplify fallback markdown styles

- remove duplicate typography utility classes now covered by explicit markdown element fallbacks.
- keep the markdown renderer behavior unchanged while reducing class noise.
- modernize small helper expressions to satisfy targeted lint checks.

* fix(content): render custom HTML consistently

- add shared rich content rendering so custom HTML and Markdown use the same path across public pages and announcements.
- reuse common URL and HTML detection instead of duplicating content format checks per page.
- keep custom home content inside the standard public layout while preserving full-page iframe rendering for external URLs.

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

@@ -19,24 +19,12 @@ For commercial licensing, please contact support@quantumnous.com
 import { useQuery } from '@tanstack/react-query'
 import { Construction } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
-import { Markdown } from '@/components/ui/markdown'
+import { RichContent } from '@/components/rich-content'
 import { Skeleton } from '@/components/ui/skeleton'
 import { PublicLayout } from '@/components/layout'
+import { isHttpUrl } from '@/lib/content-format'
 import { getAboutContent } from './api'
 
-function isValidUrl(value: string) {
-  try {
-    const url = new URL(value)
-    return url.protocol === 'http:' || url.protocol === 'https:'
-  } catch {
-    return false
-  }
-}
-
-function isLikelyHtml(value: string) {
-  return /<\/?[a-z][\s\S]*>/i.test(value)
-}
-
 function EmptyAboutState() {
   const { t } = useTranslation()
   const currentYear = new Date().getFullYear()
@@ -131,8 +119,7 @@ export function About() {
 
   const rawContent = data?.data?.trim() ?? ''
   const hasContent = rawContent.length > 0
-  const isUrl = hasContent && isValidUrl(rawContent)
-  const isHtml = hasContent && !isUrl && isLikelyHtml(rawContent)
+  const isUrl = hasContent && isHttpUrl(rawContent)
 
   if (isLoading) {
     return (
@@ -162,6 +149,7 @@ export function About() {
           src={rawContent}
           className='h-[calc(100vh-3.5rem)] w-full border-0'
           title={t('About')}
+          sandbox='allow-forms allow-popups allow-popups-to-escape-sandbox allow-scripts'
         />
       </PublicLayout>
     )
@@ -170,16 +158,10 @@ export function About() {
   return (
     <PublicLayout>
       <div className='mx-auto max-w-6xl px-4 py-8'>
-        {isHtml ? (
-          <div
-            className='prose prose-neutral dark:prose-invert max-w-none'
-            dangerouslySetInnerHTML={{ __html: rawContent }}
-          />
-        ) : (
-          <Markdown className='prose-neutral dark:prose-invert max-w-none'>
-            {rawContent}
-          </Markdown>
-        )}
+        <RichContent
+          content={rawContent}
+          className='prose-neutral dark:prose-invert max-w-none'
+        />
       </div>
     </PublicLayout>
   )

web/default/src/features/dashboard/components/overview/announcement-detail-dialog.tsx

@@ -17,8 +17,8 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 import { useTranslation } from 'react-i18next'
+import { RichContent } from '@/components/rich-content'
 import { formatDateTimeObject } from '@/lib/time'
-import { Markdown } from '@/components/ui/markdown'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { Dialog } from '@/components/dialog'
 
@@ -59,7 +59,7 @@ export function AnnouncementDetailModal({
           {announcement?.content && (
             <div>
               <h4 className='mb-2 font-medium'>{t('Content')}</h4>
-              <Markdown>{announcement.content}</Markdown>
+              <RichContent breaks content={announcement.content} />
             </div>
           )}
           {announcement?.extra && (
@@ -67,9 +67,11 @@ export function AnnouncementDetailModal({
               <h4 className='mb-2 font-medium'>
                 {t('Additional Information')}
               </h4>
-              <Markdown className='text-muted-foreground'>
-                {announcement.extra}
-              </Markdown>
+              <RichContent
+                breaks
+                content={announcement.extra}
+                className='text-muted-foreground'
+              />
             </div>
           )}
         </div>

web/default/src/features/home/hooks/use-home-page-content.ts

@@ -19,6 +19,7 @@ For commercial licensing, please contact support@quantumnous.com
 import { useEffect, useState } from 'react'
 import i18next from 'i18next'
 import { toast } from 'sonner'
+import { isHttpUrl } from '@/lib/content-format'
 import { getHomePageContent } from '../api'
 import type { HomePageContentResult } from '../types'
 
@@ -75,13 +76,7 @@ export function useHomePageContent(): HomePageContentResult {
     }
   }, [])
 
-  let isUrl = false
-  try {
-    const url = new URL(content)
-    isUrl = url.protocol === 'http:' || url.protocol === 'https:'
-  } catch {
-    // not a URL
-  }
+  const isUrl = isHttpUrl(content)
 
   return { content, isLoaded, isUrl }
 }

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

@@ -18,7 +18,7 @@ For commercial licensing, please contact support@quantumnous.com
 */
 import { useTranslation } from 'react-i18next'
 import { useAuthStore } from '@/stores/auth-store'
-import { Markdown } from '@/components/ui/markdown'
+import { RichContent } from '@/components/rich-content'
 import { PublicLayout } from '@/components/layout'
 import { Footer } from '@/components/layout/components/footer'
 import { CTA, Features, Hero, HowItWorks, Stats } from './components'
@@ -41,21 +41,24 @@ export function Home() {
   }
 
   if (content) {
+    if (isUrl) {
+      return (
+        <PublicLayout showMainContainer={false}>
+          <iframe
+            src={content}
+            className='h-screen w-full border-none'
+            title={t('Custom Home Page')}
+            sandbox='allow-forms allow-popups allow-popups-to-escape-sandbox allow-scripts'
+          />
+        </PublicLayout>
+      )
+    }
+
     return (
-      <PublicLayout showMainContainer={false}>
-        <main className='overflow-x-hidden'>
-          {isUrl ? (
-            <iframe
-              src={content}
-              className='h-screen w-full border-none'
-              title={t('Custom Home Page')}
-            />
-          ) : (
-            <div className='container mx-auto py-8'>
-              <Markdown className='custom-home-content'>{content}</Markdown>
-            </div>
-          )}
-        </main>
+      <PublicLayout>
+        <div className='mx-auto max-w-6xl px-4 py-8'>
+          <RichContent content={content} className='custom-home-content' />
+        </div>
       </PublicLayout>
     )
   }

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

@@ -19,11 +19,12 @@ For commercial licensing, please contact support@quantumnous.com
 import { useQuery } from '@tanstack/react-query'
 import { FileWarning } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
+import { RichContent } from '@/components/rich-content'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
-import { Markdown } from '@/components/ui/markdown'
 import { Skeleton } from '@/components/ui/skeleton'
 import { PublicLayout } from '@/components/layout'
+import { isHttpUrl } from '@/lib/content-format'
 import type { LegalDocumentResponse } from './types'
 
 type LegalDocumentProps = {
@@ -33,19 +34,6 @@ type LegalDocumentProps = {
   emptyMessage: string
 }
 
-function isValidUrl(value: string) {
-  try {
-    const url = new URL(value)
-    return url.protocol === 'http:' || url.protocol === 'https:'
-  } catch {
-    return false
-  }
-}
-
-function isLikelyHtml(value: string) {
-  return /<\/?[a-z][\s\S]*>/i.test(value)
-}
-
 export function LegalDocument({
   title,
   queryKey,
@@ -61,8 +49,7 @@ export function LegalDocument({
 
   const rawContent = data?.data?.trim() ?? ''
   const hasContent = rawContent.length > 0
-  const isUrl = hasContent && isValidUrl(rawContent)
-  const isHtml = hasContent && !isUrl && isLikelyHtml(rawContent)
+  const isUrl = hasContent && isHttpUrl(rawContent)
   const success = data?.success ?? false
 
   if (isLoading) {
@@ -139,16 +126,10 @@ export function LegalDocument({
           <h1 className='text-3xl font-semibold tracking-tight'>{title}</h1>
         </div>
 
-        {isHtml ? (
-          <div
-            className='prose prose-neutral dark:prose-invert max-w-none'
-            dangerouslySetInnerHTML={{ __html: rawContent }}
-          />
-        ) : (
-          <Markdown className='prose-neutral dark:prose-invert max-w-none'>
-            {rawContent}
-          </Markdown>
-        )}
+        <RichContent
+          content={rawContent}
+          className='prose-neutral dark:prose-invert max-w-none'
+        />
       </div>
     </PublicLayout>
   )