[FIX] Quote rendering with leading empty space on mobile only (#4778)
* [FIX] Quote rendering with leading empty space on mobile only * update the message storyshot * compareServerVersion to connection string * fix time * fix lint * update to servers greater or equal than 6.0 * refactor tests * minor tweak --------- Co-authored-by: GleidsonDaniel <gleidson10daniel@hotmail.com>
This commit is contained in:
Reinaldo Neto
GitHub
parent
a927746d7f
commit
9396b08ead
File diff suppressed because one or more lines are too long
|
|
@ -1062,7 +1062,7 @@ class MessageBox extends Component<IMessageBoxProps, IMessageBoxState> {
|
|||
};
|
||||
|
||||
formatReplyMessage = async (replyingMessage: IMessage, message = '') => {
|
||||
const { user, roomType, replyWithMention } = this.props;
|
||||
const { user, roomType, replyWithMention, serverVersion } = this.props;
|
||||
const permalink = await this.getPermalink(replyingMessage);
|
||||
let msg = `[ ](${permalink}) `;
|
||||
|
||||
|
|
@ -1071,7 +1071,8 @@ class MessageBox extends Component<IMessageBoxProps, IMessageBoxState> {
|
|||
msg += `@${replyingMessage?.u?.username} `;
|
||||
}
|
||||
|
||||
return `${msg} ${message}`;
|
||||
const connectionString = compareServerVersion(serverVersion, 'lowerThan', '5.0.0') ? ' ' : '\n';
|
||||
return `${msg}${connectionString}${message}`;
|
||||
};
|
||||
|
||||
updateMentions = (keyword: any, type: string) => {
|
||||
|
|
|
|||
|
|
@ -18,13 +18,29 @@ import MarkdownContext from './MarkdownContext';
|
|||
|
||||
interface IParagraphProps {
|
||||
value: ParagraphProps['value'];
|
||||
forceTrim?: boolean;
|
||||
}
|
||||
|
||||
const Inline = ({ value }: IParagraphProps): React.ReactElement | null => {
|
||||
const Inline = ({ value, forceTrim }: IParagraphProps): React.ReactElement | null => {
|
||||
const { useRealName, username, navToRoomInfo, mentions, channels } = useContext(MarkdownContext);
|
||||
return (
|
||||
<Text style={styles.inline}>
|
||||
{value.map(block => {
|
||||
{value.map((block, index) => {
|
||||
// We are forcing trim when is a `[ ](https://https://open.rocket.chat/) plain_text`
|
||||
// to clean the empty spaces
|
||||
if (forceTrim) {
|
||||
if (index === 0 && block.type === 'LINK') {
|
||||
block.value.label.value =
|
||||
// Need to update the @rocket.chat/message-parser to understand that the label can be a Markup | Markup[]
|
||||
// https://github.com/RocketChat/fuselage/blob/461ecf661d9ff4a46390957c915e4352fa942a7c/packages/message-parser/src/definitions.ts#L141
|
||||
// @ts-ignore
|
||||
block.value?.label?.value?.toString().trimLeft() || block?.value?.label?.[0]?.value?.toString().trimLeft();
|
||||
}
|
||||
if (index === 1 && block.type !== 'LINK') {
|
||||
block.value = block.value?.toString().trimLeft();
|
||||
}
|
||||
}
|
||||
|
||||
switch (block.type) {
|
||||
case 'IMAGE':
|
||||
return <Image value={block.value} />;
|
||||
|
|
|
|||
|
|
@ -381,27 +381,6 @@ export const BlockQuote = () => (
|
|||
</View>
|
||||
);
|
||||
|
||||
const rocketChatLink = [
|
||||
{
|
||||
type: 'PARAGRAPH',
|
||||
value: [
|
||||
{
|
||||
type: 'LINK',
|
||||
value: {
|
||||
src: {
|
||||
type: 'PLAIN_TEXT',
|
||||
value: 'https://rocket.chat'
|
||||
},
|
||||
label: {
|
||||
type: 'PLAIN_TEXT',
|
||||
value: 'https://rocket.chat'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
const markdownLink = [
|
||||
{
|
||||
type: 'PARAGRAPH',
|
||||
|
|
@ -487,7 +466,6 @@ const markdownLinkWithEmphasis = [
|
|||
|
||||
export const Links = () => (
|
||||
<View style={styles.container}>
|
||||
<NewMarkdown tokens={rocketChatLink} />
|
||||
<NewMarkdown tokens={markdownLink} />
|
||||
<NewMarkdown tokens={markdownLinkWithEmphasis} />
|
||||
</View>
|
||||
|
|
@ -806,3 +784,128 @@ export const InlineKatex = () => (
|
|||
<NewMarkdown tokens={inlineKatex} />
|
||||
</View>
|
||||
);
|
||||
|
||||
const messageQuote = {
|
||||
/**
|
||||
# Hello head 1
|
||||
[ ](https://google.com)
|
||||
*/
|
||||
headAndLink: [
|
||||
{ type: 'HEADING', level: 1, value: [{ type: 'PLAIN_TEXT', value: 'Hello head 1' }] },
|
||||
{ type: 'LINE_BREAK' },
|
||||
{
|
||||
type: 'PARAGRAPH',
|
||||
value: [
|
||||
{
|
||||
type: 'LINK',
|
||||
value: { src: { type: 'PLAIN_TEXT', value: 'https://google.com' }, label: { type: 'PLAIN_TEXT', value: ' ' } }
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
/**
|
||||
# Head 1 as the first line then line break and after paragraph
|
||||
bla bla bla bla bla bla
|
||||
bla bla bla bla bla bla
|
||||
[ ](https://google.com)
|
||||
*/
|
||||
headTextAndLink: [
|
||||
{
|
||||
type: 'HEADING',
|
||||
level: 1,
|
||||
value: [{ type: 'PLAIN_TEXT', value: 'Head 1 as the first line then line break and after paragraph' }]
|
||||
},
|
||||
{ type: 'LINE_BREAK' },
|
||||
{ type: 'PARAGRAPH', value: [{ type: 'PLAIN_TEXT', value: 'bla bla bla bla bla bla ' }] },
|
||||
{ type: 'PARAGRAPH', value: [{ type: 'PLAIN_TEXT', value: 'bla bla bla bla bla bla ' }] },
|
||||
{
|
||||
type: 'PARAGRAPH',
|
||||
value: [
|
||||
{
|
||||
type: 'LINK',
|
||||
value: { src: { type: 'PLAIN_TEXT', value: 'https://google.com' }, label: { type: 'PLAIN_TEXT', value: ' ' } }
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
/**
|
||||
[ ](permalink from message)\n# Head 1 after a forced line break
|
||||
asdas asd asd asd
|
||||
*/
|
||||
headTextAndQuote: [
|
||||
{
|
||||
type: 'PARAGRAPH',
|
||||
value: [
|
||||
{
|
||||
type: 'LINK',
|
||||
value: {
|
||||
src: { type: 'PLAIN_TEXT', value: 'https://open.rocket.chat/direct/subaru123?msg=QB42gWcaO6BgqtLTo' },
|
||||
label: { type: 'PLAIN_TEXT', value: ' ' }
|
||||
}
|
||||
},
|
||||
{ type: 'PLAIN_TEXT', value: ' ' }
|
||||
]
|
||||
},
|
||||
{ type: 'HEADING', level: 1, value: [{ type: 'PLAIN_TEXT', value: 'Head 1 after a forced line break' }] },
|
||||
{ type: 'LINE_BREAK' },
|
||||
{ type: 'PARAGRAPH', value: [{ type: 'PLAIN_TEXT', value: 'Description' }] }
|
||||
],
|
||||
/**
|
||||
[ ](https://google.com) *There is a link before this bold separated by single space*
|
||||
*/
|
||||
linkAndBoldText: [
|
||||
{
|
||||
type: 'PARAGRAPH',
|
||||
value: [
|
||||
{
|
||||
type: 'LINK',
|
||||
value: { src: { type: 'PLAIN_TEXT', value: 'https://google.com' }, label: { type: 'PLAIN_TEXT', value: ' ' } }
|
||||
},
|
||||
{ type: 'PLAIN_TEXT', value: ' ' },
|
||||
{ type: 'BOLD', value: [{ type: 'PLAIN_TEXT', value: 'There is a link before this bold separated by single space' }] }
|
||||
]
|
||||
}
|
||||
],
|
||||
simpleQuote: [
|
||||
{
|
||||
type: 'PARAGRAPH',
|
||||
value: [
|
||||
{
|
||||
type: 'LINK',
|
||||
value: {
|
||||
src: {
|
||||
type: 'PLAIN_TEXT',
|
||||
value: 'https://open.rocket.chat/group/quoteeee9798789?msg=ZZp6t2dCRX4TqExht'
|
||||
},
|
||||
// format of label for servers greater or equal than 6.0
|
||||
label: [
|
||||
{
|
||||
type: 'PLAIN_TEXT',
|
||||
value: ' '
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'PARAGRAPH',
|
||||
value: [
|
||||
{
|
||||
type: 'PLAIN_TEXT',
|
||||
value: 'Quoting a message wrote before'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
export const MessageQuote = () => (
|
||||
<View style={styles.container}>
|
||||
<NewMarkdown tokens={messageQuote.headAndLink} />
|
||||
<NewMarkdown tokens={messageQuote.headTextAndLink} />
|
||||
<NewMarkdown tokens={messageQuote.headTextAndQuote} />
|
||||
<NewMarkdown tokens={messageQuote.linkAndBoldText} />
|
||||
<NewMarkdown tokens={messageQuote.simpleQuote} />
|
||||
</View>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -12,10 +12,28 @@ interface IParagraphProps {
|
|||
}
|
||||
|
||||
const Paragraph = ({ value }: IParagraphProps) => {
|
||||
let forceTrim = false;
|
||||
const { theme } = useTheme();
|
||||
if (
|
||||
value?.[0]?.type === 'LINK' &&
|
||||
// Need to update the @rocket.chat/message-parser to understand that the label can be a Markup | Markup[]
|
||||
// https://github.com/RocketChat/fuselage/blob/461ecf661d9ff4a46390957c915e4352fa942a7c/packages/message-parser/src/definitions.ts#L141
|
||||
// @ts-ignore
|
||||
(value?.[0]?.value?.label?.value?.toString().trim() === '' || value?.[0]?.value?.label?.[0]?.value?.toString().trim() === '')
|
||||
) {
|
||||
// We are returning null when we receive a message like this: `[ ](https://open.rocket.chat/)\nplain_text`
|
||||
// to avoid render a line empty above the the message
|
||||
if (value.length === 1) {
|
||||
return null;
|
||||
}
|
||||
if (value.length === 2 && value?.[1]?.type === 'PLAIN_TEXT' && value?.[1]?.value?.toString().trim() === '') {
|
||||
return null;
|
||||
}
|
||||
forceTrim = true;
|
||||
}
|
||||
return (
|
||||
<Text style={[styles.text, { color: themes[theme].bodyText }]}>
|
||||
<Inline value={value} />
|
||||
<Inline value={value} forceTrim={forceTrim} />
|
||||
</Text>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue