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 @@ -9,6 +9,7 @@ import { MessagePressResponderContext } from '../chat/message-press-responder-context'; 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, @@ -56,6 +57,12 @@ const markdownContext = React.useContext(MarkdownContext); invariant(markdownContext, 'MarkdownContext should be set'); + const markdownSpoilerContext = React.useContext(MarkdownSpoilerContext); + // Since MarkdownSpoilerContext may not be set, we need + // to default isRevealed to true for when + // we use the ternary operator in the onPress + const isRevealed = markdownSpoilerContext?.isRevealed ?? true; + const textMessageMarkdownContext = React.useContext( TextMessageMarkdownContext, ); @@ -69,7 +76,13 @@ 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 = { + +isRevealed: 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, @@ -34,8 +35,9 @@ ? parseInt(spoilerIdentifier) : null; + // We check the typeof to prevent this from being typed as `boolean | string` const isRevealed = - (messageKey && + (typeof messageKey === 'string' && parsedSpoilerIdentifier !== null && spoilerRevealed[messageKey]?.[parsedSpoilerIdentifier]) ?? false; @@ -47,6 +49,13 @@ return styles.spoilerHidden; }, [isRevealed, styles.spoilerHidden]); + const markdownSpoilerContextValue = React.useMemo( + () => ({ + isRevealed: isRevealed, + }), + [isRevealed], + ); + const onSpoilerClick = React.useCallback(() => { if (isRevealed) { return; @@ -71,11 +80,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',