(READ ONLY) Margin is an open annotation layer for the internet. Powered by the AT Protocol.
Something went wrong. Try again.
1.7 kB · 60 lines
JSX
at ui-refactor
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061import React from "react";import { Link } from "react-router-dom";
const URL_REGEX = /(https?:\/\/[^\s]+)/g;
export default function RichText({ text }) { if (!text) return null;
const parts = text.split(URL_REGEX);
return ( <p className="annotation-text"> {parts.map((part, i) => { if (part.match(URL_REGEX)) { return ( <a key={i} href={part} target="_blank" rel="noopener noreferrer" onClick={(e) => e.stopPropagation()} className="rich-text-link" > {part} </a> ); }
const subParts = part.split(/((?:^|\s)@[a-zA-Z0-9.-]+\b)/g);
return ( <React.Fragment key={i}> {subParts.map((subPart, j) => { const mentionMatch = subPart.match(/^(\s*)@([a-zA-Z0-9.-]+)$/); if (mentionMatch) { const prefix = mentionMatch[1]; const handle = mentionMatch[2]; if (handle.includes(".")) { return ( <React.Fragment key={j}> {prefix} <Link to={`/profile/${handle}`} className="rich-text-mention" onClick={(e) => e.stopPropagation()} > @{handle} </Link> </React.Fragment> ); } } return subPart; })} </React.Fragment> ); })} </p> );}