yoginth.com
Hey is a decentralized and permissionless social media app built with Lens Protocol 馃尶
1import { Regex } from "@hey/data/regex";
2import trimify from "@hey/helpers/trimify";
3import type { PostMentionFragment } from "@hey/indexer";
4import { memo } from "react";
5import ReactMarkdown from "react-markdown";
6import remarkBreaks from "remark-breaks";
7import linkifyRegex from "remark-linkify-regex";
8import stripMarkdown from "strip-markdown";
9import type { PluggableList } from "unified";
10import MarkupLink from "./MarkupLink";
11
12const plugins: PluggableList = [
13 [stripMarkdown, { keep: ["strong", "emphasis", "list", "listItem"] }],
14 remarkBreaks,
15 linkifyRegex(Regex.url),
16 linkifyRegex(Regex.mention)
17];
18
19interface MarkupProps {
20 children: string;
21 className?: string;
22 mentions?: PostMentionFragment[];
23}
24
25const Markup = ({ children, className = "", mentions = [] }: MarkupProps) => {
26 if (!children) {
27 return null;
28 }
29
30 const components = {
31 a: (props: any) => <MarkupLink mentions={mentions} title={props.title} />
32 };
33
34 return (
35 <span className={className}>
36 <ReactMarkdown components={components} remarkPlugins={plugins}>
37 {trimify(children)}
38 </ReactMarkdown>
39 </span>
40 );
41};
42
43export default memo(Markup);