Skip to content

Commit

Permalink
[FIX] MarkdownText usage (#18621)
Browse files Browse the repository at this point in the history
  • Loading branch information
ggazzo authored Aug 21, 2020
1 parent 528fbe7 commit 7d60bee
Show file tree
Hide file tree
Showing 5 changed files with 18 additions and 17 deletions.
2 changes: 1 addition & 1 deletion client/admin/cloud/ManualWorkspaceRegistrationModal.js
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,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>
Expand Down
2 changes: 1 addition & 1 deletion client/admin/settings/Setting.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
13 changes: 7 additions & 6 deletions client/components/basic/MarkdownText.js
Original file line number Diff line number Diff line change
@@ -1,17 +1,18 @@
import s from 'underscore.string';
import { Box } from '@rocket.chat/fuselage';
import React, { useMemo } from 'react';
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} />;
}
Expand Down
3 changes: 2 additions & 1 deletion client/components/basic/UserCard.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -85,7 +86,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>}
Expand Down
15 changes: 7 additions & 8 deletions client/views/directory/UserTab.js
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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]);
Expand Down

0 comments on commit 7d60bee

Please sign in to comment.