Mention: allow it to link to the profile. disabled for MentionNode

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>
   );
 };

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',

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 />
     );
   }