fix: mentions and emojis inside bold, italic and strikethrough (#29391)

RocketChat · Jul 7, 2023 · e01bbcc · e01bbcc
1 parent d91e480
commit e01bbcc
Show file tree

Hide file tree

Showing 9 changed files with 260 additions and 120 deletions.
diff --git a/.changeset/mentions-emoji-emphasis.md b/.changeset/mentions-emoji-emphasis.md
@@ -0,0 +1,6 @@
+---
+'@rocket.chat/gazzodown': minor
+---
+
+Fixed mentions and emojis inside inside bold, italic or strikethrough texts
+
diff --git a/ee/packages/pdf-worker/src/templates/ChatTranscript/markup/elements/BoldSpan.tsx b/ee/packages/pdf-worker/src/templates/ChatTranscript/markup/elements/BoldSpan.tsx
@@ -4,38 +4,60 @@ import type * as MessageParser from '@rocket.chat/message-parser';
 import ItalicSpan from './ItalicSpan';
 import LinkSpan from './LinkSpan';
 import StrikeSpan from './StrikeSpan';
+import EmojiSpan from './EmojiSpan';
 
 const styles = StyleSheet.create({
 	bold: {
 		fontWeight: 700,
 	},
 });
 
+type MessageBlock =
+	| MessageParser.Emoji
+	| MessageParser.ChannelMention
+	| MessageParser.UserMention
+	| MessageParser.Link
+	| MessageParser.MarkupExcluding<MessageParser.Bold>;
+
 type BoldSpanProps = {
-	children: (MessageParser.Link | MessageParser.MarkupExcluding<MessageParser.Bold>)[];
+	children: MessageBlock[];
 };
 
 const BoldSpan = ({ children }: BoldSpanProps) => (
-	<View style={styles.bold}>
+	<>
 		{children.map((child, index) => {
-			switch (child.type) {
-				case 'LINK':
-					return <LinkSpan key={index} label={Array.isArray(child.value.label) ? child.value.label : [child.value.label]} />;
+			if (child.type === 'LINK' || child.type === 'PLAIN_TEXT' || child.type === 'ITALIC' || child.type === 'STRIKE') {
+				return (
+					<View style={styles.bold} key={index}>
+						{renderBlockComponent(child, index)}
+					</View>
+				);
+			}
+			return renderBlockComponent(child, index);
+		})}
+	</>
+);
 
-				case 'PLAIN_TEXT':
-					return <Text key={index}>{child.value}</Text>;
+const renderBlockComponent = (child: MessageBlock, index: number) => {
+	switch (child.type) {
+		case 'LINK':
+			return <LinkSpan key={index} label={Array.isArray(child.value.label) ? child.value.label : [child.value.label]} />;
 
-				case 'STRIKE':
-					return <StrikeSpan key={index} children={child.value} />;
+		case 'PLAIN_TEXT':
+			return <Text key={index}>{child.value}</Text>;
 
-				case 'ITALIC':
-					return <ItalicSpan key={index} children={child.value} />;
+		case 'STRIKE':
+			return <StrikeSpan key={index} children={child.value} />;
 
-				default:
-					return null;
-			}
-		})}
-	</View>
-);
+		case 'ITALIC':
+			return <ItalicSpan key={index} children={child.value} />;
+
+		case 'EMOJI':
+			return <EmojiSpan key={index} {...child} />;
+
+		default:
+			return null;
+	}
+};
 
 export default BoldSpan;
diff --git a/ee/packages/pdf-worker/src/templates/ChatTranscript/markup/elements/ItalicSpan.tsx b/ee/packages/pdf-worker/src/templates/ChatTranscript/markup/elements/ItalicSpan.tsx
@@ -4,38 +4,60 @@ import type * as MessageParser from '@rocket.chat/message-parser';
 import BoldSpan from './BoldSpan';
 import LinkSpan from './LinkSpan';
 import StrikeSpan from './StrikeSpan';
+import EmojiSpan from './EmojiSpan';
 
 const styles = StyleSheet.create({
 	italic: {
 		fontStyle: 'italic',
 	},
 });
 
+type MessageBlock =
+	| MessageParser.Emoji
+	| MessageParser.ChannelMention
+	| MessageParser.UserMention
+	| MessageParser.Link
+	| MessageParser.MarkupExcluding<MessageParser.Italic>;
+
 type ItalicSpanProps = {
-	children: (MessageParser.Link | MessageParser.MarkupExcluding<MessageParser.Italic>)[];
+	children: MessageBlock[];
 };
 
 const ItalicSpan = ({ children }: ItalicSpanProps) => (
-	<View style={styles.italic}>
+	<>
 		{children.map((child, index) => {
-			switch (child.type) {
-				case 'LINK':
-					return <LinkSpan key={index} label={Array.isArray(child.value.label) ? child.value.label : [child.value.label]} />;
+			if (child.type === 'LINK' || child.type === 'PLAIN_TEXT' || child.type === 'STRIKE' || child.type === 'BOLD') {
+				return (
+					<View style={styles.italic} key={index}>
+						{renderBlockComponent(child, index)}
+					</View>
+				);
+			}
+			return renderBlockComponent(child, index);
+		})}
+	</>
+);
 
-				case 'PLAIN_TEXT':
-					return <Text key={index}>{child.value}</Text>;
+const renderBlockComponent = (child: MessageBlock, index: number) => {
+	switch (child.type) {
+		case 'LINK':
+			return <LinkSpan key={index} label={Array.isArray(child.value.label) ? child.value.label : [child.value.label]} />;
 
-				case 'STRIKE':
-					return <StrikeSpan key={index} children={child.value} />;
+		case 'PLAIN_TEXT':
+			return <Text key={index}>{child.value}</Text>;
 
-				case 'BOLD':
-					return <BoldSpan key={index} children={child.value} />;
+		case 'STRIKE':
+			return <StrikeSpan key={index} children={child.value} />;
 
-				default:
-					return null;
-			}
-		})}
-	</View>
-);
+		case 'BOLD':
+			return <BoldSpan key={index} children={child.value} />;
+
+		case 'EMOJI':
+			return <EmojiSpan key={index} {...child} />;
+
+		default:
+			return null;
+	}
+};
 
 export default ItalicSpan;
diff --git a/ee/packages/pdf-worker/src/templates/ChatTranscript/markup/elements/StrikeSpan.tsx b/ee/packages/pdf-worker/src/templates/ChatTranscript/markup/elements/StrikeSpan.tsx
@@ -4,38 +4,60 @@ import type * as MessageParser from '@rocket.chat/message-parser';
 import ItalicSpan from './ItalicSpan';
 import LinkSpan from './LinkSpan';
 import BoldSpan from './BoldSpan';
+import EmojiSpan from './EmojiSpan';
 
 const styles = StyleSheet.create({
 	strike: {
 		textDecoration: 'line-through',
 	},
 });
 
+type MessageBlock =
+	| MessageParser.Emoji
+	| MessageParser.ChannelMention
+	| MessageParser.UserMention
+	| MessageParser.Link
+	| MessageParser.MarkupExcluding<MessageParser.Strike>;
+
 type StrikeSpanProps = {
-	children: (MessageParser.Link | MessageParser.MarkupExcluding<MessageParser.Strike>)[];
+	children: MessageBlock[];
 };
 
 const StrikeSpan = ({ children }: StrikeSpanProps) => (
-	<View style={styles.strike}>
+	<>
 		{children.map((child, index) => {
-			switch (child.type) {
-				case 'LINK':
-					return <LinkSpan key={index} label={Array.isArray(child.value.label) ? child.value.label : [child.value.label]} />;
+			if (child.type === 'LINK' || child.type === 'PLAIN_TEXT' || child.type === 'ITALIC' || child.type === 'BOLD') {
+				return (
+					<View style={styles.strike} key={index}>
+						{renderBlockComponent(child, index)}
+					</View>
+				);
+			}
+			return renderBlockComponent(child, index);
+		})}
+	</>
+);
 
-				case 'PLAIN_TEXT':
-					return <Text key={index}>{child.value}</Text>;
+const renderBlockComponent = (child: MessageBlock, index: number) => {
+	switch (child.type) {
+		case 'LINK':
+			return <LinkSpan key={index} label={Array.isArray(child.value.label) ? child.value.label : [child.value.label]} />;
 
-				case 'BOLD':
-					return <BoldSpan key={index} children={child.value} />;
+		case 'PLAIN_TEXT':
+			return <Text key={index}>{child.value}</Text>;
 
-				case 'ITALIC':
-					return <ItalicSpan key={index} children={child.value} />;
+		case 'ITALIC':
+			return <ItalicSpan key={index} children={child.value} />;
 
-				default:
-					return null;
-			}
-		})}
-	</View>
-);
+		case 'BOLD':
+			return <BoldSpan key={index} children={child.value} />;
+
+		case 'EMOJI':
+			return <EmojiSpan key={index} {...child} />;
+
+		default:
+			return null;
+	}
+};
 
 export default StrikeSpan;
diff --git a/packages/gazzodown/src/elements/BoldSpan.tsx b/packages/gazzodown/src/elements/BoldSpan.tsx
@@ -1,36 +1,62 @@
 import type * as MessageParser from '@rocket.chat/message-parser';
 import type { ReactElement } from 'react';
 
+import EmojiElement from '../emoji/EmojiElement';
+import ChannelMentionElement from '../mentions/ChannelMentionElement';
+import UserMentionElement from '../mentions/UserMentionElement';
 import ItalicSpan from './ItalicSpan';
 import LinkSpan from './LinkSpan';
 import PlainSpan from './PlainSpan';
 import StrikeSpan from './StrikeSpan';
 
+type MessageBlock =
+	| MessageParser.Emoji
+	| MessageParser.ChannelMention
+	| MessageParser.UserMention
+	| MessageParser.Link
+	| MessageParser.MarkupExcluding<MessageParser.Bold>;
+
 type BoldSpanProps = {
-	children: (MessageParser.Link | MessageParser.MarkupExcluding<MessageParser.Bold>)[];
+	children: MessageBlock[];
 };
 
 const BoldSpan = ({ children }: BoldSpanProps): ReactElement => (
-	<strong>
+	<>
 		{children.map((block, index) => {
-			switch (block.type) {
-				case 'LINK':
-					return <LinkSpan key={index} href={block.value.src.value} label={block.value.label} />;
+			if (block.type === 'LINK' || block.type === 'PLAIN_TEXT' || block.type === 'STRIKE' || block.type === 'ITALIC') {
+				return <strong key={index}>{renderBlockComponent(block, index)}</strong>;
+			}
+			return renderBlockComponent(block, index);
+		})}
+	</>
+);
 
-				case 'PLAIN_TEXT':
-					return <PlainSpan key={index} text={block.value} />;
+const renderBlockComponent = (block: MessageBlock, index: number): ReactElement | null => {
+	switch (block.type) {
+		case 'EMOJI':
+			return <EmojiElement key={index} {...block} />;
 
-				case 'STRIKE':
-					return <StrikeSpan key={index} children={block.value} />;
+		case 'MENTION_USER':
+			return <UserMentionElement key={index} mention={block.value.value} />;
 
-				case 'ITALIC':
-					return <ItalicSpan key={index} children={block.value} />;
+		case 'MENTION_CHANNEL':
+			return <ChannelMentionElement key={index} mention={block.value.value} />;
 
-				default:
-					return null;
-			}
-		})}
-	</strong>
-);
+		case 'PLAIN_TEXT':
+			return <PlainSpan key={index} text={block.value} />;
+
+		case 'LINK':
+			return <LinkSpan key={index} href={block.value.src.value} label={block.value.label} />;
+
+		case 'STRIKE':
+			return <StrikeSpan key={index} children={block.value} />;
+
+		case 'ITALIC':
+			return <ItalicSpan key={index} children={block.value} />;
+
+		default:
+			return null;
+	}
+};
 
 export default BoldSpan;
diff --git a/packages/gazzodown/src/elements/ImageElement.tsx b/packages/gazzodown/src/elements/ImageElement.tsx
@@ -1,7 +1,9 @@
 import type * as MessageParser from '@rocket.chat/message-parser';
 import { ReactElement, useMemo } from 'react';
 
-const flattenMarkup = (markup: MessageParser.Markup | MessageParser.Link): string => {
+const flattenMarkup = (
+	markup: MessageParser.Markup | MessageParser.Link | MessageParser.Emoji | MessageParser.ChannelMention | MessageParser.UserMention,
+): string => {
 	switch (markup.type) {
 		case 'PLAIN_TEXT':
 			return markup.value;