margin.at
Write on the margins of the internet. Powered by the AT Protocol.
margin.at
extension
web
atproto
comments
scanash.com
render handles and links in annotation cards and when there is a quote in semble annotation, make it show it as a margin quote in the card.
1import React from "react";
2import { Link } from "react-router-dom";
3
4const URL_REGEX = /(https?:\/\/[^\s]+)/g;
5
6export default function RichText({ text }) {
7 if (!text) return null;
8
9 const parts = text.split(URL_REGEX);
10
11 return (
12 <p className="annotation-text">
13 {parts.map((part, i) => {
14 if (part.match(URL_REGEX)) {
15 return (
16 <a
17 key={i}
18 href={part}
19 target="_blank"
20 rel="noopener noreferrer"
21 onClick={(e) => e.stopPropagation()}
22 className="rich-text-link"
23 >
24 {part}
25 </a>
26 );
27 }
28
29 const subParts = part.split(/((?:^|\s)@[a-zA-Z0-9.-]+\b)/g);
30
31 return (
32 <React.Fragment key={i}>
33 {subParts.map((subPart, j) => {
34 const mentionMatch = subPart.match(/^(\s*)@([a-zA-Z0-9.-]+)$/);
35 if (mentionMatch) {
36 const prefix = mentionMatch[1];
37 const handle = mentionMatch[2];
38 if (handle.includes(".")) {
39 return (
40 <React.Fragment key={j}>
41 {prefix}
42 <Link
43 to={`/profile/${handle}`}
44 className="rich-text-mention"
45 onClick={(e) => e.stopPropagation()}
46 >
47 @{handle}
48 </Link>
49 </React.Fragment>
50 );
51 }
52 }
53 return subPart;
54 })}
55 </React.Fragment>
56 );
57 })}
58 </p>
59 );
60}