fix: katex breaking the app (#6710)

* fix: katex breaking the app

* feat: katex storybook

* fix: unit test

* chore: changed fork link

* fix: yarn.lock

Author: OtavioStasiak

app/containers/message/Message.stories.tsx

@@ -2031,3 +2031,42 @@ const attachmentWithTextAndLink = [
 export const AttachmentWithTextAndLink = () => <Message attachments={attachmentWithTextAndLink} />;
 
 export const AttachmentWithTextAndLinkLargeFont = () => <MessageLargeFont attachments={attachmentWithTextAndLink} />;
+const katex = {
+	msg: '\\[ \\color{black} \\colorbox{white}{ \\boxed{ \\begin{matrix} \\;\\;\\;\\; \\overlinesegment {\\underlinesegment{ \\Huge Test\\; Test \\; in \\; Test} } & \\\\ \\;\\;\\textit{develop}\\end{matrix} } }\\]',
+	md: [
+		{
+			type: 'KATEX',
+			value:
+				' \\color{black} \\colorbox{white}{ \\boxed{ \\begin{matrix} \\;\\;\\;\\; \\overlinesegment {\\underlinesegment{ \\Huge Test\\; Test \\; in \\; Test} } & \\\\ \\;\\;\\textit{develop}\\end{matrix} } }'
+		}
+	]
+};
+
+export const Katex = () => (
+	<>
+		<Message {...katex} />
+	</>
+);
+export const KatexLargeFont = () => <MessageLargeFont {...katex} />;
+
+const inlineKatex = {
+	msg: '\\(xˆ2 + yˆ2 - zˆ2\\)',
+	md: [
+		{
+			type: 'PARAGRAPH',
+			value: [
+				{
+					type: 'INLINE_KATEX',
+					value: 'xˆ2 + yˆ2 - zˆ2'
+				}
+			]
+		}
+	]
+};
+
+export const InlineKatex = () => (
+	<>
+		<Message {...inlineKatex} />
+	</>
+);
+export const InlineKatexLargeFont = () => <MessageLargeFont {...inlineKatex} />;