Fix clicking mentions and hashtag links from feeds

Fixes https://gitlab.com/soapbox-pub/soapbox/-/issues/1688

src/components/hashtag-link.tsx

@@ -7,6 +7,7 @@ interface IHashtagLink {
 }
 
 const HashtagLink: React.FC<IHashtagLink> = ({ hashtag }) => (
+  // eslint-disable-next-line formatjs/no-literal-string-in-jsx
   <Link to={`/tags/${hashtag}`}>
     #{hashtag}
   </Link>

src/components/mention.tsx

@@ -17,8 +17,8 @@ const Mention: React.FC<IMention> = ({ mention: { acct, username }, disabled })
   const handleClick: React.MouseEventHandler = (e) => {
     if (disabled) {
       e.preventDefault();
-      e.stopPropagation();
     }
+    e.stopPropagation();
   };
 
   return (
@@ -28,6 +28,7 @@ const Mention: React.FC<IMention> = ({ mention: { acct, username }, disabled })
         className='text-primary-600 hover:underline dark:text-accent-blue'
         onClick={handleClick}
         dir='ltr'
+        // eslint-disable-next-line formatjs/no-literal-string-in-jsx
       >
         @{shortenNostr(username)}
       </Link>

src/components/status-content.tsx

@@ -97,6 +97,27 @@ const StatusContent: React.FC<IStatusContent> = ({
       if (domNode instanceof Element && domNode.name === 'a') {
         const classes = domNode.attribs.class?.split(' ');
 
+        if (classes?.includes('hashtag')) {
+          const child = domToReact(domNode.children as DOMNode[]);
+
+          const hashtag: string | undefined = (() => {
+            // Mastodon wraps the hashtag in a span, with a sibling text node containing the hashtag.
+            if (Array.isArray(child) && child.length) {
+              if (child[0]?.props?.children === '#' && typeof child[1] === 'string') {
+                return child[1];
+              }
+            }
+            // Pleroma renders a string directly inside the hashtag link.
+            if (typeof child === 'string') {
+              return child.replace(/^#/, '');
+            }
+          })();
+
+          if (hashtag) {
+            return <HashtagLink hashtag={hashtag} />;
+          }
+        }
+
         if (classes?.includes('mention')) {
           const mention = status.mentions.find(({ url }) => domNode.attribs.href === url);
           if (mention) {
@@ -104,14 +125,6 @@ const StatusContent: React.FC<IStatusContent> = ({
           }
         }
 
-        if (classes?.includes('hashtag')) {
-          const child = domToReact(domNode.children as DOMNode[]);
-          const hashtag = typeof child === 'string' ? child.replace(/^#/, '') : undefined;
-          if (hashtag) {
-            return <HashtagLink hashtag={hashtag} />;
-          }
-        }
-
         return (
           // eslint-disable-next-line jsx-a11y/no-static-element-interactions
           <a