Move some message blocks

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

@@ -1,14 +1,14 @@
 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 CodeBlock from './blocks/CodeBlock';
 import HeadingBlock from './blocks/HeadingBlock';
+import OrderedListBlock from './blocks/OrderedListBlock';
 import ParagraphBlock from './blocks/ParagraphBlock';
+import QuoteBlock from './blocks/QuoteBlock';
+import TaskList from './blocks/TaskListBlock';
+import UnorderedListBlock from './blocks/UnorderedListBlock';
 import { MessageBodyContext } from './contexts/MessageBodyContext';
 import { ChannelMention } from './definitions/ChannelMention';
 import { UserMention } from './definitions/UserMention';
@@ -43,19 +43,19 @@ const MessageBodyRender = ({
 					return <HeadingBlock key={index} chunks={block.value} level={block.level} />;
 
 				case 'UNORDERED_LIST':
-					return <UnorderedList key={index} value={block.value} />;
+					return <UnorderedListBlock key={index} items={block.value} />;
 
 				case 'ORDERED_LIST':
-					return <OrderedList key={index} value={block.value} />;
+					return <OrderedListBlock key={index} items={block.value} />;
 
 				case 'TASKS':
-					return <TaskList key={index} value={block.value} />;
+					return <TaskList key={index} tasks={block.value} />;
 
 				case 'QUOTE':
-					return <Quote key={index} value={block.value} />;
+					return <QuoteBlock key={index} paragraphs={block.value} />;
 
 				case 'CODE':
-					return <Code key={index} {...block} />;
+					return <CodeBlock key={index} language={block.language} lines={block.value} />;
 
 				case 'LINE_BREAK':
 					return <br key={index} />;

apps/meteor/client/components/message/MessageBodyRender/Code.tsx → apps/meteor/client/components/message/MessageBodyRender/blocks/CodeBlock.tsx

@@ -1,8 +1,8 @@
-import { Code as ASTCode } from '@rocket.chat/message-parser';
-import React, { FC, useEffect, useState } from 'react';
+import * as MessageParser from '@rocket.chat/message-parser';
+import React, { ReactElement, useEffect, useState } from 'react';
 
-import hljs, { register } from '../../../../app/markdown/lib/hljs';
-import CodeLine from './CodeLine';
+import hljs, { register } from '../../../../../app/markdown/lib/hljs';
+import CodeLine from '../CodeLine';
 
 type hljsResult = {
 	language: string;
@@ -12,9 +12,14 @@ type hljsResult = {
 
 const isHljsResult = (result: any): result is hljsResult => result?.value;
 
-const Code: FC<ASTCode> = ({ value = [], language }) => {
+type CodeBlockProps = {
+	language?: string;
+	lines: MessageParser.CodeLine[];
+};
+
+const CodeBlock = ({ lines = [], language }: CodeBlockProps): ReactElement => {
 	const [code, setCode] = useState<(JSX.Element | null)[] | { language: string; code: string }>(() =>
-		value.map((block, index) => {
+		lines.map((block, index) => {
 			switch (block.type) {
 				case 'CODE_LINE':
 					return <CodeLine key={index} value={block.value} />;
@@ -25,11 +30,11 @@ const Code: FC<ASTCode> = ({ value = [], language }) => {
 	);
 	useEffect(() => {
 		!language || language === 'none'
-			? setCode(hljs.highlightAuto(value.map((line) => line.value.value).join('\n')))
+			? setCode(hljs.highlightAuto(lines.map((line) => line.value.value).join('\n')))
 			: register(language).then(() => {
-					setCode(hljs.highlight(language, value.map((line) => line.value.value).join('\n')));
+					setCode(hljs.highlight(language, lines.map((line) => line.value.value).join('\n')));
 			  });
-	}, [language, value]);
+	}, [language, lines]);
 
 	return (
 		<code className={`code-colors hljs ${language}`}>
@@ -46,4 +51,4 @@ const Code: FC<ASTCode> = ({ value = [], language }) => {
 	);
 };
 
-export default Code;
+export default CodeBlock;

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

@@ -0,0 +1,20 @@
+import * as MessageParser from '@rocket.chat/message-parser';
+import React, { ReactElement } from 'react';
+
+import Inline from '../Inline';
+
+type OrderedListBlockProps = {
+	items: MessageParser.ListItem[];
+};
+
+const OrderedListBlock = ({ items }: OrderedListBlockProps): ReactElement => (
+	<ol>
+		{items.map(({ value, number }, index) => (
+			<li key={index} value={Number(number)}>
+				<Inline value={value} />
+			</li>
+		))}
+	</ol>
+);
+
+export default OrderedListBlock;

apps/meteor/client/components/message/MessageBodyRender/Quote.tsx → apps/meteor/client/components/message/MessageBodyRender/blocks/QuoteBlock.tsx

@@ -1,10 +1,10 @@
 import { css } from '@rocket.chat/css-in-js';
 import { Box } from '@rocket.chat/fuselage';
 import colors from '@rocket.chat/fuselage-tokens/colors';
-import { Quote as ASTQuote } from '@rocket.chat/message-parser';
-import React, { FC } from 'react';
+import * as MessageParser from '@rocket.chat/message-parser';
+import React, { ReactElement } from 'react';
 
-import ParagraphBlock from './blocks/ParagraphBlock';
+import ParagraphBlock from './ParagraphBlock';
 
 const hover = css`
 	&:hover,
@@ -15,7 +15,11 @@ const hover = css`
 	}
 `;
 
-const Quote: FC<{ value: ASTQuote['value'] }> = ({ value }) => (
+type QuoteBlockProps = {
+	paragraphs: MessageParser.Paragraph[];
+};
+
+const QuoteBlock = ({ paragraphs }: QuoteBlockProps): ReactElement => (
 	<Box
 		is='blockquote'
 		className={hover}
@@ -27,10 +31,10 @@ const Quote: FC<{ value: ASTQuote['value'] }> = ({ value }) => (
 		borderColor='neutral-200'
 		borderInlineStartColor='neutral-600'
 	>
-		{value.map((item, index) => (
-			<ParagraphBlock key={index} chunks={item.value} />
+		{paragraphs.map((paragraph, index) => (
+			<ParagraphBlock key={index} chunks={paragraph.value} />
 		))}
 	</Box>
 );
 
-export default Quote;
+export default QuoteBlock;

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

@@ -0,0 +1,27 @@
+import { CheckBox } from '@rocket.chat/fuselage';
+import * as MessageParser from '@rocket.chat/message-parser';
+import React, { ReactElement } from 'react';
+
+import Inline from '../Inline';
+
+type TaskListBlockProps = {
+	tasks: MessageParser.Task[];
+};
+
+const TaksListBlock = ({ tasks }: TaskListBlockProps): ReactElement => (
+	<ul
+		style={{
+			listStyle: 'none',
+			marginLeft: 0,
+			paddingLeft: 0,
+		}}
+	>
+		{tasks.map((item, index) => (
+			<li>
+				<CheckBox key={index} checked={item.status} /> <Inline value={item.value} />
+			</li>
+		))}
+	</ul>
+);
+
+export default TaksListBlock;

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

@@ -0,0 +1,20 @@
+import * as MessageParser from '@rocket.chat/message-parser';
+import React, { ReactElement } from 'react';
+
+import Inline from '../Inline';
+
+type UnorderedListBlockProps = {
+	items: MessageParser.ListItem[];
+};
+
+const UnorderedListBlock = ({ items }: UnorderedListBlockProps): ReactElement => (
+	<ul>
+		{items.map((item, index) => (
+			<li key={index}>
+				<Inline value={item.value} />
+			</li>
+		))}
+	</ul>
+);
+
+export default UnorderedListBlock;