[FIX] Ordered and unordered list styles, Line breaks. (#25494)

* use new list component * Fix Message lists and line breaks * Remove unecessary check from plaintext * skip empty text * remove parser from server * Fix components order * disable playwright * update * Fix parser version and wrong import * Match versions * Move actual `dependencies` from `devDependencies` * revert playwright * revert * Remove a few components * change version to next Co-authored-by: Tasso Evangelista <tasso.evangelista@rocket.chat> * update fuselage Co-authored-by: Tasso Evangelista <tasso.evangelista@rocket.chat>
RocketChat · May 24, 2022 · c7f3090 · c7f3090
1 parent 265299b
commit c7f3090
Show file tree

Hide file tree

Showing 19 changed files with 177 additions and 122 deletions.
diff --git a/apps/meteor/app/theme/client/imports/general/base_old.css b/apps/meteor/app/theme/client/imports/general/base_old.css
@@ -1661,7 +1661,7 @@
 		padding-bottom: 24px;
 	}
 
-	& ul {
+	& ul.messages-list {
 		padding: 21px 0 10px;
 	}
 

diff --git a/apps/meteor/app/ui/client/views/app/room.html b/apps/meteor/app/ui/client/views/app/room.html
@@ -77,7 +77,7 @@
 							</div>
 						{{/with}}
 						<div class="wrapper {{#if hasMoreNext}}has-more-next{{/if}} {{hideUsername}} {{hideAvatar}}">
-							<ul aria-live="polite">
+							<ul class="messages-list" aria-live="polite">
 								{{#if canPreview}}
 									{{#if hasMore}}
 										<li class="load-more">

diff --git a/apps/meteor/client/components/Message/MessageBodyRender/OrderedList.tsx b/apps/meteor/client/components/Message/MessageBodyRender/OrderedList.tsx
@@ -5,9 +5,9 @@ import Inline from './Inline';
 
 const OrderedList: FC<{ value: ASTOrderedList['value'] }> = ({ value }) => (
 	<ol>
-		{value.map((item, index) => (
-			<li key={index}>
-				<Inline value={item.value} />
+		{value.map(({ value, number }, index) => (
+			<li key={index} value={Number(number)}>
+				<Inline value={value} />
 			</li>
 		))}
 	</ol>

diff --git a/apps/meteor/client/components/Message/MessageBodyRender/PlainText.tsx b/apps/meteor/client/components/Message/MessageBodyRender/PlainText.tsx
@@ -12,12 +12,6 @@ const PlainText: FC<PlainTextType> = ({ value: text }) => {
 	const highlights = useMessageListHighlights();
 	const katex = useMessageListKatex();
 
-	// TODO ENG DAY:
-	// Add style for empty paragraphs in fuselage
-	if (!text.trim()) {
-		return <br />;
-	}
-
 	if (highlights || katex) {
 		return <CustomText text={text} wordsToHighlight={highlights} katex={katex} />;
 	}

diff --git a/apps/meteor/client/components/Message/MessageBodyRender/UnorderedList.tsx b/apps/meteor/client/components/Message/MessageBodyRender/UnorderedList.tsx
@@ -5,8 +5,8 @@ import Inline from './Inline';
 
 const UnorderedList: FC<{ value: ASTUnorderedList['value'] }> = ({ value }) => (
 	<ul>
-		{value.map((item) => (
-			<li>
+		{value.map((item, index) => (
+			<li key={index}>
 				<Inline value={item.value} />
 			</li>
 		))}

diff --git a/apps/meteor/client/components/Message/MessageBodyRender/index.tsx b/apps/meteor/client/components/Message/MessageBodyRender/index.tsx
@@ -66,6 +66,10 @@ const MessageBodyRender: FC<BodyProps> = ({
 					return <Heading value={block.value} level={block.level} key={index} />;
 				}
 
+				if (block.type === 'LINE_BREAK') {
+					return <br key={index} />;
+				}
+
 				return null;
 			})}
 		</MessageBodyContext.Provider>

diff --git a/apps/meteor/client/views/room/MessageList/components/EncryptedMessageRender.tsx b/apps/meteor/client/views/room/MessageList/components/EncryptedMessageRender.tsx
diff --git a/apps/meteor/client/views/room/MessageList/components/MessageContent.tsx b/apps/meteor/client/views/room/MessageList/components/MessageContent.tsx
@@ -1,9 +1,10 @@
 /* eslint-disable complexity */
 import { IMessage, isDiscussionMessage, isThreadMainMessage, ISubscription } from '@rocket.chat/core-typings';
 import { MessageBody } from '@rocket.chat/fuselage';
-import { useUserId, TranslationKey } from '@rocket.chat/ui-contexts';
+import { useTranslation, useUserId, TranslationKey } from '@rocket.chat/ui-contexts';
 import React, { FC, memo } from 'react';
 
+import { isE2EEMessage } from '../../../../../lib/isE2EEMessage';
 import Attachments from '../../../../components/Message/Attachments';
 import MessageActions from '../../../../components/Message/MessageActions';
 import BroadcastMetric from '../../../../components/Message/Metrics/Broadcast';
@@ -16,9 +17,9 @@ import MessageLocation from '../../../location/MessageLocation';
 import { useMessageActions, useMessageOembedIsEnabled, useMessageRunActionLink } from '../../contexts/MessageContext';
 import { useMessageListShowReadReceipt } from '../contexts/MessageListContext';
 import { isOwnUserMessage } from '../lib/isOwnUserMessage';
+import MessageContentBody from './MessageContentBody';
 import ReactionsList from './MessageReactionsList';
 import ReadReceipt from './MessageReadReceipt';
-import MessageRender from './MessageRender';
 import PreviewList from './UrlPreview';
 
 const MessageContent: FC<{ message: IMessage; sequential: boolean; subscription?: ISubscription; id: IMessage['_id'] }> = ({
@@ -30,6 +31,8 @@ const MessageContent: FC<{ message: IMessage; sequential: boolean; subscription?
 		actions: { openRoom, openThread, replyBroadcast },
 	} = useMessageActions();
 
+	const t = useTranslation();
+
 	const runActionLink = useMessageRunActionLink();
 
 	const oembedIsEnabled = useMessageOembedIsEnabled();
@@ -40,14 +43,22 @@ const MessageContent: FC<{ message: IMessage; sequential: boolean; subscription?
 
 	const mineUid = useUserId();
 
+	const isEncryptedMessage = isE2EEMessage(message);
+
 	return (
 		<>
-			<MessageBody data-qa-type='message-body'>
-				<MessageRender message={message} />
-			</MessageBody>
+			{!message.blocks && (
+				<MessageBody data-qa-type='message-body'>
+					{!isEncryptedMessage && <MessageContentBody message={message} />}
+					{isEncryptedMessage && message.e2e === 'done' && <MessageContentBody message={message} />}
+					{isEncryptedMessage && message.e2e === 'pending' && t('E2E_message_encrypted_placeholder')}
+				</MessageBody>
+			)}
 			{message.blocks && <MessageBlock mid={message._id} blocks={message.blocks} appId rid={message.rid} />}
 			{message.attachments && <Attachments attachments={message.attachments} file={message.file} />}
 
+			{oembedIsEnabled && !!message.urls?.length && <PreviewList urls={message.urls} />}
+
 			{message.actionLinks?.length && (
 				<MessageActions
 					mid={message._id}
@@ -93,8 +104,6 @@ const MessageContent: FC<{ message: IMessage; sequential: boolean; subscription?
 				<BroadcastMetric replyBroadcast={(): void => replyBroadcast(message)} mid={message._id} username={user.username} />
 			)}
 
-			{oembedIsEnabled && message.urls && <PreviewList urls={message.urls} />}
-
 			{shouldShowReadReceipt && <ReadReceipt unread={message.unread} />}
 		</>
 	);

diff --git a/apps/meteor/client/views/room/MessageList/components/MessageContentBody.tsx b/apps/meteor/client/views/room/MessageList/components/MessageContentBody.tsx
@@ -0,0 +1,28 @@
+/* eslint-disable complexity */
+import { IMessage } from '@rocket.chat/core-typings';
+import React, { FC, memo } from 'react';
+
+import MessageBodyRender from '../../../../components/Message/MessageBodyRender';
+import { useMessageActions } from '../../contexts/MessageContext';
+import { useParsedMessage } from '../hooks/useParsedMessage';
+
+const MessageContentBody: FC<{ message: IMessage; isThreadPreview?: boolean }> = ({ message, isThreadPreview }) => {
+	const {
+		actions: { openRoom, openUserCard },
+	} = useMessageActions();
+
+	const tokens = useParsedMessage(message);
+
+	return (
+		<MessageBodyRender
+			onUserMentionClick={openUserCard}
+			onChannelMentionClick={openRoom}
+			mentions={message?.mentions || []}
+			channels={message?.channels || []}
+			tokens={tokens}
+			isThreadPreview={isThreadPreview}
+		/>
+	);
+};
+
+export default memo(MessageContentBody);
diff --git a/apps/meteor/client/views/room/MessageList/components/MessageRender.tsx b/apps/meteor/client/views/room/MessageList/components/MessageRender.tsx
diff --git a/apps/meteor/client/views/room/MessageList/components/ThreadMessagePreview.tsx b/apps/meteor/client/views/room/MessageList/components/ThreadMessagePreview.tsx
@@ -20,7 +20,7 @@ import { useMessageActions } from '../../contexts/MessageContext';
 import { useIsSelecting, useToggleSelect, useIsSelectedMessage, useCountSelected } from '../contexts/SelectedMessagesContext';
 import { useMessageBody } from '../hooks/useMessageBody';
 import { useParentMessage } from '../hooks/useParentMessage';
-import MessageRender from './MessageRender';
+import MessageContentBody from './MessageContentBody';
 
 export const ThreadMessagePreview: FC<{ message: IThreadMessage; sequential: boolean }> = ({ message, sequential, ...props }) => {
 	const {
@@ -60,7 +60,7 @@ export const ThreadMessagePreview: FC<{ message: IThreadMessage; sequential: boo
 				</ThreadMessageLeftContainer>
 				<ThreadMessageContainer>
 					<ThreadMessageBody>
-						{message.ignored ? t('Message_Ignored') : <MessageRender isThreadPreview message={message} />}
+						{message.ignored ? t('Message_Ignored') : <MessageContentBody isThreadPreview message={message} />}
 					</ThreadMessageBody>
 				</ThreadMessageContainer>
 			</ThreadMessageRow>

diff --git a/apps/meteor/client/views/room/MessageList/components/UrlPreview/PreviewList.tsx b/apps/meteor/client/views/room/MessageList/components/UrlPreview/PreviewList.tsx
@@ -1,7 +1,7 @@
 import { Box } from '@rocket.chat/fuselage';
 import React, { ReactElement } from 'react';
 
-import { useMessageOembedIsEnabled, useMessageOembedMaxWidth } from '../../../contexts/MessageContext';
+import { useMessageOembedMaxWidth } from '../../../contexts/MessageContext';
 import OEmbedResolver from './OEmbedResolver';
 import UrlPreview from './UrlPreview';
 
@@ -108,11 +108,10 @@ const isPreviewData = (data: PreviewData | false): data is PreviewData => !!data
 const isMetaPreview = (_data: PreviewData['data'], type: PreviewTypes): _data is PreviewMetadata => type === 'oembed';
 
 const PreviewList = ({ urls }: PreviewListProps): ReactElement | null => {
-	const oembedIsEnabled = useMessageOembedIsEnabled();
 	const oembedWidth = useMessageOembedMaxWidth();
 
-	if (!oembedIsEnabled || !urls) {
-		return null;
+	if (!urls) {
+		throw new Error('urls is undefined - PreviewList');
 	}
 
 	const metaAndHeaders = urls.map(processMetaAndHeaders).filter(isPreviewData);

diff --git a/apps/meteor/client/views/room/MessageList/hooks/useParsedMessage.ts b/apps/meteor/client/views/room/MessageList/hooks/useParsedMessage.ts
@@ -0,0 +1,15 @@
+import { IMessage } from '@rocket.chat/core-typings';
+import { MarkdownAST, parser } from '@rocket.chat/message-parser';
+import { useMemo } from 'react';
+
+export function useParsedMessage(message: IMessage): MarkdownAST {
+	return useMemo(() => {
+		if (message.md) {
+			return message.md;
+		}
+		if (!message.msg) {
+			return [];
+		}
+		return parser(message.msg);
+	}, [message]);
+}
diff --git a/apps/meteor/ee/app/auditing/client/templates/audit/audit.html b/apps/meteor/ee/app/auditing/client/templates/audit/audit.html
@@ -3,7 +3,7 @@
 		{{> loading class="loading-animation--primary"}}
 	{{else}}
 		{{#if hasResults}}
-			<ul aria-live="polite">
+			<ul class="messages-list" aria-live="polite">
 				{{#with messageContext}}
 					{{#each msg in messages}}
 						{{> nrr nrrargs 'message' shouldCollapseReplies=true msg=msg room=room subscription=subscription settings=settings u=u}}

diff --git a/apps/meteor/ee/server/services/package.json b/apps/meteor/ee/server/services/package.json
@@ -26,7 +26,7 @@
 		"@rocket.chat/apps-engine": "^1.31.0",
 		"@rocket.chat/core-typings": "workspace:^",
 		"@rocket.chat/emitter": "~0.31.9",
-		"@rocket.chat/message-parser": "~0.31.9",
+		"@rocket.chat/message-parser": "next",
 		"@rocket.chat/rest-typings": "workspace:^",
 		"@rocket.chat/string-helpers": "~0.31.9",
 		"@rocket.chat/ui-kit": "~0.31.9",

diff --git a/apps/meteor/package.json b/apps/meteor/package.json
@@ -196,15 +196,15 @@
 		"@rocket.chat/emitter": "~0.31.11",
 		"@rocket.chat/forked-matrix-appservice-bridge": "^4.0.1",
 		"@rocket.chat/forked-matrix-bot-sdk": "^0.6.0-beta.2",
-		"@rocket.chat/fuselage": "~0.31.11",
+		"@rocket.chat/fuselage": "0.32.0-dev.40",
 		"@rocket.chat/fuselage-hooks": "~0.31.11",
 		"@rocket.chat/fuselage-polyfills": "~0.31.11",
 		"@rocket.chat/fuselage-tokens": "~0.31.11",
 		"@rocket.chat/fuselage-ui-kit": "~0.31.11",
 		"@rocket.chat/icons": "~0.31.11",
 		"@rocket.chat/logo": "~0.31.11",
 		"@rocket.chat/memo": "~0.31.11",
-		"@rocket.chat/message-parser": "~0.31.11",
+		"@rocket.chat/message-parser": "0.31.12-dev.10",
 		"@rocket.chat/mp3-encoder": "^0.24.0",
 		"@rocket.chat/onboarding-ui": "~0.31.11",
 		"@rocket.chat/rest-typings": "workspace:^",

diff --git a/packages/core-typings/package.json b/packages/core-typings/package.json
@@ -3,11 +3,7 @@
 	"version": "0.0.1",
 	"private": true,
 	"devDependencies": {
-		"@rocket.chat/apps-engine": "^1.31.0",
 		"@rocket.chat/eslint-config": "workspace:^",
-		"@rocket.chat/icons": "^0.31.9",
-		"@rocket.chat/message-parser": "^0.31.6",
-		"@rocket.chat/ui-kit": "^0.31.6",
 		"@types/mongodb": "^3.6.10",
 		"eslint": "^8.12.0",
 		"prettier": "^2.6.2",
@@ -23,5 +19,11 @@
 	"typings": "./dist/index.d.ts",
 	"files": [
 		"/dist"
-	]
+	],
+	"dependencies": {
+		"@rocket.chat/apps-engine": "^1.31.0",
+		"@rocket.chat/icons": "^0.31.9",
+		"@rocket.chat/message-parser": "next",
+		"@rocket.chat/ui-kit": "^0.31.6"
+	}
 }
diff --git a/packages/rest-typings/package.json b/packages/rest-typings/package.json
@@ -3,11 +3,7 @@
 	"version": "0.0.1",
 	"private": true,
 	"devDependencies": {
-		"@rocket.chat/apps-engine": "^1.31.0",
-		"@rocket.chat/core-typings": "workspace:^",
 		"@rocket.chat/eslint-config": "workspace:^",
-		"@rocket.chat/message-parser": "^0.31.6",
-		"@rocket.chat/ui-kit": "^0.31.6",
 		"@types/jest": "^27.4.1",
 		"@types/mongodb": "^3.6.10",
 		"eslint": "^8.12.0",
@@ -27,6 +23,10 @@
 		"/dist"
 	],
 	"dependencies": {
+		"@rocket.chat/apps-engine": "^1.31.0",
+		"@rocket.chat/core-typings": "workspace:^",
+		"@rocket.chat/message-parser": "next",
+		"@rocket.chat/ui-kit": "^0.31.6",
 		"ajv": "^8.11.0"
 	}
 }