verdnatura-mirror/Rocket.Chat.ReactNative
verdnatura-mirror
/
Rocket.Chat.ReactNative
mirror of https://github.com/RocketChat/Rocket.Chat.ReactNative
2
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

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

* add react-native-katex

* use default message height
This commit is contained in:
Gleidson Daniel Silva 2023-08-16 09:02:53 -03:00 committed by GitHub
parent acbcac29c8
commit f78f6f33ff
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 38 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/containers/markdown/new/Katex.tsx
View File

@ -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 => {

3
app/containers/message/Urls.tsx
View File

@ -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
},

31
app/containers/message/Video.tsx
View File

@ -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'

2
app/containers/message/utils.ts
View File

@ -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;

1
package.json
View File

@ -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",

9
yarn.lock
View File

@ -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==