117 lines
3.0 KiB
TypeScript
117 lines
3.0 KiB
TypeScript
import { NOSTR_EVENTS, NOSTR_MENTIONS, cn, parser } from "@lume/utils";
|
|
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 { Images } from "./preview/images";
|
|
import { Videos } from "./preview/videos";
|
|
import { useNoteContext } from "./provider";
|
|
import { nanoid } from "nanoid";
|
|
|
|
export function NoteContent({
|
|
quote = true,
|
|
mention = true,
|
|
clean,
|
|
className,
|
|
}: {
|
|
quote?: boolean;
|
|
mention?: boolean;
|
|
clean?: boolean;
|
|
className?: string;
|
|
}) {
|
|
const event = useNoteContext();
|
|
const data = useMemo(() => {
|
|
const { content, images, videos } = parser(event.content);
|
|
const words = content.split(/( |\n)/);
|
|
const hashtags = words.filter((word) => word.startsWith("#"));
|
|
const events = words.filter((word) =>
|
|
NOSTR_EVENTS.some((el) => word.startsWith(el)),
|
|
);
|
|
const mentions = words.filter((word) =>
|
|
NOSTR_MENTIONS.some((el) => word.startsWith(el)),
|
|
);
|
|
|
|
let richContent: ReactNode[] | string = content;
|
|
|
|
try {
|
|
if (hashtags.length) {
|
|
for (const hashtag of hashtags) {
|
|
const regex = new RegExp(`(|^)${hashtag}\\b`, "g");
|
|
richContent = reactStringReplace(richContent, regex, (_, index) => {
|
|
return <Hashtag key={hashtag + index} tag={hashtag} />;
|
|
});
|
|
}
|
|
}
|
|
|
|
if (events.length) {
|
|
for (const event of events) {
|
|
if (quote) {
|
|
richContent = reactStringReplace(richContent, event, (_, index) => (
|
|
<MentionNote key={event + index} eventId={event} />
|
|
));
|
|
}
|
|
|
|
if (!quote && clean) {
|
|
richContent = reactStringReplace(richContent, event, () => null);
|
|
}
|
|
}
|
|
}
|
|
|
|
if (mentions.length) {
|
|
for (const user of mentions) {
|
|
if (mention) {
|
|
richContent = reactStringReplace(richContent, user, (_, index) => (
|
|
<MentionUser key={user + index} pubkey={user} />
|
|
));
|
|
}
|
|
|
|
if (!mention && clean) {
|
|
richContent = reactStringReplace(richContent, user, () => null);
|
|
}
|
|
}
|
|
}
|
|
|
|
richContent = reactStringReplace(
|
|
richContent,
|
|
/(https?:\/\/\S+)/gi,
|
|
(match, index) => (
|
|
<a
|
|
key={match + index}
|
|
href={match}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="line-clamp-1 text-blue-500 hover:text-blue-600"
|
|
>
|
|
{match}
|
|
</a>
|
|
),
|
|
);
|
|
|
|
richContent = reactStringReplace(richContent, /(\r\n|\r|\n)+/g, () => (
|
|
<div key={nanoid()} className="h-3" />
|
|
));
|
|
|
|
return { content: richContent, images, videos };
|
|
} catch (e) {
|
|
return { content, images, videos };
|
|
}
|
|
}, []);
|
|
|
|
return (
|
|
<div className="flex flex-col gap-2">
|
|
<div
|
|
className={cn(
|
|
"select-text text-[15px] text-balance break-words overflow-hidden",
|
|
event.content.length > 500 ? "max-h-[300px] gradient-mask-b-0" : "",
|
|
className,
|
|
)}
|
|
>
|
|
{data.content}
|
|
</div>
|
|
{data.images.length ? <Images urls={data.images} /> : null}
|
|
{data.videos.length ? <Videos urls={data.videos} /> : null}
|
|
</div>
|
|
);
|
|
}
|