2023-02-07 20:04:50 +00:00
|
|
|
import "./Text.css";
|
2023-04-08 21:29:38 +00:00
|
|
|
import { useMemo } from "react";
|
2023-03-04 21:41:29 +00:00
|
|
|
import { Link, useLocation } from "react-router-dom";
|
2023-01-14 01:39:20 +00:00
|
|
|
import ReactMarkdown from "react-markdown";
|
2023-01-27 21:37:04 +00:00
|
|
|
import { visit, SKIP } from "unist-util-visit";
|
2023-03-03 19:01:30 +00:00
|
|
|
import * as unist from "unist";
|
2023-03-28 14:34:01 +00:00
|
|
|
import { HexKey, NostrPrefix } from "@snort/nostr";
|
2023-01-06 11:05:27 +00:00
|
|
|
|
2023-04-08 21:29:38 +00:00
|
|
|
import { MentionRegex, InvoiceRegex, HashtagRegex } from "Const";
|
|
|
|
import { eventLink, hexToBech32, splitByUrl, unwrap } from "Util";
|
2023-01-20 11:11:50 +00:00
|
|
|
import Invoice from "Element/Invoice";
|
|
|
|
import Hashtag from "Element/Hashtag";
|
|
|
|
import Mention from "Element/Mention";
|
2023-02-07 20:04:50 +00:00
|
|
|
import HyperText from "Element/HyperText";
|
2023-01-06 11:05:27 +00:00
|
|
|
|
2023-02-07 19:47:57 +00:00
|
|
|
export type Fragment = string | React.ReactNode;
|
2023-01-06 20:38:51 +00:00
|
|
|
|
2023-02-03 16:43:21 +00:00
|
|
|
export interface TextFragment {
|
2023-02-07 19:47:57 +00:00
|
|
|
body: React.ReactNode[];
|
2023-03-28 14:34:01 +00:00
|
|
|
tags: Array<Array<string>>;
|
2023-01-06 11:05:27 +00:00
|
|
|
}
|
|
|
|
|
2023-02-03 16:43:21 +00:00
|
|
|
export interface TextProps {
|
2023-02-07 20:04:50 +00:00
|
|
|
content: string;
|
|
|
|
creator: HexKey;
|
2023-03-28 14:34:01 +00:00
|
|
|
tags: Array<Array<string>>;
|
2023-04-04 18:25:11 +00:00
|
|
|
disableMedia?: boolean;
|
2023-04-18 21:20:13 +00:00
|
|
|
depth?: number;
|
2023-01-06 11:05:27 +00:00
|
|
|
}
|
|
|
|
|
2023-04-18 21:20:13 +00:00
|
|
|
export default function Text({ content, tags, creator, disableMedia, depth }: TextProps) {
|
2023-03-04 21:41:29 +00:00
|
|
|
const location = useLocation();
|
|
|
|
|
2023-02-07 20:04:50 +00:00
|
|
|
function extractLinks(fragments: Fragment[]) {
|
|
|
|
return fragments
|
2023-02-09 12:26:54 +00:00
|
|
|
.map(f => {
|
2023-02-07 20:04:50 +00:00
|
|
|
if (typeof f === "string") {
|
2023-02-27 19:21:38 +00:00
|
|
|
return splitByUrl(f).map(a => {
|
2023-04-19 18:57:58 +00:00
|
|
|
if (a.match(/^(?:https?|(?:web\+)?nostr|magnet):/i) && a.toLowerCase() !== "nostr:npub") {
|
2023-04-04 18:25:11 +00:00
|
|
|
if (disableMedia ?? false) {
|
|
|
|
return (
|
|
|
|
<a href={a} onClick={e => e.stopPropagation()} target="_blank" rel="noreferrer" className="ext">
|
|
|
|
{a}
|
|
|
|
</a>
|
|
|
|
);
|
|
|
|
}
|
2023-04-18 21:20:13 +00:00
|
|
|
return <HyperText link={a} creator={creator} depth={depth} />;
|
2023-03-03 19:01:30 +00:00
|
|
|
}
|
|
|
|
return a;
|
|
|
|
});
|
|
|
|
}
|
|
|
|
return f;
|
|
|
|
})
|
|
|
|
.flat();
|
|
|
|
}
|
|
|
|
|
2023-02-07 20:04:50 +00:00
|
|
|
function extractMentions(frag: TextFragment) {
|
|
|
|
return frag.body
|
2023-02-09 12:26:54 +00:00
|
|
|
.map(f => {
|
2023-02-07 20:04:50 +00:00
|
|
|
if (typeof f === "string") {
|
2023-02-09 12:26:54 +00:00
|
|
|
return f.split(MentionRegex).map(match => {
|
2023-02-07 19:47:57 +00:00
|
|
|
const matchTag = match.match(/#\[(\d+)\]/);
|
2023-02-07 20:04:50 +00:00
|
|
|
if (matchTag && matchTag.length === 2) {
|
2023-02-07 19:47:57 +00:00
|
|
|
const idx = parseInt(matchTag[1]);
|
2023-03-28 14:34:01 +00:00
|
|
|
const ref = frag.tags?.[idx];
|
2023-02-07 20:04:50 +00:00
|
|
|
if (ref) {
|
2023-03-28 14:34:01 +00:00
|
|
|
switch (ref[0]) {
|
2023-02-07 20:04:50 +00:00
|
|
|
case "p": {
|
2023-03-28 14:34:01 +00:00
|
|
|
return <Mention pubkey={ref[1] ?? ""} relays={ref[2]} />;
|
2023-02-07 20:04:50 +00:00
|
|
|
}
|
|
|
|
case "e": {
|
2023-03-28 14:34:01 +00:00
|
|
|
const eText = hexToBech32(NostrPrefix.Event, ref[1]).substring(0, 12);
|
|
|
|
return (
|
|
|
|
ref[1] && (
|
|
|
|
<Link
|
|
|
|
to={eventLink(ref[1], ref[2])}
|
|
|
|
onClick={e => e.stopPropagation()}
|
|
|
|
state={{ from: location.pathname }}>
|
|
|
|
#{eText}
|
|
|
|
</Link>
|
|
|
|
)
|
2023-02-07 20:04:50 +00:00
|
|
|
);
|
|
|
|
}
|
|
|
|
case "t": {
|
2023-03-28 14:34:01 +00:00
|
|
|
return <Hashtag tag={ref[1] ?? ""} />;
|
2023-02-07 20:04:50 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return <b style={{ color: "var(--error)" }}>{matchTag[0]}?</b>;
|
|
|
|
} else {
|
|
|
|
return match;
|
2023-02-03 16:43:21 +00:00
|
|
|
}
|
2023-02-07 20:04:50 +00:00
|
|
|
});
|
|
|
|
}
|
|
|
|
return f;
|
|
|
|
})
|
|
|
|
.flat();
|
|
|
|
}
|
2023-01-12 09:48:39 +00:00
|
|
|
|
2023-02-07 20:04:50 +00:00
|
|
|
function extractInvoices(fragments: Fragment[]) {
|
|
|
|
return fragments
|
2023-02-09 12:26:54 +00:00
|
|
|
.map(f => {
|
2023-02-07 20:04:50 +00:00
|
|
|
if (typeof f === "string") {
|
2023-02-09 12:26:54 +00:00
|
|
|
return f.split(InvoiceRegex).map(i => {
|
2023-02-07 20:04:50 +00:00
|
|
|
if (i.toLowerCase().startsWith("lnbc")) {
|
2023-02-20 14:18:41 +00:00
|
|
|
return <Invoice invoice={i} />;
|
2023-02-07 20:04:50 +00:00
|
|
|
} else {
|
|
|
|
return i;
|
2023-02-03 16:43:21 +00:00
|
|
|
}
|
2023-02-07 20:04:50 +00:00
|
|
|
});
|
|
|
|
}
|
|
|
|
return f;
|
|
|
|
})
|
|
|
|
.flat();
|
|
|
|
}
|
2023-01-14 01:39:20 +00:00
|
|
|
|
2023-02-07 20:04:50 +00:00
|
|
|
function extractHashtags(fragments: Fragment[]) {
|
|
|
|
return fragments
|
2023-02-09 12:26:54 +00:00
|
|
|
.map(f => {
|
2023-02-07 20:04:50 +00:00
|
|
|
if (typeof f === "string") {
|
2023-02-09 12:26:54 +00:00
|
|
|
return f.split(HashtagRegex).map(i => {
|
2023-02-07 20:04:50 +00:00
|
|
|
if (i.toLowerCase().startsWith("#")) {
|
2023-02-20 14:18:41 +00:00
|
|
|
return <Hashtag tag={i.substring(1)} />;
|
2023-02-07 20:04:50 +00:00
|
|
|
} else {
|
|
|
|
return i;
|
2023-02-03 16:43:21 +00:00
|
|
|
}
|
2023-02-07 20:04:50 +00:00
|
|
|
});
|
|
|
|
}
|
|
|
|
return f;
|
|
|
|
})
|
|
|
|
.flat();
|
|
|
|
}
|
2023-01-14 01:39:20 +00:00
|
|
|
|
2023-02-07 20:04:50 +00:00
|
|
|
function transformLi(frag: TextFragment) {
|
2023-02-07 19:47:57 +00:00
|
|
|
const fragments = transformText(frag);
|
2023-02-07 20:04:50 +00:00
|
|
|
return <li>{fragments}</li>;
|
|
|
|
}
|
2023-01-16 17:48:25 +00:00
|
|
|
|
2023-02-07 20:04:50 +00:00
|
|
|
function transformParagraph(frag: TextFragment) {
|
|
|
|
const fragments = transformText(frag);
|
2023-02-09 12:26:54 +00:00
|
|
|
if (fragments.every(f => typeof f === "string")) {
|
2023-02-13 17:33:24 +00:00
|
|
|
return <p>{fragments}</p>;
|
2023-02-03 16:43:21 +00:00
|
|
|
}
|
2023-02-07 20:04:50 +00:00
|
|
|
return <>{fragments}</>;
|
|
|
|
}
|
2023-01-16 17:48:25 +00:00
|
|
|
|
2023-02-07 20:04:50 +00:00
|
|
|
function transformText(frag: TextFragment) {
|
|
|
|
let fragments = extractMentions(frag);
|
|
|
|
fragments = extractLinks(fragments);
|
|
|
|
fragments = extractInvoices(fragments);
|
|
|
|
fragments = extractHashtags(fragments);
|
|
|
|
return fragments;
|
|
|
|
}
|
2023-01-16 17:48:25 +00:00
|
|
|
|
2023-04-08 21:29:38 +00:00
|
|
|
const components = {
|
|
|
|
p: (x: { children?: React.ReactNode[] }) => transformParagraph({ body: x.children ?? [], tags }),
|
|
|
|
a: (x: { href?: string }) => <HyperText link={x.href ?? ""} creator={creator} />,
|
|
|
|
li: (x: { children?: Fragment[] }) => transformLi({ body: x.children ?? [], tags }),
|
|
|
|
};
|
2023-02-03 16:43:21 +00:00
|
|
|
|
2023-02-07 19:47:57 +00:00
|
|
|
interface Node extends unist.Node<unist.Data> {
|
|
|
|
value: string;
|
|
|
|
}
|
|
|
|
|
2023-04-08 21:29:38 +00:00
|
|
|
const disableMarkdownLinks = () => (tree: Node) => {
|
|
|
|
visit(tree, (node, index, parent) => {
|
|
|
|
if (
|
|
|
|
parent &&
|
|
|
|
typeof index === "number" &&
|
|
|
|
(node.type === "link" ||
|
|
|
|
node.type === "linkReference" ||
|
|
|
|
node.type === "image" ||
|
|
|
|
node.type === "imageReference" ||
|
|
|
|
node.type === "definition")
|
|
|
|
) {
|
|
|
|
node.type = "text";
|
|
|
|
const position = unwrap(node.position);
|
|
|
|
node.value = content.slice(position.start.offset, position.end.offset).replace(/\)$/, " )");
|
|
|
|
return SKIP;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
const element = useMemo(() => {
|
|
|
|
return (
|
2023-02-13 17:33:24 +00:00
|
|
|
<ReactMarkdown className="text" components={components} remarkPlugins={[disableMarkdownLinks]}>
|
|
|
|
{content}
|
|
|
|
</ReactMarkdown>
|
2023-04-08 21:29:38 +00:00
|
|
|
);
|
|
|
|
}, [content]);
|
|
|
|
|
|
|
|
return <div dir="auto">{element}</div>;
|
2023-01-14 01:39:20 +00:00
|
|
|
}
|