Regression: Event handler blocking mention links

apps/meteor/app/ui/client/views/app/lib/getCommonRoomEvents.ts

@@ -333,7 +333,7 @@ function handleMentionLinkClick(event: JQuery.ClickEvent, template: CommonRoomTe
 	}
 }
 
-export const getCommonRoomEvents = () => ({
+export const getCommonRoomEvents = (useLegacyMessageTemplate = true) => ({
 	...createMessageTouchEvents(),
 	'click [data-message-action]': handleMessageActionButtonClick,
 	'click .js-follow-thread': handleFollowThreadButtonClick,
@@ -345,5 +345,5 @@ export const getCommonRoomEvents = () => ({
 	'click .js-actionButton-respondWithQuotedMessage': handleRespondWithQuotedMessageActionButtonClick,
 	'click .js-actionButton-sendMessage': handleSendMessageActionButtonClick,
 	'click .message-actions__menu': handleMessageActionMenuClick,
-	'click .mention-link': handleMentionLinkClick,
+	...(useLegacyMessageTemplate && { 'click .mention-link': handleMentionLinkClick }),
 });

apps/meteor/client/components/message/Metrics/Discussion.tsx

@@ -1,14 +1,14 @@
 import { Message } from '@rocket.chat/fuselage';
 import { useTranslation } from '@rocket.chat/ui-contexts';
-import React, { FC } from 'react';
+import React, { FC, UIEvent } from 'react';
 
 import { useTimeAgo } from '../../../hooks/useTimeAgo';
 import { useBlockRendered } from '../hooks/useBlockRendered';
 
 type DicussionOptions = {
 	drid: string;
 	rid: string;
-	openDiscussion: () => void;
+	openDiscussion: (event: UIEvent) => void;
 	count: number;
 	lm?: Date;
 };

apps/meteor/client/views/room/MessageList/components/MessageContentBody.tsx

@@ -3,9 +3,12 @@ import { Box, MessageBody } from '@rocket.chat/fuselage';
 import colors from '@rocket.chat/fuselage-tokens/colors';
 import { MarkupInteractionContext, Markup, UserMention, ChannelMention } from '@rocket.chat/gazzodown';
 import { escapeRegExp } from '@rocket.chat/string-helpers';
-import React, { ReactElement, useCallback, useMemo } from 'react';
+import { useLayout } from '@rocket.chat/ui-contexts';
+import { FlowRouter } from 'meteor/kadira:flow-router';
+import React, { ReactElement, UIEvent, useCallback, useMemo } from 'react';
 
 import { emoji } from '../../../../../app/emoji/client';
+import { fireGlobalEvent } from '../../../../lib/utils/fireGlobalEvent';
 import { useMessageActions } from '../../contexts/MessageContext';
 import { useMessageListHighlights } from '../contexts/MessageListContext';
 import { MessageWithMdEnforced } from '../lib/parseMessageTextToAstMarkdown';
@@ -61,14 +64,33 @@ const MessageContentBody = ({ mentions, channels, md }: MessageContentBodyProps)
 				return;
 			}
 
-			return openUserCard(username);
+			return (event: UIEvent): void => {
+				event.stopPropagation();
+				openUserCard(username)(event);
+			};
 		},
 		[openUserCard],
 	);
 
 	const resolveChannelMention = useCallback((mention: string) => channels?.find(({ name }) => name === mention), [channels]);
 
-	const onChannelMentionClick = useCallback(({ _id: rid }: ChannelMention) => openRoom(rid), [openRoom]);
+	const { isEmbedded } = useLayout();
+
+	const onChannelMentionClick = useCallback(
+		({ _id: rid }: ChannelMention) =>
+			(event: UIEvent): void => {
+				if (isEmbedded) {
+					fireGlobalEvent('click-mention-link', {
+						path: FlowRouter.path('channel', { name: rid }),
+						channel: rid,
+					});
+				}
+
+				event.stopPropagation();
+				openRoom(rid)(event);
+			},
+		[isEmbedded, openRoom],
+	);
 
 	// TODO:  this style should go to Fuselage <MessageBody> repository
 	const messageBodyAdditionalStyles = css`

apps/meteor/client/views/room/components/body/RoomBody.tsx

@@ -63,7 +63,7 @@ const RoomBody = (): ReactElement => {
 	const hideFlexTab = useUserPreference<boolean>('hideFlexTab');
 	const hideUsernames = useUserPreference<boolean>('hideUsernames');
 	const displayAvatars = useUserPreference<boolean>('displayAvatars');
-	const useLegacyMessageTemplate = useUserPreference<boolean>('useLegacyMessageTemplate');
+	const useLegacyMessageTemplate = useUserPreference<boolean>('useLegacyMessageTemplate') ?? false;
 	const viewMode = useUserPreference<number>('messageViewMode');
 
 	const wrapperRef = useRef<HTMLDivElement | null>(null);
@@ -329,7 +329,7 @@ const RoomBody = (): ReactElement => {
 		}
 
 		const messageEvents: Record<string, (event: any, template: CommonRoomTemplateInstance) => void> = {
-			...getCommonRoomEvents(),
+			...getCommonRoomEvents(useLegacyMessageTemplate),
 			'click .toggle-hidden'(event: JQuery.ClickEvent) {
 				const mid = event.target.dataset.message;
 				if (mid) document.getElementById(mid)?.classList.toggle('message--ignored');
@@ -361,7 +361,7 @@ const RoomBody = (): ReactElement => {
 				$(messageList).off(event, selector, listener);
 			}
 		};
-	}, [room._id, sendToBottomIfNecessary, toolbox]);
+	}, [room._id, sendToBottomIfNecessary, toolbox, useLegacyMessageTemplate]);
 
 	useEffect(() => {
 		const wrapper = wrapperRef.current;

apps/meteor/client/views/room/contexts/MessageContext.ts

@@ -22,7 +22,7 @@ export type MessageContextValue = {
 	oembedEnabled: boolean;
 	actions: {
 		openUserCard: (username: string) => (e: UIEvent) => void;
-		openRoom: (id: string) => () => void;
+		openRoom: (id: string) => (event: UIEvent) => void;
 		openThread: (tmid: string, jump?: string) => (e: MouseEvent) => void;
 		runActionLink: (message: IMessage) => (action: string) => () => void;
 		replyBroadcast: (message: IMessage) => void;