[FIX] MarkdownText usage (#18621)

client/admin/cloud/ManualWorkspaceRegistrationModal.js

@@ -67,7 +67,7 @@ function CopyStep({ onNextButtonClick }) {
 					<Icon name='copy' /> {t('Copy')}
 				</Button>
 			</Box>
-			<MarkdownText is='p' withRichContent content={t('Cloud_click_here', { cloudConsoleUrl })} />
+			<MarkdownText is='p' preserveHtml={true} withRichContent content={t('Cloud_click_here', { cloudConsoleUrl })} />
 		</Modal.Content>
 		<Modal.Footer>
 			<ButtonGroup>

client/admin/settings/Setting.js

@@ -132,7 +132,7 @@ export function Setting({ className, settingId, sectionChanged }) {
 	} = setting;
 
 	const label = (i18nLabel && t(i18nLabel)) || (_id || t(_id));
-	const hint = useMemo(() => t.has(i18nDescription) && <MarkdownText content={t(i18nDescription)} />, [i18nDescription, t]);
+	const hint = useMemo(() => t.has(i18nDescription) && <MarkdownText preserveHtml={true} content={t(i18nDescription)} />, [i18nDescription, t]);
 	const callout = useMemo(() => alert && <span dangerouslySetInnerHTML={{ __html: t(alert) }} />, [alert, t]);
 	const hasResetButton = !disableReset && !readonly && type !== 'asset' && (JSON.stringify(packageEditor) !== JSON.stringify(editor) || JSON.stringify(value) !== JSON.stringify(packageValue)) && !disabled;
 

client/components/basic/MarkdownText.js

@@ -1,3 +1,4 @@
+import s from 'underscore.string';
 import { Box } from '@rocket.chat/fuselage';
 import React, { useMemo } from 'react';
 import marked from 'marked';
@@ -5,13 +6,13 @@ import marked from 'marked';
 marked.InlineLexer.rules.gfm.strong = /^\*\*(?=\S)([\s\S]*?\S)\*\*(?!\*)|^\*(?=\S)([\s\S]*?\S)\*(?!\*)/;
 marked.InlineLexer.rules.gfm.em = /^__(?=\S)([\s\S]*?\S)__(?!_)|^_(?=\S)([\s\S]*?\S)_(?!_)/;
 
-function MarkdownText({ content, ...props }) {
-	const options = useMemo(() => ({
-		gfm: true,
-		headerIds: false,
-	}), []);
+const options = {
+	gfm: true,
+	headerIds: false,
+};
 
-	const __html = useMemo(() => content && marked(content, options), [content, options]);
+function MarkdownText({ content, preserveHtml = false, ...props }) {
+	const __html = useMemo(() => content && marked(preserveHtml ? content : s.escapeHTML(content), options), [content, preserveHtml]);
 
 	return <Box dangerouslySetInnerHTML={{ __html }} withRichContent {...props} />;
 }

client/components/basic/UserCard.js

@@ -4,6 +4,7 @@ import { Box, Tag, Button, Icon, Skeleton } from '@rocket.chat/fuselage';
 import { ActionButton } from './Buttons/ActionButton';
 import UserAvatar from './avatar/UserAvatar';
 import * as Status from './UserStatus';
+import MarkdownText from './MarkdownText';
 
 const clampStyle = {
 	display: '-webkit-box',
@@ -84,7 +85,7 @@ const UserCard = forwardRef(({
 		{ customStatus && <Info>{customStatus}</Info> }
 		<Roles>{roles}</Roles>
 		<Info>{localTime}</Info>
-		{ bio && <Info withTruncatedText={false} style={clampStyle} height='x60'>{bio}</Info> }
+		{ bio && <Info withTruncatedText={false} style={clampStyle} height='x60'><MarkdownText content={bio}/></Info> }
 		{open && <a onClick={open}>{t('See_full_profile')}</a>}
 	</Box>
 	{onClose && <Box><ActionButton icon='cross' onClick={onClose}/></Box>}

client/views/directory/UserTab.js

@@ -11,8 +11,7 @@ import { useEndpointData } from '../../hooks/useEndpointData';
 import { useFormatDate } from '../../hooks/useFormatDate';
 import UserAvatar from '../../components/basic/avatar/UserAvatar';
 import NotAuthorizedPage from '../../components/NotAuthorizedPage';
-
-const style = { whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' };
+import MarkdownText from '../../components/basic/MarkdownText';
 
 const FilterByText = ({ setFilter, ...props }) => {
 	const t = useTranslation();
@@ -79,24 +78,24 @@ function UserTable({
 					<Flex.Item>
 						<UserAvatar size='x40' title={username} username={username} etag={avatarETag} />
 					</Flex.Item>
-					<Box style={style} grow={1} mi='x8'>
+					<Box withTruncatedText grow={1} mi='x8'>
 						<Box display='flex'>
-							<Box fontScale='p2' style={style}>{name || username}{nickname && ` (${ nickname })`}</Box> <Box mi='x4'/> <Box fontScale='p1' color='hint' style={style}>{username}</Box>
+							<Box fontScale='p2' withTruncatedText>{name || username}{nickname && ` (${ nickname })`}</Box> <Box mi='x4'/> <Box fontScale='p1' color='hint' withTruncatedText>{username}</Box>
 						</Box>
-						<Box fontScale='p1' color='hint' style={style}> {bio} </Box>
+						<MarkdownText fontScale='p1' color='hint' content={bio}/>
 					</Box>
 				</Box>
 			</Flex.Container>
 		</Table.Cell>
 		{mediaQuery && canViewFullOtherUserInfo
-			&& <Table.Cell style={style} >
+			&& <Table.Cell withTruncatedText >
 				{emails && emails[0].address}
 			</Table.Cell>}
 		{federation
-		&& <Table.Cell style={style}>
+		&& <Table.Cell withTruncatedText>
 			{domain}
 		</Table.Cell>}
-		{mediaQuery && <Table.Cell fontScale='p1' color='hint' style={style}>
+		{mediaQuery && <Table.Cell fontScale='p1' color='hint' withTruncatedText>
 			{formatDate(createdAt)}
 		</Table.Cell>}
 	</Table.Row>, [mediaQuery, federation, canViewFullOtherUserInfo, formatDate, onClick]);