Feat: Add preventing urlPreviewing by surrounding a link in angle brackets

.changeset/add_hide_urlPreview.md

@@ -0,0 +1,5 @@
+---
+default: minor
+---
+
+Add preventing urlPreviewing by surrounding a link in angle brackets

src/app/components/message/MsgTypeRenderers.tsx

@@ -91,13 +91,13 @@ export function MText({ edited, content, renderBody, renderUrlsPreview, style }:
   const customBody =
     typeof content.formatted_body === 'string' ? content.formatted_body : undefined;
 
-  const trimmedBody = useMemo(() => trimReplyFromBody(body), [body]);
+  let trimmedBody = useMemo(() => trimReplyFromBody(body), [body]);
   const unwrappedForwardedContent = useMemo(
     () => unwrapForwardedContent(customBody ?? body),
     [customBody, body]
   );
 
-  const safeCustomBody = useMemo(() => {
+  let safeCustomBody = useMemo(() => {
     if (!customBody) return undefined;
     if (customBody.length > 8000) {
       const imageTags = customBody.match(/<img[^>]*>/g);
@@ -139,8 +139,24 @@ export function MText({ edited, content, renderBody, renderUrlsPreview, style }:
 
   if (!body && !customBody) return <BrokenContent body={customBody ?? body} />;
 
+  // move the < > inside of the []() in order to make the matching easier
+  trimmedBody = trimmedBody?.replace(/(<|&lt;)\[(.+)\]\((https?:\/\/(.+))\)(>|&gt;)/, '[$2](<$3>)');
   const urlsMatch = renderUrlsPreview && trimmedBody.match(URL_REG);
-  const urls = urlsMatch ? [...new Set(urlsMatch)] : undefined;
+  const urlStrings = urlsMatch ? [...new Set(urlsMatch)] : undefined;
+  const urls = urlStrings?.filter((url) => !url.startsWith('<') && !url.endsWith('>'));
+  // strip the < > tags visually if needed
+  if (urlStrings?.length !== urls?.length) {
+    trimmedBody = trimmedBody?.replace(/<http(s?):\/\/(.+?)>/g, 'http$1://$2');
+    trimmedBody = trimmedBody?.replace(/<\[(.+?)\]\(http(s?):\/\/(.+)\)>/g, '[$1](http$2://$3)');
+    safeCustomBody = safeCustomBody?.replace(
+      /<<a data-md href="(.+?)">(.+?)<\/a>>/g,
+      '<a data-md href="$1">$2</a>'
+    );
+    safeCustomBody = safeCustomBody?.replace(
+      /<a data-md href="&lt;(.+?)&gt;">(.+?)<\/a>/g,
+      '<a data-md href="$1">$2</a>'
+    );
+  }
 
   if ((content['com.beeper.per_message_profile'] as PerMessageProfileBeeperFormat)?.has_fallback) {
     // unwrap per-message profile fallback if present

src/app/plugins/markdown/inline/rules.ts

@@ -101,12 +101,16 @@ export const SpoilerRule: InlineMDRule = {
 };
 
 const LINK_ALT = `\\[${MIN_ANY}\\]`;
-const LINK_URL = `\\((https?:\\/\\/.+?)\\)`;
+const LINK_URL = `\\(((<)?https?:\\/\\/.+?(>)?)\\)`;
 const LINK_REG_1 = new RegExp(`${LINK_ALT}${LINK_URL}`);
 export const LinkRule: InlineMDRule = {
   match: (text) => text.match(LINK_REG_1),
   html: (parse, match) => {
     const [, g1, g2] = match;
+    // Checks for < and > since text comes sanitized to the parser
+    // Puts the < > outside of the object for client compatibility purposes
+    if (g2.startsWith('&lt;') && g2.endsWith('&gt;'))
+      return `<<a data-md href="${g2.substring(4, g2.lastIndexOf('&gt;'))}">${parse(g1)}</a>>`;
     return `<a data-md href="${g2}">${parse(g1)}</a>`;
   },
 };