diff --git a/app/containers/markdown/AtMention.tsx b/app/containers/markdown/AtMention.tsx index 6893132579a..9ed1e9e7dd4 100644 --- a/app/containers/markdown/AtMention.tsx +++ b/app/containers/markdown/AtMention.tsx @@ -1,10 +1,11 @@ -import React from 'react'; +import React, { useContext } from 'react'; import { Text } from 'react-native'; import { useTheme } from '../../theme'; import { themes } from '../../constants/colors'; import styles from './styles'; import { events, logEvent } from '../../utils/log'; +import MarkdownContext from './new/MarkdownContext'; interface IAtMention { mention: string; @@ -17,6 +18,7 @@ interface IAtMention { const AtMention = React.memo(({ mention, mentions, username, navToRoomInfo, style = [], useRealName }: IAtMention) => { const { theme } = useTheme(); + const { preview } = useContext(MarkdownContext); if (mention === 'all' || mention === 'here') { return ( m && m.username === mention); + const user = mentions?.find?.((m: { username: string }) => m && m.username === mention); const handlePress = () => { logEvent(events.ROOM_MENTION_GO_USER_INFO); @@ -56,13 +58,15 @@ const AtMention = React.memo(({ mention, mentions, username, navToRoomInfo, styl if (user) { return ( - + {useRealName && user.name ? user.name : user.username} ); } - return {`@${mention}`}; + return ( + {`@${mention}`} + ); }); export default AtMention; diff --git a/app/containers/markdown/index.tsx b/app/containers/markdown/index.tsx index d84dc7dc82f..d88a489ad35 100644 --- a/app/containers/markdown/index.tsx +++ b/app/containers/markdown/index.tsx @@ -381,6 +381,7 @@ class Markdown extends PureComponent { channels={channels} navToRoomInfo={navToRoomInfo} onLinkPress={onLinkPress} + preview={preview} /> ); } diff --git a/app/containers/markdown/new/Link.tsx b/app/containers/markdown/new/Link.tsx index e29c4f2c0f4..62fa2f1e7c9 100644 --- a/app/containers/markdown/new/Link.tsx +++ b/app/containers/markdown/new/Link.tsx @@ -20,10 +20,10 @@ interface ILinkProps { const Link = ({ value }: ILinkProps): JSX.Element => { const { theme } = useTheme(); - const { onLinkPress } = useContext(MarkdownContext); + const { onLinkPress, preview } = useContext(MarkdownContext); const { src, label } = value; const handlePress = () => { - if (!src.value) { + if (!src.value || preview) { return; } if (onLinkPress) { @@ -38,7 +38,10 @@ const Link = ({ value }: ILinkProps): JSX.Element => { }; return ( - + {(block => { switch (block.type) { case 'PLAIN_TEXT': diff --git a/app/containers/markdown/new/MarkdownContext.ts b/app/containers/markdown/new/MarkdownContext.ts index b22f15614b5..e7923fc992a 100644 --- a/app/containers/markdown/new/MarkdownContext.ts +++ b/app/containers/markdown/new/MarkdownContext.ts @@ -14,6 +14,7 @@ interface IMarkdownContext { navToRoomInfo: Function; getCustomEmoji?: Function; onLinkPress?: Function; + preview: boolean; } const defaultState = { @@ -22,7 +23,8 @@ const defaultState = { useRealName: false, username: '', baseUrl: '', - navToRoomInfo: () => {} + navToRoomInfo: () => {}, + preview: false }; const MarkdownContext = React.createContext(defaultState); diff --git a/app/containers/markdown/new/index.tsx b/app/containers/markdown/new/index.tsx index a56b66f54ce..ade8da59c7a 100644 --- a/app/containers/markdown/new/index.tsx +++ b/app/containers/markdown/new/index.tsx @@ -25,6 +25,7 @@ interface IBodyProps { useRealName: boolean; username: string; baseUrl: string; + preview: boolean; } const Body = ({ @@ -36,7 +37,8 @@ const Body = ({ navToRoomInfo, getCustomEmoji, baseUrl, - onLinkPress + onLinkPress, + preview }: IBodyProps): JSX.Element => ( {tokens.map(block => { switch (block.type) { diff --git a/storybook/stories/NewMarkdown.js b/storybook/stories/NewMarkdown.js index 17684bb91c0..cca1a1cdb7f 100644 --- a/storybook/stories/NewMarkdown.js +++ b/storybook/stories/NewMarkdown.js @@ -3,6 +3,7 @@ import React from 'react'; import { StyleSheet, View } from 'react-native'; import { storiesOf } from '@storybook/react-native'; +import Markdown from '../../app/containers/markdown'; import NewMarkdown from '../../app/containers/markdown/new'; import { themes } from '../../app/constants/colors'; @@ -625,3 +626,44 @@ stories.add('Lists', () => ( )); + +stories.add('Preview', () => ( + + + {}} + style={[]} + useRealName + theme={theme} + numberOfLines={1} + username='rocket.cat' + preview + /> + + + +));