diff --git a/native/markdown/markdown-user-mention.react.js b/native/markdown/markdown-user-mention.react.js new file mode 100644 --- /dev/null +++ b/native/markdown/markdown-user-mention.react.js @@ -0,0 +1,66 @@ +// @flow + +import { useFocusEffect } from '@react-navigation/native'; +import * as React from 'react'; +import { Text } from 'react-native'; + +import { useMarkdownOnPressUtils } from './markdown-utils.js'; +import { getMarkdownStyles } from './styles.js'; +import { useNavigateToUserProfileBottomSheet } from '../user-profile/user-profile-utils.js'; + +type TextProps = React.ElementConfig; +type Props = { + +children: React.Node, + +userID: string, + +useDarkStyle: boolean, + ...TextProps, +}; + +function MarkdownUserMention(props: Props): React.Node { + const { userID, useDarkStyle, ...rest } = props; + + const { messageKey, isRevealed, onLongPressHandler, markdownContext } = + useMarkdownOnPressUtils(); + + const styles = getMarkdownStyles(useDarkStyle ? 'dark' : 'light'); + + const { setUserProfileBottomSheetActive } = markdownContext; + + const navigateToUserProfileBottomSheet = + useNavigateToUserProfileBottomSheet(); + + useFocusEffect( + React.useCallback(() => { + if (!messageKey) { + return; + } + + setUserProfileBottomSheetActive({ [messageKey]: false }); + }, [messageKey, setUserProfileBottomSheetActive]), + ); + + const onPressUser = React.useCallback(() => { + if (!messageKey) { + return; + } + + setUserProfileBottomSheetActive({ [messageKey]: true }); + navigateToUserProfileBottomSheet(userID); + }, [ + messageKey, + navigateToUserProfileBottomSheet, + setUserProfileBottomSheetActive, + userID, + ]); + + return ( + + ); +} + +export default MarkdownUserMention; diff --git a/native/markdown/rules.react.js b/native/markdown/rules.react.js --- a/native/markdown/rules.react.js +++ b/native/markdown/rules.react.js @@ -17,6 +17,7 @@ import MarkdownLink from './markdown-link.react.js'; import MarkdownParagraph from './markdown-paragraph.react.js'; import MarkdownSpoiler from './markdown-spoiler.react.js'; +import MarkdownUserMention from './markdown-user-mention.react.js'; import { getMarkdownStyles } from './styles.js'; export type MarkdownRules = { @@ -376,7 +377,6 @@ chatMentionCandidates: ChatMentionCandidates, useDarkStyle: boolean, ): MarkdownRules { - const styles = getMarkdownStyles(useDarkStyle ? 'dark' : 'light'); const baseRules = fullMarkdownRules(useDarkStyle); const membersMap = SharedMarkdown.createMemberMapForUserMentions(members); @@ -395,9 +395,13 @@ output: SharedMarkdown.Output, state: SharedMarkdown.State, ) => ( - + {node.content} - + ), }, chatMention: {