Skip to content

[FIX] App freezing if Markdown preview contains sequential empty spaces #2726

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
diegolmello merged 2 commits into from
Dec 18, 2020
Merged

[FIX] App freezing if Markdown preview contains sequential empty spaces #2726

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
15d993f
Remove sequential empty spaces from Markdown preview
diegolmello Dec 18, 2020
3c4893c
Use Markdown preview on RepliedThread
diegolmello Dec 18, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
199 changes: 196 additions & 3 deletions __tests__/__snapshots__/Storyshots.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10220,6 +10220,80 @@ exports[`Storyshots Markdown list Markdown 1`] = `
</Text>
</Text>
</View>
<Text
style={
Array [
Object {
"fontSize": 20,
"fontWeight": "300",
"marginLeft": 10,
"marginVertical": 30,
},
Object {
"color": "#0d0e12",
},
Object {
"marginHorizontal": 10,
"marginVertical": 10,
},
]
}
>
Sequential empty spaces
</Text>
<View
style={
Object {
"marginHorizontal": 15,
}
}
>
<Text
style={
Array [
Object {
"backgroundColor": "transparent",
"fontFamily": "System",
"fontSize": 16,
"fontWeight": "400",
"textAlign": "left",
},
undefined,
Object {
"color": "#2f343d",
},
]
}
>
<Text
accessibilityLabel="a b c"
style={
Array [
Object {
"backgroundColor": "transparent",
"fontFamily": "System",
"fontSize": 16,
"fontWeight": "400",
"textAlign": "left",
},
Array [
Object {},
Object {
"alignItems": "flex-start",
"flexDirection": "row",
"flexWrap": "wrap",
"justifyContent": "flex-start",
"marginBottom": 0,
"marginTop": 0,
},
],
]
}
>
a b c
</Text>
</Text>
</View>
<Text
style={
Array [
Expand Down Expand Up @@ -10382,6 +10456,26 @@ exports[`Storyshots Markdown list Markdown 1`] = `
>
a b c d e
</Text>
<Text
accessibilityLabel="a b c"
numberOfLines={1}
style={
Array [
Object {
"backgroundColor": "transparent",
"fontFamily": "System",
"fontSize": 16,
"fontWeight": "400",
"textAlign": "left",
},
Object {
"color": "#2f343d",
},
]
}
>
a b c
</Text>
<Text
accessibilityLabel="@rocket.cat @name1 @all @here @unknown #general #unknown"
numberOfLines={1}
Expand Down Expand Up @@ -17308,7 +17402,7 @@ exports[`Storyshots Message list message 1`] = `
"marginTop": 6,
}
}
testID="message-thread-replied-on-Thread with emoji🙂 😂"
testID="message-thread-replied-on-Thread with emoji :) :joy:"
>
<Text
allowFontScaling={false}
Expand All @@ -17334,9 +17428,20 @@ exports[`Storyshots Message list message 1`] = `
</Text>
<Text
accessibilityLabel="Thread with emoji🙂 😂"
numberOfLines={1}
style={
Array [
Object {
"backgroundColor": "transparent",
"fontFamily": "System",
"fontSize": 16,
"fontWeight": "400",
"textAlign": "left",
},
Object {
"color": "#2f343d",
},
Object {
"backgroundColor": "transparent",
"flex": 1,
Expand Down Expand Up @@ -33583,9 +33688,20 @@ exports[`Storyshots Message list message 1`] = `
</Text>
<Text
accessibilityLabel="How are you?"
numberOfLines={1}
style={
Array [
Object {
"backgroundColor": "transparent",
"fontFamily": "System",
"fontSize": 16,
"fontWeight": "400",
"textAlign": "left",
},
Object {
"color": "#2f343d",
},
Object {
"backgroundColor": "transparent",
"flex": 1,
Expand Down Expand Up @@ -33786,7 +33902,7 @@ exports[`Storyshots Message list message 1`] = `
"marginTop": 6,
}
}
testID="message-thread-replied-on-Thread with emoji🙂 😂"
testID="message-thread-replied-on-Thread with emoji :) :joy:"
>
<Text
allowFontScaling={false}
Expand All @@ -33812,9 +33928,20 @@ exports[`Storyshots Message list message 1`] = `
</Text>
<Text
accessibilityLabel="Thread with emoji🙂 😂"
numberOfLines={1}
style={
Array [
Object {
"backgroundColor": "transparent",
"fontFamily": "System",
"fontSize": 16,
"fontWeight": "400",
"textAlign": "left",
},
Object {
"color": "#2f343d",
},
Object {
"backgroundColor": "transparent",
"flex": 1,
Expand Down Expand Up @@ -34015,7 +34142,7 @@ exports[`Storyshots Message list message 1`] = `
"marginTop": 6,
}
}
testID="message-thread-replied-on-Markdown: link block code"
testID="message-thread-replied-on-Markdown: [link](http://www.google.com/) \`\`\`block code\`\`\`"
>
<Text
allowFontScaling={false}
Expand All @@ -34041,9 +34168,20 @@ exports[`Storyshots Message list message 1`] = `
</Text>
<Text
accessibilityLabel="Markdown: link block code"
numberOfLines={1}
style={
Array [
Object {
"backgroundColor": "transparent",
"fontFamily": "System",
"fontSize": 16,
"fontWeight": "400",
"textAlign": "left",
},
Object {
"color": "#2f343d",
},
Object {
"backgroundColor": "transparent",
"flex": 1,
Expand Down Expand Up @@ -34270,9 +34408,20 @@ exports[`Storyshots Message list message 1`] = `
</Text>
<Text
accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
numberOfLines={1}
style={
Array [
Object {
"backgroundColor": "transparent",
"fontFamily": "System",
"fontSize": 16,
"fontWeight": "400",
"textAlign": "left",
},
Object {
"color": "#2f343d",
},
Object {
"backgroundColor": "transparent",
"flex": 1,
Expand Down Expand Up @@ -34499,9 +34648,20 @@ exports[`Storyshots Message list message 1`] = `
</Text>
<Text
accessibilityLabel="How are you?"
numberOfLines={1}
style={
Array [
Object {
"backgroundColor": "transparent",
"fontFamily": "System",
"fontSize": 16,
"fontWeight": "400",
"textAlign": "left",
},
Object {
"color": "#2f343d",
},
Object {
"backgroundColor": "transparent",
"flex": 1,
Expand Down Expand Up @@ -34728,9 +34888,20 @@ exports[`Storyshots Message list message 1`] = `
</Text>
<Text
accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
numberOfLines={1}
style={
Array [
Object {
"backgroundColor": "transparent",
"fontFamily": "System",
"fontSize": 16,
"fontWeight": "400",
"textAlign": "left",
},
Object {
"color": "#2f343d",
},
Object {
"backgroundColor": "transparent",
"flex": 1,
Expand Down Expand Up @@ -34957,9 +35128,20 @@ exports[`Storyshots Message list message 1`] = `
</Text>
<Text
accessibilityLabel="Thread with attachment"
numberOfLines={1}
style={
Array [
Object {
"backgroundColor": "transparent",
"fontFamily": "System",
"fontSize": 16,
"fontWeight": "400",
"textAlign": "left",
},
Object {
"color": "#2f343d",
},
Object {
"backgroundColor": "transparent",
"flex": 1,
Expand Down Expand Up @@ -36039,9 +36221,20 @@ exports[`Storyshots Message list message 1`] = `
</Text>
<Text
accessibilityLabel="How are you?"
numberOfLines={1}
style={
Array [
Object {
"backgroundColor": "transparent",
"fontFamily": "System",
"fontSize": 16,
"fontWeight": "400",
"textAlign": "left",
},
Object {
"color": "#2f343d",
},
Object {
"backgroundColor": "transparent",
"flex": 1,
Expand Down
2 changes: 2 additions & 0 deletions app/containers/markdown/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -384,6 +384,8 @@ class Markdown extends PureComponent {

if (preview) {
m = shortnameToUnicode(m);
// Removes sequential empty spaces
m = m.replace(/\s+/g, ' ');
m = removeMarkdown(m);
m = m.replace(/\n+/g, ' ');
return (
Expand Down
16 changes: 10 additions & 6 deletions app/containers/message/RepliedThread.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
import React from 'react';
import { View, Text } from 'react-native';
import removeMarkdown from 'remove-markdown';
import { View } from 'react-native';
import PropTypes from 'prop-types';

import shortnameToUnicode from '../../utils/shortnameToUnicode';
import { CustomIcon } from '../../lib/Icons';
import styles from './styles';
import { themes } from '../../constants/colors';
import I18n from '../../i18n';
import Markdown from '../markdown';

const RepliedThread = React.memo(({
tmid, tmsg, isHeader, fetchThreadName, id, isEncrypted, theme
Expand All @@ -21,8 +20,7 @@ const RepliedThread = React.memo(({
return null;
}

let msg = shortnameToUnicode(tmsg);
msg = removeMarkdown(msg);
let msg = tmsg;

if (isEncrypted) {
msg = I18n.t('Encrypted_message');
Expand All @@ -31,7 +29,13 @@ const RepliedThread = React.memo(({
return (
<View style={styles.repliedThread} testID={`message-thread-replied-on-${ msg }`}>
<CustomIcon name='threads' size={20} style={styles.repliedThreadIcon} color={themes[theme].tintColor} />
<Text style={[styles.repliedThreadName, { color: themes[theme].tintColor }]} numberOfLines={1}>{msg}</Text>
<Markdown
msg={msg}
theme={theme}
style={[styles.repliedThreadName, { color: themes[theme].tintColor }]}
preview
numberOfLines={1}
/>
<View style={styles.repliedThreadDisclosure}>
<CustomIcon
name='chevron-right'
Expand Down
Loading