From 3f6c4fb5dfae924be079fd5c8d6127b3e7cab5ea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Sun, 15 Sep 2024 11:20:07 +0200
Subject: [PATCH] pl-fe: fix hashtag links in statuses
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 packages/pl-fe/src/components/hashtag-link.tsx   | 2 +-
 packages/pl-fe/src/components/status-content.tsx | 8 +++++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/pl-fe/src/components/hashtag-link.tsx b/packages/pl-fe/src/components/hashtag-link.tsx
index 1f571b7e7..5cb71c656 100644
--- a/packages/pl-fe/src/components/hashtag-link.tsx
+++ b/packages/pl-fe/src/components/hashtag-link.tsx
@@ -7,7 +7,7 @@ interface IHashtagLink {
 }
 
 const HashtagLink: React.FC<IHashtagLink> = ({ hashtag }) => (
-  <Link to={`/tags/${hashtag}`}>
+  <Link to={`/tags/${hashtag}`} onClick={(e) => e.stopPropagation()}>
     #{hashtag}
   </Link>
 );
diff --git a/packages/pl-fe/src/components/status-content.tsx b/packages/pl-fe/src/components/status-content.tsx
index b69973db6..c6b4db5a4 100644
--- a/packages/pl-fe/src/components/status-content.tsx
+++ b/packages/pl-fe/src/components/status-content.tsx
@@ -23,6 +23,9 @@ import type { MinifiedStatus } from 'pl-fe/reducers/statuses';
 const MAX_HEIGHT = 322; // 20px * 16 (+ 2px padding at the top)
 const BIG_EMOJI_LIMIT = 10;
 
+const nodesToText = (nodes: Array<DOMNode>): string =>
+  nodes.map(node => node.type === 'text' ? node.data : node.type === 'tag' ? nodesToText(node.children as Array<DOMNode>) : '').join('');
+
 interface IReadMoreButton {
   onClick: React.MouseEventHandler;
   quote?: boolean;
@@ -148,10 +151,9 @@ const StatusContent: React.FC<IStatusContent> = React.memo(({
           }
 
           if (classes?.includes('hashtag')) {
-            const child = domToReact(domNode.children as DOMNode[]);
-            const hashtag = typeof child === 'string' ? child.replace(/^#/, '') : undefined;
+            const hashtag = nodesToText(domNode.children as Array<DOMNode>);
             if (hashtag) {
-              return <HashtagLink hashtag={hashtag} />;
+              return <HashtagLink hashtag={hashtag.replace(/^#/, '')} />;
             }
           }