fix: render the text from custom attachment as markdown (#5048)

* fix: render the text from custom attachment as markdown

* add special character, one number and one capital letter at password e2e

* minor tweak

---------

Co-authored-by: GleidsonDaniel <gleidson10daniel@hotmail.com>
This commit is contained in:
Reinaldo Neto 2023-05-10 18:39:56 -03:00 committed by GitHub
parent c00ab98441
commit 47b4413b59
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 38 additions and 24 deletions

File diff suppressed because one or more lines are too long

View File

@ -1,6 +1,5 @@
import React, { useContext } from 'react'; import React, { useContext } from 'react';
import { dequal } from 'dequal'; import { dequal } from 'dequal';
import { Text } from 'react-native';
import { IMessageAttachments } from './interfaces'; import { IMessageAttachments } from './interfaces';
import Image from './Image'; import Image from './Image';
@ -8,13 +7,12 @@ import Audio from './Audio';
import Video from './Video'; import Video from './Video';
import Reply from './Reply'; import Reply from './Reply';
import Button from '../Button'; import Button from '../Button';
import styles from './styles';
import MessageContext from './Context'; import MessageContext from './Context';
import { useTheme } from '../../theme'; import { useTheme } from '../../theme';
import { IAttachment } from '../../definitions'; import { IAttachment, TGetCustomEmoji } from '../../definitions';
import CollapsibleQuote from './Components/CollapsibleQuote'; import CollapsibleQuote from './Components/CollapsibleQuote';
import openLink from '../../lib/methods/helpers/openLink'; import openLink from '../../lib/methods/helpers/openLink';
import { themes } from '../../lib/constants'; import Markdown from '../markdown';
export type TElement = { export type TElement = {
type: string; type: string;
@ -23,9 +21,8 @@ export type TElement = {
text: string; text: string;
}; };
const AttachedActions = ({ attachment }: { attachment: IAttachment }) => { const AttachedActions = ({ attachment, getCustomEmoji }: { attachment: IAttachment; getCustomEmoji: TGetCustomEmoji }) => {
const { onAnswerButtonPress } = useContext(MessageContext); const { onAnswerButtonPress } = useContext(MessageContext);
const { theme } = useTheme();
if (!attachment.actions) { if (!attachment.actions) {
return null; return null;
@ -50,7 +47,7 @@ const AttachedActions = ({ attachment }: { attachment: IAttachment }) => {
}); });
return ( return (
<> <>
<Text style={[styles.text, { color: themes[theme].bodyText }]}>{attachment.text}</Text> <Markdown msg={attachment.text} getCustomEmoji={getCustomEmoji} />
{attachedButtons} {attachedButtons}
</> </>
); );
@ -106,7 +103,7 @@ const Attachments: React.FC<IMessageAttachments> = React.memo(
} }
if (file && file.actions && file.actions.length > 0) { if (file && file.actions && file.actions.length > 0) {
return <AttachedActions attachment={file} />; return <AttachedActions attachment={file} getCustomEmoji={getCustomEmoji} />;
} }
if (typeof file.collapsed === 'boolean') { if (typeof file.collapsed === 'boolean') {
return ( return (

View File

@ -875,21 +875,38 @@ export const Ignored = () => <Message isIgnored />;
export const CustomStyle = () => <Message msg='Message' style={[{ backgroundColor: '#ddd' }]} />; export const CustomStyle = () => <Message msg='Message' style={[{ backgroundColor: '#ddd' }]} />;
export const ShowButtonAsAttachment = () => ( export const ShowButtonAsAttachment = () => (
<Message <>
attachments={[ <Message
{ attachments={[
text: 'Test Button', {
actions: [ text: 'Test Button',
{ actions: [
type: 'button', {
text: 'Text button', type: 'button',
msg: 'Response message', text: 'Text button',
msg_in_chat_window: true msg: 'Response message',
} msg_in_chat_window: true
] }
} ]
]} }
/> ]}
/>
<Message
attachments={[
{
text: ':avocado: **Message with markdown**\n\n_Some text_\n\nThis is a test',
actions: [
{
type: 'button',
text: 'Text button',
msg: 'Response message',
msg_in_chat_window: true
}
]
}
]}
/>
</>
); );
export const ThumbnailFromServer = () => ( export const ThumbnailFromServer = () => (