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
@@ -13,6 +13,7 @@
import { useColors, colors } from '../themes/colors';
import type { ChatTextMessageInfoItemWithHeight } from '../types/chat-types';
import { useComposedMessageMaxWidth } from './composed-message-width';
+import { MessageContext } from './message-context.react';
import { MessageListContext } from './message-list-types';
import {
allCorners,
@@ -101,6 +102,10 @@
return [styles.text, textStyle];
}, [darkColor]);
+ const contextValue = {
+ messageID: item.messageInfo.id ?? '',
+ };
+
const message = (
@@ -111,9 +116,11 @@
style={[styles.message, cornerStyle]}
animatedStyle={messageStyle}
>
-
- {text}
-
+
+
+ {text}
+
+
diff --git a/native/markdown/markdown-context.js b/native/markdown/markdown-context.js
--- a/native/markdown/markdown-context.js
+++ b/native/markdown/markdown-context.js
@@ -9,6 +9,7 @@
+linkModalActive: { [key: string]: boolean },
+setLinkPressActive: SetState<{ [key: string]: boolean }>,
+linkPressActive: { [key: string]: boolean },
+
+setSpoilerRevealed: SetState<{ [key: string]: { [key: number]: boolean } }>,
+spoilerRevealed: { [key: string]: { [key: number]: boolean } },
+setSpoilerPressActive: SetState,
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
@@ -20,47 +20,58 @@
const messageContext = React.useContext(MessageContext);
const styles = useStyles(unboundStyles);
- const [styleBasedOnState, setStyleBasedOnState] = React.useState(
- styles.spoilerHidden,
- );
-
const { messageID } = messageContext;
const { text, identifier } = props;
+ const castedIdentifier = identifier ? parseInt(identifier) : identifier;
+
const setSpoilerRevealed = markdownContext?.setSpoilerRevealed;
const spoilerRevealed = markdownContext?.spoilerRevealed;
const setSpoilerPressActive = markdownContext?.setSpoilerPressActive;
+ const styleBasedOnSpoilerState = React.useMemo(() => {
+ return castedIdentifier && spoilerRevealed?.[messageID]?.[castedIdentifier]
+ ? null
+ : styles.spoilerHidden;
+ }, [castedIdentifier, spoilerRevealed, messageID, styles.spoilerHidden]);
+
const onSpoilerClick = React.useCallback(() => {
- if (styleBasedOnState === null) {
+ if (styleBasedOnSpoilerState === null) {
setSpoilerPressActive && setSpoilerPressActive(false);
return;
}
- if (spoilerRevealed && setSpoilerRevealed && messageID && identifier) {
+ if (
+ spoilerRevealed &&
+ setSpoilerRevealed &&
+ messageID &&
+ castedIdentifier
+ ) {
setSpoilerRevealed({
...spoilerRevealed,
- [messageID]: { ...spoilerRevealed[messageID], [identifier]: true },
+ [messageID]: {
+ ...spoilerRevealed[messageID],
+ [castedIdentifier]: true,
+ },
});
}
setSpoilerPressActive && setSpoilerPressActive(true);
- setStyleBasedOnState(null);
}, [
+ styleBasedOnSpoilerState,
setSpoilerPressActive,
spoilerRevealed,
setSpoilerRevealed,
messageID,
- identifier,
- styleBasedOnState,
+ castedIdentifier,
]);
const memoizedSpoiler = React.useMemo(() => {
return (
-
+
{text}
);
- }, [onSpoilerClick, styleBasedOnState, text]);
+ }, [onSpoilerClick, styleBasedOnSpoilerState, text]);
return memoizedSpoiler;
}