From cc82f5b29de39541c6257285ca6249f28e3fff9e Mon Sep 17 00:00:00 2001
From: "Tindo N. Arsel" <devtnga@gmail.com>
Date: Fri, 7 Apr 2023 14:13:46 +0100
Subject: [PATCH] fix math-katex rendering (#194)

* fix math-katex rendering

* enable singleDollarTextMath option with remarkMath

* dynamic import katex.css and add yarn.lock

---------

Co-authored-by: Jing Hua <tohjinghua123@gmail.com>
---
 package.json                                               | 1 +
 src/components/Chat/ChatContent/Message/MessageContent.tsx | 2 +-
 src/main.tsx                                               | 1 +
 yarn.lock                                                  | 7 +++++++
 4 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 60b371e..f634976 100644
--- a/package.json
+++ b/package.json
@@ -49,6 +49,7 @@
     "i18next-browser-languagedetector": "^7.0.1",
     "i18next-http-backend": "^2.1.1",
     "jspdf": "^2.5.1",
+    "katex": "^0.16.4",
     "lodash": "^4.17.21",
     "match-sorter": "^6.3.1",
     "papaparse": "^5.4.1",
diff --git a/src/components/Chat/ChatContent/Message/MessageContent.tsx b/src/components/Chat/ChatContent/Message/MessageContent.tsx
index 6f2d207..e2888ff 100644
--- a/src/components/Chat/ChatContent/Message/MessageContent.tsx
+++ b/src/components/Chat/ChatContent/Message/MessageContent.tsx
@@ -141,7 +141,7 @@ const ContentView = React.memo(
               [remarkMath, { singleDollarTextMath: false }],
             ]}
             rehypePlugins={[
-              [rehypeKatex, { output: 'mathml' }],
+              rehypeKatex,
               [
                 rehypeHighlight,
                 {
diff --git a/src/main.tsx b/src/main.tsx
index 3ae446f..2de2b8a 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
 import './main.css';
+await import('katex/dist/katex.min.css');
 
 import './i18n';
 
diff --git a/yarn.lock b/yarn.lock
index 2fd5492..fb1842f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2314,6 +2314,13 @@ katex@^0.15.0:
   dependencies:
     commander "^8.0.0"
 
+katex@^0.16.4:
+  version "0.16.4"
+  resolved "https://registry.yarnpkg.com/katex/-/katex-0.16.4.tgz#87021bc3bbd80586ef715aeb476794cba6a49ad4"
+  integrity sha512-WudRKUj8yyBeVDI4aYMNxhx5Vhh2PjpzQw1GRu/LVGqL4m1AxwD1GcUp0IMbdJaf5zsjtj8ghP0DOQRYhroNkw==
+  dependencies:
+    commander "^8.0.0"
+
 keyv@^4.0.0:
   version "4.5.2"
   resolved "https://registry.yarnpkg.com/keyv/-/keyv-4.5.2.tgz#0e310ce73bf7851ec702f2eaf46ec4e3805cce56"