Refactor/markdown component split (#20177)

web/app/components/base/markdown/error-boundary.tsx

@@ -0,0 +1,33 @@
+/**
+ * @fileoverview ErrorBoundary component for React.
+ * This component was extracted from the main markdown renderer.
+ * It catches JavaScript errors anywhere in its child component tree,
+ * logs those errors, and displays a fallback UI instead of the crashed component tree.
+ * Primarily used around complex rendering logic like ECharts or SVG within Markdown.
+ */
+import React, { Component } from 'react'
+// **Add an ECharts runtime error handler
+// Avoid error #7832 (Crash when ECharts accesses undefined objects)
+// This can happen when a component attempts to access an undefined object that references an unregistered map, causing the program to crash.
+
+export default class ErrorBoundary extends Component {
+  constructor(props: any) {
+    super(props)
+    this.state = { hasError: false }
+  }
+
+  componentDidCatch(error: any, errorInfo: any) {
+    this.setState({ hasError: true })
+    console.error(error, errorInfo)
+  }
+
+  render() {
+    // eslint-disable-next-line ts/ban-ts-comment
+    // @ts-expect-error
+    if (this.state.hasError)
+      return <div>Oops! An error occurred. This could be due to an ECharts runtime error or invalid SVG content. <br />(see the browser console for more information)</div>
+    // eslint-disable-next-line ts/ban-ts-comment
+    // @ts-expect-error
+    return this.props.children
+  }
+}

web/app/components/base/markdown/index.tsx

@@ -0,0 +1,87 @@
+import ReactMarkdown from 'react-markdown'
+import 'katex/dist/katex.min.css'
+import RemarkMath from 'remark-math'
+import RemarkBreaks from 'remark-breaks'
+import RehypeKatex from 'rehype-katex'
+import RemarkGfm from 'remark-gfm'
+import RehypeRaw from 'rehype-raw'
+import { flow } from 'lodash-es'
+import cn from '@/utils/classnames'
+import { preprocessLaTeX, preprocessThinkTag } from './markdown-utils'
+import {
+  AudioBlock,
+  CodeBlock,
+  Img,
+  Link,
+  MarkdownButton,
+  MarkdownForm,
+  Paragraph,
+  ScriptBlock,
+  ThinkBlock,
+  VideoBlock,
+} from '@/app/components/base/markdown-blocks'
+
+/**
+ * @fileoverview Main Markdown rendering component.
+ * This file was refactored to extract individual block renderers and utility functions
+ * into separate modules for better organization and maintainability as of [Date of refactor].
+ * Further refactoring candidates (custom block components not fitting general categories)
+ * are noted in their respective files if applicable.
+ */
+
+export function Markdown(props: { content: string; className?: string; customDisallowedElements?: string[] }) {
+  const latexContent = flow([
+    preprocessThinkTag,
+    preprocessLaTeX,
+  ])(props.content)
+
+  return (
+    <div className={cn('markdown-body', '!text-text-primary', props.className)}>
+      <ReactMarkdown
+        remarkPlugins={[
+          RemarkGfm,
+          [RemarkMath, { singleDollarTextMath: false }],
+          RemarkBreaks,
+        ]}
+        rehypePlugins={[
+          RehypeKatex,
+          RehypeRaw as any,
+          // The Rehype plug-in is used to remove the ref attribute of an element
+          () => {
+            return (tree: any) => {
+              const iterate = (node: any) => {
+                if (node.type === 'element' && node.properties?.ref)
+                  delete node.properties.ref
+
+                if (node.type === 'element' && !/^[a-z][a-z0-9]*$/i.test(node.tagName)) {
+                  node.type = 'text'
+                  node.value = `<${node.tagName}`
+                }
+
+                if (node.children)
+                  node.children.forEach(iterate)
+              }
+              tree.children.forEach(iterate)
+            }
+          },
+        ]}
+        disallowedElements={['iframe', 'head', 'html', 'meta', 'link', 'style', 'body', ...(props.customDisallowedElements || [])]}
+        components={{
+          code: CodeBlock,
+          img: Img,
+          video: VideoBlock,
+          audio: AudioBlock,
+          a: Link,
+          p: Paragraph,
+          button: MarkdownButton,
+          form: MarkdownForm,
+          script: ScriptBlock as any,
+          details: ThinkBlock,
+        }}
+      >
+        {/* Markdown detect has problem. */}
+        {latexContent}
+      </ReactMarkdown>
+    </div>
+  )
+}

web/app/components/base/markdown/markdown-utils.ts

@@ -0,0 +1,37 @@
+/**
+ * @fileoverview Utility functions for preprocessing Markdown content.
+ * These functions were extracted from the main markdown renderer for better separation of concerns.
+ * Includes preprocessing for LaTeX and custom "think" tags.
+ */
+import { flow } from 'lodash-es'
+
+export const preprocessLaTeX = (content: string) => {
+  if (typeof content !== 'string')
+    return content
+
+  const codeBlockRegex = /```[\s\S]*?```/g
+  const codeBlocks = content.match(codeBlockRegex) || []
+  let processedContent = content.replace(codeBlockRegex, 'CODE_BLOCK_PLACEHOLDER')
+
+  processedContent = flow([
+    (str: string) => str.replace(/\\\[(.*?)\\\]/g, (_, equation) => `$$${equation}$$`),
+    (str: string) => str.replace(/\\\[([\s\S]*?)\\\]/g, (_, equation) => `$$${equation}$$`),
+    (str: string) => str.replace(/\\\((.*?)\\\)/g, (_, equation) => `$$${equation}$$`),
+    (str: string) => str.replace(/(^|[^\\])\$(.+?)\$/g, (_, prefix, equation) => `${prefix}$${equation}$`),
+  ])(processedContent)
+
+  codeBlocks.forEach((block) => {
+    processedContent = processedContent.replace('CODE_BLOCK_PLACEHOLDER', block)
+  })
+
+  return processedContent
+}
+
+export const preprocessThinkTag = (content: string) => {
+  const thinkOpenTagRegex = /<think>\n/g
+  const thinkCloseTagRegex = /\n<\/think>/g
+  return flow([
+    (str: string) => str.replace(thinkOpenTagRegex, '<details data-think=true>\n'),
+    (str: string) => str.replace(thinkCloseTagRegex, '\n[ENDTHINKFLAG]</details>'),
+  ])(content)
+}