Emoji: Statuses (#36393)

app/javascript/mastodon/components/content_warning.tsx

@@ -1,15 +1,38 @@
+import type { List } from 'immutable';
+
+import type { CustomEmoji } from '../models/custom_emoji';
+import type { Status } from '../models/status';
+
+import { EmojiHTML } from './emoji/html';
 import { StatusBanner, BannerVariant } from './status_banner';
 
 export const ContentWarning: React.FC<{
-  text: string;
+  status: Status;
   expanded?: boolean;
   onClick?: () => void;
-}> = ({ text, expanded, onClick }) => (
+}> = ({ status, expanded, onClick }) => {
-  <StatusBanner
+  const hasSpoiler = !!status.get('spoiler_text');
-    expanded={expanded}
+  if (!hasSpoiler) {
-    onClick={onClick}
+    return null;
-    variant={BannerVariant.Warning}
+  }
-  >
+
-    <span dangerouslySetInnerHTML={{ __html: text }} />
+  const text =
-  </StatusBanner>
+    status.getIn(['translation', 'spoilerHtml']) || status.get('spoilerHtml');
-);
+  if (typeof text !== 'string' || text.length === 0) {
+    return null;
+  }
+
+  return (
+    <StatusBanner
+      expanded={expanded}
+      onClick={onClick}
+      variant={BannerVariant.Warning}
+    >
+      <EmojiHTML
+        as='span'
+        htmlString={text}
+        extraEmojis={status.get('emoji') as List<CustomEmoji>}
+      />
+    </StatusBanner>
+  );
+};

app/javascript/mastodon/components/poll.tsx

@@ -8,6 +8,7 @@ import classNames from 'classnames';
 import { animated, useSpring } from '@react-spring/web';
 import escapeTextContentForBrowser from 'escape-html';
 
+import { EmojiHTML } from '@/mastodon/components/emoji/html';
 import CheckIcon from '@/material-icons/400-24px/check.svg?react';
 import { openModal } from 'mastodon/actions/modal';
 import { fetchPoll, vote } from 'mastodon/actions/polls';
@@ -305,10 +306,11 @@ const PollOption: React.FC<PollOptionProps> = (props) => {
           </span>
         )}
 
-        <span
+        <EmojiHTML
           className='poll__option__text translate'
           lang={lang}
-          dangerouslySetInnerHTML={{ __html: titleHtml }}
+          htmlString={titleHtml}
+          extraEmojis={poll.emojis}
         />
 
         {!!voted && (

app/javascript/mastodon/components/status.jsx

@@ -600,7 +600,7 @@ class Status extends ImmutablePureComponent {
 
             {matchedFilters && <FilterWarning title={matchedFilters.join(', ')} expanded={this.state.showDespiteFilter} onClick={this.handleFilterToggle} />}
 
-            {(status.get('spoiler_text').length > 0 && (!matchedFilters || this.state.showDespiteFilter)) && <ContentWarning text={status.getIn(['translation', 'spoilerHtml']) || status.get('spoilerHtml')} expanded={expanded} onClick={this.handleExpandedToggle} />}
+            {(!matchedFilters || this.state.showDespiteFilter) && <ContentWarning status={status} expanded={expanded} onClick={this.handleExpandedToggle} />}
 
             {expanded && (
               <>

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

@@ -83,14 +83,15 @@ export const HandledLink: FC<HandledLinkProps & ComponentProps<'a'>> = ({
 
 export const useElementHandledLink = ({
   hashtagAccountId,
-  mentionAccountId,
+  hrefToMentionAccountId,
 }: {
   hashtagAccountId?: string;
-  mentionAccountId?: string;
+  hrefToMentionAccountId?: (href: string) => string | undefined;
 } = {}) => {
   const onElement = useCallback<OnElementHandler>(
     (element, { key, ...props }) => {
       if (element instanceof HTMLAnchorElement) {
+        const mentionId = hrefToMentionAccountId?.(element.href);
         return (
           <HandledLink
             {...props}
@@ -98,13 +99,13 @@ export const useElementHandledLink = ({
             href={element.href}
             text={element.innerText}
             hashtagAccountId={hashtagAccountId}
-            mentionAccountId={mentionAccountId}
+            mentionAccountId={mentionId}
           />
         );
       }
       return undefined;
     },
-    [hashtagAccountId, mentionAccountId],
+    [hashtagAccountId, hrefToMentionAccountId],
   );
   return { onElement };
 };

app/javascript/mastodon/components/status_banner.tsx

@@ -3,6 +3,8 @@ import { useCallback, useRef, useId } from 'react';
 
 import { FormattedMessage } from 'react-intl';
 
+import { AnimateEmojiProvider } from './emoji/context';
+
 export enum BannerVariant {
   Warning = 'warning',
   Filter = 'filter',
@@ -34,8 +36,7 @@ export const StatusBanner: React.FC<{
 
   return (
     // Element clicks are passed on to button
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+    <AnimateEmojiProvider
-    <div
       className={
         variant === BannerVariant.Warning
           ? 'content-warning'
@@ -69,6 +70,6 @@ export const StatusBanner: React.FC<{
           />
         )}
       </button>
-    </div>
+    </AnimateEmojiProvider>
   );
 };

app/javascript/mastodon/features/compose/components/edit_indicator.jsx

@@ -50,9 +50,7 @@ export const EditIndicator = () => {
 
       <EmbeddedStatusContent
         className='edit-indicator__content translate'
-        content={status.get('contentHtml')}
+        status={status}
-        language={status.get('language')}
-        mentions={status.get('mentions')}
       />
 
       {(status.get('poll') || status.get('media_attachments').size > 0) && (

app/javascript/mastodon/features/compose/components/reply_indicator.jsx

@@ -35,9 +35,7 @@ export const ReplyIndicator = () => {
 
         <EmbeddedStatusContent
           className='reply-indicator__content translate'
-          content={status.get('contentHtml')}
+          status={status}
-          language={status.get('language')}
-          mentions={status.get('mentions')}
         />
 
         {(status.get('poll') || status.get('media_attachments').size > 0) && (

app/javascript/mastodon/features/directory/components/account_card.tsx

@@ -2,6 +2,7 @@ import { FormattedMessage } from 'react-intl';
 
 import { Link } from 'react-router-dom';
 
+import { EmojiHTML } from '@/mastodon/components/emoji/html';
 import { Avatar } from 'mastodon/components/avatar';
 import { DisplayName } from 'mastodon/components/display_name';
 import { FollowButton } from 'mastodon/components/follow_button';
@@ -39,9 +40,10 @@ export const AccountCard: React.FC<{ accountId: string }> = ({ accountId }) => {
       </Link>
 
       {account.get('note').length > 0 && (
-        <div
+        <EmojiHTML
-          className='account-card__bio translate animate-parent'
+          className='account-card__bio translate'
-          dangerouslySetInnerHTML={{ __html: account.get('note_emojified') }}
+          htmlString={account.get('note_emojified')}
+          extraEmojis={account.get('emojis')}
         />
       )}
 

app/javascript/mastodon/features/emoji/normalize.ts

@@ -154,6 +154,12 @@ export function cleanExtraEmojis(extraEmojis?: CustomEmojiMapArg) {
   if (!extraEmojis) {
     return null;
   }
+  if (Array.isArray(extraEmojis)) {
+    return extraEmojis.reduce<ExtraCustomEmojiMap>(
+      (acc, emoji) => ({ ...acc, [emoji.shortcode]: emoji }),
+      {},
+    );
+  }
   if (!isList(extraEmojis)) {
     return extraEmojis;
   }

app/javascript/mastodon/features/emoji/types.ts

@@ -56,7 +56,8 @@ export type EmojiStateMap = LimitedCache<string, EmojiState>;
 
 export type CustomEmojiMapArg =
   | ExtraCustomEmojiMap
-  | ImmutableList<CustomEmoji>;
+  | ImmutableList<CustomEmoji>
+  | CustomEmoji[];
 
 export type ExtraCustomEmojiMap = Record<
   string,

app/javascript/mastodon/features/follow_requests/components/account_authorize.jsx

@@ -10,9 +10,10 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import CheckIcon from '@/material-icons/400-24px/check.svg?react';
 import CloseIcon from '@/material-icons/400-24px/close.svg?react';
 
-import { Avatar } from '../../../components/avatar';
+import { Avatar } from '@/mastodon/components/avatar';
-import { DisplayName } from '../../../components/display_name';
+import { DisplayName } from '@/mastodon/components/display_name';
-import { IconButton } from '../../../components/icon_button';
+import { IconButton } from '@/mastodon/components/icon_button';
+import { EmojiHTML } from '@/mastodon/components/emoji/html';
 
 const messages = defineMessages({
   authorize: { id: 'follow_request.authorize', defaultMessage: 'Authorize' },
@@ -30,7 +31,6 @@ class AccountAuthorize extends ImmutablePureComponent {
 
   render () {
     const { intl, account, onAuthorize, onReject } = this.props;
-    const content = { __html: account.get('note_emojified') };
 
     return (
       <div className='account-authorize__wrapper'>
@@ -40,7 +40,11 @@ class AccountAuthorize extends ImmutablePureComponent {
             <DisplayName account={account} />
           </Link>
 
-          <div className='account__header__content translate' dangerouslySetInnerHTML={content} />
+          <EmojiHTML
+            className='account__header__content translate'
+            htmlString={account.get('note_emojified')}
+            extraEmojis={account.get('emojis')}
+          />
         </div>
 
         <div className='account--panel'>

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

@@ -6,6 +6,7 @@ import { useHistory } from 'react-router-dom';
 
 import type { List as ImmutableList, RecordOf } from 'immutable';
 
+import type { ApiMentionJSON } from '@/mastodon/api_types/statuses';
 import { AnimateEmojiProvider } from '@/mastodon/components/emoji/context';
 import BarChart4BarsIcon from '@/material-icons/400-24px/bar_chart_4_bars.svg?react';
 import PhotoLibraryIcon from '@/material-icons/400-24px/photo_library.svg?react';
@@ -18,7 +19,7 @@ import { useAppSelector, useAppDispatch } from 'mastodon/store';
 
 import { EmbeddedStatusContent } from './embedded_status_content';
 
-export type Mention = RecordOf<{ url: string; acct: string }>;
+export type Mention = RecordOf<ApiMentionJSON>;
 
 export const EmbeddedStatus: React.FC<{ statusId: string }> = ({
   statusId,
@@ -86,12 +87,9 @@ export const EmbeddedStatus: React.FC<{ statusId: string }> = ({
   }
 
   // Assign status attributes to variables with a forced type, as status is not yet properly typed
-  const contentHtml = status.get('contentHtml') as string;
+  const hasContentWarning = !!status.get('spoiler_text');
-  const contentWarning = status.get('spoilerHtml') as string;
   const poll = status.get('poll');
-  const language = status.get('language') as string;
+  const expanded = !status.get('hidden') || !hasContentWarning;
-  const mentions = status.get('mentions') as ImmutableList<Mention>;
-  const expanded = !status.get('hidden') || !contentWarning;
   const mediaAttachmentsSize = (
     status.get('media_attachments') as ImmutableList<unknown>
   ).size;
@@ -109,20 +107,16 @@ export const EmbeddedStatus: React.FC<{ statusId: string }> = ({
         <DisplayName account={account} />
       </div>
 
-      {contentWarning && (
+      <ContentWarning
-        <ContentWarning
+        status={status}
-          text={contentWarning}
+        onClick={handleContentWarningClick}
-          onClick={handleContentWarningClick}
+        expanded={expanded}
-          expanded={expanded}
+      />
-        />
-      )}
 
-      {(!contentWarning || expanded) && (
+      {(!hasContentWarning || expanded) && (
         <EmbeddedStatusContent
           className='notification-group__embedded-status__content reply-indicator__content translate'
-          content={contentHtml}
+          status={status}
-          language={language}
-          mentions={mentions}
         />
       )}
 

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

@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 
 import { useHistory } from 'react-router-dom';
 
@@ -6,16 +6,22 @@ import type { List } from 'immutable';
 
 import type { History } from 'history';
 
+import type { ApiMentionJSON } from '@/mastodon/api_types/statuses';
+import { EmojiHTML } from '@/mastodon/components/emoji/html';
+import { useElementHandledLink } from '@/mastodon/components/status/handled_link';
+import type { Status } from '@/mastodon/models/status';
+import { isModernEmojiEnabled } from '@/mastodon/utils/environment';
+
 import type { Mention } from './embedded_status';
 
 const handleMentionClick = (
   history: History,
-  mention: Mention,
+  mention: ApiMentionJSON,
   e: MouseEvent,
 ) => {
   if (e.button === 0 && !(e.ctrlKey || e.metaKey)) {
     e.preventDefault();
-    history.push(`/@${mention.get('acct')}`);
+    history.push(`/@${mention.acct}`);
   }
 };
 
@@ -31,16 +37,26 @@ const handleHashtagClick = (
 };
 
 export const EmbeddedStatusContent: React.FC<{
-  content: string;
+  status: Status;
-  mentions: List<Mention>;
-  language: string;
   className?: string;
-}> = ({ content, mentions, language, className }) => {
+}> = ({ status, className }) => {
   const history = useHistory();
 
+  const mentions = useMemo(
+    () => (status.get('mentions') as List<Mention>).toJS(),
+    [status],
+  );
+  const htmlHandlers = useElementHandledLink({
+    hashtagAccountId: status.get('account') as string | undefined,
+    hrefToMentionAccountId(href) {
+      const mention = mentions.find((item) => item.url === href);
+      return mention?.id;
+    },
+  });
+
   const handleContentRef = useCallback(
     (node: HTMLDivElement | null) => {
-      if (!node) {
+      if (!node || isModernEmojiEnabled()) {
         return;
       }
 
@@ -53,7 +69,7 @@ export const EmbeddedStatusContent: React.FC<{
 
         link.classList.add('status-link');
 
-        const mention = mentions.find((item) => link.href === item.get('url'));
+        const mention = mentions.find((item) => link.href === item.url);
 
         if (mention) {
           link.addEventListener(
@@ -61,8 +77,8 @@ export const EmbeddedStatusContent: React.FC<{
             handleMentionClick.bind(null, history, mention),
             false,
           );
-          link.setAttribute('title', `@${mention.get('acct')}`);
+          link.setAttribute('title', `@${mention.acct}`);
-          link.setAttribute('href', `/@${mention.get('acct')}`);
+          link.setAttribute('href', `/@${mention.acct}`);
         } else if (
           link.textContent.startsWith('#') ||
           link.previousSibling?.textContent?.endsWith('#')
@@ -83,11 +99,12 @@ export const EmbeddedStatusContent: React.FC<{
   );
 
   return (
-    <div
+    <EmojiHTML
+      {...htmlHandlers}
       className={className}
       ref={handleContentRef}
-      lang={language}
+      lang={status.get('language') as string}
-      dangerouslySetInnerHTML={{ __html: content }}
+      htmlString={status.get('contentHtml') as string}
     />
   );
 };

app/javascript/mastodon/features/status/components/detailed_status.tsx

@@ -394,17 +394,13 @@ export const DetailedStatus: React.FC<{
           />
         )}
 
-        {status.get('spoiler_text').length > 0 &&
+        {(!matchedFilters || showDespiteFilter) && (
-          (!matchedFilters || showDespiteFilter) && (
+          <ContentWarning
-            <ContentWarning
+            status={status}
-              text={
+            expanded={expanded}
-                status.getIn(['translation', 'spoilerHtml']) ||
+            onClick={handleExpandedToggle}
-                status.get('spoilerHtml')
+          />
-              }
+        )}
-              expanded={expanded}
-              onClick={handleExpandedToggle}
-            />
-          )}
 
         {expanded && (
           <>