Move some message blocks

apps/meteor/client/components/message/MessageBodyRender/Inline.tsx

@@ -36,7 +36,7 @@ const Inline: FC<{ value: ASTParagraph['value'] }> = ({ value = [] }) => {
 					case 'MENTION_CHANNEL':
 						return <MentionChannel key={index} value={block.value} />;
 					case 'EMOJI':
-						return <MessageEmoji isThreadPreview={isThreadPreview} key={index} emojiHandle={`:${block.value.value}:`} />;
+						return <MessageEmoji isThreadPreview={isThreadPreview} key={index} handle={block.value.value} />;
 					case 'INLINE_CODE':
 						return <InlineCode key={index} value={block.value} />;
 					default:

apps/meteor/client/components/message/MessageBodyRender/MessageBodyRender.tsx

@@ -0,0 +1,70 @@
+import * as MessageParser from '@rocket.chat/message-parser';
+import React, { memo, MouseEvent, ReactElement } from 'react';
+
+import Code from './Code';
+import OrderedList from './OrderedList';
+import Quote from './Quote';
+import TaskList from './TaskList';
+import UnorderedList from './UnorderedList';
+import BigEmojiBlock from './blocks/BigEmojiBlock';
+import HeadingBlock from './blocks/HeadingBlock';
+import ParagraphBlock from './blocks/ParagraphBlock';
+import { MessageBodyContext } from './contexts/MessageBodyContext';
+import { ChannelMention } from './definitions/ChannelMention';
+import { UserMention } from './definitions/UserMention';
+
+type MessageBodyRenderProps = {
+	tokens: MessageParser.MarkdownAST;
+	mentions: UserMention[];
+	channels: ChannelMention[];
+	onUserMentionClick?: (username: string) => (e: MouseEvent<HTMLDivElement>) => void;
+	onChannelMentionClick?: (id: string) => (e: MouseEvent<HTMLDivElement>) => void;
+	isThreadPreview?: boolean;
+};
+
+const MessageBodyRender = ({
+	tokens,
+	mentions = [],
+	channels = [],
+	onUserMentionClick,
+	onChannelMentionClick,
+	isThreadPreview,
+}: MessageBodyRenderProps): ReactElement => (
+	<MessageBodyContext.Provider value={{ mentions, channels, onUserMentionClick, onChannelMentionClick, isThreadPreview }}>
+		{tokens.map((block, index) => {
+			switch (block.type) {
+				case 'BIG_EMOJI':
+					return <BigEmojiBlock key={index} emojis={block.value} isThreadPreview={isThreadPreview} />;
+
+				case 'PARAGRAPH':
+					return <ParagraphBlock key={index} chunks={block.value} />;
+
+				case 'HEADING':
+					return <HeadingBlock key={index} chunks={block.value} level={block.level} />;
+
+				case 'UNORDERED_LIST':
+					return <UnorderedList key={index} value={block.value} />;
+
+				case 'ORDERED_LIST':
+					return <OrderedList key={index} value={block.value} />;
+
+				case 'TASKS':
+					return <TaskList key={index} value={block.value} />;
+
+				case 'QUOTE':
+					return <Quote key={index} value={block.value} />;
+
+				case 'CODE':
+					return <Code key={index} {...block} />;
+
+				case 'LINE_BREAK':
+					return <br key={index} />;
+
+				default:
+					return null;
+			}
+		})}
+	</MessageBodyContext.Provider>
+);
+
+export default memo(MessageBodyRender);

apps/meteor/client/components/message/MessageBodyRender/Quote.tsx

@@ -4,7 +4,7 @@ import colors from '@rocket.chat/fuselage-tokens/colors';
 import { Quote as ASTQuote } from '@rocket.chat/message-parser';
 import React, { FC } from 'react';
 
-import Paragraph from './Paragraph';
+import ParagraphBlock from './blocks/ParagraphBlock';
 
 const hover = css`
 	&:hover,
@@ -28,7 +28,7 @@ const Quote: FC<{ value: ASTQuote['value'] }> = ({ value }) => (
 		borderInlineStartColor='neutral-600'
 	>
 		{value.map((item, index) => (
-			<Paragraph key={index} value={item.value} />
+			<ParagraphBlock key={index} chunks={item.value} />
 		))}
 	</Box>
 );

apps/meteor/client/components/message/MessageBodyRender/blocks/BigEmojiBlock.tsx

@@ -0,0 +1,19 @@
+import * as MessageParser from '@rocket.chat/message-parser';
+import React, { ReactElement } from 'react';
+
+import MessageEmoji from '../../MessageEmoji';
+
+type BigEmojiBlockProps = {
+	emojis: MessageParser.Emoji[];
+	isThreadPreview?: boolean;
+};
+
+const BigEmojiBlock = ({ emojis, isThreadPreview }: BigEmojiBlockProps): ReactElement => (
+	<>
+		{emojis.map(({ value: { value: handle } }, index) => (
+			<MessageEmoji key={index} handle={handle} big isThreadPreview={isThreadPreview} />
+		))}
+	</>
+);
+
+export default BigEmojiBlock;

apps/meteor/client/components/message/MessageBodyRender/blocks/HeadingBlock.tsx

@@ -0,0 +1,23 @@
+import * as MessageParser from '@rocket.chat/message-parser';
+import React, { ReactElement } from 'react';
+
+import PlainText from '../PlainText';
+
+type HeadingBlockProps = {
+	chunks?: MessageParser.Plain[];
+	level?: 1 | 2 | 3 | 4;
+};
+
+const HeadingBlock = ({ chunks = [], level = 1 }: HeadingBlockProps): ReactElement => {
+	const HeadingTag = `h${level}` as const;
+
+	return (
+		<HeadingTag>
+			{chunks.map((block, index) => (
+				<PlainText key={index} value={block.value} />
+			))}
+		</HeadingTag>
+	);
+};
+
+export default HeadingBlock;

apps/meteor/client/components/message/MessageBodyRender/blocks/ParagraphBlock.tsx

@@ -0,0 +1,16 @@
+import * as MessageParser from '@rocket.chat/message-parser';
+import React, { ReactElement } from 'react';
+
+import Inline from '../Inline';
+
+type ParagraphBlockProps = {
+	chunks: MessageParser.Inlines[];
+};
+
+const ParagraphBlock = ({ chunks: value = [] }: ParagraphBlockProps): ReactElement => (
+	<p>
+		<Inline value={value} />
+	</p>
+);
+
+export default ParagraphBlock;

apps/meteor/client/components/message/MessageBodyRender/index.tsx

@@ -1,79 +1 @@
-import { BigEmoji as ASTBigEmoji, MarkdownAST } from '@rocket.chat/message-parser';
-import React, { FC, memo, MouseEvent } from 'react';
-
-import BigEmoji from './BigEmoji';
-import Code from './Code';
-import Heading from './Heading';
-import OrderedList from './OrderedList';
-import Paragraph from './Paragraph';
-import Quote from './Quote';
-import TaskList from './TaskList';
-import UnorderedList from './UnorderedList';
-import { MessageBodyContext } from './contexts/MessageBodyContext';
-import { ChannelMention } from './definitions/ChannelMention';
-import { UserMention } from './definitions/UserMention';
-
-type BodyProps = {
-	tokens: MarkdownAST;
-	mentions: UserMention[];
-	channels: ChannelMention[];
-	onUserMentionClick?: (username: string) => (e: MouseEvent<HTMLDivElement>) => void;
-	onChannelMentionClick?: (id: string) => (e: MouseEvent<HTMLDivElement>) => void;
-	isThreadPreview?: boolean;
-};
-
-const isBigEmoji = (tokens: MarkdownAST): tokens is [ASTBigEmoji] => tokens.length === 1 && tokens[0].type === 'BIG_EMOJI';
-
-const MessageBodyRender: FC<BodyProps> = ({
-	tokens,
-	mentions = [],
-	channels = [],
-	onUserMentionClick,
-	onChannelMentionClick,
-	isThreadPreview,
-}) => {
-	if (isBigEmoji(tokens)) {
-		return <BigEmoji value={tokens[0].value} isThreadPreview={isThreadPreview} />;
-	}
-
-	return (
-		<MessageBodyContext.Provider value={{ mentions, channels, onUserMentionClick, onChannelMentionClick, isThreadPreview }}>
-			{tokens.map((block, index) => {
-				if (block.type === 'UNORDERED_LIST') {
-					return <UnorderedList value={block.value} key={index} />;
-				}
-
-				if (block.type === 'QUOTE') {
-					return <Quote value={block.value} key={index} />;
-				}
-				if (block.type === 'TASKS') {
-					return <TaskList value={block.value} key={index} />;
-				}
-
-				if (block.type === 'ORDERED_LIST') {
-					return <OrderedList value={block.value} key={index} />;
-				}
-
-				if (block.type === 'PARAGRAPH') {
-					return <Paragraph value={block.value} key={index} />;
-				}
-
-				if (block.type === 'CODE') {
-					return <Code {...block} key={index} />;
-				}
-
-				if (block.type === 'HEADING') {
-					return <Heading value={block.value} level={block.level} key={index} />;
-				}
-
-				if (block.type === 'LINE_BREAK') {
-					return <br key={index} />;
-				}
-
-				return null;
-			})}
-		</MessageBodyContext.Provider>
-	);
-};
-
-export default memo(MessageBodyRender);
+export { default } from './MessageBodyRender';

apps/meteor/client/components/message/MessageEmoji.tsx

@@ -4,25 +4,26 @@ import React, { ReactElement } from 'react';
 import { getEmojiClassNameAndDataTitle } from '../../lib/utils/renderEmoji';
 
 type MessageEmojiProps = {
-	emojiHandle: string; // :emoji:
+	handle: string;
 	big?: boolean;
 	isThreadPreview?: boolean;
 };
 
-function MessageEmoji({ emojiHandle, big, isThreadPreview }: MessageEmojiProps): ReactElement {
-	const emojiProps = getEmojiClassNameAndDataTitle(emojiHandle);
+function MessageEmoji({ handle, big, isThreadPreview }: MessageEmojiProps): ReactElement {
+	handle = `:${handle}:`;
+	const emojiProps = getEmojiClassNameAndDataTitle(handle);
 
 	if (!emojiProps.className && !emojiProps.name) {
-		return <>{emojiHandle}</>;
+		return <>{handle}</>;
 	}
 
 	if (isThreadPreview) {
-		return <ThreadMessageEmoji {...emojiProps}>{emojiHandle}</ThreadMessageEmoji>;
+		return <ThreadMessageEmoji {...emojiProps}>{handle}</ThreadMessageEmoji>;
 	}
 
 	return (
 		<MessageEmojiBase big={big} {...emojiProps}>
-			{emojiHandle}
+			{handle}
 		</MessageEmojiBase>
 	);
 }