From a37fa8bb85a8cdb3bed6c7ba46cb49a784341b41 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 13 Oct 2023 21:32:59 -0500
Subject: [PATCH] Mention: allow it to link to the profile. disabled for
 MentionNode

---
 src/components/mention.tsx                    | 19 +++++++++++++++----
 src/features/compose/editor/index.tsx         |  1 -
 .../compose/editor/nodes/mention-node.tsx     |  2 +-
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/components/mention.tsx b/src/components/mention.tsx
index 521818ad5..6f969d357 100644
--- a/src/components/mention.tsx
+++ b/src/components/mention.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 
 import { isPubkey } from 'soapbox/utils/nostr';
 
@@ -8,18 +9,28 @@ import type { Mention as MentionEntity } from 'soapbox/schemas';
 
 interface IMention {
   mention: Pick<MentionEntity, 'acct' | 'username'>;
+  disabled?: boolean;
 }
 
-const Mention: React.FC<IMention> = ({ mention: { acct, username } }) => {
+/** Mention for display in post content and the composer. */
+const Mention: React.FC<IMention> = ({ mention: { acct, username }, disabled }) => {
+  const handleClick: React.MouseEventHandler = (e) => {
+    if (disabled) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  };
+
   return (
     <Tooltip text={`@${acct}`}>
-      <button
+      <Link
+        to={`/@${acct}`}
         className='text-primary-600 hover:underline dark:text-accent-blue'
-        type='button'
+        onClick={handleClick}
         dir='ltr'
       >
         @{isPubkey(username) ? username.slice(0, 8) : username}
-      </button>
+      </Link>
     </Tooltip>
   );
 };
diff --git a/src/features/compose/editor/index.tsx b/src/features/compose/editor/index.tsx
index a73081b89..eeb6c1f02 100644
--- a/src/features/compose/editor/index.tsx
+++ b/src/features/compose/editor/index.tsx
@@ -52,7 +52,6 @@ interface IComposeEditor {
 const theme: InitialConfigType['theme'] = {
   emoji: 'select-none',
   hashtag: 'hover:underline text-primary-600 dark:text-accent-blue hover:text-primary-800 dark:hover:text-accent-blue',
-  mention: 'hover:underline text-primary-600 dark:text-accent-blue hover:text-primary-800 dark:hover:text-accent-blue select-none',
   link: 'hover:underline text-primary-600 dark:text-accent-blue hover:text-primary-800 dark:hover:text-accent-blue',
   text: {
     bold: 'font-bold',
diff --git a/src/features/compose/editor/nodes/mention-node.tsx b/src/features/compose/editor/nodes/mention-node.tsx
index 1e24b79d8..5035e7293 100644
--- a/src/features/compose/editor/nodes/mention-node.tsx
+++ b/src/features/compose/editor/nodes/mention-node.tsx
@@ -78,7 +78,7 @@ class MentionNode extends DecoratorNode<JSX.Element> {
     const username = acct.split('@')[0];
 
     return (
-      <Mention mention={{ acct, username }} />
+      <Mention mention={{ acct, username }} disabled />
     );
   }