MentionNode: move Mention into a separate component

src/components/mention.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import { isPubkey } from 'soapbox/utils/nostr';
+
+import { Tooltip } from './ui';
+
+import type { Mention as MentionEntity } from 'soapbox/schemas';
+
+interface IMention {
+  mention: Pick<MentionEntity, 'acct' | 'username'>;
+}
+
+const Mention: React.FC<IMention> = ({ mention: { acct, username } }) => {
+  return (
+    <Tooltip text={`@${acct}`}>
+      <button
+        className='text-primary-600 hover:underline dark:text-accent-blue'
+        type='button'
+        dir='ltr'
+      >
+        @{isPubkey(username) ? username.slice(0, 8) : username}
+      </button>
+    </Tooltip>
+  );
+};
+
+export default Mention;

src/features/compose/editor/nodes/mention-node.tsx

@@ -4,12 +4,10 @@
  * LICENSE file in the /src/features/compose/editor directory.
  */
 
-import { addClassNamesToElement } from '@lexical/utils';
 import { $applyNodeReplacement, DecoratorNode } from 'lexical';
 import React from 'react';
 
-import { Tooltip } from 'soapbox/components/ui';
+import Mention from 'soapbox/components/mention';
-import { isPubkey } from 'soapbox/utils/nostr';
 
 import type {
   EditorConfig,
@@ -43,9 +41,7 @@ class MentionNode extends DecoratorNode<JSX.Element> {
   }
 
   createDOM(config: EditorConfig): HTMLElement {
-    const span = document.createElement('span');
+    return document.createElement('span');
-    addClassNamesToElement(span, config.theme.mention);
-    return span;
   }
 
   updateDOM(): false {
@@ -82,15 +78,7 @@ class MentionNode extends DecoratorNode<JSX.Element> {
     const username = acct.split('@')[0];
 
     return (
-      <Tooltip text={`@${acct}`}>
+      <Mention mention={{ acct, username }} />
-        <button
-          className='text-accent-blue'
-          type='button'
-          dir='ltr'
-        >
-          @{isPubkey(username) ? username.slice(0, 8) : username}
-        </button>
-      </Tooltip>
     );
   }