From f5a6b85ed998c61f09c6521de1426c6af1501ac7 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 13 Oct 2023 22:23:18 -0500
Subject: [PATCH] Move HashtagLink to separate component

---
 src/components/hashtag-link.tsx   | 15 +++++++++++++++
 src/components/status-content.tsx | 15 +++++----------
 2 files changed, 20 insertions(+), 10 deletions(-)
 create mode 100644 src/components/hashtag-link.tsx

diff --git a/src/components/hashtag-link.tsx b/src/components/hashtag-link.tsx
new file mode 100644
index 0000000000..a0f647a871
--- /dev/null
+++ b/src/components/hashtag-link.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+import Link from './link';
+
+interface IHashtagLink {
+  hashtag: string;
+}
+
+const HashtagLink: React.FC<IHashtagLink> = ({ hashtag }) => (
+  <Link to={`/tags/${hashtag}`}>
+    #{hashtag}
+  </Link>
+);
+
+export default HashtagLink;
\ No newline at end of file
diff --git a/src/components/status-content.tsx b/src/components/status-content.tsx
index 8c2b2e6cdf..00b9608150 100644
--- a/src/components/status-content.tsx
+++ b/src/components/status-content.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import parse, { Element, type HTMLReactParserOptions, domToReact, Text } from 'html-react-parser';
+import parse, { Element, type HTMLReactParserOptions, domToReact } from 'html-react-parser';
 import React, { useState, useRef, useLayoutEffect, useMemo } from 'react';
 import { FormattedMessage } from 'react-intl';
 
@@ -8,7 +8,7 @@ import { onlyEmoji as isOnlyEmoji } from 'soapbox/utils/rich-content';
 
 import { getTextDirection } from '../utils/rtl';
 
-import Link from './link';
+import HashtagLink from './hashtag-link';
 import Markup from './markup';
 import Mention from './mention';
 import Poll from './polls/poll';
@@ -105,15 +105,10 @@ const StatusContent: React.FC<IStatusContent> = ({
         }
 
         if (classes?.includes('hashtag')) {
-          const child = domNode.children[0];
-          const hashtag = child instanceof Text ? child.data.replace(/^#/, '') : '';
-
+          const child = domToReact(domNode.children);
+          const hashtag = typeof child === 'string' ? child.replace(/^#/, '') : undefined;
           if (hashtag) {
-            return (
-              <Link to={`/tags/${hashtag}`}>
-                {domToReact(domNode.children, options)}
-              </Link>
-            );
+            return <HashtagLink hashtag={hashtag} />;
           }
         }