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,13 @@
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 linkWithinUnrevealedSpoiler to false for when
+ // we use the ternary operator in the onPress
+ const linkWithinUnrevealedSpoiler =
+ markdownSpoilerContext?.linkWithinUnrevealedSpoiler ?? false;
+
const textMessageMarkdownContext = React.useContext(
TextMessageMarkdownContext,
);
@@ -62,7 +70,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 = {
+ +linkWithinUnrevealedSpoiler: 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,15 @@
return styles.spoilerHidden;
}, [isRevealed, styles.spoilerHidden]);
+ const markdownSpoilerContextValue = React.useMemo(
+ () => ({
+ // True: The link is within an unrevealed spoiler
+ // False: The link is within a revealed spoiler
+ linkWithinUnrevealedSpoiler: !isRevealed,
+ }),
+ [isRevealed],
+ );
+
const onSpoilerClick = React.useCallback(() => {
if (isRevealed) {
return;
@@ -71,11 +82,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',