Fix link handling within detailed status contents

app/javascript/flavours/glitch/features/status/components/detailed_status.tsx

@@ -19,6 +19,7 @@ import { getHashtagBarForStatus } from 'flavours/glitch/components/hashtag_bar';
 import { IconLogo } from 'flavours/glitch/components/logo';
 import { Permalink } from 'flavours/glitch/components/permalink';
 import PictureInPicturePlaceholder from 'flavours/glitch/components/picture_in_picture_placeholder';
+import { useAppHistory } from 'flavours/glitch/components/router';
 import { VisibilityIcon } from 'flavours/glitch/components/visibility_icon';
 import { useAppSelector } from 'flavours/glitch/store';
 
@@ -71,6 +72,7 @@ export const DetailedStatus: React.FC<{
   const properStatus = status?.get('reblog') ?? status;
   const [height, setHeight] = useState(0);
   const nodeRef = useRef<HTMLDivElement>();
+  const history = useAppHistory();
 
   const rewriteMentions = useAppSelector(
     (state) => state.local_settings.get('rewrite_mentions', false) as boolean,
@@ -137,6 +139,18 @@ export const DetailedStatus: React.FC<{
     if (onTranslate) onTranslate(status);
   }, [onTranslate, status]);
 
+  const parseClick = useCallback(
+    (e: React.MouseEvent, destination: string) => {
+      if (e.button === 0 && !(e.ctrlKey || e.altKey || e.metaKey)) {
+        e.preventDefault();
+        history.push(destination);
+      }
+
+      e.stopPropagation();
+    },
+    [history],
+  );
+
   if (!properStatus) {
     return null;
   }
@@ -354,7 +368,6 @@ export const DetailedStatus: React.FC<{
           )}
         </Permalink>
 
-        {/* TODO: parseClick={this.parseClick} */}
         <StatusContent
           status={status}
           media={contentMedia}
@@ -367,6 +380,7 @@ export const DetailedStatus: React.FC<{
           onUpdate={handleChildUpdate}
           tagLinks={tagMisleadingLinks}
           rewriteMentions={rewriteMentions}
+          parseClick={parseClick}
           {...(statusContentProps as any)}
         />