Merge branch 'develop' into mobile-color-normalization

2024-03-21 15:31:06 -03:00 · 2024-03-21 15:31:06 -03:00 · 519eb390bc
parent ead87359a8 63c61e439b
commit 519eb390bc
20 changed files with 404 additions and 442 deletions
--- a/tests/containers/markdown/snapshots/Markdown.stories.storyshot
+++ b/tests/containers/markdown/snapshots/Markdown.stories.storyshot
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@ -147,7 +147,7 @@ android {
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        versionCode VERSIONCODE as Integer
-        versionName "4.48.0"
+        versionName "4.47.2"
        vectorDrawables.useSupportLibrary = true
        if (!isFoss) {
            manifestPlaceholders = [BugsnagAPIKey: BugsnagAPIKey as String]
--- a/app/containers/markdown/Markdown.stories.tsx
+++ b/app/containers/markdown/Markdown.stories.tsx
@ -158,13 +158,8 @@ export const Code = () => (
 		<Markdown
 			msg='Inline `code` has `back-ticks around` it.
 ```
-Code block 1
-```
-And other code block in sequence
-```
-Code block 2
-```
-'
+Code block
+```'
 			theme={theme}
 		/>
 	</View>
--- a/app/containers/markdown/index.tsx
+++ b/app/containers/markdown/index.tsx
@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { Image, StyleProp, Text, TextStyle, View } from 'react-native';
+import { Image, StyleProp, Text, TextStyle } from 'react-native';
 import { Parser } from 'commonmark';
 import Renderer from 'commonmark-react-renderer';
 import { MarkdownAST } from '@rocket.chat/message-parser';
@ -171,18 +171,19 @@ class Markdown extends PureComponent<IMarkdownProps, any> {
 	renderCodeBlock = ({ literal }: TLiteral) => {
 		const { theme, style = [] } = this.props;
 		return (
-			<View
+			<Text
 				style={[
 					{
 						...styles.codeBlock,
 						backgroundColor: themes[theme!].surfaceNeutral,
-						borderColor: themes[theme!].strokeLight
+						borderColor: themes[theme!].strokeLight,
+						color: themes[theme!].fontDefault
 					},
 					...style
 				]}
 			>
-				<Text style={[styles.codeBlockText, { color: themes[theme!].fontDefault }]}>{literal}</Text>
-			</View>
+				{literal}
+			</Text>
 		);
 	};

--- a/app/views/CannedResponsesListView/Dropdown/index.tsx
+++ b/app/views/CannedResponsesListView/Dropdown/index.tsx
@ -1,10 +1,8 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { Animated, Easing, FlatList, TouchableWithoutFeedback } from 'react-native';
-import { withSafeAreaInsets } from 'react-native-safe-area-context';

 import styles from '../styles';
-import { themes } from '../../../lib/constants';
-import { TSupportedThemes, withTheme } from '../../../theme';
+import { useTheme } from '../../../theme';
 import * as List from '../../../containers/List';
 import DropdownItemFilter from './DropdownItemFilter';
 import DropdownItemHeader from './DropdownItemHeader';
@ -12,35 +10,31 @@ import { ROW_HEIGHT } from './DropdownItem';
 import { ILivechatDepartment } from '../../../definitions/ILivechatDepartment';

 const ANIMATION_DURATION = 200;
+const HEIGHT_DESTINATION = 0;
+const MAX_ROWS = 5;

 interface IDropdownProps {
-	theme?: TSupportedThemes;
 	currentDepartment: ILivechatDepartment;
 	onClose: () => void;
 	onDepartmentSelected: (value: ILivechatDepartment) => void;
 	departments: ILivechatDepartment[];
 }

-class Dropdown extends React.Component<IDropdownProps> {
-	private animatedValue: Animated.Value;
+const Dropdown = ({ currentDepartment, onClose, onDepartmentSelected, departments }: IDropdownProps) => {
+	const animatedValue = useRef(new Animated.Value(0)).current;
+	const { colors } = useTheme();

-	constructor(props: IDropdownProps) {
-		super(props);
-		this.animatedValue = new Animated.Value(0);
-	}
-
-	componentDidMount() {
-		Animated.timing(this.animatedValue, {
+	useEffect(() => {
+		Animated.timing(animatedValue, {
 			toValue: 1,
 			duration: ANIMATION_DURATION,
 			easing: Easing.inOut(Easing.quad),
 			useNativeDriver: true
 		}).start();
-	}
+	}, [animatedValue]);

-	close = () => {
-		const { onClose } = this.props;
-		Animated.timing(this.animatedValue, {
+	const close = () => {
+		Animated.timing(animatedValue, {
 			toValue: 0,
 			duration: ANIMATION_DURATION,
 			easing: Easing.inOut(Easing.quad),
@ -48,58 +42,54 @@ class Dropdown extends React.Component<IDropdownProps> {
 		}).start(() => onClose());
 	};

-	render() {
-		const { theme, currentDepartment, onDepartmentSelected, departments } = this.props;
-		const heightDestination = 0;
-		const translateY = this.animatedValue.interpolate({
-			inputRange: [0, 1],
-			outputRange: [-300, heightDestination] // approximated height of the component when closed/open
-		});
-		const backdropOpacity = this.animatedValue.interpolate({
-			inputRange: [0, 1],
-			outputRange: [0, themes[theme!].backdropOpacity]
-		});
+	const translateY = animatedValue.interpolate({
+		inputRange: [0, 1],
+		outputRange: [-300, HEIGHT_DESTINATION] // approximated height of the component when closed/open
+	});

-		const maxRows = 5;
-		return (
-			<>
-				<TouchableWithoutFeedback onPress={this.close}>
-					<Animated.View
-						style={[
-							styles.backdrop,
-							{
-								backgroundColor: themes[theme!].backdropColor,
-								opacity: backdropOpacity,
-								top: heightDestination
-							}
-						]}
-					/>
-				</TouchableWithoutFeedback>
+	const backdropOpacity = animatedValue.interpolate({
+		inputRange: [0, 1],
+		outputRange: [0, colors.backdropOpacity]
+	});
+
+	return (
+		<>
+			<TouchableWithoutFeedback onPress={close}>
 				<Animated.View
 					style={[
-						styles.dropdownContainer,
+						styles.backdrop,
 						{
-							transform: [{ translateY }],
-							backgroundColor: themes[theme!].surfaceRoom,
-							borderColor: themes[theme!].strokeLight
+							backgroundColor: colors.backdropColor,
+							opacity: backdropOpacity,
+							top: HEIGHT_DESTINATION
 						}
 					]}
-				>
-					<DropdownItemHeader department={currentDepartment} onPress={this.close} />
-					<List.Separator />
-					<FlatList
-						style={{ maxHeight: maxRows * ROW_HEIGHT }}
-						data={departments}
-						keyExtractor={item => item._id}
-						renderItem={({ item }) => (
-							<DropdownItemFilter onPress={onDepartmentSelected} currentDepartment={currentDepartment} value={item} />
-						)}
-						keyboardShouldPersistTaps='always'
-					/>
-				</Animated.View>
-			</>
-		);
-	}
-}
+				/>
+			</TouchableWithoutFeedback>
+			<Animated.View
+				style={[
+					styles.dropdownContainer,
+					{
+						transform: [{ translateY }],
+						backgroundColor: colors.surfaceRoom,
+						borderColor: colors.strokeLight
+					}
+				]}
+			>
+				<DropdownItemHeader department={currentDepartment} onPress={close} />
+				<List.Separator />
+				<FlatList
+					style={{ maxHeight: MAX_ROWS * ROW_HEIGHT }}
+					data={departments}
+					keyExtractor={item => item._id}
+					renderItem={({ item }) => (
+						<DropdownItemFilter onPress={onDepartmentSelected} currentDepartment={currentDepartment} value={item} />
+					)}
+					keyboardShouldPersistTaps='always'
+				/>
+			</Animated.View>
+		</>
+	);
+};

-export default withTheme(withSafeAreaInsets(Dropdown));
+export default Dropdown;
--- a/app/views/ChangeAvatarView/index.tsx
+++ b/app/views/ChangeAvatarView/index.tsx
@ -138,11 +138,13 @@ const ChangeAvatarView = () => {
 			cropperAvoidEmptySpaceAroundImage: false,
 			cropperChooseText: I18n.t('Choose'),
 			cropperCancelText: I18n.t('Cancel'),
-			includeBase64: true,
-			useFrontCamera: isCam
+			includeBase64: true
 		};
 		try {
-			const response: Image = isCam === true ? await ImagePicker.openCamera(options) : await ImagePicker.openPicker(options);
+			const response: Image =
+				isCam === true
+					? await ImagePicker.openCamera({ ...options, useFrontCamera: true })
+					: await ImagePicker.openPicker(options);
 			dispatchAvatar({
 				type: AvatarStateActions.CHANGE_AVATAR,
 				payload: { url: response.path, data: `data:image/jpeg;base64,${response.data}`, service: 'upload' }
--- a/app/views/DirectoryView/Options.tsx
+++ b/app/views/DirectoryView/Options.tsx
@ -1,14 +1,13 @@
-import React, { PureComponent } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { Animated, Easing, Text, TouchableWithoutFeedback, View } from 'react-native';

 import Touch from '../../containers/Touch';
 import { CustomIcon, TIconsName } from '../../containers/CustomIcon';
 import Check from '../../containers/Check';
 import I18n from '../../i18n';
-import { themes } from '../../lib/constants';
 import styles from './styles';
-import { TSupportedThemes } from '../../theme';
 import Switch from '../../containers/Switch';
+import { useTheme } from '../../theme';

 const ANIMATION_DURATION = 200;
 const ANIMATION_PROPS = {
@ -24,34 +23,34 @@ interface IDirectoryOptionsProps {
 	close: Function;
 	changeType: Function;
 	toggleWorkspace(): void;
-	theme: TSupportedThemes;
 }

-export default class DirectoryOptions extends PureComponent<IDirectoryOptionsProps, any> {
-	private animatedValue: Animated.Value;
+const DirectoryOptions = ({
+	type: propType,
+	globalUsers,
+	isFederationEnabled,
+	close: onClose,
+	changeType,
+	toggleWorkspace
+}: IDirectoryOptionsProps) => {
+	const animatedValue = useRef(new Animated.Value(0)).current;
+	const { colors } = useTheme();

-	constructor(props: IDirectoryOptionsProps) {
-		super(props);
-		this.animatedValue = new Animated.Value(0);
-	}
-
-	componentDidMount() {
-		Animated.timing(this.animatedValue, {
+	useEffect(() => {
+		Animated.timing(animatedValue, {
 			toValue: 1,
 			...ANIMATION_PROPS
 		}).start();
-	}
+	}, [animatedValue]);

-	close = () => {
-		const { close } = this.props;
-		Animated.timing(this.animatedValue, {
+	const close = () => {
+		Animated.timing(animatedValue, {
 			toValue: 0,
 			...ANIMATION_PROPS
-		}).start(() => close());
+		}).start(() => onClose());
 	};

-	renderItem = (itemType: string) => {
-		const { changeType, type: propType, theme } = this.props;
+	const renderItem = (itemType: string) => {
 		let text = 'Users';
 		let icon: TIconsName = 'user';
 		if (itemType === 'channels') {
@ -67,70 +66,61 @@ export default class DirectoryOptions extends PureComponent<IDirectoryOptionsPro
 		return (
 			<Touch onPress={() => changeType(itemType)} style={styles.dropdownItemButton} accessibilityLabel={I18n.t(text)}>
 				<View style={styles.dropdownItemContainer}>
-					<CustomIcon name={icon} size={22} color={themes[theme].fontDefault} style={styles.dropdownItemIcon} />
-					<Text style={[styles.dropdownItemText, { color: themes[theme].fontDefault }]}>{I18n.t(text)}</Text>
+					<CustomIcon name={icon} size={22} color={colors.fontDefault} style={styles.dropdownItemIcon} />
+					<Text style={[styles.dropdownItemText, { color: colors.fontDefault }]}>{I18n.t(text)}</Text>
 					{propType === itemType ? <Check /> : null}
 				</View>
 			</Touch>
 		);
 	};

-	render() {
-		const translateY = this.animatedValue.interpolate({
-			inputRange: [0, 1],
-			outputRange: [-326, 0]
-		});
-		const { globalUsers, toggleWorkspace, isFederationEnabled, theme } = this.props;
-		const backdropOpacity = this.animatedValue.interpolate({
-			inputRange: [0, 1],
-			outputRange: [0, themes[theme].backdropOpacity]
-		});
-		return (
-			<>
-				<TouchableWithoutFeedback onPress={this.close}>
-					<Animated.View style={[styles.backdrop, { backgroundColor: themes[theme].backdropColor, opacity: backdropOpacity }]} />
-				</TouchableWithoutFeedback>
-				<Animated.View
-					style={[styles.dropdownContainer, { transform: [{ translateY }], backgroundColor: themes[theme].surfaceRoom }]}
-				>
-					<Touch onPress={this.close} accessibilityLabel={I18n.t('Search_by')}>
-						<View
-							style={[
-								styles.dropdownContainerHeader,
-								styles.dropdownItemContainer,
-								{ borderColor: themes[theme].strokeLight }
-							]}
-						>
-							<Text style={[styles.dropdownToggleText, { color: themes[theme].fontSecondaryInfo }]}>{I18n.t('Search_by')}</Text>
-							<CustomIcon
-								style={[styles.dropdownItemIcon, styles.inverted]}
-								size={22}
-								name='chevron-down'
-								color={themes[theme].strokeHighlight}
-							/>
-						</View>
-					</Touch>
-					{this.renderItem('channels')}
-					{this.renderItem('users')}
-					{this.renderItem('teams')}
-					{isFederationEnabled ? (
-						<>
-							<View style={[styles.dropdownSeparator, { backgroundColor: themes[theme].strokeLight }]} />
-							<View style={[styles.dropdownItemContainer, styles.globalUsersContainer]}>
-								<View style={styles.globalUsersTextContainer}>
-									<Text style={[styles.dropdownItemText, { color: themes[theme].fontHint }]}>
-										{I18n.t('Search_global_users')}
-									</Text>
-									<Text style={[styles.dropdownItemDescription, { color: themes[theme].fontHint }]}>
-										{I18n.t('Search_global_users_description')}
-									</Text>
-								</View>
-								<Switch value={globalUsers} onValueChange={toggleWorkspace} />
+	const translateY = animatedValue.interpolate({
+		inputRange: [0, 1],
+		outputRange: [-326, 0]
+	});
+
+	const backdropOpacity = animatedValue.interpolate({
+		inputRange: [0, 1],
+		outputRange: [0, colors.backdropOpacity]
+	});
+
+	return (
+		<>
+			<TouchableWithoutFeedback onPress={close}>
+				<Animated.View style={[styles.backdrop, { backgroundColor: colors.backdropColor, opacity: backdropOpacity }]} />
+			</TouchableWithoutFeedback>
+			<Animated.View style={[styles.dropdownContainer, { transform: [{ translateY }], backgroundColor: colors.surfaceRoom }]}>
+				<Touch onPress={close} accessibilityLabel={I18n.t('Search_by')}>
+					<View style={[styles.dropdownContainerHeader, styles.dropdownItemContainer, { borderColor: colors.strokeLight }]}>
+						<Text style={[styles.dropdownToggleText, { color: colors.fontSecondaryInfo }]}>{I18n.t('Search_by')}</Text>
+						<CustomIcon
+							style={[styles.dropdownItemIcon, styles.inverted]}
+							size={22}
+							name='chevron-down'
+							color={colors.strokeHighlight}
+						/>
+					</View>
+				</Touch>
+				{renderItem('channels')}
+				{renderItem('users')}
+				{renderItem('teams')}
+				{isFederationEnabled ? (
+					<>
+						<View style={[styles.dropdownSeparator, { backgroundColor: colors.strokeLight }]} />
+						<View style={[styles.dropdownItemContainer, styles.globalUsersContainer]}>
+							<View style={styles.globalUsersTextContainer}>
+								<Text style={[styles.dropdownItemText, { color: colors.fontHint }]}>{I18n.t('Search_global_users')}</Text>
+								<Text style={[styles.dropdownItemDescription, { color: colors.fontHint }]}>
+									{I18n.t('Search_global_users_description')}
+								</Text>
 							</View>
-						</>
-					) : null}
-				</Animated.View>
-			</>
-		);
-	}
-}
+							<Switch value={globalUsers} onValueChange={toggleWorkspace} />
+						</View>
+					</>
+				) : null}
+			</Animated.View>
+		</>
+	);
+};
+
+export default DirectoryOptions;
--- a/app/views/DirectoryView/index.tsx
+++ b/app/views/DirectoryView/index.tsx
@ -315,7 +315,6 @@ class DirectoryView extends React.Component<IDirectoryViewProps, IDirectoryViewS
 				/>
 				{showOptionsDropdown ? (
 					<Options
-						theme={theme}
 						type={type}
 						globalUsers={globalUsers}
 						close={this.toggleDropdown}
--- a/app/views/RoomsListView/ServerDropdown.tsx
+++ b/app/views/RoomsListView/ServerDropdown.tsx
@ -1,8 +1,8 @@
-import React, { Component } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { View, Text, Animated, Easing, TouchableWithoutFeedback, TouchableOpacity, FlatList, Linking } from 'react-native';
-import { batch, connect } from 'react-redux';
-import { withSafeAreaInsets } from 'react-native-safe-area-context';
+import { batch, useDispatch } from 'react-redux';
 import { Subscription } from 'rxjs';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';

 import * as List from '../../containers/List';
 import Button from '../../containers/Button';
@ -13,82 +13,73 @@ import I18n from '../../i18n';
 import EventEmitter from '../../lib/methods/helpers/events';
 import ServerItem from '../../containers/ServerItem';
 import database from '../../lib/database';
-import { themes, TOKEN_KEY } from '../../lib/constants';
-import { withTheme } from '../../theme';
+import { TOKEN_KEY } from '../../lib/constants';
+import { useTheme } from '../../theme';
 import { localAuthenticate } from '../../lib/methods/helpers/localAuthentication';
 import { showConfirmationAlert } from '../../lib/methods/helpers/info';
 import log, { events, logEvent } from '../../lib/methods/helpers/log';
 import { headerHeight } from '../../lib/methods/helpers/navigation';
 import { goRoom } from '../../lib/methods/helpers/goRoom';
 import UserPreferences from '../../lib/methods/userPreferences';
-import { IApplicationState, IBaseScreen, RootEnum, TServerModel } from '../../definitions';
+import { RootEnum, TServerModel } from '../../definitions';
 import styles from './styles';
-import { ChatsStackParamList } from '../../stacks/types';
 import { removeServer } from '../../lib/methods';
+import { useAppSelector } from '../../lib/hooks';

 const ROW_HEIGHT = 68;
 const ANIMATION_DURATION = 200;
+const MAX_ROWS = 4;

-interface IServerDropdownProps extends IBaseScreen<ChatsStackParamList, 'RoomsListView'> {
-	insets?: {
-		top: number;
-	};
-	closeServerDropdown: boolean;
-	server: string;
-	isMasterDetail: boolean;
-}
+const ServerDropdown = () => {
+	const animatedValue = useRef(new Animated.Value(0)).current;
+	const subscription = useRef<Subscription>();
+	const newServerTimeout = useRef<ReturnType<typeof setTimeout> | false>();
+	const isMounted = useRef(false);
+	const [servers, setServers] = useState<TServerModel[]>([]);
+	const dispatch = useDispatch();
+	const closeServerDropdown = useAppSelector(state => state.rooms.closeServerDropdown);
+	const server = useAppSelector(state => state.server.server);
+	const isMasterDetail = useAppSelector(state => state.app.isMasterDetail);
+	const { colors } = useTheme();
+	const insets = useSafeAreaInsets();

-interface IServerDropdownState {
-	servers: TServerModel[];
-}
+	useEffect(() => {
+		if (isMounted.current) close();
+	}, [closeServerDropdown]);

-class ServerDropdown extends Component<IServerDropdownProps, IServerDropdownState> {
-	private animatedValue: Animated.Value;
-	private subscription?: Subscription;
-	private newServerTimeout?: ReturnType<typeof setTimeout> | false;
+	useEffect(() => {
+		isMounted.current = true;

-	constructor(props: IServerDropdownProps) {
-		super(props);
-		this.state = { servers: [] };
-		this.animatedValue = new Animated.Value(0);
-	}
+		const init = async () => {
+			const serversDB = database.servers;
+			const observable = await serversDB.get('servers').query().observeWithColumns(['name']);

-	async componentDidMount() {
-		const serversDB = database.servers;
-		const observable = await serversDB.get('servers').query().observeWithColumns(['name']);
+			subscription.current = observable.subscribe(data => {
+				setServers(data);
+			});

-		this.subscription = observable.subscribe(data => {
-			this.setState({ servers: data });
-		});
+			Animated.timing(animatedValue, {
+				toValue: 1,
+				duration: ANIMATION_DURATION,
+				easing: Easing.inOut(Easing.quad),
+				useNativeDriver: true
+			}).start();
+		};
+		init();

-		Animated.timing(this.animatedValue, {
-			toValue: 1,
-			duration: ANIMATION_DURATION,
-			easing: Easing.inOut(Easing.quad),
-			useNativeDriver: true
-		}).start();
-	}
+		return () => {
+			if (newServerTimeout.current) {
+				clearTimeout(newServerTimeout.current);
+				newServerTimeout.current = false;
+			}
+			if (subscription.current && subscription.current.unsubscribe) {
+				subscription.current.unsubscribe();
+			}
+		};
+	}, []);

-	componentDidUpdate(prevProps: IServerDropdownProps) {
-		const { closeServerDropdown } = this.props;
-		if (prevProps.closeServerDropdown !== closeServerDropdown) {
-			this.close();
-		}
-	}
-
-	componentWillUnmount() {
-		if (this.newServerTimeout) {
-			clearTimeout(this.newServerTimeout);
-			this.newServerTimeout = false;
-		}
-		if (this.subscription && this.subscription.unsubscribe) {
-			this.subscription.unsubscribe();
-		}
-	}
-
-	close = () => {
-		const { dispatch } = this.props;
-		Animated.timing(this.animatedValue, {
+	const close = () => {
+		Animated.timing(animatedValue, {
 			toValue: 0,
 			duration: ANIMATION_DURATION,
 			easing: Easing.inOut(Easing.quad),
@ -96,7 +87,7 @@ class ServerDropdown extends Component<IServerDropdownProps, IServerDropdownStat
 		}).start(() => dispatch(toggleServerDropdown()));
 	};

-	createWorkspace = async () => {
+	const createWorkspace = async () => {
 		logEvent(events.RL_CREATE_NEW_WORKSPACE);
 		try {
 			await Linking.openURL('https://cloud.rocket.chat/trial');
@ -105,52 +96,49 @@ class ServerDropdown extends Component<IServerDropdownProps, IServerDropdownStat
 		}
 	};

-	navToNewServer = (previousServer: string) => {
-		const { dispatch } = this.props;
+	const navToNewServer = (previousServer: string) => {
 		batch(() => {
 			dispatch(appStart({ root: RootEnum.ROOT_OUTSIDE }));
 			dispatch(serverInitAdd(previousServer));
 		});
 	};

-	addServer = () => {
+	const addServer = () => {
 		logEvent(events.RL_ADD_SERVER);
-		const { server } = this.props;
-		this.close();
+		close();
 		setTimeout(() => {
-			this.navToNewServer(server);
+			navToNewServer(server);
 		}, ANIMATION_DURATION);
 	};

-	select = async (server: string, version?: string) => {
-		const { server: currentServer, dispatch, isMasterDetail } = this.props;
-		this.close();
-		if (currentServer !== server) {
+	const select = async (serverParam: string, version?: string) => {
+		close();
+		if (server !== serverParam) {
 			logEvent(events.RL_CHANGE_SERVER);
-			const userId = UserPreferences.getString(`${TOKEN_KEY}-${server}`);
+			const userId = UserPreferences.getString(`${TOKEN_KEY}-${serverParam}`);
 			if (isMasterDetail) {
 				goRoom({ item: {}, isMasterDetail });
 			}
 			if (!userId) {
 				setTimeout(() => {
-					this.navToNewServer(currentServer);
-					this.newServerTimeout = setTimeout(() => {
-						EventEmitter.emit('NewServer', { server });
+					navToNewServer(server);
+					newServerTimeout.current = setTimeout(() => {
+						EventEmitter.emit('NewServer', { server: serverParam });
 					}, ANIMATION_DURATION);
 				}, ANIMATION_DURATION);
 			} else {
-				await localAuthenticate(server);
-				dispatch(selectServerRequest(server, version, true, true));
+				await localAuthenticate(serverParam);
+				dispatch(selectServerRequest(serverParam, version, true, true));
 			}
 		}
 	};

-	remove = (server: string) =>
+	const remove = (server: string) =>
 		showConfirmationAlert({
 			message: I18n.t('This_will_remove_all_data_from_this_server'),
 			confirmationText: I18n.t('Delete'),
 			onPress: async () => {
-				this.close();
+				close();
 				try {
 					await removeServer({ server });
 				} catch {
@ -159,93 +147,81 @@ class ServerDropdown extends Component<IServerDropdownProps, IServerDropdownStat
 			}
 		});

-	renderServer = ({ item }: { item: { id: string; iconURL: string; name: string; version: string } }) => {
-		const { server } = this.props;
+	const renderItem = ({ item }: { item: { id: string; iconURL: string; name: string; version: string } }) => (
+		<ServerItem
+			item={item}
+			onPress={() => select(item.id, item.version)}
+			onLongPress={() => item.id === server || remove(item.id)}
+			hasCheck={item.id === server}
+		/>
+	);

-		return (
-			<ServerItem
-				item={item}
-				onPress={() => this.select(item.id, item.version)}
-				onLongPress={() => item.id === server || this.remove(item.id)}
-				hasCheck={item.id === server}
-			/>
-		);
-	};
+	const initialTop = 87 + Math.min(servers.length, MAX_ROWS) * ROW_HEIGHT;
+	const statusBarHeight = insets?.top ?? 0;
+	const heightDestination = isMasterDetail ? headerHeight + statusBarHeight : 0;

-	render() {
-		const { servers } = this.state;
-		const { theme, isMasterDetail, insets } = this.props;
-		const maxRows = 4;
-		const initialTop = 87 + Math.min(servers.length, maxRows) * ROW_HEIGHT;
-		const statusBarHeight = insets?.top ?? 0;
-		const heightDestination = isMasterDetail ? headerHeight + statusBarHeight : 0;
-		const translateY = this.animatedValue.interpolate({
-			inputRange: [0, 1],
-			outputRange: [-initialTop, heightDestination]
-		});
-		const backdropOpacity = this.animatedValue.interpolate({
-			inputRange: [0, 1],
-			outputRange: [0, themes[theme].backdropOpacity]
-		});
-		return (
-			<>
-				<TouchableWithoutFeedback onPress={this.close}>
-					<Animated.View
-						style={[
-							styles.backdrop,
-							{
-								backgroundColor: themes[theme].backdropColor,
-								opacity: backdropOpacity,
-								top: heightDestination
-							}
-						]}
-					/>
-				</TouchableWithoutFeedback>
+	const translateY = animatedValue.interpolate({
+		inputRange: [0, 1],
+		outputRange: [-initialTop, heightDestination]
+	});
+
+	const backdropOpacity = animatedValue.interpolate({
+		inputRange: [0, 1],
+		outputRange: [0, colors.backdropOpacity]
+	});
+
+	return (
+		<>
+			<TouchableWithoutFeedback onPress={close}>
 				<Animated.View
 					style={[
-						styles.dropdownContainer,
+						styles.backdrop,
 						{
-							transform: [{ translateY }],
-							backgroundColor: themes[theme].surfaceRoom,
-							borderColor: themes[theme].strokeLight
+							backgroundColor: colors.backdropColor,
+							opacity: backdropOpacity,
+							top: heightDestination
 						}
 					]}
-					testID='rooms-list-header-server-dropdown'
-				>
-					<View style={[styles.dropdownContainerHeader, styles.serverHeader, { borderColor: themes[theme].strokeLight }]}>
-						<Text style={[styles.serverHeaderText, { color: themes[theme].fontSecondaryInfo }]}>{I18n.t('Server')}</Text>
-						<TouchableOpacity onPress={this.addServer} testID='rooms-list-header-server-add'>
-							<Text style={[styles.serverHeaderAdd, { color: themes[theme].badgeBackgroundLevel2 }]}>{I18n.t('Add_Server')}</Text>
-						</TouchableOpacity>
-					</View>
-					<FlatList
-						style={{ maxHeight: maxRows * ROW_HEIGHT }}
-						data={servers}
-						keyExtractor={item => item.id}
-						renderItem={this.renderServer}
-						ItemSeparatorComponent={List.Separator}
-						keyboardShouldPersistTaps='always'
-					/>
-					<List.Separator />
-					<Button
-						title={I18n.t('Create_a_new_workspace')}
-						type='secondary'
-						onPress={this.createWorkspace}
-						testID='rooms-list-header-create-workspace-button'
-						style={styles.buttonCreateWorkspace}
-						color={themes[theme].badgeBackgroundLevel2}
-						styleText={[styles.serverHeaderAdd, { textAlign: 'center' }]}
-					/>
-				</Animated.View>
-			</>
-		);
-	}
-}
+				/>
+			</TouchableWithoutFeedback>
+			<Animated.View
+				style={[
+					styles.dropdownContainer,
+					{
+						transform: [{ translateY }],
+						backgroundColor: colors.surfaceRoom,
+						borderColor: colors.strokeLight
+					}
+				]}
+				testID='rooms-list-header-server-dropdown'
+			>
+				<View style={[styles.dropdownContainerHeader, styles.serverHeader, { borderColor: colors.strokeLight }]}>
+					<Text style={[styles.serverHeaderText, { color: colors.fontSecondaryInfo }]}>{I18n.t('Server')}</Text>
+					<TouchableOpacity onPress={addServer} testID='rooms-list-header-server-add'>
+						<Text style={[styles.serverHeaderAdd, { color: colors.badgeBackgroundLevel2 }]}>{I18n.t('Add_Server')}</Text>
+					</TouchableOpacity>
+				</View>
+				<FlatList
+					style={{ maxHeight: MAX_ROWS * ROW_HEIGHT }}
+					data={servers}
+					keyExtractor={item => item.id}
+					renderItem={renderItem}
+					ItemSeparatorComponent={List.Separator}
+					keyboardShouldPersistTaps='always'
+				/>
+				<List.Separator />
+				<Button
+					title={I18n.t('Create_a_new_workspace')}
+					type='secondary'
+					onPress={createWorkspace}
+					testID='rooms-list-header-create-workspace-button'
+					style={styles.buttonCreateWorkspace}
+					color={colors.badgeBackgroundLevel2}
+					styleText={[styles.serverHeaderAdd, { textAlign: 'center' }]}
+				/>
+			</Animated.View>
+		</>
+	);
+};

-const mapStateToProps = (state: IApplicationState) => ({
-	closeServerDropdown: state.rooms.closeServerDropdown,
-	server: state.server.server,
-	isMasterDetail: state.app.isMasterDetail
-});
-
-export default connect(mapStateToProps)(withSafeAreaInsets(withTheme(ServerDropdown)));
+export default ServerDropdown;
--- a/app/views/RoomsListView/index.tsx
+++ b/app/views/RoomsListView/index.tsx
@ -986,16 +986,14 @@ class RoomsListView extends React.Component<IRoomsListViewProps, IRoomsListViewS

 	render = () => {
 		console.count(`${this.constructor.name}.render calls`);
-		const { showServerDropdown, theme, navigation } = this.props;
+		const { showServerDropdown, theme } = this.props;

 		return (
 			<SafeAreaView testID='rooms-list-view' style={{ backgroundColor: themes[theme].surfaceRoom }}>
 				<StatusBar />
 				{this.renderHeader()}
 				{this.renderScroll()}
-				{/* TODO - this ts-ignore is here because the route props, on IBaseScreen*/}
-				{/* @ts-ignore*/}
-				{showServerDropdown ? <ServerDropdown navigation={navigation} theme={theme} /> : null}
+				{showServerDropdown ? <ServerDropdown /> : null}
 			</SafeAreaView>
 		);
 	};
--- a/app/views/ThreadMessagesView/Dropdown/index.tsx
+++ b/app/views/ThreadMessagesView/Dropdown/index.tsx
@ -1,47 +1,40 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { Animated, Easing, TouchableWithoutFeedback } from 'react-native';
-import { EdgeInsets, withSafeAreaInsets } from 'react-native-safe-area-context';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';

 import styles from '../styles';
-import { themes } from '../../../lib/constants';
-import { TSupportedThemes, withTheme } from '../../../theme';
 import { headerHeight } from '../../../lib/methods/helpers/navigation';
 import * as List from '../../../containers/List';
 import { Filter } from '../filters';
 import DropdownItemFilter from './DropdownItemFilter';
 import DropdownItemHeader from './DropdownItemHeader';
+import { useTheme } from '../../../theme';

 const ANIMATION_DURATION = 200;

 interface IDropdownProps {
 	isMasterDetail?: boolean;
-	theme: TSupportedThemes;
-	insets?: EdgeInsets;
 	currentFilter: Filter;
 	onClose: () => void;
 	onFilterSelected: (value: Filter) => void;
 }

-class Dropdown extends React.Component<IDropdownProps> {
-	private animatedValue: Animated.Value;
+const Dropdown = ({ isMasterDetail, currentFilter, onClose, onFilterSelected }: IDropdownProps) => {
+	const animatedValue = useRef(new Animated.Value(0)).current;
+	const { colors } = useTheme();
+	const insets = useSafeAreaInsets();

-	constructor(props: IDropdownProps) {
-		super(props);
-		this.animatedValue = new Animated.Value(0);
-	}
-
-	componentDidMount() {
-		Animated.timing(this.animatedValue, {
+	useEffect(() => {
+		Animated.timing(animatedValue, {
 			toValue: 1,
 			duration: ANIMATION_DURATION,
 			easing: Easing.inOut(Easing.quad),
 			useNativeDriver: true
 		}).start();
-	}
+	}, [animatedValue]);

-	close = () => {
-		const { onClose } = this.props;
-		Animated.timing(this.animatedValue, {
+	const close = () => {
+		Animated.timing(animatedValue, {
 			toValue: 0,
 			duration: ANIMATION_DURATION,
 			easing: Easing.inOut(Easing.quad),
@ -49,51 +42,52 @@ class Dropdown extends React.Component<IDropdownProps> {
 		}).start(() => onClose());
 	};

-	render() {
-		const { isMasterDetail, insets, theme, currentFilter, onFilterSelected } = this.props;
-		const statusBarHeight = insets?.top ?? 0;
-		const heightDestination = isMasterDetail ? headerHeight + statusBarHeight : 0;
-		const translateY = this.animatedValue.interpolate({
-			inputRange: [0, 1],
-			outputRange: [-300, heightDestination] // approximated height of the component when closed/open
-		});
-		const backdropOpacity = this.animatedValue.interpolate({
-			inputRange: [0, 1],
-			outputRange: [0, themes[theme].backdropOpacity]
-		});
-		return (
-			<>
-				<TouchableWithoutFeedback onPress={this.close}>
-					<Animated.View
-						style={[
-							styles.backdrop,
-							{
-								backgroundColor: themes[theme].backdropColor,
-								opacity: backdropOpacity,
-								top: heightDestination
-							}
-						]}
-					/>
-				</TouchableWithoutFeedback>
+	const heightDestination = isMasterDetail ? headerHeight + insets.top : 0;
+
+	const translateY = animatedValue.interpolate({
+		inputRange: [0, 1],
+		outputRange: [-300, heightDestination] // approximated height of the component when closed/open
+	});
+
+	const backdropOpacity = animatedValue.interpolate({
+		inputRange: [0, 1],
+		outputRange: [0, colors.backdropOpacity]
+	});
+
+	return (
+		<>
+			<TouchableWithoutFeedback onPress={close}>
 				<Animated.View
 					style={[
-						styles.dropdownContainer,
+						styles.backdrop,
 						{
 							transform: [{ translateY }],
-							backgroundColor: themes[theme].surfaceRoom,
-							borderColor: themes[theme].strokeLight
+							backgroundColor: colors.surfaceRoom,
+							borderColor: colors.strokeLight,
+							opacity: backdropOpacity,
+							top: heightDestination
 						}
 					]}
-				>
-					<DropdownItemHeader currentFilter={currentFilter} onPress={this.close} />
-					<List.Separator />
-					<DropdownItemFilter currentFilter={currentFilter} value={Filter.All} onPress={onFilterSelected} />
-					<DropdownItemFilter currentFilter={currentFilter} value={Filter.Following} onPress={onFilterSelected} />
-					<DropdownItemFilter currentFilter={currentFilter} value={Filter.Unread} onPress={onFilterSelected} />
-				</Animated.View>
-			</>
-		);
-	}
-}
+				/>
+			</TouchableWithoutFeedback>
+			<Animated.View
+				style={[
+					styles.dropdownContainer,
+					{
+						transform: [{ translateY }],
+						backgroundColor: colors.surfaceRoom,
+						borderColor: colors.surfaceSelected
+					}
+				]}
+			>
+				<DropdownItemHeader currentFilter={currentFilter} onPress={close} />
+				<List.Separator />
+				<DropdownItemFilter currentFilter={currentFilter} value={Filter.All} onPress={onFilterSelected} />
+				<DropdownItemFilter currentFilter={currentFilter} value={Filter.Following} onPress={onFilterSelected} />
+				<DropdownItemFilter currentFilter={currentFilter} value={Filter.Unread} onPress={onFilterSelected} />
+			</Animated.View>
+		</>
+	);
+};

-export default withTheme(withSafeAreaInsets(Dropdown));
+export default Dropdown;
--- a/app/views/ThreadMessagesView/index.tsx
+++ b/app/views/ThreadMessagesView/index.tsx
@ -516,19 +516,13 @@ class ThreadMessagesView extends React.Component<IThreadMessagesViewProps, IThre
 	render() {
 		console.count(`${this.constructor.name}.render calls`);
 		const { showFilterDropdown, currentFilter } = this.state;
-		const { theme } = this.props;

 		return (
 			<SafeAreaView testID='thread-messages-view'>
 				<StatusBar />
 				{this.renderContent()}
 				{showFilterDropdown ? (
-					<Dropdown
-						currentFilter={currentFilter}
-						onFilterSelected={this.onFilterSelected}
-						onClose={this.closeFilterDropdown}
-						theme={theme}
-					/>
+					<Dropdown currentFilter={currentFilter} onFilterSelected={this.onFilterSelected} onClose={this.closeFilterDropdown} />
 				) : null}
 			</SafeAreaView>
 		);
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@ -534,10 +534,10 @@ PODS:
    - React-Core
  - RNMathView (1.0.0):
    - iosMath
-  - RNNotifee (7.8.0):
+  - RNNotifee (7.8.2):
    - React-Core
-    - RNNotifee/NotifeeCore (= 7.8.0)
-  - RNNotifee/NotifeeCore (7.8.0):
+    - RNNotifee/NotifeeCore (= 7.8.2)
+  - RNNotifee/NotifeeCore (7.8.2):
    - React-Core
  - RNReanimated (2.8.0):
    - DoubleConversion
@ -980,7 +980,7 @@ SPEC CHECKSUMS:
  RNImageCropPicker: 97289cd94fb01ab79db4e5c92938be4d0d63415d
  RNLocalize: 82a569022724d35461e2dc5b5d015a13c3ca995b
  RNMathView: 4c8a3c081fa671ab3136c51fa0bdca7ffb708bd5
-  RNNotifee: f3c01b391dd8e98e67f539f9a35a9cbcd3bae744
+  RNNotifee: 8e2d3df3f0e9ce8f5d1fe4c967431138190b6175
  RNReanimated: 64573e25e078ae6bec03b891586d50b9ec284393
  RNRootView: 895a4813dedeaca82db2fa868ca1c333d790e494
  RNScreens: fa9b582d85ae5d62c91c66003b5278458fed7aaa
--- a/ios/RocketChatRN.xcodeproj/project.pbxproj
+++ b/ios/RocketChatRN.xcodeproj/project.pbxproj
@ -1766,7 +1766,7 @@
 				INFOPLIST_FILE = NotificationService/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 12.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @executable_path/../../Frameworks";
-				MARKETING_VERSION = 4.48.0;
+				MARKETING_VERSION = 4.47.2;
 				MTL_ENABLE_DEBUG_INFO = INCLUDE_SOURCE;
 				MTL_FAST_MATH = YES;
 				OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_DEBUG";
@ -1805,7 +1805,7 @@
 				INFOPLIST_FILE = NotificationService/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 12.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @executable_path/../../Frameworks";
-				MARKETING_VERSION = 4.48.0;
+				MARKETING_VERSION = 4.47.2;
 				MTL_FAST_MATH = YES;
 				OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_RELEASE";
 				PRODUCT_BUNDLE_IDENTIFIER = chat.rocket.reactnative.NotificationService;
--- a/ios/RocketChatRN/Info.plist
+++ b/ios/RocketChatRN/Info.plist
@ -26,7 +26,7 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>4.48.0</string>
+	<string>4.47.2</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleURLTypes</key>
--- a/ios/ShareRocketChatRN/Info.plist
+++ b/ios/ShareRocketChatRN/Info.plist
@ -26,7 +26,7 @@
 	<key>CFBundlePackageType</key>
 	<string>XPC!</string>
 	<key>CFBundleShortVersionString</key>
-	<string>4.48.0</string>
+	<string>4.47.2</string>
 	<key>CFBundleVersion</key>
 	<string>1</string>
 	<key>KeychainGroup</key>
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
 	"name": "rocket-chat-reactnative",
-	"version": "4.48.0",
+	"version": "4.47.2",
 	"private": true,
 	"scripts": {
 		"start": "react-native start",
@ -32,7 +32,7 @@
 		"@codler/react-native-keyboard-aware-scroll-view": "^2.0.1",
 		"@gorhom/bottom-sheet": "^4.3.1",
 		"@hookform/resolvers": "^2.9.10",
-		"@notifee/react-native": "^7.8.0",
+		"@notifee/react-native": "7.8.2",
 		"@nozbe/watermelondb": "0.23.0",
 		"@react-native-async-storage/async-storage": "^1.17.11",
 		"@react-native-camera-roll/camera-roll": "5.6.1",
@ -58,7 +58,7 @@
 		"@rocket.chat/ui-kit": "^0.31.19",
 		"bytebuffer": "^5.0.1",
 		"color2k": "1.2.4",
-		"commonmark": "https://github.com/RocketChat/commonmark.js.git",
+		"commonmark": "git+https://github.com/RocketChat/commonmark.js.git",
 		"commonmark-react-renderer": "git+https://github.com/RocketChat/commonmark-react-renderer.git",
 		"dequal": "^2.0.3",
 		"ejson": "^2.2.3",
--- a/patches/@notifee+react-native+7.8.2.patch
+++ b/patches/@notifee+react-native+7.8.2.patch
@ -18,3 +18,24 @@
         Notifee.REQUEST_CODE_NOTIFICATION_PERMISSION,
         this);
   }
+diff --git a/node_modules/@notifee/react-native/ios/NotifeeCore/NotifeeCore+UNUserNotificationCenter.m b/node_modules/@notifee/react-native/ios/NotifeeCore/NotifeeCore+UNUserNotificationCenter.m
+index cf8020d..3a1e080 100644
+--- a/node_modules/@notifee/react-native/ios/NotifeeCore/NotifeeCore+UNUserNotificationCenter.m
+++ b/node_modules/@notifee/react-native/ios/NotifeeCore/NotifeeCore+UNUserNotificationCenter.m
+@@ -179,11 +179,11 @@ - (void)userNotificationCenter:(UNUserNotificationCenter *)center
+ 
+   _notificationOpenedAppID = notifeeNotification[@"id"];
+ 
+-  // handle notification outside of notifee
+-  if (notifeeNotification == nil) {
+-    notifeeNotification =
+-        [NotifeeCoreUtil parseUNNotificationRequest:response.notification.request];
+-  }
+  // disable notifee handler on ios devices
+  // if (notifeeNotification == nil) {
+  //   notifeeNotification =
+  //       [NotifeeCoreUtil parseUNNotificationRequest:response.notification.request];
+  // }
+ 
+   if (notifeeNotification != nil) {
+     if ([response.actionIdentifier isEqualToString:UNNotificationDismissActionIdentifier]) {
--- a/patches/commonmark+0.29.0.patch
+++ b/patches/commonmark+0.29.0.patch
@ -0,0 +1,13 @@
+diff --git a/node_modules/commonmark/lib/inlines.js b/node_modules/commonmark/lib/inlines.js
+index 4179cfd..478bbd5 100644
+--- a/node_modules/commonmark/lib/inlines.js
+++ b/node_modules/commonmark/lib/inlines.js
+@@ -996,7 +996,7 @@ var parseEmail = function(block) {
+     }
+ }
+ 
+-var reHashtag = XRegExp.cache('^#(\\pL[\\pL\\d\\-_.]*[\\pL\\d])');
+var reHashtag = XRegExp.cache('^#([\\pL\\d\\-_.]*[\\pL\\d])');
+ var parseHashtag = function(block) {
+     if (this.brackets) {
+         // Don't perform autolinking while inside an explicit link
--- a/yarn.lock
+++ b/yarn.lock
@ -3368,9 +3368,9 @@
    regenerator-runtime "^0.13.4"

 "@babel/runtime@^7.21.0":
-  version "7.23.9"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.9.tgz#47791a15e4603bb5f905bc0753801cf21d6345f7"
-  integrity sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==
+  version "7.23.8"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.8.tgz#8ee6fe1ac47add7122902f257b8ddf55c898f650"
+  integrity sha512-Y7KbAP984rn1VGMbGqKmBLio9V7y5Je9GvU4rQPCPinCyNfUcToxIXl06d59URp/F3LwinvODxab5N/G6qggkw==
  dependencies:
    regenerator-runtime "^0.14.0"

@ -5158,10 +5158,10 @@
    "@nodelib/fs.scandir" "2.1.5"
    fastq "^1.6.0"

-"@notifee/react-native@^7.8.0":
-  version "7.8.0"
-  resolved "https://registry.yarnpkg.com/@notifee/react-native/-/react-native-7.8.0.tgz#2990883753990f3585aa0cb5becc5cbdbcd87a43"
-  integrity sha512-sx8h62U4FrR4pqlbN1rkgPsdamDt9Tad0zgfO6VtP6rNJq/78k8nxUnh0xIX3WPDcCV8KAzdYCE7+UNvhF1CpQ==
+"@notifee/react-native@7.8.2":
+  version "7.8.2"
+  resolved "https://registry.yarnpkg.com/@notifee/react-native/-/react-native-7.8.2.tgz#72d3199ae830b4128ddaef3c1c2f11604759c9c4"
+  integrity sha512-VG4IkWJIlOKqXwa3aExC3WFCVCGCC9BA55Ivg0SMRfEs+ruvYy/zlLANcrVGiPtgkUEryXDhA8SXx9+JcO8oLA==

 "@nozbe/simdjson@0.9.6-fix2":
  version "0.9.6-fix2"
@ -8619,6 +8619,7 @@ builtins@^1.0.3:
  resolved "https://registry.yarnpkg.com/builtins/-/builtins-1.0.3.tgz#cb94faeb61c8696451db36534e1422f94f0aee88"
  integrity sha512-uYBjakWipfaO/bXI7E8rq6kpwHRZK5cNYrUv2OzZSI/FvmdMyXJ2tG9dKcjEC5YHmHpUAwsargWIZNWdxb/bnQ==

+
 bunyamin@^1.5.0:
  version "1.5.2"
  resolved "https://registry.yarnpkg.com/bunyamin/-/bunyamin-1.5.2.tgz#681db204c0b16531369d5c1f6c89dc8d760b7558"
@ -9381,15 +9382,15 @@ commondir@^1.0.1:
    pascalcase "^0.1.1"
    xss-filters "^1.2.6"

-"commonmark@https://github.com/RocketChat/commonmark.js.git":
-  version "0.29.4"
-  resolved "https://github.com/RocketChat/commonmark.js.git#7ce50a3b3c30a80a5a5d08a70f7695a29e7398ab"
+"commonmark@git+https://github.com/RocketChat/commonmark.js.git":
+  version "0.29.0"
+  resolved "git+https://github.com/RocketChat/commonmark.js.git#5d293fe9ba83a3e6f842d5d3f41a9b57c35bea1f"
  dependencies:
-    entities "~2.0"
-    mdurl "~1.0.1"
-    minimist ">=1.2.2"
+    entities "~ 1.1.1"
+    mdurl "~ 1.0.1"
+    minimist "~ 1.2.0"
    string.prototype.repeat "^0.2.0"
-    xregexp "^4.3.0"
+    xregexp "4.1.1"

 commons-validator-js@^1.0.237:
  version "1.0.1668"
@ -10581,7 +10582,7 @@ enquirer@^2.3.5, enquirer@^2.3.6:
  dependencies:
    ansi-colors "^4.1.1"

-entities@^1.1.1, entities@^1.1.2:
+entities@^1.1.1, entities@^1.1.2, "entities@~ 1.1.1":
  version "1.1.2"
  resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.2.tgz#bdfa735299664dfafd34529ed4f8522a275fea56"
  integrity sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==
@ -10596,11 +10597,6 @@ entities@^4.2.0:
  resolved "https://registry.yarnpkg.com/entities/-/entities-4.4.0.tgz#97bdaba170339446495e653cfd2db78962900174"
  integrity sha512-oYp7156SP8LkeGD0GF85ad1X9Ai79WtRsZ2gxJqtBuzH+98YUV6jkHEKlZkMbcrjJjIVJNIDP/3WL9wQkoPbWA==

-entities@~2.0:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/entities/-/entities-2.0.3.tgz#5c487e5742ab93c15abb5da22759b8590ec03b7f"
-  integrity sha512-MyoZ0jgnLvB2X3Lg5HqpFmn1kybDiIfEQmKzTb5apr51Rb+T3KdmMiqa70T+bhGnyv7bQ6WMj2QMHpGMmlrUYQ==
-
 env-editor@^0.4.1:
  version "0.4.2"
  resolved "https://registry.yarnpkg.com/env-editor/-/env-editor-0.4.2.tgz#4e76568d0bd8f5c2b6d314a9412c8fe9aa3ae861"
@ -15127,7 +15123,7 @@ mdn-data@2.0.14:
  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
  integrity sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==

-mdurl@^1.0.0, mdurl@~1.0.1:
+mdurl@^1.0.0, "mdurl@~ 1.0.1":
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
  integrity sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=
@ -15664,12 +15660,7 @@ minimatch@^5.0.1:
  dependencies:
    brace-expansion "^2.0.1"

-minimist@>=1.2.2:
-  version "1.2.8"
-  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
-  integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==
-
-minimist@^1.1.1, minimist@^1.2.0, minimist@^1.2.5, minimist@^1.2.6:
+minimist@^1.1.1, minimist@^1.2.0, minimist@^1.2.5, minimist@^1.2.6, "minimist@~ 1.2.0":
  version "1.2.7"
  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.7.tgz#daa1c4d91f507390437c6a8bc01078e7000c4d18"
  integrity sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==
@ -19727,7 +19718,7 @@ string.prototype.padstart@^3.0.0:
 string.prototype.repeat@^0.2.0:
  version "0.2.0"
  resolved "https://registry.yarnpkg.com/string.prototype.repeat/-/string.prototype.repeat-0.2.0.tgz#aba36de08dcee6a5a337d49b2ea1da1b28fc0ecf"
-  integrity sha512-1BH+X+1hSthZFW+X+JaUkjkkUPwIlLEMJBLANN3hOob3RhEk5snLWNECDnYbgn/m5c5JV7Ersu1Yubaf+05cIA==
+  integrity sha1-q6Nt4I3O5qWjN9SbLqHaGyj8Ds8=

 string.prototype.trimend@^1.0.0:
  version "1.0.1"
@ -21607,6 +21598,11 @@ xmldom-sre@0.1.31:
  resolved "https://registry.yarnpkg.com/xmldom-sre/-/xmldom-sre-0.1.31.tgz#10860d5bab2c603144597d04bf2c4980e98067f4"
  integrity sha512-f9s+fUkX04BxQf+7mMWAp5zk61pciie+fFLC9hX9UVvCeJQfNHRHXpeo5MPcR0EUf57PYLdt+ZO4f3Ipk2oZUw==

+xregexp@4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/xregexp/-/xregexp-4.1.1.tgz#eb8a032aa028d403f7b1b22c47a5f16c24b21d8d"
+  integrity sha512-QJ1gfSUV7kEOLfpKFCjBJRnfPErUzkNKFMso4kDSmGpp3x6ZgkyKf74inxI7PnnQCFYq5TqYJCd7DrgDN8Q05A==
+
 xregexp@5.0.2:
  version "5.0.2"
  resolved "https://registry.yarnpkg.com/xregexp/-/xregexp-5.0.2.tgz#798aa7757836f39cdbdeeba3daf94d75f7a9dcc1"
@ -21614,13 +21610,6 @@ xregexp@5.0.2:
  dependencies:
    "@babel/runtime-corejs3" "^7.12.1"

-xregexp@^4.3.0:
-  version "4.4.1"
-  resolved "https://registry.yarnpkg.com/xregexp/-/xregexp-4.4.1.tgz#c84a88fa79e9ab18ca543959712094492185fe65"
-  integrity sha512-2u9HwfadaJaY9zHtRRnH6BY6CQVNQKkYm3oLtC9gJXXzfsbACg5X5e4EZZGVAH+YIfa+QA9lsFQTTe3HURF3ag==
-  dependencies:
-    "@babel/runtime-corejs3" "^7.12.1"
-
 xss-filters@^1.2.6:
  version "1.2.7"
  resolved "https://registry.yarnpkg.com/xss-filters/-/xss-filters-1.2.7.tgz#59fa1de201f36f2f3470dcac5f58ccc2830b0a9a"