5 changed files with 126 additions and 19 deletions
@ -0,0 +1,47 @@
@@ -0,0 +1,47 @@
|
||||
import Markdown from 'react-markdown' |
||||
import remarkGfm from 'remark-gfm' |
||||
import { Event } from 'nostr-tools' |
||||
import { useMemo } from 'react' |
||||
import NostrNode from '../LongFormArticle/NostrNode' |
||||
import { remarkNostr } from '../LongFormArticle/remarkNostr' |
||||
import { Components } from '../LongFormArticle/types' |
||||
|
||||
export default function DiscussionContent({ |
||||
event, |
||||
className |
||||
}: { |
||||
event: Event |
||||
className?: string |
||||
}) { |
||||
const components = useMemo( |
||||
() => |
||||
({ |
||||
nostr: (props) => ( |
||||
<NostrNode |
||||
rawText={props.rawText} |
||||
bech32Id={props.bech32Id} |
||||
/> |
||||
), |
||||
}) as Components, |
||||
[] |
||||
) |
||||
|
||||
return ( |
||||
<div |
||||
className={`prose prose-zinc max-w-none dark:prose-invert break-words overflow-wrap-anywhere ${className || ''}`} |
||||
> |
||||
<Markdown |
||||
remarkPlugins={[remarkGfm, remarkNostr]} |
||||
urlTransform={(url) => { |
||||
if (url.startsWith('nostr:')) { |
||||
return url.slice(6) // Remove 'nostr:' prefix for rendering
|
||||
} |
||||
return url |
||||
}} |
||||
components={components} |
||||
> |
||||
{event.content} |
||||
</Markdown> |
||||
</div> |
||||
) |
||||
} |
||||
Loading…
Reference in new issue