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 @@ ) => ( ),