2023-01-06 11:05:27 +00:00
|
|
|
import { Link } from "react-router-dom";
|
2023-01-14 01:39:20 +00:00
|
|
|
import ReactMarkdown from "react-markdown";
|
2023-01-11 20:23:19 +00:00
|
|
|
import { TwitterTweetEmbed } from "react-twitter-embed";
|
2023-01-06 11:05:27 +00:00
|
|
|
|
2023-01-14 14:37:31 +00:00
|
|
|
import { UrlRegex, FileExtensionRegex, MentionRegex, InvoiceRegex, YoutubeUrlRegex, TweetUrlRegex, HashtagRegex } from "../Const";
|
2023-01-16 23:20:15 +00:00
|
|
|
import { eventLink, hexToBech32 } from "../Util";
|
2023-01-14 14:37:31 +00:00
|
|
|
import Invoice from "./Invoice";
|
|
|
|
import Hashtag from "./Hashtag";
|
|
|
|
|
|
|
|
import './Text.css'
|
2023-01-14 18:50:24 +00:00
|
|
|
import { useMemo } from "react";
|
2023-01-16 17:48:25 +00:00
|
|
|
import Tag from "../nostr/Tag";
|
|
|
|
import { MetadataCache } from "../db/User";
|
2023-01-16 22:22:21 +00:00
|
|
|
import Mention from "./Mention";
|
2023-01-06 11:05:27 +00:00
|
|
|
|
2023-01-16 17:48:25 +00:00
|
|
|
function transformHttpLink(a: string) {
|
2023-01-14 11:57:36 +00:00
|
|
|
try {
|
|
|
|
const url = new URL(a);
|
|
|
|
const youtubeId = YoutubeUrlRegex.test(a) && RegExp.$1;
|
|
|
|
const tweetId = TweetUrlRegex.test(a) && RegExp.$2;
|
|
|
|
const extension = FileExtensionRegex.test(url.pathname.toLowerCase()) && RegExp.$1;
|
|
|
|
if (extension) {
|
|
|
|
switch (extension) {
|
|
|
|
case "gif":
|
|
|
|
case "jpg":
|
|
|
|
case "jpeg":
|
|
|
|
case "png":
|
|
|
|
case "bmp":
|
|
|
|
case "webp": {
|
2023-01-17 14:00:59 +00:00
|
|
|
return <img key={url.toString()} src={url.toString()} />;
|
2023-01-14 11:57:36 +00:00
|
|
|
}
|
|
|
|
case "mp4":
|
|
|
|
case "mov":
|
|
|
|
case "mkv":
|
|
|
|
case "avi":
|
|
|
|
case "m4v": {
|
2023-01-16 17:48:25 +00:00
|
|
|
return <video key={url.toString()} src={url.toString()} controls />
|
2023-01-14 11:57:36 +00:00
|
|
|
}
|
|
|
|
default:
|
2023-01-19 15:37:47 +00:00
|
|
|
return <a key={url.toString()} href={url.toString()} onClick={(e) => e.stopPropagation()} target="_blank" rel="noreferrer" className="ext">{url.toString()}</a>
|
2023-01-14 01:39:20 +00:00
|
|
|
}
|
2023-01-14 11:57:36 +00:00
|
|
|
} else if (tweetId) {
|
2023-01-16 13:17:29 +00:00
|
|
|
return (
|
|
|
|
<div className="tweet" key={tweetId}>
|
|
|
|
<TwitterTweetEmbed tweetId={tweetId} />
|
|
|
|
</div>
|
|
|
|
)
|
2023-01-14 11:57:36 +00:00
|
|
|
} else if (youtubeId) {
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<br />
|
|
|
|
<iframe
|
|
|
|
className="w-max"
|
|
|
|
src={`https://www.youtube.com/embed/${youtubeId}`}
|
|
|
|
title="YouTube video player"
|
|
|
|
key={youtubeId}
|
|
|
|
frameBorder="0"
|
|
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
2023-01-16 17:48:25 +00:00
|
|
|
allowFullScreen={true}
|
2023-01-14 11:57:36 +00:00
|
|
|
/>
|
|
|
|
<br />
|
|
|
|
</>
|
|
|
|
)
|
|
|
|
} else {
|
2023-01-19 15:37:47 +00:00
|
|
|
return <a href={a} onClick={(e) => e.stopPropagation()} target="_blank" rel="noreferrer" className="ext">{a}</a>
|
2023-01-06 20:38:51 +00:00
|
|
|
}
|
2023-01-14 11:57:36 +00:00
|
|
|
} catch (error) {
|
2023-01-06 20:38:51 +00:00
|
|
|
}
|
2023-01-19 15:37:47 +00:00
|
|
|
return <a href={a} onClick={(e) => e.stopPropagation()} target="_blank" rel="noreferrer" className="ext">{a}</a>
|
2023-01-06 20:38:51 +00:00
|
|
|
}
|
|
|
|
|
2023-01-16 17:48:25 +00:00
|
|
|
function extractLinks(fragments: Fragment[]) {
|
2023-01-06 11:05:27 +00:00
|
|
|
return fragments.map(f => {
|
|
|
|
if (typeof f === "string") {
|
|
|
|
return f.split(UrlRegex).map(a => {
|
|
|
|
if (a.startsWith("http")) {
|
2023-01-08 00:29:59 +00:00
|
|
|
return transformHttpLink(a)
|
2023-01-06 11:05:27 +00:00
|
|
|
}
|
|
|
|
return a;
|
|
|
|
});
|
|
|
|
}
|
|
|
|
return f;
|
|
|
|
}).flat();
|
|
|
|
}
|
|
|
|
|
2023-01-16 17:48:25 +00:00
|
|
|
function extractMentions(fragments: Fragment[], tags: Tag[], users: Map<string, MetadataCache>) {
|
2023-01-06 11:05:27 +00:00
|
|
|
return fragments.map(f => {
|
|
|
|
if (typeof f === "string") {
|
|
|
|
return f.split(MentionRegex).map((match) => {
|
|
|
|
let matchTag = match.match(/#\[(\d+)\]/);
|
|
|
|
if (matchTag && matchTag.length === 2) {
|
|
|
|
let idx = parseInt(matchTag[1]);
|
2023-01-14 14:17:17 +00:00
|
|
|
let ref = tags?.find(a => a.Index === idx);
|
2023-01-06 11:05:27 +00:00
|
|
|
if (ref) {
|
|
|
|
switch (ref.Key) {
|
|
|
|
case "p": {
|
2023-01-16 22:22:21 +00:00
|
|
|
return <Mention pubkey={ref.PubKey!} />
|
2023-01-06 11:05:27 +00:00
|
|
|
}
|
|
|
|
case "e": {
|
2023-01-16 17:48:25 +00:00
|
|
|
let eText = hexToBech32("note", ref.Event!).substring(0, 12);
|
|
|
|
return <Link key={ref.Event} to={eventLink(ref.Event!)} onClick={(e) => e.stopPropagation()}>#{eText}</Link>;
|
2023-01-06 11:05:27 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2023-01-10 09:18:46 +00:00
|
|
|
return <b style={{ color: "var(--error)" }}>{matchTag[0]}?</b>;
|
2023-01-06 11:05:27 +00:00
|
|
|
} else {
|
|
|
|
return match;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
return f;
|
|
|
|
}).flat();
|
|
|
|
}
|
|
|
|
|
2023-01-16 17:48:25 +00:00
|
|
|
function extractInvoices(fragments: Fragment[]) {
|
2023-01-06 11:05:27 +00:00
|
|
|
return fragments.map(f => {
|
|
|
|
if (typeof f === "string") {
|
|
|
|
return f.split(InvoiceRegex).map(i => {
|
|
|
|
if (i.toLowerCase().startsWith("lnbc")) {
|
|
|
|
return <Invoice key={i} invoice={i} />
|
|
|
|
} else {
|
|
|
|
return i;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
return f;
|
|
|
|
}).flat();
|
|
|
|
}
|
2023-01-10 21:31:08 +00:00
|
|
|
|
2023-01-16 17:48:25 +00:00
|
|
|
function extractHashtags(fragments: Fragment[]) {
|
2023-01-10 21:31:08 +00:00
|
|
|
return fragments.map(f => {
|
|
|
|
if (typeof f === "string") {
|
|
|
|
return f.split(HashtagRegex).map(i => {
|
|
|
|
if (i.toLowerCase().startsWith("#")) {
|
|
|
|
return <Hashtag>{i}</Hashtag>
|
|
|
|
} else {
|
|
|
|
return i;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
return f;
|
|
|
|
}).flat();
|
|
|
|
}
|
2023-01-12 09:48:39 +00:00
|
|
|
|
2023-01-16 17:48:25 +00:00
|
|
|
function transformLi({ body, tags, users }: TextFragment) {
|
2023-01-14 18:50:24 +00:00
|
|
|
let fragments = transformText({ body, tags, users })
|
|
|
|
return <li>{fragments}</li>
|
2023-01-14 01:39:20 +00:00
|
|
|
}
|
2023-01-12 09:48:39 +00:00
|
|
|
|
2023-01-16 17:48:25 +00:00
|
|
|
function transformParagraph({ body, tags, users }: TextFragment) {
|
2023-01-14 18:50:24 +00:00
|
|
|
const fragments = transformText({ body, tags, users })
|
|
|
|
if (fragments.every(f => typeof f === 'string')) {
|
|
|
|
return <p>{fragments}</p>
|
|
|
|
}
|
|
|
|
return <>{fragments}</>
|
2023-01-14 01:39:20 +00:00
|
|
|
}
|
|
|
|
|
2023-01-16 17:48:25 +00:00
|
|
|
function transformText({ body, tags, users }: TextFragment) {
|
2023-01-19 15:37:47 +00:00
|
|
|
if (body === undefined) {
|
2023-01-18 23:04:40 +00:00
|
|
|
debugger;
|
|
|
|
}
|
2023-01-14 14:17:17 +00:00
|
|
|
let fragments = extractMentions(body, tags, users);
|
2023-01-14 01:39:20 +00:00
|
|
|
fragments = extractLinks(fragments);
|
|
|
|
fragments = extractInvoices(fragments);
|
|
|
|
fragments = extractHashtags(fragments);
|
|
|
|
return fragments;
|
|
|
|
}
|
|
|
|
|
2023-01-16 17:48:25 +00:00
|
|
|
export type Fragment = string | JSX.Element;
|
|
|
|
|
|
|
|
export interface TextFragment {
|
|
|
|
body: Fragment[],
|
|
|
|
tags: Tag[],
|
|
|
|
users: Map<string, MetadataCache>
|
|
|
|
}
|
|
|
|
|
|
|
|
export interface TextProps {
|
|
|
|
content: string,
|
|
|
|
tags: Tag[],
|
|
|
|
users: Map<string, MetadataCache>
|
|
|
|
}
|
|
|
|
|
|
|
|
export default function Text({ content, tags, users }: TextProps) {
|
2023-01-14 18:50:24 +00:00
|
|
|
const components = useMemo(() => {
|
|
|
|
return {
|
2023-01-18 23:04:40 +00:00
|
|
|
p: (x: any) => transformParagraph({ body: x.children ?? [], tags, users }),
|
2023-01-16 17:48:25 +00:00
|
|
|
a: (x: any) => transformHttpLink(x.href),
|
2023-01-18 23:04:40 +00:00
|
|
|
li: (x: any) => transformLi({ body: x.children ?? [], tags, users }),
|
2023-01-14 18:50:24 +00:00
|
|
|
};
|
|
|
|
}, [content]);
|
2023-01-14 14:37:31 +00:00
|
|
|
return <ReactMarkdown className="text" components={components}>{content}</ReactMarkdown>
|
2023-01-14 01:39:20 +00:00
|
|
|
}
|