snort/src/Element/Text.tsx

166 lines
5.6 KiB
TypeScript
Raw Normal View History

2023-01-20 11:11:50 +00:00
import './Text.css'
import { useMemo, useCallback } from "react";
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";
import { visit, SKIP } from "unist-util-visit";
2023-01-06 11:05:27 +00:00
2023-02-03 16:43:21 +00:00
import { UrlRegex, MentionRegex, InvoiceRegex, HashtagRegex } from "Const";
2023-01-20 11:11:50 +00:00
import { eventLink, hexToBech32 } from "Util";
import Invoice from "Element/Invoice";
import Hashtag from "Element/Hashtag";
2023-01-14 14:37:31 +00:00
2023-01-20 11:11:50 +00:00
import Tag from "Nostr/Tag";
import { MetadataCache } from "State/Users";
2023-01-20 11:11:50 +00:00
import Mention from "Element/Mention";
2023-02-03 16:43:21 +00:00
import HyperText from 'Element/HyperText';
import { HexKey } from 'Nostr';
2023-01-06 11:05:27 +00:00
2023-02-03 16:43:21 +00:00
export type Fragment = string | JSX.Element;
2023-01-06 20:38:51 +00:00
2023-02-03 16:43:21 +00:00
export interface TextFragment {
body: Fragment[],
tags: Tag[],
users: Map<string, MetadataCache>
2023-01-06 11:05:27 +00:00
}
2023-02-03 16:43:21 +00:00
export interface TextProps {
content: string,
creator: HexKey,
tags: Tag[],
users: Map<string, MetadataCache>
2023-01-06 11:05:27 +00:00
}
2023-02-03 16:43:21 +00:00
export default function Text({ content, tags, creator, users }: TextProps) {
2023-01-10 21:31:08 +00:00
2023-02-03 16:43:21 +00:00
function extractLinks(fragments: Fragment[]) {
return fragments.map(f => {
if (typeof f === "string") {
return f.split(UrlRegex).map(a => {
if (a.startsWith("http")) {
return <HyperText link={a} creator={creator} />
}
return a;
});
}
return f;
}).flat();
}
2023-01-12 09:48:39 +00:00
2023-02-03 16:43:21 +00:00
function extractMentions(frag: TextFragment) {
return frag.body.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]);
let ref = frag.tags?.find(a => a.Index === idx);
if (ref) {
switch (ref.Key) {
case "p": {
return <Mention pubkey={ref.PubKey!} />
}
case "e": {
let eText = hexToBech32("note", ref.Event!).substring(0, 12);
return <Link key={ref.Event} to={eventLink(ref.Event!)} onClick={(e) => e.stopPropagation()}>#{eText}</Link>;
}
case "t": {
return <Hashtag tag={ref.Hashtag!} />
}
}
}
return <b style={{ color: "var(--error)" }}>{matchTag[0]}?</b>;
} else {
return match;
}
});
}
return f;
}).flat();
}
2023-01-12 09:48:39 +00:00
2023-02-03 16:43:21 +00:00
function extractInvoices(fragments: Fragment[]) {
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-14 18:50:24 +00:00
}
2023-01-14 01:39:20 +00:00
2023-02-03 16:43:21 +00:00
function extractHashtags(fragments: Fragment[]) {
return fragments.map(f => {
if (typeof f === "string") {
return f.split(HashtagRegex).map(i => {
if (i.toLowerCase().startsWith("#")) {
return <Hashtag tag={i.substring(1)} />
} else {
return i;
}
});
}
return f;
}).flat();
}
2023-01-14 01:39:20 +00:00
2023-02-03 16:43:21 +00:00
function transformLi(frag: TextFragment) {
let fragments = transformText(frag)
return <li>{fragments}</li>
}
2023-01-16 17:48:25 +00:00
2023-02-03 16:43:21 +00:00
function transformParagraph(frag: TextFragment) {
const fragments = transformText(frag)
if (fragments.every(f => typeof f === 'string')) {
return <p>{fragments}</p>
}
return <>{fragments}</>
}
2023-01-16 17:48:25 +00:00
2023-02-03 16:43:21 +00:00
function transformText(frag: TextFragment) {
if (frag.body === undefined) {
debugger;
}
let fragments = extractMentions(frag);
fragments = extractLinks(fragments);
fragments = extractInvoices(fragments);
fragments = extractHashtags(fragments);
return fragments;
}
2023-01-16 17:48:25 +00:00
2023-01-14 18:50:24 +00:00
const components = useMemo(() => {
return {
2023-02-03 16:43:21 +00:00
p: (x: any) => transformParagraph({ body: x.children ?? [], tags, users }),
a: (x: any) => <HyperText link={x.href} creator={creator} />,
li: (x: any) => transformLi({ body: x.children ?? [], tags, users }),
2023-01-14 18:50:24 +00:00
};
}, [content]);
2023-02-03 16:43:21 +00:00
const disableMarkdownLinks = useCallback(() => (tree: any) => {
visit(tree, (node, index, parent) => {
if (
parent &&
typeof index === 'number' &&
(node.type === 'link' ||
2023-01-31 14:41:21 +00:00
node.type === 'linkReference' ||
node.type === 'image' ||
node.type === 'imageReference' ||
node.type === 'definition')
) {
2023-01-31 14:41:21 +00:00
node.type = 'text';
node.value = content.slice(node.position.start.offset, node.position.end.offset).replace(/\)$/, ' )');
return SKIP;
}
})
}, [content]);
return <ReactMarkdown
className="text"
components={components}
remarkPlugins={[disableMarkdownLinks]}
>{content}</ReactMarkdown>
2023-01-14 01:39:20 +00:00
}