Emoji: Fixes issue with handled link not correctly showing remote users (#36403)

app/javascript/mastodon/components/status/handled_link.stories.tsx

@@ -1,19 +1,28 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { HashtagMenuController } from '@/mastodon/features/ui/components/hashtag_menu_controller';
-import { accountFactoryState } from '@/testing/factories';
 
 import { HoverCardController } from '../hover_card_controller';
 
 import type { HandledLinkProps } from './handled_link';
 import { HandledLink } from './handled_link';
 
+type HandledLinkStoryProps = Pick<HandledLinkProps, 'href' | 'text'> & {
+  mentionAccount: 'local' | 'remote' | 'none';
+};
+
 const meta = {
   title: 'Components/Status/HandledLink',
-  render(args) {
+  render({ mentionAccount, ...args }) {
+    let mention: HandledLinkProps['mention'] | undefined;
+    if (mentionAccount === 'local') {
+      mention = { id: '1', acct: 'testuser' };
+    } else if (mentionAccount === 'remote') {
+      mention = { id: '2', acct: 'remoteuser@mastodon.social' };
+    }
     return (
       <>
-        <HandledLink {...args} mentionAccountId='1' hashtagAccountId='1' />
+        <HandledLink {...args} mention={mention} hashtagAccountId='1' />
         <HashtagMenuController />
         <HoverCardController />
       </>
@@ -22,15 +31,16 @@ const meta = {
   args: {
     href: 'https://example.com/path/subpath?query=1#hash',
     text: 'https://example.com',
+    mentionAccount: 'none',
   },
-  parameters: {
-    state: {
-      accounts: {
-        '1': accountFactoryState(),
-      },
+  argTypes: {
+    mentionAccount: {
+      control: { type: 'select' },
+      options: ['local', 'remote', 'none'],
+      defaultValue: 'none',
     },
   },
-} satisfies Meta<Pick<HandledLinkProps, 'href' | 'text'>>;
+} satisfies Meta<HandledLinkStoryProps>;
 
 export default meta;
 
@@ -47,6 +57,7 @@ export const Hashtag: Story = {
 export const Mention: Story = {
   args: {
     text: '@user',
+    mentionAccount: 'local',
   },
 };
 

app/javascript/mastodon/components/status/handled_link.tsx

@@ -1,22 +1,25 @@
 import { useCallback } from 'react';
 import type { ComponentProps, FC } from 'react';
 
+import classNames from 'classnames';
 import { Link } from 'react-router-dom';
 
+import type { ApiMentionJSON } from '@/mastodon/api_types/statuses';
 import type { OnElementHandler } from '@/mastodon/utils/html';
 
 export interface HandledLinkProps {
   href: string;
   text: string;
   hashtagAccountId?: string;
-  mentionAccountId?: string;
+  mention?: Pick<ApiMentionJSON, 'id' | 'acct'>;
 }
 
 export const HandledLink: FC<HandledLinkProps & ComponentProps<'a'>> = ({
   href,
   text,
   hashtagAccountId,
-  mentionAccountId,
+  mention,
+  className,
   ...props
 }) => {
   // Handle hashtags
@@ -24,8 +27,7 @@ export const HandledLink: FC<HandledLinkProps & ComponentProps<'a'>> = ({
     const hashtag = text.slice(1).trim();
     return (
       <Link
-        {...props}
-        className='mention hashtag'
+        className={classNames('mention hashtag', className)}
         to={`/tags/${hashtag}`}
         rel='tag'
         data-menu-hashtag={hashtagAccountId}
@@ -33,18 +35,16 @@ export const HandledLink: FC<HandledLinkProps & ComponentProps<'a'>> = ({
         #<span>{hashtag}</span>
       </Link>
     );
-  } else if (text.startsWith('@')) {
+  } else if (text.startsWith('@') && mention) {
     // Handle mentions
-    const mention = text.slice(1).trim();
     return (
       <Link
-        {...props}
-        className='mention'
-        to={`/@${mention}`}
-        title={`@${mention}`}
-        data-hover-card-account={mentionAccountId}
+        className={classNames('mention', className)}
+        to={`/@${mention.acct}`}
+        title={`@${mention.acct}`}
+        data-hover-card-account={mention.id}
       >
-        @<span>{mention}</span>
+        @<span>{text.slice(1).trim()}</span>
       </Link>
     );
   }
@@ -52,7 +52,7 @@ export const HandledLink: FC<HandledLinkProps & ComponentProps<'a'>> = ({
   // Non-absolute paths treated as internal links.
   if (href.startsWith('/')) {
     return (
-      <Link {...props} className='unhandled-link' to={href}>
+      <Link className={classNames('unhandled-link', className)} to={href}>
         {text}
       </Link>
     );
@@ -66,7 +66,7 @@ export const HandledLink: FC<HandledLinkProps & ComponentProps<'a'>> = ({
         {...props}
         href={href}
         title={href}
-        className='unhandled-link'
+        className={classNames('unhandled-link', className)}
         target='_blank'
         rel='noreferrer noopener'
         translate='no'
@@ -83,15 +83,15 @@ export const HandledLink: FC<HandledLinkProps & ComponentProps<'a'>> = ({
 
 export const useElementHandledLink = ({
   hashtagAccountId,
-  hrefToMentionAccountId,
+  hrefToMention,
 }: {
   hashtagAccountId?: string;
-  hrefToMentionAccountId?: (href: string) => string | undefined;
+  hrefToMention?: (href: string) => ApiMentionJSON | undefined;
 } = {}) => {
   const onElement = useCallback<OnElementHandler>(
     (element, { key, ...props }) => {
       if (element instanceof HTMLAnchorElement) {
-        const mentionId = hrefToMentionAccountId?.(element.href);
+        const mention = hrefToMention?.(element.href);
         return (
           <HandledLink
             {...props}
@@ -99,13 +99,13 @@ export const useElementHandledLink = ({
             href={element.href}
             text={element.innerText}
             hashtagAccountId={hashtagAccountId}
-            mentionAccountId={mentionId}
+            mention={mention}
           />
         );
       }
       return undefined;
     },
-    [hashtagAccountId, hrefToMentionAccountId],
+    [hashtagAccountId, hrefToMention],
   );
   return { onElement };
 };

app/javascript/mastodon/components/status_content.jsx

@@ -213,7 +213,7 @@ class StatusContent extends PureComponent {
           href={element.href}
           text={element.innerText}
           hashtagAccountId={this.props.status.getIn(['account', 'id'])}
-          mentionAccountId={mention?.get('id')}
+          mention={mention?.toJSON()}
           key={key}
         />
       );

app/javascript/mastodon/features/notifications_v2/components/embedded_status_content.tsx

@@ -48,9 +48,8 @@ export const EmbeddedStatusContent: React.FC<{
   );
   const htmlHandlers = useElementHandledLink({
     hashtagAccountId: status.get('account') as string | undefined,
-    hrefToMentionAccountId(href) {
-      const mention = mentions.find((item) => item.url === href);
-      return mention?.id;
+    hrefToMention(href) {
+      return mentions.find((item) => item.url === href);
     },
   });