fix Review

apps/meteor/client/components/CustomText.tsx

@@ -1,31 +1,26 @@
-import React, { FC, memo } from 'react';
+import React, { memo, ReactElement } from 'react';
 
 import { highlightWords as getHighlightHtml } from '../../app/highlight-words/client/helper';
-import { getKatexHtml } from '../../app/katex/client';
+import Katex from './Katex';
 
-type CustomTextType = {
+type CustomTextProps = {
 	text: string;
 	wordsToHighlight?: {
 		highlight: string;
 		regex: RegExp;
 		urlRegex: RegExp;
 	}[];
 	katex?: {
-		enabled: boolean;
 		dollarSyntaxEnabled: boolean;
 		parenthesisSyntaxEnabled: boolean;
 	};
 };
 
-const CustomText: FC<CustomTextType> = ({ text, wordsToHighlight, katex }) => {
-	let html = text;
-
-	if (wordsToHighlight?.length) {
-		html = getHighlightHtml(html, wordsToHighlight);
-	}
-
-	if (katex?.enabled) {
-		html = getKatexHtml(html, katex);
+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} katex={katex} />;
 	}
 
 	return <span dangerouslySetInnerHTML={{ __html: html }} />;

apps/meteor/client/components/Katex.tsx

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

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

@@ -21,7 +21,6 @@ export type MessageListContextValue = {
 				urlRegex: RegExp;
 		  }[];
 	katex?: {
-		enabled: boolean;
 		dollarSyntaxEnabled: boolean;
 		parenthesisSyntaxEnabled: boolean;
 	};

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

@@ -88,11 +88,12 @@ export const MessageListProvider: FC<{
 			showRoles,
 			showRealName,
 			showUsername,
-			katex: {
-				enabled: katexEnabled,
-				dollarSyntaxEnabled: katexDollarSyntaxEnabled,
-				parenthesisSyntaxEnabled: katexParenthesisSyntaxEnabled,
-			},
+			...(katexEnabled && {
+				katex: {
+					dollarSyntaxEnabled: katexDollarSyntaxEnabled,
+					parenthesisSyntaxEnabled: katexParenthesisSyntaxEnabled,
+				},
+			}),
 			highlights: highlights
 				?.map((str) => str.trim())
 				.map((highlight) => ({