From f78f6f33ff2ffd94b3970e5551f0db3630e7c626 Mon Sep 17 00:00:00 2001 From: Gleidson Daniel Silva Date: Wed, 16 Aug 2023 09:02:53 -0300 Subject: [PATCH] fix: add fallback to unsupported MathML tags in MathJax (#5127) * add react-native-katex * use default message height --- app/containers/markdown/new/Katex.tsx | 10 ++++++++- app/containers/message/Urls.tsx | 3 ++- app/containers/message/Video.tsx | 31 ++++++++++++++------------- app/containers/message/utils.ts | 2 ++ package.json | 1 + yarn.lock | 9 +++++++- 6 files changed, 38 insertions(+), 18 deletions(-) diff --git a/app/containers/markdown/new/Katex.tsx b/app/containers/markdown/new/Katex.tsx index 1ec705cc0..ce432a3dc 100644 --- a/app/containers/markdown/new/Katex.tsx +++ b/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 ; + return ( + } + /> + ); }; export const InlineKaTeX = ({ value }: IKaTeXProps): React.ReactElement | null => { diff --git a/app/containers/message/Urls.tsx b/app/containers/message/Urls.tsx index 7ec7190c8..aa02e4903 100644 --- a/app/containers/message/Urls.tsx +++ b/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 }, diff --git a/app/containers/message/Video.tsx b/app/containers/message/Video.tsx index f06145a3d..2bc3e2e4e 100644 --- a/app/containers/message/Video.tsx +++ b/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 { formatAttachmentUrl } from '../../lib/methods/helpers/formatAttachmentUrl'; -import { cancelDownload, downloadMediaFile, isDownloadActive, getMediaCache } from '../../lib/methods/handleMediaDownload'; +import I18n from '../../i18n'; +import { themes } from '../../lib/constants'; 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' diff --git a/app/containers/message/utils.ts b/app/containers/message/utils.ts index 77bc4fb8a..f3a2153d9 100644 --- a/app/containers/message/utils.ts +++ b/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; diff --git a/package.json b/package.json index 32fefa80d..5a4ad201f 100644 --- a/package.json +++ b/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", diff --git a/yarn.lock b/yarn.lock index f10c29c2d..281e73a42 100644 --- a/yarn.lock +++ b/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==