Emoji: Compare history modal (#36378)

app/javascript/mastodon/features/ui/components/compare_history_modal.jsx

@@ -15,6 +15,8 @@ import InlineAccount from 'mastodon/components/inline_account';
 import MediaAttachments from 'mastodon/components/media_attachments';
 import { RelativeTimestamp } from 'mastodon/components/relative_timestamp';
 import emojify from 'mastodon/features/emoji/emoji';
+import { EmojiHTML } from '@/mastodon/components/emoji/html';
+import { CustomEmojiProvider } from '@/mastodon/components/emoji/context';
 
 const mapStateToProps = (state, { statusId }) => ({
   language: state.getIn(['statuses', statusId, 'language']),
@@ -51,8 +53,8 @@ class CompareHistoryModal extends PureComponent {
       return obj;
     }, {});
 
-    const content = { __html: emojify(currentVersion.get('content'), emojiMap) };
-    const spoilerContent = { __html: emojify(escapeTextContentForBrowser(currentVersion.get('spoiler_text')), emojiMap) };
+    const content = emojify(currentVersion.get('content'), emojiMap);
+    const spoilerContent = emojify(escapeTextContentForBrowser(currentVersion.get('spoiler_text')), emojiMap);
 
     const formattedDate = <RelativeTimestamp timestamp={currentVersion.get('created_at')} short={false} />;
     const formattedName = <InlineAccount accountId={currentVersion.get('account')} />;
@@ -65,43 +67,50 @@ class CompareHistoryModal extends PureComponent {
 
     return (
       <div className='modal-root__modal compare-history-modal'>
-        <div className='report-modal__target'>
-          <IconButton className='report-modal__close' icon='times' iconComponent={CloseIcon} onClick={onClose} size={20} />
-          {label}
-        </div>
-
-        <div className='compare-history-modal__container'>
-          <div className='status__content'>
-            {currentVersion.get('spoiler_text').length > 0 && (
-              <>
-                <div className='translate' dangerouslySetInnerHTML={spoilerContent} lang={language} />
-                <hr />
-              </>
-            )}
-
-            <div className='status__content__text status__content__text--visible translate' dangerouslySetInnerHTML={content} lang={language} />
-
-            {!!currentVersion.get('poll') && (
-              <div className='poll'>
-                <ul>
-                  {currentVersion.getIn(['poll', 'options']).map(option => (
-                    <li key={option.get('title')}>
-                      <span className='poll__input disabled' />
-
-                      <span
-                        className='poll__option__text translate'
-                        dangerouslySetInnerHTML={{ __html: emojify(escapeTextContentForBrowser(option.get('title')), emojiMap) }}
-                        lang={language}
-                      />
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            )}
-
-            <MediaAttachments status={currentVersion} lang={language} />
+        <CustomEmojiProvider emojis={currentVersion.get('emojis')}>
+          <div className='report-modal__target'>
+            <IconButton className='report-modal__close' icon='times' iconComponent={CloseIcon} onClick={onClose} size={20} />
+            {label}
           </div>
-        </div>
+
+          <div className='compare-history-modal__container'>
+            <div className='status__content'>
+              {currentVersion.get('spoiler_text').length > 0 && (
+                <>
+                  <EmojiHTML className='translate' htmlString={spoilerContent} lang={language} />
+                  <hr />
+                </>
+              )}
+
+              <EmojiHTML
+                className='status__content__text status__content__text--visible translate'
+                htmlString={content}
+                lang={language}
+              />
+
+              {!!currentVersion.get('poll') && (
+                <div className='poll'>
+                  <ul>
+                    {currentVersion.getIn(['poll', 'options']).map(option => (
+                      <li key={option.get('title')}>
+                        <span className='poll__input disabled' />
+
+                        <EmojiHTML
+                          as="span"
+                          className='poll__option__text translate'
+                          htmlString={emojify(escapeTextContentForBrowser(option.get('title')), emojiMap)}
+                          lang={language}
+                        />
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              )}
+
+              <MediaAttachments status={currentVersion} lang={language} />
+            </div>
+          </div>
+        </CustomEmojiProvider>
       </div>
     );
   }