Empty space logic

app/containers/markdown/AtMention.tsx

@@ -6,6 +6,8 @@ import { themes } from '../../lib/constants';
 import styles from './styles';
 import { events, logEvent } from '../../lib/methods/helpers/log';
 import { IUserMention } from './interfaces';
+import { isIOS } from '../../lib/methods/helpers';
+import sharedStyles from '../../views/Styles';
 
 interface IAtMention {
 	mention: string;
@@ -20,27 +22,27 @@ const AtMention = React.memo(({ mention, mentions, username, navToRoomInfo, styl
 	const { theme } = useTheme();
 	if (mention === 'all' || mention === 'here') {
 		return (
-			<View style={styles.mentionView}>
+			<Text style={[styles.plainText, styles.text]}>
-				<Text>
+				<View style={{ marginBottom: isIOS ? -3 : 0 }}>
-					<View>
-						<Text style={[styles.plainText, styles.text, { color: themes[theme].bodyText, marginBottom: -4 }]}>@</Text>
-					</View>
-					<View>
 					<Text
 						style={[
-								styles.mention,
+							styles.plainText,
+							styles.text,
 							{
+								fontSize: 16,
+								...sharedStyles.textMedium,
+								borderRadius: 4,
+								overflow: 'hidden',
+								marginBottom: isIOS ? 0 : -5,
 								color: themes[theme].pureWhite,
 								backgroundColor: themes[theme].mentionGroupColor
-								},
+							}
-								...style
 						]}
 					>
 						{` ${mention} `}
 					</Text>
 				</View>
 			</Text>
-			</View>
 		);
 	}
 
@@ -73,18 +75,27 @@ const AtMention = React.memo(({ mention, mentions, username, navToRoomInfo, styl
 	if (user) {
 		const m = useRealName && user.name ? user.name : user.username;
 		return (
-			<View style={styles.mentionView}>
+			<Text style={[styles.plainText, styles.text]}>
-				<Text>
+				<View style={{ marginBottom: isIOS ? -3 : 0 }}>
-					<View>
+					<Text
-						<Text style={[styles.plainText, styles.text, { color: themes[theme].bodyText, marginBottom: -4 }]}>@</Text>
+						style={[
-					</View>
+							styles.plainText,
-					<View>
+							styles.text,
-						<Text style={[styles.mention, mentionStyle, ...style]} onPress={handlePress}>
+							{
+								fontSize: 16,
+								...sharedStyles.textMedium,
+								borderRadius: 4,
+								overflow: 'hidden',
+								marginBottom: isIOS ? 0 : -5
+							},
+							mentionStyle
+						]}
+						onPress={handlePress}
+					>
 						{` ${m} `}
 					</Text>
 				</View>
 			</Text>
-			</View>
 		);
 	}
 

app/containers/markdown/Hashtag.tsx

@@ -8,6 +8,8 @@ import styles from './styles';
 import { getSubscriptionByRoomId } from '../../lib/database/services/Subscription';
 import { useAppSelector } from '../../lib/hooks';
 import { goRoom } from '../../lib/methods/helpers/goRoom';
+import sharedStyles from '../../views/Styles';
+import { isIOS } from '../../lib/methods/helpers';
 
 interface IHashtag {
 	hashtag: string;
@@ -38,28 +40,28 @@ const Hashtag = React.memo(({ hashtag, channels, navToRoomInfo, style = [] }: IH
 
 	if (channels && channels.length && channels.findIndex(channel => channel.name === hashtag) !== -1) {
 		return (
-			<View style={styles.mentionView}>
+			<Text style={[styles.plainText, styles.text]}>
-				<Text>
+				<View style={{ marginBottom: isIOS ? -3 : 0 }}>
-					<View>
-						<Text style={[styles.plainText, styles.text, { color: themes[theme].bodyText, marginBottom: -4 }]}>@</Text>
-					</View>
-					<View>
 					<Text
 						style={[
-								styles.mention,
+							styles.plainText,
+							styles.text,
 							{
+								fontSize: 16,
+								...sharedStyles.textMedium,
+								borderRadius: 4,
+								overflow: 'hidden',
+								marginBottom: isIOS ? 0 : -5,
 								color: themes[theme].mentionOthersColor,
 								backgroundColor: themes[theme].mentionOthersBackground
-								},
+							}
-								...style
 						]}
 						onPress={handlePress}
 					>
-							{` ${hashtag} `}
+						{` #${hashtag} `}
 					</Text>
 				</View>
 			</Text>
-			</View>
 		);
 	}
 	return <Text style={[styles.text, { color: themes[theme].bodyText }, ...style]}>{`#${hashtag}`}</Text>;

app/containers/markdown/new/NewMarkdown.stories.tsx

@@ -141,7 +141,9 @@ const allMentionTokens = [
 	}
 ];
 
-const multipleMentionTokens = [
+const shortText = 'Lorem ipsum dolor sit amet consectetur adipiscing elit';
+
+const startingWithMention = [
 	{
 		type: 'PARAGRAPH',
 		value: [
@@ -149,12 +151,12 @@ const multipleMentionTokens = [
 				type: 'MENTION_USER',
 				value: {
 					type: 'PLAIN_TEXT',
-					value: 'name'
+					value: 'all'
 				}
 			},
 			{
 				type: 'PLAIN_TEXT',
-				value: ' '
+				value: ` ${shortText} `
 			},
 			{
 				type: 'MENTION_USER',
@@ -165,40 +167,52 @@ const multipleMentionTokens = [
 			},
 			{
 				type: 'PLAIN_TEXT',
-				value: ' '
+				value: ` ${shortText} `
 			},
 			{
 				type: 'MENTION_USER',
 				value: {
 					type: 'PLAIN_TEXT',
-					value: 'not_a_user'
+					value: 'name'
 				}
 			},
 			{
 				type: 'PLAIN_TEXT',
-				value: ' '
+				value: ` ${shortText} `
 			},
 			{
-				type: 'MENTION_USER',
+				type: 'MENTION_CHANNEL',
 				value: {
 					type: 'PLAIN_TEXT',
-					value: 'here'
+					value: 'text_channel'
 				}
 			},
 			{
 				type: 'PLAIN_TEXT',
-				value: ' '
+				value: ` ${shortText} `
 			},
 			{
-				type: 'MENTION_USER',
+				type: 'MENTION_CHANNEL',
 				value: {
 					type: 'PLAIN_TEXT',
-					value: 'all'
+					value: 'not_a_channel'
 				}
 			}
 		]
 	}
 ];
+const startingWithoutMention = [
+	{
+		type: 'PARAGRAPH',
+		value: [
+			{
+				type: 'PLAIN_TEXT',
+				value: `${shortText} `
+			},
+			...startingWithMention[0].value.slice(2, startingWithMention[0].value.length)
+		]
+	}
+];
 
 const allMentions = [
 	{
@@ -229,10 +243,42 @@ const multipleMentions = [
 export const Mentions = () => (
 	<View style={styles.container}>
 		<NewMarkdown tokens={allMentionTokens} mentions={allMentions} navToRoomInfo={() => {}} style={[]} />
-		<NewMarkdown tokens={multipleMentionTokens} mentions={multipleMentions} navToRoomInfo={() => {}} style={[]} />
+		<NewMarkdown
+			tokens={startingWithMention}
+			mentions={multipleMentions}
+			channels={channelMention}
+			navToRoomInfo={() => {}}
+			style={[]}
+		/>
+		<NewMarkdown
+			tokens={startingWithoutMention}
+			mentions={multipleMentions}
+			channels={channelMention}
+			navToRoomInfo={() => {}}
+			style={[]}
+		/>
 	</View>
 );
 
+// export const Mentions = () => (
+// 	<View style={styles.container}>
+// 		<Text style={{ lineHeight: 24, fontSize: 16, fontFamily: 'Inter', fontWeight: '400' }}>
+// 			<AtMention mention='all' />
+// 			<Text> asd as das dasd asd asd asd asd asd asd ads adas </Text>
+// 			<AtMention mention='all' />
+// 			<Text> asd as das dasd asd asd asd asd asd asd ads adas </Text>
+// 			<AtMention mention='all' />
+// 			<Text> asd as das dasd asd asd asd asd asd asd ads adas </Text>
+// 			<AtMention mention='all' />
+// 			<Text> asd as das dasd asd asd asd asd asd asd ads adas </Text>
+// 			<AtMention mention='all' />
+// 			<Text> asd as das dasd asd asd asd asd asd asd ads adas </Text>
+// 			<AtMention mention='all' />
+// 			<Text> asd as das dasd asd asd asd asd asd asd ads adas </Text>
+// 		</Text>
+// 	</View>
+// );
+
 const channelTokens = [
 	{
 		type: 'PARAGRAPH',

app/containers/markdown/new/Paragraph.tsx

@@ -13,7 +13,12 @@ interface IParagraphProps {
 
 const Paragraph = ({ value }: IParagraphProps) => {
 	let forceTrim = false;
+	let prependSpace = false;
 	const { theme } = useTheme();
+	// if starts with mention
+	if (value?.[0]?.type === 'MENTION_CHANNEL' || value?.[0]?.type === 'MENTION_USER') {
+		prependSpace = true;
+	}
 	if (
 		value?.[0]?.type === 'LINK' &&
 		// Need to update the @rocket.chat/message-parser to understand that the label can be a Markup | Markup[]
@@ -33,6 +38,7 @@ const Paragraph = ({ value }: IParagraphProps) => {
 	}
 	return (
 		<Text style={[styles.text, { color: themes[theme].bodyText }]}>
+			{prependSpace ? ' ' : ''}
 			<Inline value={value} forceTrim={forceTrim} />
 		</Text>
 	);

app/containers/markdown/styles.ts

@@ -37,6 +37,7 @@ export default StyleSheet.create({
 		lineHeight: 24
 	},
 	text: {
+		lineHeight: 24,
 		fontSize: 16,
 		...sharedStyles.textRegular
 	},
@@ -58,13 +59,24 @@ export default StyleSheet.create({
 		height: 30
 	},
 	temp: { opacity: 0.3 },
-	mentionView: { height: 20, marginBottom: isIOS ? -2 : -4 },
+	mentionView: {
+		height: 24,
+		marginBottom: isIOS ? -8 : -8,
+		backgroundColor: 'green'
+	},
 	mention: {
 		fontSize: 16,
 		...sharedStyles.textMedium,
 		borderRadius: 4,
 		overflow: 'hidden',
-		marginBottom: -4
+		// marginBottom: -4,
+		lineHeight: 24
+	},
+	mentionSymbol: {
+		lineHeight: 20,
+		marginBottom: isIOS ? 0 : -2,
+		backgroundColor: 'yellow',
+		overflow: 'hidden'
 	},
 	paragraph: {
 		marginTop: 0,