77 lines
2.2 KiB
TypeScript
77 lines
2.2 KiB
TypeScript
import ReactMarkdown from 'react-markdown';
|
|
import { Link } from 'react-router-dom';
|
|
import remarkGfm from 'remark-gfm';
|
|
|
|
import {
|
|
Hashtag,
|
|
ImagePreview,
|
|
LinkPreview,
|
|
MentionNote,
|
|
MentionUser,
|
|
VideoPreview,
|
|
} from '@shared/notes';
|
|
|
|
import { parser } from '@utils/parser';
|
|
|
|
export function TextNote({ content }: { content: string }) {
|
|
const richContent = parser(content) ?? null;
|
|
|
|
if (!richContent) {
|
|
return (
|
|
<div>
|
|
<ReactMarkdown
|
|
className="markdown"
|
|
remarkPlugins={[remarkGfm]}
|
|
disallowedElements={['h1', 'h2', 'h3', 'h4', 'h5', 'h6']}
|
|
unwrapDisallowed={true}
|
|
linkTarget={'_blank'}
|
|
>
|
|
{content}
|
|
</ReactMarkdown>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<ReactMarkdown
|
|
className="markdown"
|
|
remarkPlugins={[remarkGfm]}
|
|
components={{
|
|
a: ({ href }) => {
|
|
const cleanURL = new URL(href);
|
|
cleanURL.search = '';
|
|
return (
|
|
<Link to={href} target="_blank">
|
|
{cleanURL.hostname + cleanURL.pathname}
|
|
</Link>
|
|
);
|
|
},
|
|
del: ({ children }) => {
|
|
const key = children[0] as string;
|
|
if (typeof key !== 'string') return;
|
|
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-', '')} />;
|
|
}
|
|
},
|
|
}}
|
|
disallowedElements={['h1', 'h2', 'h3', 'h4', 'h5', 'h6']}
|
|
unwrapDisallowed={true}
|
|
linkTarget={'_blank'}
|
|
>
|
|
{richContent.parsed}
|
|
</ReactMarkdown>
|
|
<div>
|
|
{richContent.images.length > 0 && <ImagePreview urls={richContent.images} />}
|
|
{richContent.videos.length > 0 && <VideoPreview urls={richContent.videos} />}
|
|
{richContent.links.length > 0 && <LinkPreview urls={richContent.links} />}
|
|
{richContent.notes.length > 0 &&
|
|
richContent.notes.map((note: string) => <MentionNote key={note} id={note} />)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|