48 lines
1.4 KiB
TypeScript
48 lines
1.4 KiB
TypeScript
import ReactMarkdown from 'react-markdown';
|
|
import remarkGfm from 'remark-gfm';
|
|
|
|
import {
|
|
Hashtag,
|
|
ImagePreview,
|
|
LinkPreview,
|
|
MentionNote,
|
|
MentionUser,
|
|
VideoPreview,
|
|
} from '@shared/notes';
|
|
|
|
import { RichContent } from '@utils/types';
|
|
|
|
export function NoteContent({ content, long }: { content: RichContent; long?: boolean }) {
|
|
if (long) {
|
|
return (
|
|
<ReactMarkdown className="markdown" remarkPlugins={[remarkGfm]}>
|
|
{content as unknown as string}
|
|
</ReactMarkdown>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<ReactMarkdown
|
|
className="markdown"
|
|
remarkPlugins={[remarkGfm]}
|
|
components={{
|
|
del: ({ children }) => {
|
|
const key = children[0] as string;
|
|
if (key.startsWith('pub') && key.length > 50 && key.length < 100)
|
|
return <MentionUser pubkey={key.replace('pub-', '')} />;
|
|
if (key.startsWith('tag')) return <Hashtag tag={key.replace('tag-', '')} />;
|
|
},
|
|
}}
|
|
>
|
|
{content?.parsed}
|
|
</ReactMarkdown>
|
|
{content?.images?.length > 0 && <ImagePreview urls={content.images} />}
|
|
{content?.videos?.length > 0 && <VideoPreview urls={content.videos} />}
|
|
{content?.links?.length > 0 && <LinkPreview urls={content.links} />}
|
|
{content?.notes?.length > 0 &&
|
|
content?.notes.map((note: string) => <MentionNote key={note} id={note} />)}
|
|
</>
|
|
);
|
|
}
|