regression: Render `Markup` for all UiKit surfaces (#28922)

Co-authored-by: Tiago Evangelista Pinto <17487063+tiagoevanp@users.noreply.github.com>

apps/meteor/client/components/GazzodownText.tsx

 import type { IRoom } from '@rocket.chat/core-typings';
 import type { ChannelMention, UserMention } from '@rocket.chat/gazzodown';
-import { PreviewMarkup, Markup, MarkupInteractionContext } from '@rocket.chat/gazzodown';
-import type * as MessageParser from '@rocket.chat/message-parser';
+import { MarkupInteractionContext } from '@rocket.chat/gazzodown';
 import { escapeRegExp } from '@rocket.chat/string-helpers';
 import { RouterContext, useLayout, useUserPreference } from '@rocket.chat/ui-contexts';
 import type { UIEvent } from 'react';
@@ -14,7 +13,7 @@ import { useGoToRoom } from '../views/room/hooks/useGoToRoom';
 import { useMessageListHighlights } from './message/list/MessageListContext';
 
 type GazzodownTextProps = {
-	tokens: MessageParser.Root;
+	children: JSX.Element;
 	mentions?: {
 		type: 'user' | 'team';
 		_id: string;
@@ -23,10 +22,9 @@ type GazzodownTextProps = {
 	}[];
 	channels?: Pick<IRoom, '_id' | 'name'>[];
 	searchText?: string;
-	preview?: boolean;
 };
 
-const GazzodownText = ({ tokens, mentions, channels, searchText, preview }: GazzodownTextProps) => {
+const GazzodownText = ({ mentions, channels, searchText, children }: GazzodownTextProps) => {
 	const highlights = useMessageListHighlights();
 	const highlightRegex = useMemo(() => {
 		if (!highlights?.length) {
@@ -115,7 +113,7 @@ const GazzodownText = ({ tokens, mentions, channels, searchText, preview }: Gazz
 				onChannelMentionClick,
 			}}
 		>
-			{!preview ? <Markup tokens={tokens} /> : <PreviewMarkup tokens={tokens} />}
+			{children}
 		</MarkupInteractionContext.Provider>
 	);
 };

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

 import { css } from '@rocket.chat/css-in-js';
 import { MessageBody, Box, Palette } from '@rocket.chat/fuselage';
+import { Markup } from '@rocket.chat/gazzodown';
 import React from 'react';
 
 import type { MessageWithMdEnforced } from '../../lib/parseMessageTextToAstMarkdown';
@@ -54,7 +55,9 @@ const MessageContentBody = ({ mentions, channels, md, searchText }: MessageConte
 	return (
 		<MessageBody data-qa-type='message-body'>
 			<Box className={messageBodyAdditionalStyles}>
-				<GazzodownText tokens={md} channels={channels} mentions={mentions} searchText={searchText} />
+				<GazzodownText channels={channels} mentions={mentions} searchText={searchText}>
+					<Markup tokens={md} />
+				</GazzodownText>
 			</Box>
 		</MessageBody>
 	);

apps/meteor/client/components/message/content/UiKitSurface.tsx

@@ -17,6 +17,7 @@ import {
 	useVideoConfSetPreferences,
 } from '../../../contexts/VideoConfContext';
 import { useVideoConfWarning } from '../../../views/room/contextualBar/VideoConference/hooks/useVideoConfWarning';
+import GazzodownText from '../../GazzodownText';
 
 let patched = false;
 const patchMessageParser = () => {
@@ -98,7 +99,9 @@ const UiKitSurface = ({ mid: _mid, blocks, rid, appId }: UiKitSurfaceProps): Rea
 	return (
 		<MessageBlock fixedWidth>
 			<kitContext.Provider value={context}>
-				<UiKitComponent render={UiKitMessage} blocks={blocks} />
+				<GazzodownText>
+					<UiKitComponent render={UiKitMessage} blocks={blocks} />
+				</GazzodownText>
 			</kitContext.Provider>
 		</MessageBlock>
 	);

apps/meteor/client/components/message/variants/threadPreview/ThreadMessagePreviewBody.tsx

 import type { IMessage } from '@rocket.chat/core-typings';
 import { isQuoteAttachment, isE2EEMessage } from '@rocket.chat/core-typings';
+import { PreviewMarkup } from '@rocket.chat/gazzodown';
 import type { Root } from '@rocket.chat/message-parser';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
@@ -26,7 +27,13 @@ const ThreadMessagePreviewBody = ({ message }: ThreadMessagePreviewBodyProps): R
 			mdTokens?.shift();
 		}
 		if (!isEncryptedMessage || message.e2e === 'done') {
-			return mdTokens ? <GazzodownText preview tokens={mdTokens} /> : <>{message.msg}</>;
+			return mdTokens ? (
+				<GazzodownText>
+					<PreviewMarkup tokens={mdTokens} />
+				</GazzodownText>
+			) : (
+				<>{message.msg}</>
+			);
 		}
 		if (isEncryptedMessage && message.e2e === 'pending') {
 			return <>{t('E2E_message_encrypted_placeholder')}</>;

apps/meteor/client/lib/normalizeThreadMessage.tsx

 import type { IMessage } from '@rocket.chat/core-typings';
+import { Markup } from '@rocket.chat/gazzodown';
 import { parse } from '@rocket.chat/message-parser';
 import type { ReactElement } from 'react';
 import React from 'react';
@@ -17,7 +18,11 @@ export function normalizeThreadMessage({ ...message }: Readonly<Pick<IMessage, '
 			return null;
 		}
 
-		return <GazzodownText tokens={tokens} />;
+		return (
+			<GazzodownText>
+				<Markup tokens={tokens} />
+			</GazzodownText>
+		);
 	}
 
 	if (message.attachments) {

apps/meteor/client/views/modal/uikit/ModalBlock.tsx

@@ -3,6 +3,7 @@ import { Modal, AnimatedVisibility, Button, Box } from '@rocket.chat/fuselage';
 import { useUniqueId } from '@rocket.chat/fuselage-hooks';
 import { UiKitComponent, UiKitModal, modalParser } from '@rocket.chat/fuselage-ui-kit';
 import type { LayoutBlock } from '@rocket.chat/ui-kit';
+import { BlockContext } from '@rocket.chat/ui-kit';
 import type { FormEventHandler, ReactElement } from 'react';
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { FocusScope } from 'react-aria';
@@ -165,7 +166,7 @@ const ModalBlock = ({ view, errors, appId, onSubmit, onClose, onCancel }: ModalB
 				<Modal open id={id} ref={ref}>
 					<Modal.Header>
 						{view.showIcon ? <Modal.Thumb url={getURL(`/api/apps/${appId}/icon`)} /> : null}
-						<Modal.Title>{modalParser.text(view.title)}</Modal.Title>
+						<Modal.Title>{modalParser.text(view.title, BlockContext.NONE, 0)}</Modal.Title>
 						<Modal.Close tabIndex={-1} onClick={onClose} />
 					</Modal.Header>
 					<Modal.Content>
@@ -177,12 +178,12 @@ const ModalBlock = ({ view, errors, appId, onSubmit, onClose, onCancel }: ModalB
 						<Modal.FooterControllers>
 							{view.close && (
 								<Button danger={view.close.style === 'danger'} onClick={onCancel}>
-									{modalParser.text(view.close.text)}
+									{modalParser.text(view.close.text, BlockContext.NONE, 0)}
 								</Button>
 							)}
 							{view.submit && (
 								<Button {...getButtonStyle(view)} onClick={onSubmit}>
-									{modalParser.text(view.submit.text)}
+									{modalParser.text(view.submit.text, BlockContext.NONE, 1)}
 								</Button>
 							)}
 						</Modal.FooterControllers>

apps/meteor/client/views/room/contextualBar/Apps/Apps.tsx

@@ -2,6 +2,7 @@ import type { IUIKitSurface } from '@rocket.chat/apps-engine/definition/uikit';
 import { ButtonGroup, Button, Box, Avatar } from '@rocket.chat/fuselage';
 import { UiKitComponent, UiKitModal, modalParser } from '@rocket.chat/fuselage-ui-kit';
 import type { LayoutBlock } from '@rocket.chat/ui-kit';
+import { BlockContext } from '@rocket.chat/ui-kit';
 import React from 'react';
 
 import { getURL } from '../../../../../app/utils/lib/getURL';
@@ -20,7 +21,7 @@ const Apps = ({ view, onSubmit, onClose, onCancel, appId }: AppsProps): JSX.Elem
 	<>
 		<VerticalBar.Header>
 			<Avatar url={getURL(`/api/apps/${appId}/icon`)} />
-			<VerticalBar.Text>{modalParser.text(view.title)}</VerticalBar.Text>
+			<VerticalBar.Text>{modalParser.text(view.title, BlockContext.NONE, 0)}</VerticalBar.Text>
 			{onClose && <VerticalBar.Close onClick={onClose} />}
 		</VerticalBar.Header>
 		<VerticalBar.ScrollableContent>
@@ -32,12 +33,12 @@ const Apps = ({ view, onSubmit, onClose, onCancel, appId }: AppsProps): JSX.Elem
 			<ButtonGroup align='end'>
 				{view.close && (
 					<Button danger={view.close.style === 'danger'} onClick={onCancel}>
-						{modalParser.text(view.close.text)}
+						{modalParser.text(view.close.text, BlockContext.NONE, 0)}
 					</Button>
 				)}
 				{view.submit && (
 					<Button {...getButtonStyle(view)} onClick={onSubmit}>
-						{modalParser.text(view.submit.text)}
+						{modalParser.text(view.submit.text, BlockContext.NONE, 1)}
 					</Button>
 				)}
 			</ButtonGroup>

packages/fuselage-ui-kit/package.json

@@ -89,7 +89,11 @@
     "webpack": "~5.68.0"
   },
   "dependencies": {
+    "@rocket.chat/gazzodown": "workspace:^",
     "@rocket.chat/ui-kit": "next",
     "tslib": "^2.3.1"
+  },
+  "volta": {
+    "extends": "../../package.json"
   }
 }

packages/fuselage-ui-kit/src/surfaces/FuselageModalSurfaceRenderer.tsx

-import { Markup } from '@rocket.chat/gazzodown';
-import type { Markdown, PlainText, TextObject } from '@rocket.chat/ui-kit';
-import { parse } from '@rocket.chat/message-parser';
-import type { JSXElementConstructor, ReactElement } from 'react';
-import { Fragment } from 'react';
-
 import type { FuselageSurfaceRendererProps } from './FuselageSurfaceRenderer';
 import { FuselageSurfaceRenderer } from './FuselageSurfaceRenderer';
 
@@ -11,24 +5,4 @@ export class FuselageModalSurfaceRenderer extends FuselageSurfaceRenderer {
   public constructor(allowedBlocks?: FuselageSurfaceRendererProps) {
     super(allowedBlocks);
   }
-
-  public plainText = ({ text = '' }: PlainText) => <Fragment>{text}</Fragment>;
-
-  public text({
-    text,
-    type,
-  }: TextObject): ReactElement<
-    any,
-    string | JSXElementConstructor<any>
-  > | null {
-    if (type !== 'mrkdwn') {
-      return this.plainText({ text, type });
-    }
-
-    return this.mrkdwn({ text, type });
-  }
-
-  public mrkdwn({ text = '' }: Markdown): ReactElement | null {
-    return text ? <Markup tokens={parse(text, { emoticons: false })} /> : null;
-  }
 }

packages/fuselage-ui-kit/src/surfaces/FuselageSurfaceRenderer.tsx

 import * as UiKit from '@rocket.chat/ui-kit';
+import { parse } from '@rocket.chat/message-parser';
 import type { ReactElement } from 'react';
 import { Fragment } from 'react';
+import { Markup } from '@rocket.chat/gazzodown';
 
 import ActionsBlock from '../blocks/ActionsBlock';
 import ContextBlock from '../blocks/ContextBlock';
@@ -58,7 +60,21 @@ export class FuselageSurfaceRenderer extends UiKit.SurfaceRenderer<ReactElement>
       return null;
     }
 
-    return text ? <Fragment key={index}>{text}</Fragment> : null;
+    return text ? (
+      <Markup key={index} tokens={parse(text, { emoticons: false })} />
+    ) : null;
+  }
+
+  public text(
+    textObject: UiKit.TextObject,
+    context: UiKit.BlockContext,
+    index: number
+  ): ReactElement | null {
+    if (textObject.type !== 'mrkdwn') {
+      return this.plain_text(textObject, context, index);
+    }
+
+    return this.mrkdwn(textObject, context, index);
   }
 
   actions(

yarn.lock

@@ -6805,6 +6805,7 @@ __metadata:
     "@rocket.chat/fuselage": next
     "@rocket.chat/fuselage-hooks": next
     "@rocket.chat/fuselage-polyfills": next
+    "@rocket.chat/gazzodown": "workspace:^"
     "@rocket.chat/icons": next
     "@rocket.chat/prettier-config": next
     "@rocket.chat/styled": next