fix: katex array breaking the app (#6963)

* fix: collapsible attachment with text duplicating the content

* fix: ktex breaking the app

* fix: snapshot test

* chore: format code and fix lint issues [skip ci]

* cleanup

* cleanup

* cleanup

* chore: format code and fix lint issues [skip ci]

---------

Co-authored-by: OtavioStasiak <OtavioStasiak@users.noreply.github.com>
Co-authored-by: Rohit Bansal <40559587+Rohit3523@users.noreply.github.com>

Author: OtavioStasiak

app/containers/markdown/components/Katex.tsx

@@ -13,15 +13,34 @@ interface IKaTeXProps {
 	value: KaTeXProps['value'];
 }
 
+const BLOCK_ENV_PATTERN = /\\begin\s*\{\s*(array|matrix|pmatrix|bmatrix|Bmatrix|vmatrix|Vmatrix)\s*\}/;
+
 export const KaTeX = ({ value }: IKaTeXProps): React.ReactElement | null => {
 	const { colors } = useTheme();
 	const fixAndroidWebviewCrashStyle: StyleProp<ViewStyle> = isAndroid ? { opacity: 0.99, overflow: 'hidden' } : {};
+	// KaTeX array does not render correctly in MathView (shows gray box).
+	// MathView does not throw, so renderError is never triggered.
+	if (BLOCK_ENV_PATTERN.test(value)) {
+		return (
+			<Katex
+				expression={value}
+				displayMode={true}
+				style={[{ flex: 1, height: DEFAULT_MESSAGE_HEIGHT }, fixAndroidWebviewCrashStyle]}
+			/>
+		);
+	}
+
 	return (
 		<MathView
 			math={value}
+			config={{ inline: false }}
 			style={{ color: colors.fontDefault }}
 			renderError={() => (
-				<Katex expression={value} style={[{ flex: 1, height: DEFAULT_MESSAGE_HEIGHT }, fixAndroidWebviewCrashStyle]} />
+				<Katex
+					expression={value}
+					displayMode={true}
+					style={[{ flex: 1, height: DEFAULT_MESSAGE_HEIGHT }, fixAndroidWebviewCrashStyle]}
+				/>
 			)}
 		/>
 	);

app/containers/message/Message.stories.tsx

@@ -2238,6 +2238,25 @@ export const Katex = () => (
 );
 export const KatexLargeFont = () => <MessageLargeFont {...katex} />;
 
+const katexArray = {
+	msg: '\\begin{array}{|c|c|c|c|c|c|} \\hline \\text{...} & \\text{...} \\\\ \\hline \\end{array}',
+	md: [
+		{
+			type: 'KATEX',
+			value:
+				' \\begin{array}{|c|c|c|c|c|c|} \\hline \\text{testing} & \\text{testingII} & \\text{testing III} & \\text{testing IV} & \\text{testV} & \\text{testVI} \\\\ \\hline \\text{TEST} & \\text{TEST} & \\text{TEST} & \\text{TEST} & \\text{TEST} & \\text{TEST} \\\\ \\hline\\text{TEST} & \\text{✅} & \\text{test} & \\text{test} & \\text{test} & \\text{✅} \\\\ \\hline \\end{array} '
+		}
+	]
+};
+
+export const KatexArray = () => (
+	<>
+		<Message {...katexArray} />
+	</>
+);
+
+export const KatexArrayLargeFont = () => <MessageLargeFont {...katexArray} />;
+
 const inlineKatex = {
 	msg: '\\(xˆ2 + yˆ2 - zˆ2\\)',
 	md: [