From 7a57d86894688570edf4ee84e19b86d1d313268c Mon Sep 17 00:00:00 2001
From: Hobo12 <daguanglu37@hotmail.com>
Date: Tue, 18 Feb 2025 10:23:39 +0800
Subject: [PATCH] Update Markdown.tsx
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

###  Add Math Preprocessing for Markdown Component

#### Summary
This PR introduces preprocessing for math expressions within the Markdown component. The component now transforms inline math (e.g., `\(...\)`) to use the `$ ... $` format and block math (e.g., `\[...\]`) to use the `$$ ... $$` format. This enhancement helps in standardizing the math syntax before it’s processed by the Markdown renderer.

#### Changes
- **Enhanced Markdown Component:**
  - Added a `useMemo` hook in the `Markdown` function to preprocess the `children` content.
  - **Inline Math:** Replaces `\(...\)` with `$ ... $`.
  - **Block Math:** Replaces `\[...\]` with `\n$$\n ... \n$$\n`, ensuring that block math expressions are placed on separate lines.
- **Refactoring:**
  - The processed content is then passed to the existing `MarkdownContent` component, preserving all existing functionalities like code highlighting, link rendering, and file block handling.

#### Rationale
Previously, the Markdown component did not handle the conversion of LaTeX-style math delimiters, which could lead to inconsistent rendering of math expressions. By preprocessing the content, we ensure a more robust and flexible handling of both inline and block math expressions.

#### Possible Drawbacks
- **Non-Mathematical Content Interference:**
  The preprocessing approach targets `\(...\)` and `\[...\]` delimiters universally. This means that any non-mathematical content using these delimiters for other purposes might be unintentionally transformed, potentially leading to unexpected formatting issues.

#### How to Test
1. **Inline Math:**
   - Input: `This is inline math: \(a^2 + b^2 = c^2\)`
   - Expected Transformation: `This is inline math: $ a^2 + b^2 = c^2 $`
2. **Block Math:**
   - Input: `Here is block math: \[ \int_0^\infty e^{-x} dx \]`
   - Expected Transformation:
     ```
     Here is block math:
     $$
     \int_0^\infty e^{-x} dx
     $$
     ```
3. **Non-Mathematical Content:**
   - Ensure that content not intended as math that might incidentally use these delimiters is reviewed to avoid unexpected changes.
4. **Overall Rendering:**
   - Verify that the Markdown renders as expected with both math expressions and other markdown elements (e.g., code blocks, links).

#### Additional Notes
- The changes maintain backwards compatibility. If there are no math delimiters present, the content remains unaffected.
- The updated component still supports HTML rendering based on the `acceptHtml` prop.
- No changes were made to the auxiliary components (`Label`, `Link`, `Code`), ensuring that the overall markdown styling and functionalities remain consistent.
---
 app/src/components/Markdown.tsx | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/app/src/components/Markdown.tsx b/app/src/components/Markdown.tsx
index 037de3d..d3f0ee8 100644
--- a/app/src/components/Markdown.tsx
+++ b/app/src/components/Markdown.tsx
@@ -68,21 +68,34 @@ function Markdown({
   className,
   loading,
 }: MarkdownProps) {
-  // memoize the component
+  const processedContent = useMemo(() => {
+    let content = children;
+    
+    // Inline math: replace \(...\) with $ ... $
+    content = content.replace(/\\\((.*?)\\\)/g, (_, equation) => `$ ${equation.trim()} $`);
+    
+    // Block math: replace \[...\] with $$...$$ on separate lines
+    content = content.replace(
+      /\s*\\\[\s*([\s\S]*?)\s*\\\]\s*/g,
+      (_, equation) => `\n$$\n${equation.trim()}\n$$\n`
+    );
+    
+    return content;
+  }, [children]);
+
   return useMemo(
     () => (
       <MarkdownContent
-        children={children}
+        children={processedContent}
         acceptHtml={acceptHtml}
         codeStyle={codeStyle}
         className={className}
         loading={loading}
       />
     ),
-    [children, acceptHtml, codeStyle, className, loading],
+    [processedContent, acceptHtml, codeStyle, className, loading],
   );
 }
-
 type CodeMarkdownProps = MarkdownProps & {
   filename: string;
 };