mirror of
https://github.com/coaidev/coai.git
synced 2025-05-19 13:00:14 +09:00
Update Markdown.tsx
### 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.
This commit is contained in:
parent
ec48ae9a51
commit
7a57d86894
@ -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;
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user