fix: add fallback to unsupported MathML tags in MathJax (#5127)

* add react-native-katex

* use default message height

app/containers/markdown/new/Katex.tsx

@@ -2,8 +2,10 @@ import React from 'react';
 import { KaTeX as KaTeXProps } from '@rocket.chat/message-parser';
 // eslint-disable-next-line import/no-unresolved
 import MathView, { MathText } from 'react-native-math-view';
+import Katex from 'react-native-katex';
 
 import { useTheme } from '../../../theme';
+import { DEFAULT_MESSAGE_HEIGHT } from '../../message/utils';
 
 interface IKaTeXProps {
 	value: KaTeXProps['value'];
@@ -11,7 +13,13 @@ interface IKaTeXProps {
 
 export const KaTeX = ({ value }: IKaTeXProps): React.ReactElement | null => {
 	const { colors } = useTheme();
-	return <MathView math={value} style={{ color: colors.bodyText }} />;
+	return (
+		<MathView
+			math={value}
+			style={{ color: colors.bodyText }}
+			renderError={() => <Katex expression={value} style={{ flex: 1, height: DEFAULT_MESSAGE_HEIGHT }} />}
+		/>
+	);
 };
 
 export const InlineKaTeX = ({ value }: IKaTeXProps): React.ReactElement | null => {

app/containers/message/Urls.tsx

@@ -14,6 +14,7 @@ import EventEmitter from '../../lib/methods/helpers/events';
 import I18n from '../../i18n';
 import MessageContext from './Context';
 import { IUrl } from '../../definitions';
+import { DEFAULT_MESSAGE_HEIGHT } from './utils';
 
 const styles = StyleSheet.create({
 	button: {
@@ -45,7 +46,7 @@ const styles = StyleSheet.create({
 	},
 	image: {
 		width: '100%',
-		height: 150,
+		height: DEFAULT_MESSAGE_HEIGHT,
 		borderTopLeftRadius: 4,
 		borderTopRightRadius: 4
 	},

app/containers/message/Video.tsx

@@ -1,25 +1,26 @@
 import React, { useContext, useEffect, useState } from 'react';
-import { StyleProp, StyleSheet, TextStyle, View, Text } from 'react-native';
+import { StyleProp, StyleSheet, Text, TextStyle, View } from 'react-native';
 import FastImage from 'react-native-fast-image';
 
-import messageStyles from './styles';
-import Touchable from './Touchable';
-import Markdown from '../markdown';
-import { isIOS } from '../../lib/methods/helpers';
-import { themes } from '../../lib/constants';
-import MessageContext from './Context';
-import { fileDownload } from './helpers/fileDownload';
-import EventEmitter from '../../lib/methods/helpers/events';
-import { LISTENER } from '../Toast';
-import I18n from '../../i18n';
 import { IAttachment } from '../../definitions/IAttachment';
 import { TGetCustomEmoji } from '../../definitions/IEmoji';
-import { useTheme } from '../../theme';
+import I18n from '../../i18n';
-import { formatAttachmentUrl } from '../../lib/methods/helpers/formatAttachmentUrl';
+import { themes } from '../../lib/constants';
-import { cancelDownload, downloadMediaFile, isDownloadActive, getMediaCache } from '../../lib/methods/handleMediaDownload';
 import { fetchAutoDownloadEnabled } from '../../lib/methods/autoDownloadPreference';
+import { cancelDownload, downloadMediaFile, getMediaCache, isDownloadActive } from '../../lib/methods/handleMediaDownload';
+import { isIOS } from '../../lib/methods/helpers';
+import EventEmitter from '../../lib/methods/helpers/events';
+import { formatAttachmentUrl } from '../../lib/methods/helpers/formatAttachmentUrl';
+import { useTheme } from '../../theme';
 import sharedStyles from '../../views/Styles';
+import { LISTENER } from '../Toast';
+import Markdown from '../markdown';
 import BlurComponent from './Components/BlurComponent';
+import MessageContext from './Context';
+import Touchable from './Touchable';
+import { fileDownload } from './helpers/fileDownload';
+import messageStyles from './styles';
+import { DEFAULT_MESSAGE_HEIGHT } from './utils';
 
 const SUPPORTED_TYPES = ['video/quicktime', 'video/mp4', ...(isIOS ? [] : ['video/3gp', 'video/mkv'])];
 const isTypeSupported = (type: string) => SUPPORTED_TYPES.indexOf(type) !== -1;
@@ -28,7 +29,7 @@ const styles = StyleSheet.create({
 	button: {
 		flex: 1,
 		borderRadius: 4,
-		height: 150,
+		height: DEFAULT_MESSAGE_HEIGHT,
 		marginBottom: 6,
 		alignItems: 'center',
 		justifyContent: 'center'

app/containers/message/utils.ts

@@ -4,6 +4,8 @@ import { MessageTypesValues, TMessageModel } from '../../definitions/IMessage';
 import I18n from '../../i18n';
 import { DISCUSSION } from './constants';
 
+export const DEFAULT_MESSAGE_HEIGHT = 150;
+
 export const formatMessageCount = (count?: number, type?: string): string | null => {
 	const discussion = type === DISCUSSION;
 	let text = discussion ? I18n.t('No_messages_yet') : null;

package.json

@@ -106,6 +106,7 @@
 		"react-native-gesture-handler": "^2.9.0",
 		"react-native-image-crop-picker": "RocketChat/react-native-image-crop-picker",
 		"react-native-image-progress": "^1.1.1",
+		"react-native-katex": "^0.5.1",
 		"react-native-linear-gradient": "^2.6.2",
 		"react-native-localize": "2.1.1",
 		"react-native-math-view": "^3.9.5",

yarn.lock

@@ -17055,6 +17055,13 @@ react-native-iphone-x-helper@^1.0.3:
   resolved "https://registry.yarnpkg.com/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.2.1.tgz#645e2ffbbb49e80844bb4cbbe34a126fda1e6772"
   integrity sha512-/VbpIEp8tSNNHIvstuA3Swx610whci1Zpc9mqNkqn14DkMbw+ORviln2u0XyHG1kPvvwTNGZY6QpeFwxYaSdbQ==
 
+react-native-katex@^0.5.1:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/react-native-katex/-/react-native-katex-0.5.1.tgz#516428ddc10b71e2f219869880222b1d3a1fc5eb"
+  integrity sha512-71Hi66DsTsCHnxKcT0BtmylJvl8q285qbmSPJRzLM05Lu4qtgNwx2htb+k+nNaFv0KJl67n/irdd3uktpkXPsg==
+  dependencies:
+    react-native-webview "^11.18.2"
+
 react-native-linear-gradient@^2.6.2:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/react-native-linear-gradient/-/react-native-linear-gradient-2.6.2.tgz#56598a76832724b2afa7889747635b5c80948f38"
@@ -17262,7 +17269,7 @@ react-native-vector-icons@^9.2.0:
     prop-types "^15.7.2"
     yargs "^16.1.1"
 
-react-native-webview@11.26.1:
+react-native-webview@11.26.1, react-native-webview@^11.18.2:
   version "11.26.1"
   resolved "https://registry.yarnpkg.com/react-native-webview/-/react-native-webview-11.26.1.tgz#658c09ed5162dc170b361e48c2dd26c9712879da"
   integrity sha512-hC7BkxOpf+z0UKhxFSFTPAM4shQzYmZHoELa6/8a/MspcjEP7ukYKpuSUTLDywQditT8yI9idfcKvfZDKQExGw==