[FIX] Add katex render to new message react template (#25239)

* feat: add katex render to message react

* fix: add boolean to type

* fix Review

* fix: review

Co-authored-by: Guilherme Gazzo <guilhermegazzo@gmail.com>
Co-authored-by: dougfabris <devfabris@gmail.com>

apps/meteor/app/katex/client/index.js

@@ -185,3 +185,7 @@ export const createKatexMessageRendering = (options) => {
 	const instance = new Katex(katex, options);
 	return (message) => instance.renderMessage(message);
 };
+
+export const getKatexHtml = (text, katex) => {
+	return createKatexMessageRendering({ dollarSyntax: katex.dollarSyntaxEnabled, parenthesisSyntax: katex.parenthesisSyntaxEnabled })(text);
+};

apps/meteor/client/components/CustomText.tsx

@@ -0,0 +1,29 @@
+import React, { memo, ReactElement } from 'react';
+
+import { highlightWords as getHighlightHtml } from '../../app/highlight-words/client/helper';
+import Katex from './Katex';
+
+type CustomTextProps = {
+	text: string;
+	wordsToHighlight?: {
+		highlight: string;
+		regex: RegExp;
+		urlRegex: RegExp;
+	}[];
+	katex?: {
+		dollarSyntaxEnabled: boolean;
+		parenthesisSyntaxEnabled: boolean;
+	};
+};
+
+const CustomText = ({ text, wordsToHighlight, katex }: CustomTextProps): ReactElement => {
+	// TODO: chapter day frontend: remove dangerouslySetInnerHTML, convert to tokens and do not mix with katex
+	const html = wordsToHighlight?.length ? getHighlightHtml(text, wordsToHighlight) : text;
+	if (katex) {
+		return <Katex text={html} options={{ dollarSyntax: katex.dollarSyntaxEnabled, parenthesisSyntax: katex.parenthesisSyntaxEnabled }} />;
+	}
+
+	return <span dangerouslySetInnerHTML={{ __html: html }} />;
+};
+
+export default memo(CustomText);

apps/meteor/client/components/Katex.tsx

@@ -0,0 +1,17 @@
+import React, { memo, ReactElement } from 'react';
+
+import { createKatexMessageRendering } from '../../app/katex/client';
+
+type KatexProps = {
+	text: string;
+	options: {
+		dollarSyntax: boolean;
+		parenthesisSyntax: boolean;
+	};
+};
+
+const Katex = ({ text, options }: KatexProps): ReactElement => (
+	<span dangerouslySetInnerHTML={{ __html: createKatexMessageRendering(options)(text) }} />
+);
+
+export default memo(Katex);

apps/meteor/client/components/Message/MessageBodyRender/PlainText.tsx

@@ -1,18 +1,19 @@
 import { Plain as ASTPlain } from '@rocket.chat/message-parser';
 import React, { FC, memo } from 'react';
 
-import { useMessageListHighlights } from '../../../views/room/MessageList/contexts/MessageListContext';
-import Highlighter from '../../Highlighter';
+import { useMessageListHighlights, useMessageListKatex } from '../../../views/room/MessageList/contexts/MessageListContext';
+import CustomText from '../../CustomText';
 
 type PlainTextType = {
 	value: ASTPlain['value'];
 };
 
 const PlainText: FC<PlainTextType> = ({ value: text }) => {
 	const highlights = useMessageListHighlights();
+	const katex = useMessageListKatex();
 
-	if (highlights) {
-		return <Highlighter text={text} wordsToHighlight={highlights} />;
+	if (highlights || katex) {
+		return <CustomText text={text} wordsToHighlight={highlights} katex={katex} />;
 	}
 
 	return <>{text}</>;

apps/meteor/client/views/room/MessageList/contexts/MessageListContext.tsx

@@ -20,6 +20,10 @@ export type MessageListContextValue = {
 				regex: RegExp;
 				urlRegex: RegExp;
 		  }[];
+	katex?: {
+		dollarSyntaxEnabled: boolean;
+		parenthesisSyntaxEnabled: boolean;
+	};
 };
 
 export const MessageListContext = createContext<MessageListContextValue>({
@@ -57,6 +61,7 @@ export const useMessageListShowRoles = (): MessageListContextValue['showRoles']
 export const useMessageListShowRealName = (): MessageListContextValue['showRealName'] => useContext(MessageListContext).showRealName;
 export const useMessageListShowUsername = (): MessageListContextValue['showUsername'] => useContext(MessageListContext).showUsername;
 export const useMessageListHighlights = (): MessageListContextValue['highlights'] => useContext(MessageListContext).highlights;
+export const useMessageListKatex = (): MessageListContextValue['katex'] => useContext(MessageListContext).katex;
 
 export const useUserHasReacted: MessageListContextValue['useUserHasReacted'] = (message: IMessage) =>
 	useContext(MessageListContext).useUserHasReacted(message);

apps/meteor/client/views/room/MessageList/providers/MessageListProvider.tsx

@@ -26,6 +26,10 @@ export const MessageListProvider: FC<{
 	const showRealName = Boolean(useSetting('UI_Use_Real_Name')) && !isMobile;
 	const showReadReceipt = Boolean(useSetting('Message_Read_Receipt_Enabled'));
 	const autoTranslateEnabled = useSetting('AutoTranslate_Enabled');
+	const katexEnabled = Boolean(useSetting('Katex_Enabled'));
+	const katexDollarSyntaxEnabled = Boolean(useSetting('Katex_Dollar_Syntax'));
+	const katexParenthesisSyntaxEnabled = Boolean(useSetting('Katex_Parenthesis_Syntax'));
+
 	const showRoles = Boolean(!useUserPreference<boolean>('hideRoles') && !isMobile);
 	const showUsername = Boolean(!useUserPreference<boolean>('hideUsernames') && !isMobile);
 	const highlights = useUserPreference<string[]>('highlights');
@@ -83,6 +87,12 @@ export const MessageListProvider: FC<{
 			showRoles,
 			showRealName,
 			showUsername,
+			...(katexEnabled && {
+				katex: {
+					dollarSyntaxEnabled: katexDollarSyntaxEnabled,
+					parenthesisSyntaxEnabled: katexParenthesisSyntaxEnabled,
+				},
+			}),
 			highlights: highlights
 				?.map((str) => str.trim())
 				.map((highlight) => ({
@@ -117,6 +127,9 @@ export const MessageListProvider: FC<{
 			showRealName,
 			showUsername,
 			showReadReceipt,
+			katexEnabled,
+			katexDollarSyntaxEnabled,
+			katexParenthesisSyntaxEnabled,
 			highlights,
 			reactToMessage,
 		],