Emoji: Compare history modal (#36378)

This commit is contained in:
Echo 2025-10-07 17:22:00 +02:00 committed by GitHub
parent 3c9b828c71
commit e02ea3e110
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

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