fix(web): disable single tilde strikethrough in markdown rendering (#31400)

Signed-off-by: majiayu000 <1835304752@qq.com>

web/app/components/base/markdown/react-markdown-wrapper.spec.tsx

@@ -0,0 +1,109 @@
+import type { PropsWithChildren, ReactNode } from 'react'
+import { render, screen } from '@testing-library/react'
+import { ReactMarkdownWrapper } from './react-markdown-wrapper'
+
+vi.mock('@/app/components/base/markdown-blocks', () => ({
+  AudioBlock: ({ children }: PropsWithChildren) => <div data-testid="audio-block">{children}</div>,
+  Img: ({ alt }: { alt?: string }) => <span data-testid="img">{alt}</span>,
+  Link: ({ children, href }: { children?: ReactNode, href?: string }) => <a href={href}>{children}</a>,
+  MarkdownButton: ({ children }: PropsWithChildren) => <button>{children}</button>,
+  MarkdownForm: ({ children }: PropsWithChildren) => <form>{children}</form>,
+  Paragraph: ({ children }: PropsWithChildren) => <p>{children}</p>,
+  PluginImg: ({ alt }: { alt?: string }) => <span data-testid="plugin-img">{alt}</span>,
+  PluginParagraph: ({ children }: PropsWithChildren) => <p>{children}</p>,
+  ScriptBlock: () => null,
+  ThinkBlock: ({ children }: PropsWithChildren) => <details>{children}</details>,
+  VideoBlock: ({ children }: PropsWithChildren) => <div data-testid="video-block">{children}</div>,
+}))
+
+vi.mock('@/app/components/base/markdown-blocks/code-block', () => ({
+  default: ({ children }: PropsWithChildren) => <code>{children}</code>,
+}))
+
+describe('ReactMarkdownWrapper', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('Strikethrough rendering', () => {
+    it('should NOT render single tilde as strikethrough', () => {
+      // Arrange - single tilde should be rendered as literal text
+      const content = 'Range: 0.3~8mm'
+
+      // Act
+      render(<ReactMarkdownWrapper latexContent={content} />)
+
+      // Assert - check that ~ is rendered as text, not as strikethrough (del element)
+      // The content should contain the tilde as literal text
+      expect(screen.getByText(/0\.3~8mm/)).toBeInTheDocument()
+      expect(document.querySelector('del')).toBeNull()
+    })
+
+    it('should render double tildes as strikethrough', () => {
+      // Arrange - double tildes should create strikethrough
+      const content = 'This is ~~strikethrough~~ text'
+
+      // Act
+      render(<ReactMarkdownWrapper latexContent={content} />)
+
+      // Assert - del element should be present for double tildes
+      const delElement = document.querySelector('del')
+      expect(delElement).not.toBeNull()
+      expect(delElement?.textContent).toBe('strikethrough')
+    })
+
+    it('should handle mixed content with single and double tildes correctly', () => {
+      // Arrange - real-world example from issue #31391
+      const content = 'PCB thickness: 0.3~8mm and ~~removed feature~~ text'
+
+      // Act
+      render(<ReactMarkdownWrapper latexContent={content} />)
+
+      // Assert
+      // Only double tildes should create strikethrough
+      const delElements = document.querySelectorAll('del')
+      expect(delElements).toHaveLength(1)
+      expect(delElements[0].textContent).toBe('removed feature')
+
+      // Single tilde should remain as literal text
+      expect(screen.getByText(/0\.3~8mm/)).toBeInTheDocument()
+    })
+  })
+
+  describe('Basic rendering', () => {
+    it('should render plain text content', () => {
+      // Arrange
+      const content = 'Hello World'
+
+      // Act
+      render(<ReactMarkdownWrapper latexContent={content} />)
+
+      // Assert
+      expect(screen.getByText('Hello World')).toBeInTheDocument()
+    })
+
+    it('should render bold text', () => {
+      // Arrange
+      const content = '**bold text**'
+
+      // Act
+      render(<ReactMarkdownWrapper latexContent={content} />)
+
+      // Assert
+      expect(screen.getByText('bold text')).toBeInTheDocument()
+      expect(document.querySelector('strong')).not.toBeNull()
+    })
+
+    it('should render italic text', () => {
+      // Arrange
+      const content = '*italic text*'
+
+      // Act
+      render(<ReactMarkdownWrapper latexContent={content} />)
+
+      // Assert
+      expect(screen.getByText('italic text')).toBeInTheDocument()
+      expect(document.querySelector('em')).not.toBeNull()
+    })
+  })
+})

web/app/components/base/markdown/react-markdown-wrapper.tsx

@@ -30,7 +30,7 @@ export const ReactMarkdownWrapper: FC<ReactMarkdownWrapperProps> = (props) => {
   return (
     <ReactMarkdown
       remarkPlugins={[
-        RemarkGfm,
+        [RemarkGfm, { singleTilde: false }],
         [RemarkMath, { singleDollarTextMath: ENABLE_SINGLE_DOLLAR_LATEX }],
         RemarkBreaks,
       ]}