feat: enabling emoji on custom status (#24170)

client/components/UserCard/UserCard.js

@@ -68,7 +68,9 @@ const UserCard = forwardRef(function UserCard(
 						</Box>
 					)}
 				</Box>
-				{customStatus && <Info>{typeof customStatus === 'string' ? <MarkdownText content={customStatus} /> : customStatus}</Info>}
+				{customStatus && (
+					<Info>{typeof customStatus === 'string' ? <MarkdownText content={customStatus} parseEmoji={true} /> : customStatus}</Info>
+				)}
 				<Roles>{roles}</Roles>
 				<Info>{localTime}</Info>
 				{bio && (

client/sidebar/header/UserDropdown.tsx

@@ -135,7 +135,12 @@ const UserDropdown = ({ user, onClose }: UserDropdownProps): ReactElement => {
 						</Margins>
 					</Box>
 					<Box color='hint'>
-						<MarkdownText withTruncatedText content={statusText || t(status || 'offline')} variant='inlineWithoutBreaks' />
+						<MarkdownText
+							withTruncatedText
+							parseEmoji={true}
+							content={statusText || t(status || 'offline')}
+							variant='inlineWithoutBreaks'
+						/>
 					</Box>
 				</Box>
 			</Box>
@@ -160,7 +165,9 @@ const UserDropdown = ({ user, onClose }: UserDropdownProps): ReactElement => {
 							<Option.Column>
 								<UserStatus status={modifier} />
 							</Option.Column>
-							<Option.Content>{name}</Option.Content>
+							<Option.Content>
+								<MarkdownText content={name} parseEmoji={true} variant='inline' />
+							</Option.Content>
 						</Option>
 					);
 				})}

client/views/room/Header/RoomHeader.tsx

@@ -47,7 +47,9 @@ const RoomHeader: FC<RoomHeaderProps> = ({ room, topic = '', slots = {} }) => (
 				{slots?.insideContent}
 			</Header.Content.Row>
 			<Header.Content.Row>
-				<Header.Subtitle>{topic && <MarkdownText variant='inlineWithoutBreaks' withTruncatedText content={topic} />}</Header.Subtitle>
+				<Header.Subtitle>
+					{topic && <MarkdownText parseEmoji={true} variant='inlineWithoutBreaks' withTruncatedText content={topic} />}
+				</Header.Subtitle>
 			</Header.Content.Row>
 		</Header.Content>
 		{slots?.posContent}

client/views/room/contextualBar/UserInfo/UserInfo.js

@@ -65,7 +65,7 @@ function UserInfo({
 					<InfoPanel.Title title={(showRealNames && name) || username || name} icon={status} />
 
 					<InfoPanel.Text>
-						<MarkdownText content={customStatus} variant='inline' />
+						<MarkdownText content={customStatus} parseEmoji={true} variant='inline' />
 					</InfoPanel.Text>
 				</InfoPanel.Section>