87 lines
2.1 KiB
TypeScript
87 lines
2.1 KiB
TypeScript
import { cn } from "@/commons";
|
|
import { nanoid } from "nanoid";
|
|
import { type ReactNode, useMemo } from "react";
|
|
import reactStringReplace from "react-string-replace";
|
|
import { Hashtag } from "./mentions/hashtag";
|
|
import { MentionNote } from "./mentions/note";
|
|
import { MentionUser } from "./mentions/user";
|
|
import { ImagePreview } from "./preview/image";
|
|
import { useNoteContext } from "./provider";
|
|
|
|
export function NoteContentLarge({
|
|
className,
|
|
}: {
|
|
className?: string;
|
|
}) {
|
|
const event = useNoteContext();
|
|
const content = useMemo(() => {
|
|
try {
|
|
// Get parsed meta
|
|
const { images, hashtags, events, mentions } = event.meta;
|
|
|
|
// Define rich content
|
|
let richContent: ReactNode[] | string = event.content;
|
|
|
|
for (const hashtag of hashtags) {
|
|
const regex = new RegExp(`(|^)${hashtag}\\b`, "g");
|
|
richContent = reactStringReplace(richContent, regex, () => (
|
|
<Hashtag key={nanoid()} tag={hashtag} />
|
|
));
|
|
}
|
|
|
|
for (const event of events) {
|
|
richContent = reactStringReplace(richContent, event, (match, i) => (
|
|
<MentionNote key={match + i} eventId={event} />
|
|
));
|
|
}
|
|
|
|
for (const mention of mentions) {
|
|
richContent = reactStringReplace(richContent, mention, (match, i) => (
|
|
<MentionUser key={match + i} pubkey={mention} />
|
|
));
|
|
}
|
|
|
|
for (const image of images) {
|
|
richContent = reactStringReplace(richContent, image, (match, i) => (
|
|
<ImagePreview key={match + i} url={match} />
|
|
));
|
|
}
|
|
|
|
richContent = reactStringReplace(
|
|
richContent,
|
|
/(https?:\/\/\S+)/gi,
|
|
(match, i) => (
|
|
<a
|
|
key={match + i}
|
|
href={match}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="text-blue-500 line-clamp-1 hover:text-blue-600"
|
|
>
|
|
{match}
|
|
</a>
|
|
),
|
|
);
|
|
|
|
richContent = reactStringReplace(richContent, /(\r\n|\r|\n)+/g, () => (
|
|
<div key={nanoid()} className="h-3" />
|
|
));
|
|
|
|
return richContent;
|
|
} catch {
|
|
return event.content;
|
|
}
|
|
}, [event.content]);
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"select-text leading-normal text-pretty content-break",
|
|
className,
|
|
)}
|
|
>
|
|
{content}
|
|
</div>
|
|
);
|
|
}
|