From 2dba133d4df683f44e45f719f30121cc5d12b497 Mon Sep 17 00:00:00 2001
From: Stephen Zhou <38493346+hyoban@users.noreply.github.com>
Date: Mon, 2 Mar 2026 11:17:07 +0800
Subject: [PATCH] refactor: move latext preprocess in

---
 web/app/components/base/markdown/index.tsx           |  9 +--------
 web/app/components/base/markdown/markdown-utils.ts   |  7 +++++++
 .../base/markdown/react-markdown-wrapper.spec.tsx    | 12 ++++++------
 .../base/markdown/react-markdown-wrapper.tsx         |  8 +++++---
 4 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/web/app/components/base/markdown/index.tsx b/web/app/components/base/markdown/index.tsx
index 8b6728f246..52173d4eac 100644
--- a/web/app/components/base/markdown/index.tsx
+++ b/web/app/components/base/markdown/index.tsx
@@ -1,9 +1,6 @@
 import type { ReactMarkdownWrapperProps, SimplePluginInfo } from './react-markdown-wrapper'
-import { flow } from 'es-toolkit/compat'
 import dynamic from 'next/dynamic'
 import { cn } from '@/utils/classnames'
-import { preprocessLaTeX, preprocessThinkTag } from './markdown-utils'
-import 'katex/dist/katex.min.css'
 
 const ReactMarkdown = dynamic(() => import('./react-markdown-wrapper').then(mod => mod.ReactMarkdownWrapper), { ssr: false })
 
@@ -22,16 +19,12 @@ export type MarkdownProps = {
 
 export const Markdown = (props: MarkdownProps) => {
   const { customComponents = {}, pluginInfo } = props
-  const latexContent = flow([
-    preprocessThinkTag,
-    preprocessLaTeX,
-  ])(props.content)
 
   return (
     <div className={cn('markdown-body', '!text-text-primary', props.className)}>
       <ReactMarkdown
         pluginInfo={pluginInfo}
-        latexContent={latexContent}
+        content={props.content}
         customComponents={customComponents}
         customDisallowedElements={props.customDisallowedElements}
         rehypePlugins={props.rehypePlugins}
diff --git a/web/app/components/base/markdown/markdown-utils.ts b/web/app/components/base/markdown/markdown-utils.ts
index 94ad31d1de..cb74fa815b 100644
--- a/web/app/components/base/markdown/markdown-utils.ts
+++ b/web/app/components/base/markdown/markdown-utils.ts
@@ -41,6 +41,13 @@ export const preprocessThinkTag = (content: string) => {
   ])(content)
 }
 
+export const preprocessMarkdownContent = (content: string) => {
+  return flow([
+    preprocessThinkTag,
+    preprocessLaTeX,
+  ])(content)
+}
+
 /**
  * Transforms a URI for use in react-markdown, ensuring security and compatibility.
  * This function is designed to work with react-markdown v9+ which has stricter
diff --git a/web/app/components/base/markdown/react-markdown-wrapper.spec.tsx b/web/app/components/base/markdown/react-markdown-wrapper.spec.tsx
index 735222011b..f5dfd6ab1f 100644
--- a/web/app/components/base/markdown/react-markdown-wrapper.spec.tsx
+++ b/web/app/components/base/markdown/react-markdown-wrapper.spec.tsx
@@ -31,7 +31,7 @@ describe('ReactMarkdownWrapper', () => {
       const content = 'Range: 0.3~8mm'
 
       // Act
-      render(<ReactMarkdownWrapper latexContent={content} />)
+      render(<ReactMarkdownWrapper content={content} />)
 
       // Assert - check that ~ is rendered as text, not as strikethrough (del element)
       // The content should contain the tilde as literal text
@@ -44,7 +44,7 @@ describe('ReactMarkdownWrapper', () => {
       const content = 'This is ~~strikethrough~~ text'
 
       // Act
-      render(<ReactMarkdownWrapper latexContent={content} />)
+      render(<ReactMarkdownWrapper content={content} />)
 
       // Assert - del element should be present for double tildes
       const delElement = document.querySelector('del')
@@ -57,7 +57,7 @@ describe('ReactMarkdownWrapper', () => {
       const content = 'PCB thickness: 0.3~8mm and ~~removed feature~~ text'
 
       // Act
-      render(<ReactMarkdownWrapper latexContent={content} />)
+      render(<ReactMarkdownWrapper content={content} />)
 
       // Assert
       // Only double tildes should create strikethrough
@@ -76,7 +76,7 @@ describe('ReactMarkdownWrapper', () => {
       const content = 'Hello World'
 
       // Act
-      render(<ReactMarkdownWrapper latexContent={content} />)
+      render(<ReactMarkdownWrapper content={content} />)
 
       // Assert
       expect(screen.getByText('Hello World')).toBeInTheDocument()
@@ -87,7 +87,7 @@ describe('ReactMarkdownWrapper', () => {
       const content = '**bold text**'
 
       // Act
-      render(<ReactMarkdownWrapper latexContent={content} />)
+      render(<ReactMarkdownWrapper content={content} />)
 
       // Assert
       expect(screen.getByText('bold text')).toBeInTheDocument()
@@ -99,7 +99,7 @@ describe('ReactMarkdownWrapper', () => {
       const content = '*italic text*'
 
       // Act
-      render(<ReactMarkdownWrapper latexContent={content} />)
+      render(<ReactMarkdownWrapper content={content} />)
 
       // Assert
       expect(screen.getByText('italic text')).toBeInTheDocument()
diff --git a/web/app/components/base/markdown/react-markdown-wrapper.tsx b/web/app/components/base/markdown/react-markdown-wrapper.tsx
index a3693a561a..84e53afa64 100644
--- a/web/app/components/base/markdown/react-markdown-wrapper.tsx
+++ b/web/app/components/base/markdown/react-markdown-wrapper.tsx
@@ -8,7 +8,8 @@ import RemarkGfm from 'remark-gfm'
 import RemarkMath from 'remark-math'
 import { AudioBlock, Img, Link, MarkdownButton, MarkdownForm, Paragraph, PluginImg, PluginParagraph, ScriptBlock, ThinkBlock, VideoBlock } from '@/app/components/base/markdown-blocks'
 import { ENABLE_SINGLE_DOLLAR_LATEX } from '@/config'
-import { customUrlTransform } from './markdown-utils'
+import { customUrlTransform, preprocessMarkdownContent } from './markdown-utils'
+import 'katex/dist/katex.min.css'
 
 const CodeBlock = dynamic(() => import('@/app/components/base/markdown-blocks/code-block'), { ssr: false })
 
@@ -18,7 +19,7 @@ export type SimplePluginInfo = {
 }
 
 export type ReactMarkdownWrapperProps = {
-  latexContent: any
+  content: string
   customDisallowedElements?: string[]
   customComponents?: Record<string, React.ComponentType<any>>
   pluginInfo?: SimplePluginInfo
@@ -26,7 +27,8 @@ export type ReactMarkdownWrapperProps = {
 }
 
 export const ReactMarkdownWrapper: FC<ReactMarkdownWrapperProps> = (props) => {
-  const { customComponents, latexContent, pluginInfo } = props
+  const { customComponents, pluginInfo, content } = props
+  const latexContent = preprocessMarkdownContent(content)
 
   return (
     <ReactMarkdown