diff --git a/native/chat/inner-text-message.react.js b/native/chat/inner-text-message.react.js --- a/native/chat/inner-text-message.react.js +++ b/native/chat/inner-text-message.react.js @@ -99,6 +99,30 @@ return [styles.text, textStyle]; }, [darkColor]); + // If we need to render a Text with an onPress prop inside, we're going to + // have an issue: the GestureTouchableOpacity below will trigger too when the + // the onPress is pressed. We have to use a GestureTouchableOpacity in order + // for the message touch gesture to play nice with the message swipe gesture, + // so we need to find a way to disable the GestureTouchableOpacity. + // + // Our solution is to keep using the GestureTouchableOpacity for the padding + // around the text, and to have the Texts inside ALL implement an onPress prop + // that will default to the message touch gesture. Luckily, Text with onPress + // plays nice with the message swipe gesture. + let secondMessage; + if (textMessageMarkdown.markdownHasPressable) { + secondMessage = ( + + + {text} + + + ); + } + const message = ( @@ -114,6 +138,7 @@ {text} + {secondMessage} diff --git a/native/markdown/markdown-paragraph.react.js b/native/markdown/markdown-paragraph.react.js new file mode 100644 --- /dev/null +++ b/native/markdown/markdown-paragraph.react.js @@ -0,0 +1,29 @@ +// @flow + +import * as React from 'react'; +import { Text } from 'react-native'; + +import { MessagePressResponderContext } from '../chat/message-press-responder-context'; +import type { TextStyle } from '../types/styles'; + +type Props = { + +style?: ?TextStyle, + +children: React.Node, +}; +function MarkdownParagraph(props: Props): React.Node { + const messagePressResponderContext = React.useContext( + MessagePressResponderContext, + ); + const onPressMessage = messagePressResponderContext?.onPressMessage; + return ( + + {props.children} + + ); +} + +export default MarkdownParagraph; 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 @@ -12,6 +12,7 @@ import { useSelector } from '../redux/redux-utils'; import MarkdownLink from './markdown-link.react'; +import MarkdownParagraph from './markdown-paragraph.react'; import { getMarkdownStyles } from './styles'; export type MarkdownRules = { @@ -96,9 +97,9 @@ output: SharedMarkdown.Output, state: SharedMarkdown.State, ) => ( - + {output(node.content, state)} - + ), }, // This is the leaf node in the AST returned by the parse phase