feat(ui-message-list): add message contexts and content parts

.changeset/read-only-messages-follow-display-settings.md

@@ -0,0 +1,5 @@
+---
+'@rocket.chat/meteor': minor
+---
+
+Shows messages the way rooms do in audits, moderation reports, contact history, the forward, pin and report dialogs, the composer's quote and the threads list: they highlight the viewer's highlight words; audits, moderation reports and contact history also show real names in mentions when real names are on; audits render hex colors and KaTeX as the settings say; and attachments in audits, moderation reports, contact history and the forward dialog follow the viewer's media preferences and are sized (360 pixels) and linked (from the server's address) as in rooms

apps/meteor/client/components/GazzodownText.spec.tsx

@@ -3,26 +3,25 @@ import { mockAppRoot } from '@rocket.chat/mock-providers';
 import { render, screen } from '@testing-library/react';
 
 import GazzodownText from './GazzodownText';
-import { useMessageListHighlights } from './message/list/MessageListContext';
 
+const mockUseMessageDisplay = jest.fn();
 jest.mock('@rocket.chat/ui-client', () => ({
 	useFeaturePreview: () => false,
 }));
+jest.mock('@rocket.chat/ui-message-list', () => ({
+	useMessageDisplay: () => mockUseMessageDisplay(),
+}));
 jest.mock('@rocket.chat/fuselage-hooks', () => ({
 	useLocalStorage: () => ['en', jest.fn()],
 }));
-jest.mock('./message/list/MessageListContext', () => ({
-	useMessageListHighlights: jest.fn(),
-	useMessageListShowRealName: jest.fn(() => false),
-}));
 jest.mock('../lib/utils/fireGlobalEvent', () => ({
 	fireGlobalEvent: jest.fn(),
 }));
 jest.mock('../views/room/hooks/useGoToRoom', () => ({
 	useGoToRoom: jest.fn(),
 }));
 
-const mockUseMessageListHighlights = useMessageListHighlights as jest.MockedFunction<typeof useMessageListHighlights>;
+const mockHighlights = (highlights: unknown) => mockUseMessageDisplay.mockReturnValue({ highlights, showRealName: false });
 const wrapper = mockAppRoot().withUserPreference('useEmojis', true).withSetting('UI_Use_Real_Name', false).withJohnDoe();
 
 const HighlightTester = ({ text }: { text: string }) => {
@@ -44,7 +43,7 @@ describe('GazzodownText highlights', () => {
 	});
 
 	it('should highlight Russian word "тест" in the middle of a sentence', () => {
-		mockUseMessageListHighlights.mockReturnValue([{ highlight: 'тест' }] as any);
+		mockHighlights([{ highlight: 'тест' }] as any);
 
 		render(
 			<GazzodownText>
@@ -57,7 +56,7 @@ describe('GazzodownText highlights', () => {
 	});
 
 	it('should highlight Russian word "тест" at the beginning of a sentence', () => {
-		mockUseMessageListHighlights.mockReturnValue([{ highlight: 'тест' }] as any);
+		mockHighlights([{ highlight: 'тест' }] as any);
 
 		render(
 			<GazzodownText>
@@ -69,7 +68,7 @@ describe('GazzodownText highlights', () => {
 	});
 
 	it('should not highlight "тест" when it is part of a larger word', () => {
-		mockUseMessageListHighlights.mockReturnValue([{ highlight: 'тест' }] as any);
+		mockHighlights([{ highlight: 'тест' }] as any);
 
 		render(
 			<GazzodownText>
@@ -81,7 +80,7 @@ describe('GazzodownText highlights', () => {
 	});
 
 	it('should highlight Russian word "тест" at the end of a sentence', () => {
-		mockUseMessageListHighlights.mockReturnValue([{ highlight: 'тест' }] as any);
+		mockHighlights([{ highlight: 'тест' }] as any);
 
 		render(
 			<GazzodownText>
@@ -93,7 +92,7 @@ describe('GazzodownText highlights', () => {
 	});
 
 	it('should highlight English word "test" regardless of its position', () => {
-		mockUseMessageListHighlights.mockReturnValue([{ highlight: 'test' }] as any);
+		mockHighlights([{ highlight: 'test' }] as any);
 
 		render(
 			<GazzodownText>
@@ -105,7 +104,7 @@ describe('GazzodownText highlights', () => {
 	});
 
 	it('should highlight all occurrences of the highlighted word in different positions', () => {
-		mockUseMessageListHighlights.mockReturnValue([{ highlight: 'test' }] as any);
+		mockHighlights([{ highlight: 'test' }] as any);
 
 		render(
 			<GazzodownText>
@@ -122,7 +121,7 @@ describe('GazzodownText highlights', () => {
 	});
 
 	it('should highlight the highlighted word in a multiline text', () => {
-		mockUseMessageListHighlights.mockReturnValue([{ highlight: 'test' }] as any);
+		mockHighlights([{ highlight: 'test' }] as any);
 
 		const multilineText = `First line
 Test line
@@ -145,7 +144,7 @@ in it.`;
 	});
 
 	it('should highlight highlighted word when surrounded by colons', () => {
-		mockUseMessageListHighlights.mockReturnValue([{ highlight: 'test' }] as any);
+		mockHighlights([{ highlight: 'test' }] as any);
 
 		render(
 			<GazzodownText>
@@ -158,7 +157,7 @@ in it.`;
 	});
 
 	it('should highlight highlighted word when colon is at the start', () => {
-		mockUseMessageListHighlights.mockReturnValue([{ highlight: 'test' }] as any);
+		mockHighlights([{ highlight: 'test' }] as any);
 
 		render(
 			<GazzodownText>
@@ -171,7 +170,7 @@ in it.`;
 	});
 
 	it('should highlight highlighted word when colon is at the end', () => {
-		mockUseMessageListHighlights.mockReturnValue([{ highlight: 'test' }] as any);
+		mockHighlights([{ highlight: 'test' }] as any);
 
 		render(
 			<GazzodownText>
@@ -184,7 +183,7 @@ in it.`;
 	});
 
 	it('should highlight multiple different highlighted words in the same text', () => {
-		mockUseMessageListHighlights.mockReturnValue([{ highlight: 'test' }, { highlight: 'highlight' }] as any);
+		mockHighlights([{ highlight: 'test' }, { highlight: 'highlight' }] as any);
 
 		render(
 			<GazzodownText>
@@ -202,7 +201,7 @@ in it.`;
 
 	it('should highlight a word containing special characters like "-", "_", ".", "/", "=", "!", ":', () => {
 		// The highlight word includes special characters.
-		mockUseMessageListHighlights.mockReturnValue([{ highlight: 'te-st_te.st/te=te!st:' }] as any);
+		mockHighlights([{ highlight: 'te-st_te.st/te=te!st:' }] as any);
 
 		const testText = 'This message contains te-st_te.st/te=te!st: as a highlighted word.';
 		render(
@@ -216,7 +215,7 @@ in it.`;
 	});
 
 	it('should highlight the word in a case-insensitive manner', () => {
-		mockUseMessageListHighlights.mockReturnValue([{ highlight: 'Test' }] as any);
+		mockHighlights([{ highlight: 'Test' }] as any);
 
 		render(
 			<GazzodownText>

apps/meteor/client/components/GazzodownText.tsx

@@ -4,13 +4,13 @@ import type { ChannelMention, UserMention } from '@rocket.chat/gazzodown';
 import { MarkupInteractionContext } from '@rocket.chat/gazzodown';
 import { escapeRegExp } from '@rocket.chat/tools';
 import { useLayout, useRouter, useUserPreference, useUserId, useUserCard } from '@rocket.chat/ui-contexts';
+import { useMessageDisplay } from '@rocket.chat/ui-message-list';
 import type { UIEvent, ReactNode } from 'react';
 import { useCallback, memo, useMemo } from 'react';
 
 import { normalizeUsername } from '../../lib/utils/normalizeUsername';
 import { detectEmoji } from '../lib/utils/detectEmoji';
 import { fireGlobalEvent } from '../lib/utils/fireGlobalEvent';
-import { useMessageListHighlights, useMessageListShowRealName } from './message/list/MessageListContext';
 import { useGoToRoom } from '../views/room/hooks/useGoToRoom';
 
 export type GazzodownTextProps = {
@@ -28,7 +28,7 @@ export type GazzodownTextProps = {
 const GazzodownText = ({ mentions, channels, searchText, children }: GazzodownTextProps) => {
 	const [userLanguage] = useLocalStorage('userLanguage', 'en');
 
-	const highlights = useMessageListHighlights();
+	const { highlights, showRealName: useRealName } = useMessageDisplay();
 	const { openUserCard, openUserInfo } = useUserCard();
 
 	const highlightRegex = useMemo(() => {
@@ -54,7 +54,6 @@ const GazzodownText = ({ mentions, channels, searchText, children }: GazzodownTe
 
 	const convertAsciiToEmoji = useUserPreference<boolean>('convertAsciiEmoji', true);
 	const useEmoji = useUserPreference<boolean>('useEmojis', true);
-	const useRealName = useMessageListShowRealName();
 	const ownUserId = useUserId();
 	const showMentionSymbol = Boolean(useUserPreference<boolean>('mentionsWithSymbol'));
 

apps/meteor/client/components/message/content/attachments/QuoteAttachment.tsx

@@ -3,8 +3,8 @@ import { css } from '@rocket.chat/css-in-js';
 import { Palette } from '@rocket.chat/fuselage';
 import { useTimeAgo } from '@rocket.chat/ui-client';
 import { useUserPreference } from '@rocket.chat/ui-contexts';
+import { MessageContentBody } from '@rocket.chat/ui-message-list';
 
-import MessageContentBody from '../../MessageContentBody';
 import Attachments from '../Attachments';
 import type { AudioAttachmentSource } from './file/AudioAttachment';
 import AttachmentAuthor from './structure/AttachmentAuthor';

apps/meteor/client/components/message/content/attachments/file/AudioAttachment.tsx

@@ -1,13 +1,13 @@
 import type { AudioAttachmentProps } from '@rocket.chat/core-typings';
 import { AudioPlayerControls, Box } from '@rocket.chat/fuselage';
 import { useMediaUrl } from '@rocket.chat/ui-contexts';
+import { MessageContentBody } from '@rocket.chat/ui-message-list';
 import { useMemo, useState } from 'react';
 
 import { useMediaPlayer } from '../../../../../providers/MediaPlayerProvider';
 import type { PersistentAudioTrack } from '../../../../../providers/MediaPlayerProvider';
 import MarkdownText from '../../../../MarkdownText';
 import MessageCollapsible from '../../../MessageCollapsible';
-import MessageContentBody from '../../../MessageContentBody';
 
 /** Extra context about the message that owns this audio, used by the shared player. */
 export type AudioAttachmentSource = {