Merge branch 'emojify' into 'main'

Add emojify back in a few places I missed

See merge request soapbox-pub/soapbox!3280

src/components/account.tsx

@@ -4,6 +4,7 @@ import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import { Link, useHistory } from 'react-router-dom';
 
 import HoverRefWrapper from 'soapbox/components/hover-ref-wrapper.tsx';
+import Markup from 'soapbox/components/markup.tsx';
 import Avatar from 'soapbox/components/ui/avatar.tsx';
 import Emoji from 'soapbox/components/ui/emoji.tsx';
 import HStack from 'soapbox/components/ui/hstack.tsx';
@@ -303,10 +304,11 @@ const Account = ({
                   {note}
                 </Text>
               ) : withAccountNote && (
-                <Text
+                <Markup
                   truncate
                   size='sm'
-                  dangerouslySetInnerHTML={{ __html: account.note }}
+                  html={{ __html: account.note }}
+                  emojis={account.emojis}
                   className='mr-2 rtl:ml-2 rtl:mr-0 [&_br]:hidden [&_p:first-child]:inline [&_p:first-child]:truncate [&_p]:hidden'
                 />
               )}

src/components/profile-hover-card.tsx

@@ -13,6 +13,7 @@ import {
 } from 'soapbox/actions/profile-hover-card.ts';
 import { useAccount, usePatronUser } from 'soapbox/api/hooks/index.ts';
 import Badge from 'soapbox/components/badge.tsx';
+import Markup from 'soapbox/components/markup.tsx';
 import { Card, CardBody } from 'soapbox/components/ui/card.tsx';
 import HStack from 'soapbox/components/ui/hstack.tsx';
 import Icon from 'soapbox/components/ui/icon.tsx';
@@ -144,7 +145,7 @@ export const ProfileHoverCard: React.FC<IProfileHoverCard> = ({ visible = true }
             ) : null}
 
             {account.note.length > 0 && (
-              <Text size='sm' dangerouslySetInnerHTML={{ __html: account.note }} />
+              <Markup size='sm' emojis={account.emojis} html={{ __html: account.note }} />
             )}
           </Stack>
 

src/components/statuses/sensitive-content-overlay.tsx

@@ -17,6 +17,7 @@ import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
 import { useSettings } from 'soapbox/hooks/useSettings.ts';
 import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
+import { emojifyText } from 'soapbox/utils/emojify.tsx';
 import { defaultMediaVisibility } from 'soapbox/utils/status.ts';
 
 import type { Status as StatusEntity } from 'soapbox/types/entities.ts';
@@ -129,7 +130,7 @@ const SensitiveContentOverlay = forwardRef<HTMLDivElement, ISensitiveContentOver
                 <div className='py-4 italic'>
                   {/* eslint-disable formatjs/no-literal-string-in-jsx */}
                   <Text className='line-clamp-6' theme='white' size='md' weight='medium'>
-                    &ldquo;<span>{status.spoiler_text}</span>&rdquo;
+                    &ldquo;<span>{emojifyText(status.spoiler_text, status.emojis.toJS())}</span>&rdquo;
                   </Text>
                   {/* eslint-enable formatjs/no-literal-string-in-jsx */}
                 </div>

src/features/account-timeline/components/moved-note.tsx

@@ -5,6 +5,7 @@ import Account from 'soapbox/components/account.tsx';
 import Icon from 'soapbox/components/icon.tsx';
 import HStack from 'soapbox/components/ui/hstack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
+import { emojifyText } from 'soapbox/utils/emojify.tsx';
 
 import type { Account as AccountEntity } from 'soapbox/schemas/index.ts';
 
@@ -27,7 +28,7 @@ const MovedNote: React.FC<IMovedNote> = ({ from, to }) => (
             id='notification.move'
             defaultMessage='{name} moved to {targetName}'
             values={{
-              name: from.display_name,
+              name: emojifyText(from.display_name, from.emojis),
               targetName: to.acct,
             }}
           />

src/features/admin/announcements.tsx

@@ -3,6 +3,7 @@ import { FormattedDate, FormattedMessage, defineMessages, useIntl } from 'react-
 
 import { openModal } from 'soapbox/actions/modals.ts';
 import { useAnnouncements } from 'soapbox/api/hooks/admin/useAnnouncements.ts';
+import Markup from 'soapbox/components/markup.tsx';
 import ScrollableList from 'soapbox/components/scrollable-list.tsx';
 import Button from 'soapbox/components/ui/button.tsx';
 import { Column } from 'soapbox/components/ui/column.tsx';
@@ -48,7 +49,7 @@ const Announcement: React.FC<IAnnouncement> = ({ announcement }) => {
   return (
     <div key={announcement.id} className='rounded-lg bg-gray-100 p-4 dark:bg-primary-800'>
       <Stack space={2}>
-        <Text dangerouslySetInnerHTML={{ __html: announcement.content }} />
+        <Markup emojis={announcement.emojis} html={{ __html: announcement.content }} />
         {(announcement.starts_at || announcement.ends_at || announcement.all_day) && (
           <HStack space={2} wrap>
             {announcement.starts_at && (

src/features/directory/components/account-card.tsx

@@ -4,6 +4,7 @@ import { getSettings } from 'soapbox/actions/settings.ts';
 import { useAccount } from 'soapbox/api/hooks/index.ts';
 import Account from 'soapbox/components/account.tsx';
 import Badge from 'soapbox/components/badge.tsx';
+import Markup from 'soapbox/components/markup.tsx';
 import RelativeTimestamp from 'soapbox/components/relative-timestamp.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
@@ -53,13 +54,13 @@ const AccountCard: React.FC<IAccountCard> = ({ id }) => {
           withRelationship={false}
         />
 
-        <Text
+        <Markup
           truncate
           align='left'
           className='[&_br]:hidden [&_p:first-child]:inline [&_p:first-child]:truncate [&_p]:hidden'
-        >
-          {account.note}
-        </Text>
+          emojis={account.emojis}
+          html={{ __html: account.note }}
+        />
       </Stack>
 
       <div className='grid grid-cols-3 gap-1 py-4'>

src/features/event/components/event-header.tsx

@@ -50,6 +50,7 @@ import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
 import { useSettings } from 'soapbox/hooks/useSettings.ts';
 import copy from 'soapbox/utils/copy.ts';
 import { download } from 'soapbox/utils/download.ts';
+import { emojifyText } from 'soapbox/utils/emojify.tsx';
 import { shortNumberFormat } from 'soapbox/utils/numbers.tsx';
 
 import PlaceholderEventHeader from '../../placeholder/components/placeholder-event-header.tsx';
@@ -459,7 +460,7 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
                   name: (
                     <Link className='mention inline-block' to={`/@${account.acct}`}>
                       <HStack space={1} alignItems='center' grow>
-                        <span>{account.display_name}</span>
+                        <span>{emojifyText(account.display_name, account.emojis)}</span>
                         {account.verified && <VerificationBadge />}
                       </HStack>
                     </Link>

src/features/ui/components/modals/compare-history-modal.tsx

@@ -12,6 +12,7 @@ import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
 import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { emojifyText } from 'soapbox/utils/emojify.tsx';
 
 import type { StatusEdit as StatusEditEntity } from 'soapbox/types/entities.ts';
 
@@ -49,12 +50,15 @@ const CompareHistoryModal: React.FC<ICompareHistoryModal> = ({ onClose, statusId
             <div className='flex flex-col py-2 first:pt-0 last:pb-0'>
               {version.spoiler_text?.length > 0 && (
                 <>
-                  <span>{version.spoiler_text}</span>
+                  <span>{emojifyText(version.spoiler_text, version.emojis.toJS())}</span>
                   <hr />
                 </>
               )}
 
-              <div className='whitespace-normal p-0 pt-2.5 text-sm text-gray-700 dark:text-gray-500' dangerouslySetInnerHTML={{ __html: version.content }} />
+              <div
+                className='whitespace-normal p-0 pt-2.5 text-sm text-gray-700 dark:text-gray-500'
+                dangerouslySetInnerHTML={{ __html: version.content }}
+              />
 
               {poll && (
                 <div>
@@ -69,7 +73,7 @@ const CompareHistoryModal: React.FC<ICompareHistoryModal> = ({ onClose, statusId
                           role={poll.multiple ? 'checkbox' : 'radio'}
                         />
 
-                        <span>{option.title}</span>
+                        <span>{emojifyText(option.title, poll.emojis)}</span>
                       </HStack>
                     ))}
                   </Stack>