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.
This commit is contained in:
QuentinHsu
2026-06-27 17:36:54 +08:00
committed by GitHub
parent df5ba9fa5c
commit 0b48ad86d0
10 changed files with 205 additions and 108 deletions
+8 -26
View File
@@ -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>
)