diff --git a/native/markdown/markdown-link.react.js b/native/markdown/markdown-link.react.js --- a/native/markdown/markdown-link.react.js +++ b/native/markdown/markdown-link.react.js @@ -8,6 +8,7 @@ import { TextMessageMarkdownContext } from '../chat/text-message-markdown-context'; import { MarkdownContext, type MarkdownContextType } from './markdown-context'; +import { MarkdownSpoilerContext } from './markdown-spoiler-context'; function useDisplayLinkPrompt( inputURL: string, @@ -55,6 +56,10 @@ const markdownContext = React.useContext(MarkdownContext); invariant(markdownContext, 'MarkdownContext should be set'); + const markdownSpoilerContext = React.useContext(MarkdownSpoilerContext); + const spoilerContainsUnrevealedLink = + markdownSpoilerContext?.spoilerContainsUnrevealedLink; + const textMessageMarkdownContext = React.useContext( TextMessageMarkdownContext, ); @@ -62,7 +67,12 @@ const onPressLink = useDisplayLinkPrompt(target, markdownContext, messageKey); - return ; + return ( + + ); } export default MarkdownLink; diff --git a/native/markdown/markdown-spoiler-context.js b/native/markdown/markdown-spoiler-context.js new file mode 100644 --- /dev/null +++ b/native/markdown/markdown-spoiler-context.js @@ -0,0 +1,13 @@ +// @flow + +import * as React from 'react'; + +export type MarkdownSpoilerContextType = { + +spoilerContainsUnrevealedLink: boolean, +}; + +const MarkdownSpoilerContext: React.Context = React.createContext( + null, +); + +export { MarkdownSpoilerContext }; diff --git a/native/markdown/markdown-spoiler.react.js b/native/markdown/markdown-spoiler.react.js --- a/native/markdown/markdown-spoiler.react.js +++ b/native/markdown/markdown-spoiler.react.js @@ -9,6 +9,7 @@ import { TextMessageMarkdownContext } from '../chat/text-message-markdown-context'; import { useStyles } from '../themes/colors'; import { MarkdownContext } from './markdown-context'; +import { MarkdownSpoilerContext } from './markdown-spoiler-context'; type MarkdownSpoilerProps = { +spoilerIdentifier: string | number | void, @@ -45,6 +46,20 @@ return styles.spoilerHidden; }, [isRevealed, styles.spoilerHidden]); + const containsUnrevealedLink = React.useMemo(() => { + if (text[0].props?.target && !isRevealed) { + return true; + } + return false; + }, [text, isRevealed]); + + const markdownSpoilerContextValue = React.useMemo( + () => ({ + spoilerContainsUnrevealedLink: containsUnrevealedLink, + }), + [containsUnrevealedLink], + ); + const onSpoilerClick = React.useCallback(() => { if (isRevealed) { return; @@ -69,11 +84,18 @@ const memoizedSpoiler = React.useMemo(() => { return ( - - {text} - + + + {text} + + ); - }, [onSpoilerClick, styleBasedOnSpoilerState, text]); + }, [ + markdownSpoilerContextValue, + onSpoilerClick, + styleBasedOnSpoilerState, + text, + ]); return memoizedSpoiler; } diff --git a/native/markdown/styles.js b/native/markdown/styles.js --- a/native/markdown/styles.js +++ b/native/markdown/styles.js @@ -8,7 +8,6 @@ const unboundStyles = { link: { - color: 'markdownLink', textDecorationLine: 'underline', }, italics: { diff --git a/native/themes/colors.js b/native/themes/colors.js --- a/native/themes/colors.js +++ b/native/themes/colors.js @@ -43,7 +43,6 @@ listSearchIcon: '#8E8D92', listSeparator: '#EEEEEE', listSeparatorLabel: '#555555', - markdownLink: '#000000', mintButton: '#44CC99', modalBackground: '#EEEEEE', modalBackgroundLabel: '#333333', @@ -118,7 +117,6 @@ listSearchIcon: '#AAAAAA', listSeparator: '#3A3A3C', listSeparatorLabel: '#EEEEEE', - markdownLink: '#FFFFFF', mintButton: '#44CC99', modalBackground: '#0A0A0A', modalBackgroundLabel: '#CCCCCC',