From dde8322c7ddc998864f8dc345b00b6f400b3e2d0 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 13 Oct 2023 20:48:01 -0500
Subject: [PATCH] MentionNode: move Mention into a separate component

---
 src/components/mention.tsx                    | 27 +++++++++++++++++++
 .../compose/editor/nodes/mention-node.tsx     | 18 +++----------
 2 files changed, 30 insertions(+), 15 deletions(-)
 create mode 100644 src/components/mention.tsx

diff --git a/src/components/mention.tsx b/src/components/mention.tsx
new file mode 100644
index 000000000..521818ad5
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/src/features/compose/editor/nodes/mention-node.tsx b/src/features/compose/editor/nodes/mention-node.tsx
index 2a4787166..1e24b79d8 100644
--- a/src/features/compose/editor/nodes/mention-node.tsx
+++ b/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 { isPubkey } from 'soapbox/utils/nostr';
+import Mention from 'soapbox/components/mention';
 
 import type {
   EditorConfig,
@@ -43,9 +41,7 @@ class MentionNode extends DecoratorNode<JSX.Element> {
   }
 
   createDOM(config: EditorConfig): HTMLElement {
-    const span = document.createElement('span');
-    addClassNamesToElement(span, config.theme.mention);
-    return span;
+    return document.createElement('span');
   }
 
   updateDOM(): false {
@@ -82,15 +78,7 @@ class MentionNode extends DecoratorNode<JSX.Element> {
     const username = acct.split('@')[0];
 
     return (
-      <Tooltip text={`@${acct}`}>
-        <button
-          className='text-accent-blue'
-          type='button'
-          dir='ltr'
-        >
-          @{isPubkey(username) ? username.slice(0, 8) : username}
-        </button>
-      </Tooltip>
+      <Mention mention={{ acct, username }} />
     );
   }