snort/src/Element/Text.tsx

import "./Text.css";
import { useMemo, useCallback } from "react";
import { Link } from "react-router-dom";
import ReactMarkdown from "react-markdown";
import { visit, SKIP } from "unist-util-visit";

import { UrlRegex, MentionRegex, InvoiceRegex, HashtagRegex } from "Const";
import { eventLink, hexToBech32 } from "Util";
import Invoice from "Element/Invoice";
import Hashtag from "Element/Hashtag";

import Tag from "Nostr/Tag";
import { MetadataCache } from "State/Users";
import Mention from "Element/Mention";
import HyperText from "Element/HyperText";
import { HexKey } from "Nostr";

export type Fragment = string | JSX.Element;

export interface TextFragment {
  body: Fragment[];
  tags: Tag[];
  users: Map<string, MetadataCache>;
}

export interface TextProps {
  content: string;
  creator: HexKey;
  tags: Tag[];
  users: Map<string, MetadataCache>;
}

export default function Text({ content, tags, creator, users }: TextProps) {
  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();
  }

  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();
  }

  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();
  }

  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();
  }

  function transformLi(frag: TextFragment) {
    let fragments = transformText(frag);
    return <li>{fragments}</li>;
  }

  function transformParagraph(frag: TextFragment) {
    const fragments = transformText(frag);
    if (fragments.every((f) => typeof f === "string")) {
      return <p>{fragments}</p>;
    }
    return <>{fragments}</>;
  }

  function transformText(frag: TextFragment) {
    if (frag.body === undefined) {
      debugger;
    }
    let fragments = extractMentions(frag);
    fragments = extractLinks(fragments);
    fragments = extractInvoices(fragments);
    fragments = extractHashtags(fragments);
    return fragments;
  }

  const components = useMemo(() => {
    return {
      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 }),
    };
  }, [content]);

  const disableMarkdownLinks = useCallback(
    () => (tree: any) => {
      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";
          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>
  );
}