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,12 @@
return [styles.text, textStyle];
}, [darkColor]);
+ const messageContextValue = React.useMemo(() => {
+ return {
+ messageID: item.messageInfo.id ?? '',
+ };
+ }, [item.messageInfo.id]);
+
const message = (
@@ -111,9 +118,11 @@
style={[styles.message, cornerStyle]}
animatedStyle={messageStyle}
>
-
- {text}
-
+
+
+ {text}
+
+
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
@@ -10,7 +10,7 @@
import { MarkdownContext } from './markdown-context';
type MarkdownSpoilerProps = {
- +identifier: string | number | void,
+ +spoilerIdentifier: string | number | void,
+text: ReactElement,
+children?: React.Node,
};
@@ -20,47 +20,68 @@
const messageContext = React.useContext(MessageContext);
const styles = useStyles(unboundStyles);
- const [styleBasedOnState, setStyleBasedOnState] = React.useState(
- styles.spoilerHidden,
- );
-
const { messageID } = messageContext;
- const { text, identifier } = props;
+ const { text, spoilerIdentifier } = props;
+
+ const parsedSpoilerIdentifier = spoilerIdentifier
+ ? parseInt(spoilerIdentifier)
+ : -1;
const setSpoilerRevealed = markdownContext?.setSpoilerRevealed;
const spoilerRevealed = markdownContext?.spoilerRevealed;
const setSpoilerPressActive = markdownContext?.setSpoilerPressActive;
+ const styleBasedOnSpoilerState = React.useMemo(() => {
+ return parsedSpoilerIdentifier &&
+ spoilerRevealed?.[messageID]?.[parsedSpoilerIdentifier]
+ ? null
+ : styles.spoilerHidden;
+ }, [
+ parsedSpoilerIdentifier,
+ spoilerRevealed,
+ messageID,
+ styles.spoilerHidden,
+ ]);
+
const onSpoilerClick = React.useCallback(() => {
- if (styleBasedOnState === null) {
+ if (
+ parsedSpoilerIdentifier &&
+ spoilerRevealed?.[messageID]?.[parsedSpoilerIdentifier]
+ ) {
setSpoilerPressActive && setSpoilerPressActive(false);
return;
}
- if (spoilerRevealed && setSpoilerRevealed && messageID && identifier) {
+ if (
+ spoilerRevealed &&
+ setSpoilerRevealed &&
+ messageID &&
+ parsedSpoilerIdentifier
+ ) {
setSpoilerRevealed({
...spoilerRevealed,
- [messageID]: { ...spoilerRevealed[messageID], [identifier]: true },
+ [messageID]: {
+ ...spoilerRevealed[messageID],
+ [parsedSpoilerIdentifier]: true,
+ },
});
}
setSpoilerPressActive && setSpoilerPressActive(true);
- setStyleBasedOnState(null);
}, [
setSpoilerPressActive,
spoilerRevealed,
setSpoilerRevealed,
messageID,
- identifier,
- styleBasedOnState,
+ parsedSpoilerIdentifier,
]);
const memoizedSpoiler = React.useMemo(() => {
return (
-
+
{text}
);
- }, [onSpoilerClick, styleBasedOnState, text]);
+ }, [onSpoilerClick, styleBasedOnSpoilerState, text]);
return memoizedSpoiler;
}
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
@@ -202,7 +202,7 @@
) => (
),