54 lines
1.9 KiB
TypeScript
54 lines
1.9 KiB
TypeScript
'use client'
|
|
|
|
import { BlockNoteView } from '@blocknote/mantine'
|
|
import { useCreateBlockNote } from '@blocknote/react'
|
|
import { PartialBlock } from '@blocknote/core'
|
|
import '@blocknote/mantine/style.css'
|
|
import { useMemo } from 'react'
|
|
|
|
interface TopicContentProps {
|
|
content: string
|
|
contentRTE?: unknown
|
|
className?: string
|
|
}
|
|
|
|
export function TopicContent({ content, contentRTE, className = '' }: TopicContentProps) {
|
|
// Create an editor instance with initial content
|
|
const editor = useCreateBlockNote({
|
|
initialContent:
|
|
contentRTE && Array.isArray(contentRTE) && contentRTE.length > 0
|
|
? (contentRTE as PartialBlock[])
|
|
: ([{ type: 'paragraph', content: '' }] as PartialBlock[]),
|
|
})
|
|
|
|
// If we have rich text content, use BlockNote viewer
|
|
if (contentRTE && Array.isArray(contentRTE) && contentRTE.length > 0) {
|
|
return (
|
|
<div className={`topic-content ${className}`}>
|
|
<BlockNoteView editor={editor} editable={false} theme="light" />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// Fallback to rendering plain HTML content
|
|
return (
|
|
<div
|
|
className={`topic-content prose prose-lg max-w-none
|
|
prose-headings:font-bold prose-headings:text-foreground
|
|
prose-p:text-muted-foreground prose-p:leading-relaxed
|
|
prose-a:text-primary prose-a:no-underline hover:prose-a:underline
|
|
prose-strong:text-foreground prose-strong:font-semibold
|
|
prose-code:bg-muted prose-code:px-2 prose-code:py-1 prose-code:rounded
|
|
prose-pre:bg-muted prose-pre:border prose-pre:rounded-lg
|
|
prose-blockquote:border-l-4 prose-blockquote:border-primary prose-blockquote:bg-muted/50
|
|
prose-ul:text-muted-foreground prose-ol:text-muted-foreground
|
|
prose-li:text-muted-foreground
|
|
prose-img:rounded-lg prose-img:shadow-lg
|
|
${className}`}
|
|
dangerouslySetInnerHTML={{ __html: content }}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export default TopicContent
|